ランディングページの改善に役立つ情報をお届け。 今回は、LPの顔であるファーストビューに関して触れていきます。

LPの基本知識から知りたい方は以下の記事で詳しく紹介しておりますので合わせてご覧ください！

ファーストビュー（FV）とは？

ファーストビューとは、WEBサイトやランディングページに訪問した際に、ユーザーが最初に目にする領域を指します。

ユーザーの使うデバイスや機種によって、サイズは異なります。

一番最初に目にするところですので、最初の印象が悪いとユーザーは離脱してしまいます。
そのため、ファーストビューはユーザーがページに滞在するか、離脱するかを決める際に大きく影響する重要な要素となります。

ファーストビューのサイズ

デバイスや機種により、ファーストビューのサイズは異なるため、以下を参考にしましょう。

デバイス	横幅	高さ
PC	1000～1200px	550～650px
スマートフォン	350～365px	600～650px

ファーストビューとキービジュアルの違い

ファーストビューとよく混同されるのが「キービジュアル」です。

「キービジュアル」と同じ意味で使われる言葉として「メインビジュアル」「アイキャッチ」などがあります。

ファーストビューは、ユーザーが最初にサイトに訪れた際に表示される画面全体をさすのに対し、キービジュアルは画像そのものを指します。

 

キービジュアルは、ファーストビューの中でも大半を占めるため重要度は最も高いです。

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

ファーストビューはユーザーがLPやサイトに訪れると一番最初に目にする部分です。

そのため、最も重要な要素として考えられています。

特に以下の理由で重要性が高いと言われています。

• ファーストビューを見る時間はおよそ2秒
• ファーストビューでの離脱は60%以上

ファーストビューを見る時間はおよそ2秒

ファーストビューが見られる時間はおよそ「2秒以内」とされています。

2秒以内に、ユーザーが自分の求めている情報があるサイトか否かを判断していると言われています。実際に、弊社での分析の実績からも多くの業種・サービスのランディングページにおいて、ファーストビューの平均滞在時間は1秒～3秒となっており、ユーザーが瞬時に内容を判断していることがわかります。

2秒以内に、デザインや読みやすさなどの観点で好感が持てるかはもちろん、このサイトが「何屋なのか」「実績はあるのか」などを理解させることが大切です。

したがって、ファーストビューをサッと見ただけで、

• 製品・サービスの内容がなんとなくでも理解でき、
• 自分に取って有益だと判断させ、
• スクロールしてみようと思わせられるか

が非常に重要です。

とくにランディングページ（LP）においてはその重要性も上がります。

ファーストビューでの離脱は60%以上

「ファーストビューの内容とユーザーのニーズが一致しない」

または、

「内容が2秒以内に的確に伝わらない」

このような場合、ユーザーがページを閲覧し続けることはありません。

多くの場合、ファーストビューでのページ離脱率は高い傾向にあり、平均離脱率は60～80%程度となります。

ファーストビューの印象をよくするポイント8選

これまでご説明したように、ファーストビューはユーザーの離脱を左右する重要な要素です。

ユーザーに好印象を与えるためのポイントを8つご紹介します。

1. 左上にロゴが設置されている
2. 電話番号（＋営業時間と定休日）が掲載されている
3. 電話番号を押下すると発信できる
4. コンバージョンボタンが配置されている
5. 2秒以内に何屋のLPか理解できるキャッチコピーか
6. 2秒以内に何屋のLPか理解できるキービジュアルか
7. 数値で表すことのできる3つの実績が掲載されているか
8. 600px～700pxの高さに収まっているか

ひとつずつご紹介します。

左上にロゴが配置されている

ファーストビューでは左上（スマートフォンでは左上もしくは真上）にブランド名や運営者がわかるロゴが掲載されているようにしましょう。

左上はほとんどのサイトやランディングページでロゴを掲載する位置のため、ユーザーは無意識に左上にロゴがあると認知しています。

電話番号（＋営業時間と定休日）が掲載されている

ロゴと同様に殆どのページでファーストビュー内に電話番号＋営業時間・定休日が掲載されています。

必ず「お問い合わせアイコン（画像）」ではなく、電話番号を掲載するようにしましょう。 また、通話無料の場合には、「通話料無料」の掲載も忘れずにしましょう。

電話番号を押下すると発信できる

ほとんどのページでスマートフォンによるアクセスがあるため、必ず電話番号はタップで発信できるようにしましょう。

コンバージョンボタンが配置されている

ファーストビュー内にコンバージョンボタンが配置されているようにします。

これは、ファーストビューにボタンがあるということをユーザーにアピールすることで、お問い合わせなどをしたくなったときにファーストビューに戻ればいつでもアクションを起こすことができると認識してもらうためです。

2秒以内に何屋のLPか理解できるキャッチコピーか

2秒でどういったサービスを提供しているのかが理解できるキャッチコピーであることが重要です。 何屋なのか理解できないユーザーはすぐに離脱してしまいます。 ※エンゲージリング販売LPのキャッチコピー例

2秒以内に何屋のLPか理解できるキービジュアルか

キャッチコピーと同じくらい、使う画像とサービスの親和性は重要なポイントとなります。

サービス内容を視覚的にイメージできるような写真やイラストを配置することで、何屋のLPなのかを瞬時にユーザーに理解してもらえるようになります。

キャッチコピーと同様に2秒以内に理解ができるビジュアルを設定しましょう。

※家のフロアコーティングサービスでのビジュアル例

数値で表すことのできる3つの実績が掲載されているか

実績は信頼感や安心感、また、そのサービスが多くのユーザーに利用されているのかを判断するための指標になります。

たとえば、満足度や販売数、リピート率などの数値を3つファーストビューに掲載するようにしましょう。

数値実績の掲載例

• お客様満足度 第1位
• 2018年売上 第1位
• リピート率 98.8%
• 販売実績 10万個突破

競合と差別化できる数値的な実績、権威をファーストビュー内に掲載します。よく使われるのは「受賞 イラスト」などの検索結果で出てくる王冠マークで表現されることが多いです。

スタートアップの場合などで、まだ実績も少ない場合は、

• 100%国内生産
• 30種類の薬用成分配合

など、製品・サービスの特徴で数値で表せられるものを入れても効果が高いです。

600px～700pxの高さに収まっているか

ファーストビューはユーザーの閲覧環境によって表示できる範囲が異なりますが、ノートパソコンや小型のスマートフォンなどで閲覧した際にも収まるサイズにしましょう。

作時には大きな画面で行うケースが多く、つい小さい画面での見え方を忘れがちですので注意しましょう。

せっかく良いファーストビューでも見えなければ意味がありません。

ファーストビュー作成時の注意点

ファーストビューを作成する際の注意点として、以下が挙げられます。

1. 利用ユーザーのデバイスを把握する
2. 情報を詰め込みすぎない
3. ターゲットに合わせたデザインや訴求を考える
4. 何度もテストして改良を重ねる

1つずつご説明します。

利用ユーザーのデバイスを把握する

最初にご説明したように、ファーストビューは使うデバイスや機種によって表示される領域が異なります。

PCユーザーの多いサイトとモバイルユーザーの多いサイトで、配置やデザインは変える必要があります。

デザインを作成する前に、どのデバイスを使っているユーザーが多いかを把握したうえで、見栄えやデザインの調整をしましょう。

情報を詰め込みすぎない

ファーストビューにたくさんの要素がありすぎる場合、情報の判断がしきれずに離脱につながる可能性が高くなります。

色々と伝えたいことが多く、あれもこれもと、自社のアピールポイントファーストビューに詰め込んで、窮屈なファーストビューになってしまっているケースがあります。

ユーザーにアピールしたいがために、多くの情報をファーストビューに詰め込んでしまうと、サービスのポイントや強みが認識されず、ユーザーの頭に残らずに離脱されてしまうこともあります。

ユーザーがページを訪れて1秒で「何のページなのか」が伝わらなければなりません。伝えたい情報を厳選して掲載するようにしましょう。

上記は、ランディングページ改善サービスのページですが、左と右どちらが1秒で内容を理解できるでしょうか。瞬間的に内容が伝わらなければユーザーは離脱してしまうのです。

キャンペーンバナーの存在がファーストビューに必須でないのならば削除するべきである

商材にもよりますが、ファーストビュー内の要素が多すぎることで、ほんの数秒で理解できないほどの情報が目に飛び込んできてしまい、結果的に十分にユーザーの伝わらない場合もあるのです。

ターゲットに合わせたデザインや訴求を考える

先にお伝えしたように、ファーストビューに入れられる情報は限られています。

ターゲットユーザーに対して何を伝えるべきかを検討し、情報を精査していきましょう。

同じサービスであっても、年齢や性別、新規ユーザーか既存ユーザーかなどによって訴求する内容や目立たせる情報が異なります。

たとえば、サイトのトップページのファーストビューである場合、より広いユーザーにアプローチするための内容にする必要があったり、新規向けLPのファーストビューである場合は、まだそのサービスを知らないユーザーにアプローチする内容にする必要があります。

ファーストビューを考えるうえで最も重要なポイントとなるため、理解しておきましょう。

何度もテストして改良を重ねる

作ったらそれでおしまい。ではなく、何度もテストを重ねてより良い成果を生むファーストビューを作成することが大切です。

ヒートマップやアナリティクスなどを活用して、ユーザーの注目度やアクションを起こしているか、離脱率の変化などを比較しながらよりよいファーストビューを見つけましょう。

【最後に】成果を生むランディングページを作ろう！

今回はファーストビューについてご紹介しました。

ファーストビューはランディングページの顔となる最も重要な要素のひとつとなりますので、ぜひ参考にしてください。

弊社のランディングページ制作ノウハウから、「成果を生むランディングページ」の代表的なチェックリストを以下にまとめておりますので、ぜひダウンロードして活用してみてください。

弊社ではランディングページの無料簡易分析も承っております。

プロ視点で見た、貴社ランディングページの課題点を発見し、オーダーメイドの分析結果資料をお届けいたします。

詳しくはチェックリストをご覧ください。