webサイトトップページのメインビジュアル。2つの方向性。
たぐと申します。
Web制作会社でプロデューサーをしています。
プロデューサーをする前はwebディレクターとして数々のwebサイト設計に携わり、プロデューサーとなった今でも、webディレクターにアドバイスなどしながら引き続きサイト設計に関与を続けています。
今回は、webサイトのトップページのファーストビューに鎮座するメインビジュアル部分について、自分なりの考えを整理しておこうと思います。
呼び方が安定しない「トップページのメインビジュアル」。
今回話をするのは「トップページのファーストビューに鎮座するメインビジュアル部分」です。
ここって、これという確定した呼称がないですよね。
- メインビジュアル
- キービジュアル
- ヒーローエリア
- メインバナー
- トップページのスライドバナー
とかって呼ばれます。うーむ。多すぎ。
こういうの規格を誰かが決めて欲しいですよね。
W3Cとかやってくんないかな。
World Wide Web Consortium (W3C)
日本の団体じゃないから難しそうだけど。
制作側もクライアント側も好き勝手呼んでいるので困ったものです。
ここでは混乱を避けるため一旦「メインビジュアル」という呼び方で統一することにします。
大きく2つのパターン「メッセージ」か「更新性」か。
このメインビジュアルの扱い、以下の2つに大別されます。
- メッセージ重視パターン
- 更新性重視パターン
これは、対象のwebサイトが「何を目的に」「誰に対して」作られたものかを踏まえることが前提です。
メッセージ重視パターン、更新性重視パターンそれぞれについて、メリット、デメリット、特徴的なことを、整理しておきます。
1. メッセージ重視パターン
メッセージ重視パターンは
- コーポレートサイト
- ブランドサイト
- 採用サイト
などで使われることが多いです。
この場合、概ねメインビジュアル部は１枚の画像で固定された状態になることが多いです。
その他表現パターンとしては
- メッセージが大きく表示され、背景に画像。
- メッセージが大きく表示され、背景の画像が時間で切り替わる。
- メッセージが大きく表示され、背景の動画が再生されている。
といったものです。
背景が動画の場合、社内ブレスト風景や人を中心にした訴求パターンが多いように感じます。
見た目の劣化が起こりにくい。
メッセージ重視パターンの一番のメリットは、さほど更新が入らないことで、運用のなかで「劣化しづらいこと」が挙げられます。
クライアント側で更新されること前提で制作していませんから当然です。
不必要な演出で重くなっているケースも。
かっこよさ優先で意味のない演出ゴリゴリのページや、重そうな動画がベタっと貼られたサイトを見ることがあります。
しかし、webページの表示スピードには気を使うべきです。
演出で重くなりSEOペナルティを食らうとか恥ずかしいです・・・。
あとかっこいい演出も良いですが、大体１回見たら飽きます。
ユーザーは課題を解決するためにwebサイトに訪問してくれています。
その演出が、その課題解決の助けになっているか、という視点で考えましょう。
ちなみに、このメインビジュアルはリンク出来るようにすべきです。
経験上、あまりクリック数は見込めませんが、ここをクリックすると、このページにリンクするよ、という補足テキストは入れておいたほうが良いです。
更新感が出ない。
デメリットは、更新感が出ないことです。
先にお伝えの通り、一度作ったらそれきり、サイトリニューアルから3年間ずっと同じイメージ、ということもザラです。
毎月コロコロ変える必要はないですが、例えば季節感を出すとか、トレンドにあわせてメッセージを変える等、運用の中で検討しても良いと思います。
企業メッセージはターゲットユーザーに響くものを。
構成要素としては概ね以下のようなものです。
- 企業からのブランドメッセージ
- 企業のイメージを訴求する写真や動画
ブランドメッセージについては、見栄えのする英語のフレーズであることが多いですが少し違和感があるので軽く噛み付いておきます。
英語のメッセージを見て、日本人がその意味を明確にわかるものならまだよいです。
ただ、意味不明なただ、かっこいいだけの英語フレーズを使うのは反対です。
トップページの大きな領域で、ターゲットユーザーさんが最初に見るかもしれない場所です。そこで、意味不明な英語に迎えられるのはそんなに気持ち良いものではありません。
繰り返しになりますが、「このサイトで解決できることは何か？」
そこを明確に打ち出してあげるべきだと考えます。
また、画像については、可能ならストックフォトサービスではなく、独自に撮影したものを使いたいですね。
ストックフォトの写真だと、他社と差別化されにくいです・企業やサービスの特長や魅力を最大限訴求するためには何が最適か？という視点で選定することが必要です。
2. 更新性重視パターン
- サービスサイト
- メディアサイト
- ECサイト
などはこのパターンが多いです。
表現パターンとしては、最新のサービスや製品など今見せたい情報を、画像にし、それを左右にスライドさせて見てもらうようなパターンです。
ユーザー側の操作でスライドを送れ、時間で自動で切り替わるのが一般的です。切り替わるまでの時間を視覚的に見せてくれる親切なサイトもありますね。
更新情報を伝えやすい。
このパターンの一番のメリットは更新情報を伝えやすいことです。
最新情報、イベント情報、最新の製品、イチオシのサービス。
企業側の優先度にあわせて情報訴求をすることができます。
認知されていない企業でやるのはおすすめできない。
このパターンを使うのは、十分一般に認知が広がっている企業であれば問題ないです。逆に認知されていない企業がこれをやると、サイトを訪問したユーザーにしたら「そもそもおたくどなた？」となります。
自己紹介なく「わたしねー。」って会話が始まるようなものです。
認知されていない企業にとってトップページは自己紹介の場でもあります。
個人的には、認知が十分ではない会社は、それを訴求できるメッセージがまずあるべきかな、と思います。
1枚目の画像しか見てもらえない。
複数の情報をスライドバナーで配置するのが一般的。
ただ、ユーザーは、下にスクロールする。
横のスライドは、そこに必然の連続性がないとスライドを送ってくれません。
訴求内容にもよりますが、メインビジュアル部分のクリック率を計測すると恐ろしいほど低いことがあります。
なので、基本１枚目しか見てもらえないくらいの割り切りが必要だと思われます。
更新・運用体制があることが前提。
この場合、このメインビジュアル画像は「CMS（コンテンツ管理システム）」による更新ができるようになっているはずです。
通常クライアント側で更新できることはメリットではありますが、そのためには、クライアント側でここのビジュアルイメージをきちんと作成できることが前提です。
画像作成ツールも触ったことがない方が更新すると・・・
とたんに目もあてらないほどかっこ悪いページに成り下がります。
もちろん、かっこいい＝正義というわけではありません。
コンテンツが最も大事だと思うので。
ただ、コーポレートサイトやブランドサイトなど、イメージ訴求もそれなりに大事なケースはあります。
webサイトのオーナーである企業がトップページのメインビジュアルデザインする場合、企業内にインハウスのデザイナーがいる、もしくは、更新専門の運用会社と連携を取っている、といったことが前提です。
それが難しい場合は、せめて、メインビジュアル画像のテンプレートフォーマットとデザインガイドラインを制作会社に作ってもらい、それを守る、といった運用準備が必要になります。
まとめ
今回は、トップページのファーストビューのメインビジュアルの考え方について、大きく二通りの考え方がある、という話をしました。
この二つの方向性は一長一短です。
いずれか一方ということではなく、ミックスするパターンもありますが、そこは、該当のサイトが「何を」「どの程度の頻度で」伝えるべきサイトなのか、といったことを考慮して決められるべきです。
作ったはいいが、「結局運用できなかった。」「何を掲出したらいいかわからない」といったことにならないよう計画を立てて設計するようにしましょう。
