サイト制作において、成果に繋げるための重要な要素となるのがファーストビューです。
Webサイトを開いて真っ先に目に入るファーストビューでWebサイトを離れてしまう確率は、LP（ランディングページ）で平均70％以上、コーポレートサイトで平均40％～60％です。
つまり、ファーストビューでユーザーの興味を引くことができなければページ全体を読んでもらえず、成果に繋がらないのです。
ユーザーの動きや売上げに非常に大きな影響を与えるため、WebサイトやLPの作成・改善をする際には、ファーストビューから着手することが多くあります。
ファーストビューとは？
ファーストビューとは、ユーザーがWebサイトに訪れたときにスクロールせずに表示される部分のことを指します。下記のように、機器のディスプレイの大きさによってファーストビューの範囲は異なります。
ファーストビューで主に表示される内容は、サイトのタイトル、サービス内容、実際の商品の画像、商品を表現するキャッチコピーなどです。
最近ではファーストビューに画像や文字だけでなく、動画を入れるWebサイトも多く見られるようになりました。
なお、ファーストビューはWebマーケティング用語で、SEOやWebサイト制作、サイト分析などの場面で使われます。英語では「Above the fold」（直訳すると「折り目の上」）と呼ばれています。
ファーストビューとニュアンスが似たものとして、以下の用語があります。
- アイキャッチ：ファーストビューの範囲内に含まれる大きめの画像
- メインビジュアル：アイキャッチと同義
- キービジュアル：アイキャッチと同義
アイキャッチは、メインビジュアル、キービジュアルと同じ意味を持つファーストビューと混同されがちですが、ファーストビューの範囲内に含まれる画像自体を指したのがアイキャッチです。
LPの制作や改善のためにWebサイト制作会社などとやり取りする際は、この語句の使い分けを意識すると認識違いを防げるでしょう。
ファーストビューは限られたスペースであるため、いかに端的に情報を伝えられるかが重要です。
ファーストビューのサイズ
ファーストビューのサイズは、ユーザーの使用デバイスを考慮し、そのモニターサイズに収まる程度の大きさにすると良いでしょう。あくまで目安ではありますが、以下を参考にしてみてください。
- PC：横幅1000px〜1200px 高さ550px〜600pxくらいまで（ソリッドレイアウトの場合）
- タブレット：横幅768px 高さ1080pxまで
- スマートフォン：横幅365px 高さ650pxまで
使うデバイスによってファーストビューのサイズは変わりますが、上記のサイズを意識してファーストビューを作成すれば基本的に大きな問題は起こりづらいでしょう。
ただし上記はあくまでも目安のサイズです。さまざまなデバイスからユーザーがWebサイトを閲覧する点も考慮して、最適なファーストビューを作成する必要があります。
大事なのは、ユーザー視点に立ち、客観的に良いファーストビューを検証することです。設置者から見た印象だけではなく、他の人に意見を聞いたり、競合サイトがどのようなファーストビューにしているのかを分析したりして、最適なサイズを模索することが重要です。
横いっぱいに拡大したLPでファーストビューを作る場合は、自社でコーディングが可能なら設置できる可能性はありますが、できればLP制作会社に依頼するのがおすすめです。制作を依頼することで、ユーザー視点に立った、客観的なファーストビューが作成できるでしょう。
ファーストビューの重要性
ファーストビューが重要だと考えられる理由は、ファーストビューの内容によってWebサイトの離脱率が大きく変化するからです。
ファーストビューでWebサイトを離れてしまう割合（直帰率）は高く、LPで70％以上、コーポレートサイトで40％～60％が平均とされています。
またユーザーがWebサイトを訪れて、そのまま閲覧するか離脱するかを決める時間は3秒とも言われています。
せっかくWebサイトに集客できても、ファーストビューで魅力を伝えられなければ大半のユーザーが数秒で離脱してしまいます。
そのためユーザーにWebサイトの全体を見てもらうには、ファーストビューにおいて短時間で伝えたいことが伝えられるような構成にする必要があります。
後述する成功事例でも解説しますが、商品の内容を端的に伝えるためにファーストビューに動画を設置した後、成約率が102.9％、見積もりページの遷移率は100.2％まで改善した例もあります。
このように、ファーストビューの改善は成果に直結しているため、重要だと言えるでしょう。
ファーストビュー作成の8つのポイント
実際にファーストビューの作成に取り組むとき、特に効果的な手法を紹介します。
これからファーストビューを作る人は参考に、改善する人もこのポイントを満たせているかを確認してみてください。
なお、簡単な画像やイラスト作成などは無料のツールでも行えますが、LPやWebサイトなどの本格的なファーストビューを作りたい場合は、LP制作会社に依頼するのがおすすめです。
クオリティが高く、ユーザーの興味を引きつけるファーストビューを作ることで、より成果が期待できるでしょう。
具体的には下記の8つがファーストビュー作成のポイントとなります。
- 商品の内容が分かる画像を入れる
- ユーザー目線のキャッチコピーを入れる
- デザインをシンプルにする
- CTAボタンを挿入する
- 動画を入れ込む
- デバイスに合ったサイズに調整する
- 数字による権威づけをする
- 表示速度を変更する
1）商品の内容が分かる画像を入れる
ユーザーが商品やサービスを具体的にイメージできるよう、ファーストビューに画像を挿入します。
特に複数の商品を扱っている企業では、スライドショーなどで複数の画像を表示できるようにすることがおすすめです。
スライドショーには、ファーストビューのように限られたスペースでも多くのコンテンツを見せられるという強みがあります。
事例
大手ハンバーガーチェーンのマクドナルドでは、ファーストビューに期
2）ユーザー目線のキャッチコピーを入れる
商品の紹介のみではなく、ターゲットとなるユーザーが自分ごとと思えるようなキャッチコピーを入れます。
例えば、ユーザーが抱えているであろう悩みを提示したり、商品やサービスを利用することでユーザーが得られるメリットを伝えたりといった方法が挙げられます。
事例
オーラルケア製品の1種であるモンダミンを展開するアース製薬のWebサイトでは、ファーストビューに「お口の健康を守る。」とシンプルでありながら、ユーザーが商品を使うことでどのようなメリットを得られるかイメージできるキャッチコピーを入れています。
3）デザインをシンプルにする
ファーストビューのデザインはできる限りシンプルにします。
ファーストビューに情報を詰め込みすぎると、そのサイトで本当に伝えたいことがひと目で伝わらない可能性があるからです。またCTAを挿入しても、情報量が多くどこにあるか分からなければクリック率が低下します。
シンプルなデザインの例としては、単独の画像または動画とWebサイトを紹介する短い見出し、ページをより詳細に説明する文のみで構成したものが挙げられます。
4）CTAボタンを挿入する
「購入」や「申し込み」のようなCTAボタンをファーストビューに入れます。
CTAボタンとは、ユーザーに行動（申し込みや問い合わせなど）を促すためのボタンのことです。例えば以下の緑のボタンが、CTAボタンに該当します。
すでにサービスや商品に対する購入意欲が高いユーザーには、サイト全体を見てもらう必要はありません。ユーザーがコンバージョンポイントを探す手間をなくすためにも、ファーストビューにCTAボタンを挿入しましょう。
CTAボタンのクリック率を高めるためには、サイズを大きくし周りより目立つ色を使うのがおすすめです。
CTAボタンとは
CTAボタンは、Webサイトに設置された「資料請求はこちら」や「無料相談をする」といったボタンのことです。
CTAは「Call To Action」の略称で「行動喚起」という意味があり、ユーザーの行動を喚起するためのボタンになります。
ユーザーの行動はWebサイトの成果となるため、行動を起こしてもらうためにはコピーやデザインなどさまざまな工夫が必要です。
5）動画を入れ込む
ファーストビューに動画を入れ込むこともおすすめです。
動画は画像や文章と異なり、動きによって商品やサービスの特徴を示せるので、ユーザーにイメージをより具体的に伝えられます。
また動画が与える情報量は写真やテキストに比べ約5,000倍と言われているため、短時間で多くの情報を与えてサイトへの関心を高め、そのまま読み進めてもらいやすくなります。
6）デバイスに合ったサイズに調整する
ファーストビューをデバイスに合わせたサイズに調整します。
ファーストビューのサイズが大きすぎる場合、スクロールしないとキャッチコピーなどを見られないこともあります。そうなるとユーザーに伝えたいことが伝わらず、離脱に繋がりかねません。
デバイス別のファーストビューのサイズは、株式会社ファストコーディングの調査において以下が標準だと報告されています。
- PC：横幅1000px〜1200px 高さ550px〜600pxくらいまで（ソリッドレイアウトの場合）
- タブレット：横幅768px 高さ1080pxまで
- スマートフォン：横幅365px 高さ650pxまで
もしファーストビューがPCに合わせたサイズしかない場合は、タブレットとスマートフォンに合った大きさのものも作りましょう。
7）数字による権威づけをする
商品やサービスの強みを具体的に伝えるために、数字を入れましょう。
特に「ランキング第1位」や「満足度90％」など数字による権威づけを装飾で目立たせて示すと効果的です。具体的なデータによりユーザーが信頼感や安心感を抱くことで、ページを読み進めてもらえます。
8）表示速度を変更する
Webサイトの表示速度も改善効果が見込めるポイントです。タイトルに興味があってクリックしても、なかなかページが開かないと「重いサイトだな」と離脱に繋がる可能性があります。
表示速度が遅い原因はさまざまです。例えば、画像の容量が大きい場合や外部ファイル数が多い場合は遅くなりがちです。
ページ速度は「PageSpeed Insights」のツールを利用して測るのがおすすめです。自社サイトだけではなく競合サイトの速度も測れるため、どの程度の水準まで改善すべきかの参考にしてみてください。
Webサイト内の画像の圧縮やブラウザキャッシュの活用、無駄なソースコードの削除などで対策しましょう。