ファーストビューとは?その重要性と高さ・デザインのポイントについて解説

SEO対策実例・コラム
2018.07.31
2018.09.04

ファーストビューは、ユーザがWebサイトに訪れた時に最初に目に入る部分のことを言います。今回はこのファーストビューとは何か?、ファーストビューの重要性や高さ、ファーストビューのデザインのポイントなど、ファーストビューについてご紹介します。。


ファーストビューとは

ファーストビューとは、ユーザがWebサイトに訪れた時に最初に目に入る部分のことを言います。ファーストビューはWebページをスクロールせずに表示された部分のみが対象となり、大きなモニターを使っている場合は、ファーストビューは広くなり、逆にスマホなど小さなモニターでは狭くなります。

ファーストビューの重要性

ファーストビューの目的は続きを「読ませること」です。続きを読ませないと、ユーザはすぐに離脱したり、本来の目的のページ(お問い合わせや申し込みページなど)にたどり着かなくなります。

そのため、このファーストビューでは、キャッチコピーやビジュアル、場合によっては権威付け(○○監修、○○おすすめ)などでユーザを惹きつける必要があります。 Webサイトはトップページ、下層ページ問わずどこからでも流入する可能性がありますので、特定のページだけではなくすべてのページにおいて、ユーザの離脱を軽減するための対策を行う必要があります。

ファーストビューの高さ

ファーストビューの高さはどのくらいにすれば良いのでしょうか?参考になる指標として、「Startconter Global Status http://gs.statcounter.com/」があります。ここではPCやスマホにおける最適なファーストビューの高さについて見ていきます。

PCサイトにおける最適なファーストビューの高さ

2018年7月のデータですが、日本で使われているPCのモニターサイズは、1920×1080が26.46%、1366×768が15.15%とこの2サイズが4割ほど占めています。なお、iPadなどのタブレット端末でのモニタサイズは768×1024が7割以上占めています。 実際にブラウザでサイトを見る時は、画面いっぱいにしてみる人がすべてではないので、これよりも小さくなります。主なウェブサイトのサイズは700px~1600pxまでありますが、その多くは、横幅が1000px程度となっています。縦幅は上記の日本で主流のモニターサイズを考慮すると550pxが最適といえます。そのため、PCサイトにおける最適なファーストビューの高さは550px×1000pxと言えるでしょう。

ディスプレイの解像度(2018年7月)

なお、アナリティクスを入れている場合、ユーザの「ブラウザとOS」でユーザのパソコン環境がわかりますので、 自社サイトがどんなブラウザでどのようなPC環境でアクセスしてきているのか参考にすると良いです。

アナリティクスにおける「ブラウザとOS」画面

スマホサイトにおける最適なファーストビューの高さ

なおスマホですが、これも機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となっており、スマホで最適なファーストビューのサイズは320px×460pxと言えます。なお、スマホは、従来のディスプレイでの1ドットの中に縦と横半分のドットが4つ入っており、これを1pxとしています。そのため、従来のディスプレイドットサイズで画像を制作すると画像が粗くなってしまいます。そのため、スマホで画像を制作する場合は、2倍サイズにします。つまり640px×920pxで製作すると良いです。

ファーストビューの要素とデザインのポイント

ファーストビューで入れるべき要素は以下の3つです。これ以外を含めてしまうと、逆に何を訴求したいのか分からなくなりますので、できるだけこの3つ以外はファーストビューには入れないようにしましょう。

  • 1.キャッチコピー
  • 2.ナビゲーション
  • 3.メインビジュアル
  • それでは、ファーストビューのデザインのポイントを見ていきます。

    要素を明確にし方向性を決める

     これは当たり前のことではありますが、ファーストビューで伝える要素を明確にします。具体的には、「ターゲットは誰なのか」、「メッセージは何か」、「ユーザーが求めているもの」を明確にし、どのようなデザインにするか方向性を決めましょう。

    キャッチコピーのデザインのポイント

    ユーザがWebページに訪れた時に目にひくのはメインビジュアルと大きく書かれたキャッチコピーでしょう。キャッチコピーのデザインのポイントは以下の3つです。

  • 1.読者にターゲットは自分であると認識させる
  • 2.検索キーワードを入れる
  • 3.検索してきたユーザがどのようになるのかベネフィットを入れる
  • キャッチコピーに上記の3つを入れることによって、検索してきたユーザがこのサイトを読み進めていけば、悩みや疑問が解決するかもしれないと思わせることができます。

    ナビゲーションのデザインのポイント

    特に、グローバルナビゲーションと呼ばれる、Webサイト全てのページに共通して設置するリンクです。 適切なナビゲーションを設置することで、Webサイトに訪れたユーザを適切にサイト内に案内することができます。逆に適切なナビゲーションがないと、ユーザはどこにどんな情報がわからなくなりサイトから離脱してしまう可能性があります。

     まず、ファーストビュー内に訪問者にとって欲しい行動をさせるためのリンクやボタンを配置します。 具体的には、資料請求やお問い合わせページへのリンクやボタン、または電話番号の記載があたります。

    また、欲しい情報があるかわからせるために、グローバルナビゲーションを配置します。このグローバルナビゲーションで、ユーザはこのサイトにどのような情報が載っているのか判断することができます。 グローバルナビゲーションでは、ユーザが欲しそうなページのメニューを左に配置させると良いです。

    例えば、車を扱っているサイトで、タイプや価格がユーザにとって欲しい情報であれば、タイブや価格のメニューを一番左に配置します。なお車でも車種やメーカーによって一番見たい情報が違うと思いますので、そこは適宜合わせて頂ければと思います。実際にHondaのフィットとsubaruのインプレッサではグローバルナビの配置が異なり、フィットでは一番左にある価格メニューがインサイトでは一番右にあります。


    両サイトのグローバルナビの配置順番

    フィット:タイプ・価格→スタイリング→インテリア→性能・安全→装備・オプション
    インサイト:デザイン→燃費→ユーティリティ→アイサイト→グレード・価格

    メインビジュアルのデザインのポイント

    商品を紹介するページで、文字だけで商品の魅力を伝えようとすると、見難くなってしまいます。文字を読むよりも、一目でわかる画像で訴求すると、ユーザの目にも止まりやすくなります。メインビジュアルのデザインのポイントはずばりユーザのベネフィットが伝わるものです。この際ユーザが求めるものと、ユーザに与えたいものがかけ離れないように注意しましょう。

    また、メインビジュアルに権威を表す要素(ランキングNO1や具体的な実績)を入れるとユーザは、好感や信頼を持って読み進めてくれます。

    その他ファーストビューのデザインで気をつけるポイント

    例えば、ビジネス系であれば青系の寒色をベースに差し色に赤系を加え直線を多用し誠実さを演出したり、 飲食系であれば、食欲をそそる黄色やオレンジを配色したり、業種によって色やデザインの傾向があります。 また、お年寄りが多いのならば文字を大きくするなどの配慮も必要になってきます。

    WEBデザインは多種多様ですので、WEBデザインの見本帳や81-web.comなどWEBデザインリンク集を参考にしても良いと思います。

    まとめ

    いかがでしたか?今回は、ファーストビューについてご紹介しました。ファーストビューはもちろん重要ですが、ファーストビューの目的は、「続きを読ませる」ことですので、他のボディーとクロージングコンテンツも同じように重要です。この部分がおろそかにしているとせっかくファーストビューで続きを読ませたのに、目的のページまで行かないこともありますので、ファーストビュー、ボディー、クロージングをバランスよくデザインしてコンバージョン率改善につなげましょう。

    コラム

    最新コラム

    人気コラム

    ご質問やご相談などお気軽にお問い合わせください。

    お電話でのお問い合わせはこちら

    03-5829-9912

    受付時間:平日10:00~19:00(土・日・祝日を除く)