Webサイト（ページ）の解説を受ける時、もしくは説明する時にファーストビューという言葉を使う時があります。ファーストビューは英語で「First view」（以下、FV）となります。そしてこのFVに似ている言葉としてKVがあります。KVも英語の「Key visual」（以下、KV）の頭文字からきています。
これらFVとKVはよく勘違いされることが多く、実際に間違って解釈されている人も少なくありません。Webサイトにおいて、FVもKVも重要なのですが、特にFVはWebサイトやLP（ランディングページ）を運用する上でとても重要です。そこで今回、
なぜFVが重要なのか
デザインする時のポイントは？
どんな見せ方があるのか
適したサイズはあるのか
を全て、簡潔に解説します。
FVとは
FVとは、ユーザーがパソコンやスマートフォンでWebページにアクセスした時にスクロールせず、最初に画面に表示される範囲のことを指します。
FVの重要性
聞いたことが多い方もいると思いますが、人の第一印象は3秒で決まると言われます。Webページも同じです。ユーザーはWebページにアクセスして約3秒で
読み進めるメリットはあるか
ベネフィット（利益）は何か
誰に向けたWebサイト／ページなのか
を判断します。これらの情報をいかに上手にFVで見せるか、見てもらうか、がWebページにはとても重要です。FVを見た結果、Webページを離脱するユーザーはWebサイトで35%~45%、LPだと85%~90%と言われています。
デザインのポイント
制作する際に、どこまでをFVとして見せるのか、この点について大切なポイントをご紹介します。
それは、要素を整理整頓して、FVで明確に伝えること／伝えたいことをリストアップすることが大切となります。特に次の事柄を強く意識しましょう。
ターゲットは誰なのか
メッセージは何なのか
ユーザーが欲しい情報をきちんと掲載
商品／サービスの強みを掲載
読み進めてユーザーにしてほしいアクションは何か
■ターゲット
ターゲット（層）を明確にして、「ターゲットが求めるもの」と「ターゲットに与えるもの」、それぞれをクライアントと制作側の誰もが共通の認識となるようにしましょう。これらの認識を共有することで、発信するキーワードやイメージを明確にしやすく、デザインの方向性も確定しやすくなります。
■メッセージ
最初に見せる文章、メッセージを決めましょう。キャッチコピーと捉えても大丈夫です。メッセージ／キャッチコピーを決める時のポイントは次のようなことになります。
ユーザーにターゲットは自分であると認識させる表現
検索キーワードを入れる
ベネフィット（利益）を入れる
ユーザーは課題や疑問、悩みなどがあるからWebページを見にきます。その時、自分が探していた解決法があるかもと思わせることが大切です。そのためユーザーが、「求めている情報がある」と理解できるように、キーワードやベネフィットも組み込みます。こうすることで、最後まで読んでもらえる確率は高くなります。
■情報の掲載
ユーザーが求めるものと、ユーザーに与えるものの、両方のイメージから外れないように、しっかりと認識してもらえるように制作します。長い文章（説明文）よりも瞬間的に多くの情報を伝えることができる、写真や動画、画像などを使用することでデザインの見栄えも良くなります。さらに、ベネフィットを感じることのできる的確なキャッチコピーを、適切なサイズで記載することも大事です。
■強みを入れる
メッセージやビジュアルで訴求した内容の裏付けとなる強みを入れましょう。その時に「第1位」や「90%」など数字による権威付けは非常に効果的です。言葉だけでなく「数字」として表現することで、しっかりと安心感を持たれることになります。
■アクションへの導線
ユーザーにWebページを読み進めてもらって、最終的に商品／サービスを購入して貰うためのアクションへの導線をきちんと入れましょう。読み進めて欲しい場合は、スクロールしたくなるようにFVに
スクロールを促す矢印など
コンテンツの一部
を入れると効果的です。コンテンツの一部を見せて「何があるのかな？」と思わせることは、導線の入り口として常套手段となります。また、商品／サービスを購入してほしい場合は、申し込みボタンなどのCTAボタンを配置すると良いです。その際に気をつけたいことは次のようなことになります。
目立つように
クリックできると思わせるように
デザインパターン
FVのデザインの見せ方は多々あります。代表的な見せ方をご紹介します。
■写真／画像
どんなベネフィットが得られるのか、瞬間的に伝わりやすいデザインパターンです。写真を使用する場合は、綺麗なだけでなく、訪問ユーザーが購入後のストーリーをイメージしやすいかどうかを、重点に選んで使用しましょう。
■イラスト
オリジナリティを出すことができます。会社や商品／サービスの世界観をストレートに伝えたい時、もしくは既に確率できている場合は、とても効果的な見せ方となります。
■文字
写真や画像が使われているデザインが多い中で、文字のみだと返ってインパクトがあるデザインを構築することになります。そして印象深く残る結果にも繋がります。
■スライドショー
写真や画像、イラストなどのデザイン要素を効果的に、そしてより多くのコンテンツを見せられます。スライドショーを活用するデザインの特徴は、複数の商品／サービスを扱っているWebページにに向いています。
■動画
動いているため目を引きます。 また断片的な写真と違い、イメージを明確に伝えることができます。
FVのサイズ
Webページを見るツールは、パソコンやスマホなど様々です。そのため見るツールによってFVのサイズもまちまちとなります。では、作る時のサイズはどうすれば良いのか？
実は、制作時における決まったサイズはありませんが、おおよそのサイズというのは決まっています。それらサイズの主流は次のようになります。
パソコン：幅1366~1920px、高さ768~1080px
スマホ：幅360~375px、高さ640~667px
これらの画面サイズを知るには、海外のWebサイト statcounter の項目「 Screen Resolution Stats 」で確認ができます。ただしスマホの場合、高解像度のレティナディスプレイを使用しているiPhoneがあるため、2倍サイズの画像を用意する必要があります。2倍サイズでない場合、iPhoneで見ると非常に荒れた画像となってしまいます。注意しましょう。
まとめ
FVはユーザーがそのWebページを読み進めるか、見続けるかの判断をする重要なデザインエリアです。ユーザーはもちろん、自社がターゲットとする人たちが何を求めているか、ターゲットにどんなことを伝えたいかをよく考えて、FVを制作することが必要です。そして、ただ綺麗に作るだけでなく、訪問ユーザーが見やすいデザイン、読みやすいデザインを心がけましょう。見やすく読みやすいデザインだからこそ、興味を持ってもらいやすくなります。
当記事があなたのWebサイト制作に役立てれば嬉しく思います。
今回も最後まで読んで頂き、ありがとうございます。
HS広告スタジオでは、貴社のWebサイトが時流にマッチしているかどうか、集客に上手に活用できているかを、中小企業様の応援・支援事業として、無料でWebサイト診断しています。
ぜひどんなことでもご相談ください。
