ファーストビューとは？概要や作成ポイント、デザイン例を交えて解説

Web サイトを開いて一番最初に目に入るのがファーストビューです。

サイト制作において、成果に繋げるための重要なポイントとなっており、ユーザーの興味を引くことができなければスクロールされず、離脱に繋がります。

サイトへのアクセスはあるものの、成果に繋がらない場合、原因は複数考えられますが、ファーストビューでの離脱の可能性が高く、ユーザーの動きや売上に大きな影響を与えるため、優先度を高くして改善する必要があります。

今回の記事では、ファーストビューの重要性やポイント、失敗例や改善事例など幅広い形でご紹介いたします。

目次

• ファーストビューとは？
  
• ファーストビューの重要性
  
• ファーストビュー作成の6つのポイント
  
• ファーストビュー改善の手順
  
• ファーストビューの失敗事例
  
• ファーストビューの改善事例
  
• まとめ｜ファーストビューを改善しCVRを高めよう
  

「ファーストビュー」とは、 Web デザインやウェブ開発の文脈で使われる言葉で、ユーザーが Web サイトを訪れてからスクロールせずに見られる部分のことを指します。
これは Web サイトのトップページやランディングページといった、最初にユーザーが目にする部分のことを指します。

ファーストビューは非常に重要なポイントであり、訪れた Web サイトの第一印象がそこで決まります。近年、様々なデバイスがリリースされており、デバイスのディスプレイの大きさによってファーストビューの範囲も異なるため、レスポンシブを考慮した設計が必要です。

デザインだけではなくページ読み込みの速さもユーザー行動やUI、利便性などに大きな影響を与えています。
ユーザーがファーストビューでサイトを離れないようにするには、魅力的で使いやすいデザインと迅速な情報提供が鍵となります。

ファーストビューで表示される要素は、 Web サイトのロゴや主要なメニュー、キャッチコピー、訴求画像、サービス内容などです。
最近のサービスサイトやコーポレートサイト等ではファーストビューに動画を入れる Web サイトも多くなっております。

ヘッドコピー

Web サイトのファーストビューで最初に表示されるテキストです。
簡潔でわかりやすく、ユーザーに対してサイトの中身や価値を伝えるために重要です。
良いヘッドコピーはユーザーの関心を引きつけ、サイトを探索する意欲を高めます。

メインビジュアル（アイキャッチ）

Web サイトのファーストビューで最初にユーザーに提示される視覚的な要素です。
サイトの雰囲気やブランドイメージを伝え、ユーザーに興味を引く役割を果たします。
商品のイメージを損なわずに、ターゲット層に合ったデザインの方向性（トーン&マナー）にすることが大切です。

CTA（Call to Action）

ファーストビューでユーザーに対して具体的な行動を促す要素です。
商品購入、無料トライアル、資料ダウンロードなど、サイトの目的に応じた行動をユーザーに促します。
CTA は、目立たたせてボタンだということが分かりやすいデザインを選んで、クリックしやすい位置に配置しましょう。

権威付け

ユーザーに対して信頼性や専門性をアピールするための手段です。
ブランドの実績や業界での地位を強調し、ユーザーに安心感や信頼感を与えることが目的です。
順位や割合（〇%）など裏付けとなるデータ（数値）を入れて目立たせましょう。

ファーストビューのサイズは、デバイスのディスプレイの大きさを意識する必要があります。
最近、日本で最もよく使われているディスプレイの大きさは以下となります。

デバイスによって最適な画像サイズは異なりますので、制作する Web サイトのターゲットや事前情報、競合分析をしてデザイン制作するように心掛けましょう。

広告や SEO 対策をしてどんなに集客しても、ユーザーがファーストビューを見て直帰してしまっては、本末転倒です。
ファーストビューで Web サイトを離れてしまう割合（直帰率）は高く、 LP で70％以上、コーポレートサイトで40％～60％が平均とされています。
またユーザーが Web サイトを訪れて、そのまま閲覧するか離脱するかを決める時間は3秒とも言われています。
ユーザーは Web サイトを訪れて3秒以内に Web サイト雰囲気やコンテンツを見て魅力を感じるか否かを判断していると言われています。

なお、直帰率に関しては他の記事でも解説しておりますので、ご興味のある方はこちらもご覧ください。
ファーストビューが魅力的で分かりやすければ、ユーザーは滞在し、他のコンテンツも探しにいくでしょう。
逆に、興味を引かなければ、他のサイトに移動してしまう可能性が高まります。ファーストビューにおいて短時間で伝えたいことが伝えられるような構成にする必要があります。
特にLPではファーストビューが重要です。弊社でも LPO 「Landing Page Optimization（ランディングページ最適化）」のコンサルティングをサービスとして提供しており、広告や自然検索を通じて LP に訪れたユーザーに対し最適な訴求や導線設計を行うことで、 CVR の向上を目指します。

Web サイトの制作で成功するために、押さえておきたい6つのポイントを紹介します。
これから Web サイト制作に携わる方、現在 Web サイトのデザイン制作で悩まれている方に確認してほしいポイントとなります。
下記の6つのファーストビュー作成ポイントとなります。

ファーストビューがテキストだけでは読む気になれず離脱されてしまいます。
ユーザーが商品やサービスをイメージできるように画像や動画を用いて目を引き付ける必要があります。特に動画はアニメーションを使うため、文字より商品やサービスの魅力を伝えやすいです。
ただし、動画やアニメーションが多すぎたり長すぎると、表示速度が遅くなり離脱に繋がってしまうため、量や長さにはご注意ください。

事例

大手飲食メーカーのエバラでは、ファーストビューに調味料を使った様々な料理を載せることで、料理の幅を表現しています。

https://www.ebarafoods.com/sp/petit/

ブランドの一貫性は、ブランドの第一印象を形成する場でもあり、ロゴ・カラーパレット・フォントなど一貫性を保つ必要があります。

事例

大手ジュエリーブランドの 4℃ では、ファーストビューに高級感のあるエレガントな女性とインパクトのあるジュエリーを採用して、ブランドのコンセプトである「水」を表現しています。

https://www.fdcp.co.jp/DefaultBrandTop.aspx?bid=4c-jewelry

ターゲットとなるユーザーに対して何を伝えたいのか訴求内容を絞って、情報を端的に伝える必要があります。
例えば、ユーザーが抱えている悩みや、得られるメリット、安心・安全などがあります。

事例

https://mogus.jp/products/kumo/

Web広告やコンテンツ、メールなどを見た人に、次のステップに進むよう「行動喚起」するものです。
クリックできるボタンや画像、テキストなどで表現される傾向があります。
具体的には、以下のようなものが CTA として使われます。

ファーストビューはデバイスに合わせたサイズに調整する必要があります。
最近、日本で最もよく使われているディスプレイの大きさは以下となります。

Web サイトを制作する際はどのデバイス向けかを事前に確認しましょう。

画像の容量は小さくし、ページの読み込みスピードを改善しましょう。ページ流入後、内容の読み込みが遅く表示に時間がかかれば、直帰や離脱につながります。
また、ページスピードは広告の品質スコアにも影響があり、品質スコアが改善されることで、広告ランクが上がり上位掲載されるなどのメリットもあります。
ページ速度の改善は弊社サービスである「FasTest」で対応可能です。
ページスピードを改善したい方は是非、こちらまでご相談ください。

基本的には通常の Web サイト改善と変わらず、下記のような手順となります。

まず第一にターゲットを決める必要があります。
ターゲットが決まっていないと、「誰に」「何を」訴求するのか分からず、デザイン制作が進まなくなります。
ターゲットを定めるためによく利用するのが、「ペルソナ」です。ターゲットも、ペルソナと同じく、商品やサービスのユーザーモデルを指す言葉です。両者の違いは、モデルをいかに詳細に設定するかにあります。
例えばターゲットはでは「40代、女性、主婦」のように簡単な概要だけを設定していたモデルも、ペルソナでは次のように設定されます。

その他にも年収、よく使う SNS 、悩みなども用途に応じて挙げると良いでしょう。
また、ユーザーの1日の流れを検討することもポイントです。どのタイミングでどんな媒体を見ているのか、何をしているのかが分かることで、接点を持つタイミングが明確になります。

そして次に、ファーストビューの課題に対する仮説を立てます。1つだけではなく色んな角度から仮説を立てて、それぞれに合った施策を実施しましょう。
よくあげられる仮説は以下のものがあります。

仮説を立てる際は弊社サービスの「SiTest」を活用することが可能です。

ヒートマップ機能を用いると、注目されている個所とされていない箇所が視覚的に色で分かります。

赤色がよく見られているエリアとなっており、青色が見れれていないエリアとなります。

仮説に基づいた施策を実施します。
直帰率が多く、 ファーストビュー（以下、 FV ）で離脱されている割合が多い場合は、 FV を優先度高くして改善する必要があります。改善施策を実施する際はユーザーの全体像を掴んだ上で実施する必要があり、よくある施策は以下のものがあります。

改善施策が決まると A/B テストを回して効果検証をしましょう。

ABテストをして終わりではなく、効果検証したのち再度仮説を立てて改善施策をテストして細かな検証をしてブラッシュアップする PDCA のサイクルを回すことが重要になります。
SiTestは「解析・改善・効果検証の PDCA サイクル」を回すことによって「誰でも」「最速で」コンバージョン率（CVR）を改善することができます。
SiTest を使って PDCA のサイクルを繰り返しましょう。

ここではファーストビューの失敗例をご紹介します。失敗例を知ることで、良いファーストビューの特徴を押さえましょう。

ターゲットの設定が曖昧になっていると、訴求ポイントがずれて離脱に繋がる可能性が高くなります。
上記で紹介したペルソナを用いて顧客の目線に立って改善点などを洗い出しましょう。

デザインは重要ですが、こだわりすぎると分かりづらいサイトになります。
最近流行りのオシャレなサイトにしようと思い、英語表記が多くなったり、アニメーションが長すぎたりしてしまうと、ユーザーからすると内容が分かりにくく感じられるでしょう。またデザインが複雑だと、文章が読みにくいだけでなく、サイトの全体の動作が重くなる場合もあります。
デザインにこだわる場合は、以下のようなユーザーにとっての使いやすさを大切にしたうえで、どんなデザインが求められているかを考えましょう。

伝えたいことが多すぎてテキストが多くなり結局何を伝えたいのか分からなくなるケースもあります。難しい言葉や英語表記を使うと、検索してきたユーザーが知りたい内容と合わない可能性があるため注意が必要です。
ユーザーにとって分かりやすい内容を整理して伝えましょう。

ファーストビューの改善事例をご紹介します。

ななし株式会社様は高級時計のレンタルサービス「 KARITOKE 」を運用されている事業会社です。
KARITOKE は 2022年に5周年を迎え、さらなる会員獲得や売上拡大のために広告運用をはじめとするデジタルマーケティングに取り組まれております。

課題

コンバージョン率（CVR）の向上

施策

ヒートマップ解析を通したABテスト（FV 離脱率、 CTA ボタンのクリック率、LP 全体のクリックヒートマップで誤タップの有無等を分析）

結果

広告経由の CVR が約210％、CV が約462％増加しました。

HENNGE 株式会社様は、クラウドから簡単に、確実にメールを送信することができる BtoB 向けのメール配信サービス「 Customers Mail Cloud 」を提供している会社です。
さらなるお問い合わせ増加や資料ダウンロード増加のためにリスティング広告運用をはじめとするデジタルマーケティングに取り組まれております。

課題

広告キーワードと LP でミスマッチが生じていた

施策

獲得に強い構成で独立した広告用LPを作成

結果

お問い合わせCV　31％向上
無料トライアルCV　　82％向上
資料ダウンロードCV　　159％向上

今回の記事では、ファーストビューの概要や作成ポイント、デザイン例を交えて解説しました。

ファーストビューはウェブデザインやユーザーエクスペリエンスにおいて重要な要素であり、訪問者の最初の印象を形成する役割を果たします。そのため、魅力的なデザインとわかりやすいコンテンツが必要です。モバイルファーストの原則に従い、小さなスクリーンサイズやタッチ操作に対応した最適な体験を提供することが重要です。定期的なテストと最適化を通じて、効果的なファーストビューを作成し、ウェブサイトの成功に貢献しましょう。

また、ファーストビューを改善するためには、ページ内のユーザーの行動を可視化できるヒートマップ、現状分析を行い仮説を立てて検証するABテスト、それらPDCAを高速に回すことのできる「SiTest」が解決します。

無料トライアルも実施中のため、是非ご相談ください。

無料トライアルはこちら
サービス概要資料のダウンロードはこちら