ファーストビュー(firstview)とは？その重要性と高さ・デザインのポイントについて解説
2020.08.26
ファーストビューは、ユーザが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と言えるでしょう。
なお、アナリティクスを入れている場合、ユーザの「ブラウザとOS」でユーザのパソコン環境がわかりますので、
自社サイトがどんなブラウザでどのようなPC環境でアクセスしてきているのか参考にすると良いです。
スマホサイトにおける最適なファーストビューの高さ
なおスマホですが、これも機種によって様々ですが、縦向きで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デザインリンク集を参考にしても良いと思います。
ファーストビューのデザイン事例10選
最後に、ファーストビューのデザイン事例をご紹介します。さまざまなWEBサイトのファーストビューを参考にすることで、よいアイデアが浮かんでくるかもしれません。ここでは10個のサイトをピックアップしました。
新潮社：https://www.shinchosha.co.jp/
大手出版社の新潮社。ナビゲーションがされており、デザイン性に優れているファーストビューです。
ホームページは出版社らしく、文字で埋め尽くしたインパクト大なデザイン。スライドショーにて新刊を紹介しており、眺めているだけで新刊の情報が入ってきます。
特徴的なのは、ナビゲーションや見出しタイトルなど、ほとんどの文章に特徴的なフォントが使用されていることです。フォントの効果もあり、シンプルなサイトデザインながらも洗練された印象を与えます。
SONY：https://www.sony.jp/
電子機器メーカー・SONYのホームページです。目を引くキャッチコピーとナビゲーションが設置されており、黒に統一したデザインのファーストビューとなっています。
簡潔なキャッチコピーが大きく表示されており、新商品のアピールポイントがすぐわかります。画像をタップすると、それぞれの商品ページにジャンプする仕組みです。
黒を基調としているため、クールな印象を与えます。スタイリッシュながらもナビゲーションはわかりやすく配置されているので、誰が見てもわかりやすいファーストビューと言えるでしょう。
Nike：https://www.nike.com/jp/
スポーツ用品メーカーのNikeのホームページです。ナビゲーションとキャッチコピーが設置されており、スタイリッシュなデザインのファーストビューとなっています。
人種も性別も異なるアスリートたちがひとつのフィールドに立っているかのような写真は、見る人に感動を与えるでしょう。「今すぐ見る」をクリックすれば動画が再生される仕組みです。
写真の下部には、シンプルながらも力強いメッセージが並びます。凝ったサイトデザインではなく、強いメッセージ性によって見る人を惹きつけるファーストビューです。
SQUARE ENIX：https://www.jp.square-enix.com/
ゲームメーカー・SQUARE ENIXのホームページです。
ファーストビューは、新作ゲームのPRとなっています。上部にキービジュアル、下部に2つのPR動画と購入ページへのボタンが並んでいます。ナビゲーションが設置されており、各メニューや商品購入ページへの動線がスムーズです。
PR動画をクリックすると、ホームページ上で動画が再生される仕組みです。ゲーム内の映像を使った動画と芸能人によるPR動画の2つあるので、ゲームの魅力がしっかりと伝わってきます。購入ページにすぐに飛べるボタンが配置されているので、動画を観てゲームが気になったユーザーがすぐに購入できます。
glico：https://www.glico.com/jp/
お菓子メーカー・glicoのホームページは、スライドショーを使ったファーストビューです。glicoのイメージカラーの赤を基調とした写真や、芸能人が美味しそうにお菓子を食べている写真が次々と流れ、見ているだけで楽しいホームページとなっています。キャッチコピーが上手く活用されており、ユーザーの興味を引くデザインです。
スライドショーが流れるスピードが速いのが特徴です。3秒ほどで写真が切り替わるので、なんとなく眺めているだけでもさまざまな情報が視界に飛び込んできます。写真1枚1枚のインパクトが強いのもポイントです。
NHK：https://www.nhk.or.jp/
公共放送・NHKのホームページは、知りたい情報がすぐに見つかるファーストビューとなっています。放送している番組の個別ページへのリンクはもちろん、ニュースや健康情報などの記事にもファーストビューから飛べるのが特徴です。ナビゲーションがしっかりとしているので、ファーストビューから見たいページにすぐ飛べます。
NHKは若者だけでなく高齢者もターゲットとしています。そのため、スタイリッシュなデザインではなく、わかりやすく使いやすいデザインとなっているのでしょう。ユーザーファーストを意識したファーストビューと言えます。
箱根湯本温泉 天成園：https://www.tenseien.co.jp/
箱根の旅館・天成園のホームページです。メインビジュアルに凝っており、ユーザーを惹きつけるデザインになっています。
ファーストビューは、旅館の魅力が存分に堪能できる動画を使用。動画は圧巻の風景から始まり、館内の趣のある部屋や温泉などが次々と映し出され、ファーストビューを眺めているだけで、まるで天成園に行ったような気分を味わえます。
上部には空室検索や言語切替のボタン、電話番号を設置。デザインに凝りつつも、必要最低限の情報はしっかりとヘッダーに表示したファーストビューです。
フランスベッド：https://www.francebed.co.jp/
家具メーカー・フランスベッドのホームページです。ドロップダウン型のナビゲーションとフランスベッドらしいキャッチコピー・メインビジュアルで、利便性とデザイン性ともに優れたファーストビューとなっています。
フランスベッドは家具メーカーの中でもメディカル部門に強い企業。そのため「家族」をイメージさせる、温かみのある写真が使われています。スライドショーでは、高齢者や子どもを含む「家族」の写真が流れていきます。
他の家具メーカーにない特徴として、最も目立つ箇所に配置されているリンクが、商品ページではなくフランスベッドの哲学を紹介するページになっていることが挙げられます。フランスベッドのブランドイメージが伝わってくるファーストビューと言えるでしょう。
THE KEY HIGHLAND NASU：https://highland-nasu.the-key.jp/
那須にあるリゾートホテル、THE KEY HIGHLAND NASUのホームページです。フォトジェニックな写真を利用したスライドショーに、おしゃれなロゴとキャッチコピーが浮かびます。ファーストビューを見ているだけでも、リラックス効果があるように感じます。
こちらのサイトのファーストビューには、ローディングアニメ―ションがあります。ホームページを表示すると、まず可愛らしいロゴを使ったローディングアニメーションが流れ、ファーストビューが現れるという仕組みです。ローディングアニメーションの効果で、おしゃれな雰囲気が演出できています。
原田産業株式会社：https://www.haradacorp.co.jp/
総合商社・原田産業株式会社のホームページです。世界中を股に掛けるグローバル企業らしい、荘厳な海と商船が映し出されたファーストビューとなっています。ページを表示すると、穏やかに写真が動き、海の風を感じさせるようです。
シンプルながらも力強いキャッチコピーがポイントです。ヘッダーはドロップダウン型となっており、カーソルを上部に持っていくとメニューが表示されます。渋いようで洗練されている、優れたデザインのファーストビューと言えるでしょう。
まとめ
いかがでしたか？今回は、ファーストビューについてご紹介しました。ファーストビューはもちろん重要ですが、ファーストビューの目的は、「続きを読ませる」ことですので、他のボディーとクロージングコンテンツも同じように重要です。この部分がおろそかにしているとせっかくファーストビューで続きを読ませたのに、目的のページまで行かないこともありますので、ファーストビュー、ボディー、クロージングをバランスよくデザインしてコンバージョン率改善につなげましょう。
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
Webサイト制作Webデザイン
