ファーストビューで成果が決まる？デザインのポイントやサイズについて

ファーストビューとは

パソコンやスマートフォン上からブラウザ上で閲覧できる各サイトがアプリに表示された時にスクロールせずに最初に見える画面の範囲の事を指します。

パソコン上では各ユーザが使用しているモニターサイズ、スマートフォン上では各メーカによって画面サイズが異なる為に、想定されるターゲット（日本国内のみか海外含むのか）が使用している状況を考慮し、ファーストビューの情報を設計・配置を実施してくことが重要となります。

また、画面範囲に設定する情報設計を行う際にはブラウザやスマートフォンのシェアデータを参考に行う事で、重要な情報を逃さずにサイト・アプリ展開していく事が可能となります。

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

ユーザがインターネット広告、SNS（シェアなど）、検索エンジンなどからサイトに訪れた際に、ユーザが事前に知りえた情報（新商品名・価格・クーポン）がファーストビューに認識が出来なかった場合に、サイトの「離脱率」や商品への「ブランド効果の低減」などが考えられます。

本来のサイトの目的を失ってしまわぬように、ユーザが使用している環境に応じた「情報の設計」が重要となります。

例を挙げて説明していきます。

例：「飲料品」メーカの場合

目的：2019年春に業界初となる清涼飲料水の新商品を発売する為に、ブランディングを目的にしたサイトを立ち上げ、展開。商品の認知向上を行い、清涼飲料水のトップシェアを狙う。また、新商品の認知獲得を獲得する為に、新商品のターゲットとして主な購買層と想定しているのは10代～40代の男女となる。その為にはテレビＣＭとインターネット広告を中心に広告・プロモーションの展開を予定。

この場合、広告・プロモーションでは商品のイメージ、商品コピー、商品ポイント（業界初）、価格、販売店の情報などのコミュケーションをユーザに対して展開する必要があります。

そこでサイト上には各プロモーションで訴求している内容をファーストビューに全て納め、伝えたい情報をユーザに、正確に伝える事で、商品への理解・促進し購入を促す事がサイトの目的となるのです。

情報設計のポイント

ファーストビューにどの情報を配置するか、情報設計を行うことが重要となります。

情報の洗い出しを行う

まずはサイト上、訴求を行っていく情報の洗い出しを行います。「新商品名」「全商品スペック」「商品の特徴」「販売店情報」などの洗い出しを行いましょう。

ファーストビューのサイズを定義する

次のステップとして目的・ターゲットに応じたサイトの仕様（ファーストビュー）定義を行います。定義を行う際に際に参考にするデータとして、PCサイトだとモニターサイズ、スマートフォンサイトでは画面サイズの基準となる参考情報の確認を行います。

※世の中の全てのモニターサイズはわからない為にあくまでも参考数字となります。

PCサイトの場合

• 1920×1080：シェア率 25.64%
• 1366×768：シェア率 13.01%
• 2560×1440：シェア率 8.22%
• 360×640：シェア率 7.63%
• 1440×900：シェア率 5.5%
• 1536×864：シェア率 4.8%

参考：Screen Resolution Stats Japan

「1920×1080」「1366×768」のサイズがおおよそ４割を占める為、こちらのサイズにあわせた形が適切なファーストビューサイズとしてサイトの設計を行います。

グローバルナビゲーションの設置

訴求を行う情報範囲の整理を行い、ファーストビューのサイズが判明したらグローバルナビゲーションの設置をおこないます。グローバルナビゲーションとは、サイトの全てのページに共通して設置された案内リンクを指します。商品紹介などWebサイト内の主要なページに対してリンクされている状態がベストとなります。

グローバルナビゲーションを設置することでユーザが目的に応じてサイト内に案内することができます。ナビゲーションがないと、ユーザはどこにどんな情報がわからなくなってしまい、商品の理解をせずに離脱してしまう可能性が高くなってしまいます。

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

では、ファーストビューのデザインを考える際のポイントをいくつか紹介していきます。

サイトの構成を決める

ファーストビューの入れるエリア基準が出来たらサイト前提の構成・ユーザの動きを考慮した展開を考えます。

構成ではファーストビュー以外での情報の設計などワイヤーフレームなどに落とし込みを行っていき、サイト前提の骨子を整えます。

骨子を整えたら、今度はユーザの視線の動きを考慮した詳細設計を考えていきます。一般的に上から下に動いていく事が想定されています。新聞・雑誌・書籍なども上から下のレイアウトになっています。

PCサイトを閲覧する時の一般的な視線の動きとして、「左→右」へと情報の認識を行っていくパターンのひとつとしてあります。

視線が「上→下」「右→下」といった動きをする可能性はありますが、Webサイトは基本的に「左→右」というのが人にとって一番自然な目線であると考えられ、このユーザの視線の動きがアルファベットの「Z」の形をなぞるひとつの法則と言われています。

そのため、Webページのファーストビューにおいてもこの基本を考慮しつつ、「左→右」の視点に合わせて商品の情報・画像・キャッチコピーを配置していくページが多くなっている傾向があります。

このレイアウトの肝は、左側に文字、右側に画像を配置するという方法です。このレイアウトを採用すると、まずページを開いたら読者に最初は文字を読ませて、次にそれに関連した人物写真や商品画像を見せることができるため、ページ全体のブランディングと認知を強めることができます。

レイアウトを考える

デザインを作成していく場合、これらの情報設計の考え方を元に複数のパターンを考慮することが求めれられます。

今回は代表的なデザインパターンを説明していきます。

フルスクリーンレイアウト

商品のブランディングを視覚的に行う手法。

例えば、今回の例のように新商品のCMなどでプラットフォーム上に配置された動画を、ファーストビューでの再生や高解像度の画像素材などを使い、横幅いっぱいまでダイナミックに商品の訴求を行う事を目的にした手法です。

シングルカラムレイアウト

現在の一般的にWeb（スマートフォン）サイトのレイアウト。

まっすぐ縦に情報の配列を行い、変化する情報などに横幅に合わせて柔軟に変化できるメリットがあります。スマートフォンやタブレットの普及によって、一般サイトでも活用するようになっています。

今までの一般サイトに今までよく設置していたサイトバーはなくなり、固定ヘッダーやフッターによって同じ役割を果たすようになってきています。

グリッドレイアウト

グリッドレイアウトは画面やページを縦横に格子状に分割し、均等なブロックを組み合わせて各要素の大きさや配置します。

新聞や雑誌などの印刷物でよく使われてきたデザイン手法のひとつですが、近年ではスマートンフォンの普及にともない両デバイスに適応したサイトのデザインに採用されるパターンが増えてきています。

ポイントは文章や画像といった構成要素の境界線がグリッド線に合わせて配置し、大きさの異なるパーツがたくさんあっても整理される点です。そのため、グリッドレイアウトは基本テンプレートとなりつつあります。

おわりに

いかがでしょうか？

Webサイトを展開する際には、ファーストビューを意識して設計・構築をする事により、本来のサイトの目的やターゲットを明確化する事ができます。そうすることで、ユーザと制作者のコミュニケーションのロスがなくなり、ブランドやサービスが伝えたい情報を伝えることできるのです。