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

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

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

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

目次

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

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

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

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

ファーストビューと混同されやすい言葉に「メインビジュアル」や「アイキャッチ」があります。
メインビジュアルは、ウェブサイトのファーストビュー内に配置される大きな画像や動画のことです。アイキャッチも同様に、ユーザーの目を引くための視覚的な要素を指します。

つまり、ファーストビューは「画面に表示される領域全体」を指すのに対し、メインビジュアルやアイキャッチは「ファーストビューを構成する画像などの要素の一部」という違いがあります。

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

主に以下の 4 つの要素で構成されます。

ヘッドコピー

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

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

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

CTA（行動喚起）

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

権威付け

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

ファーストビューのサイズは、デバイスのディスプレイの大きさを意識する必要があります。
デバイスによって最適な画像サイズは異なりますので、制作するウェブサイトのターゲットや事前情報、競合分析をしてデザイン制作するように心掛けましょう。
※画像を使用する場合は alt 属性を必ず記述し、ファイルサイズは 100 KB 以下を目指すようにしてください。

パソコン（ PC ）の推奨サイズ

パソコン（以下、 PC ）で最もよく使われているディスプレイの解像度は、横 1920 px × 縦 1080 px です。
しかし、ブラウザのメニューバーやタスクバーの領域を考慮すると、実際にファーストビューとして表示される高さの目安は 600 px から 700 px 程度になります。
重要な情報は、この高さに収まるように配置することが推奨されます。

スマートフォンの推奨サイズ

スマートフォンで主流となっているディスプレイの解像度は、横 375 px × 縦 667 px です。
機種によって縦の長さは大きく異なりますが、横幅は 375 px を基準に設計し、縦幅はスクロールされることを前提に、上部に重要な要素を配置することが重要です。

広告や SEO 対策をしてどんなに集客しても、ユーザーがファーストビューを見て直帰してしまっては、本末転倒です。
ここでは、ファーストビューがウェブサイトの成果に与える影響について解説します。

ユーザーは最初の 3 秒で離脱を判断する

ユーザーがウェブサイトを訪れて、そのまま閲覧するか離脱するかを決める時間は 3 秒とも言われています。
ユーザーはウェブサイトを訪れて 3 秒以内にウェブサイトの雰囲気やコンテンツを見て魅力を感じるか否かを判断していると考えられます。
そのため、ファーストビューにおいて短時間で伝えたいことが伝えられるような構成にする必要があります。

直帰率や CVR への影響

ファーストビューでウェブサイトを離れてしまう割合（直帰率）は高く、 LP で 70 ％以上、コーポレートサイトで 40 ％～ 60 ％が平均とされています。
ファーストビューが魅力的で分かりやすければ、ユーザーは滞在し、他のコンテンツも探しにいくでしょう。
逆に、興味を引かなければ、他のウェブサイトに移動してしまう可能性が高まり、コンバージョン率（以下、 CVR ）の低下につながります。

なお、直帰率の目安や改善策については、以下の記事でも詳しく解説しておりますので、あわせてご覧ください。
ランディングページの直帰率はどれくらいが適正？改善方法と考え方について解説

当社でも LPO のコンサルティングをサービスとして提供しており、広告や自然検索を通じて LP に訪れたユーザーに対し最適な訴求や導線設計を行うことで、 CVR の向上を目指します。

Web サイトの制作で成功するために、押さえておきたい6つのポイントを紹介します。
これからウェブサイト制作に携わる方、現在ウェブサイトのデザイン制作で悩まれている方に確認してほしいポイントです。

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

■ 事例：株式会社nobitel

ストレッチ専門店「Dr.stretch」を運営する株式会社nobitelのサイトでは、大自然の中で体を動かす人たちの写真が画面いっぱいに広がります。
企業が大切にする「健康」や「活気」といったイメージを、言葉ではなく直感的に伝えている好例です。写真の開放感が、ユーザーを惹きつけます。

出典：株式会社nobitel

ブランドの一貫性は、ブランドの第一印象を形成する場でもあり、ロゴやカラーパレット、フォントなど一貫性を保つ必要があります。
ウェブサイト全体でのトーン＆マナーを統一することで、ユーザーに安心感と信頼感を与えられます。

■ 事例：BULK HOMME（バルクオム）

メンズスキンケア「バルクオム」のサイトでは、商品のパッケージや濃密な泡を画面全体に大きく配置し、言葉に頼らず「清潔感」や「心地よさ」を表現しています。
特に、白と黒を基調としたシンプルな配色をサイト全体からパッケージまで徹底しており、どこを見ても一目で同ブランドと分かる強い統一感が生まれています。

出典：BULK HOMME（バルクオム）

ターゲットとなるユーザーに対して何を伝えたいのか訴求内容を絞って、情報を端的に伝える必要があります。
例えば、ユーザーが抱えている悩みや、得られるメリット、安心・安全などがあります。
専門用語の多用は避け、ユーザーがウェブサイトを訪れた瞬間に「自分にとって有益な情報がある」と理解できる分かりやすい言葉選びを心掛けましょう。

■ 事例：MOGU

リラックスグッズを展開する「MOGU」のサイトは、視覚的に商品の魅力をアピールしつつ、ユーザーの悩みやメリットを端的なテキストで伝えています。
情報を詰め込みすぎず、ターゲットに向けた訴求内容をしっかりと絞り込んだ、分かりやすいメッセージ配置のお手本となるレイアウトです。

出典：株式会社MOGU

ウェブ広告やコンテンツなどを見た人に、次のステップに進むよう行動喚起するものです。
具体的には、以下のようなものが CTA として使われます。

一目でボタンと分かるデザインにして、クリックしやすい位置に配置することが重要です。

■ 事例：SiTest

ウェブ解析ツール「SiTest」のサイトでは、落ち着いた青色の背景に対し、一番目立たせたい「まずは無料でトライアル」のCTAボタンに鮮やかな黄色を使用しています。
サービスの特徴を説明するテキストのすぐ下に配置されており、興味を持ったユーザーを迷わずスムーズに次のアクションへ導く工夫がされています。

出典：株式会社グラッドキューブ SiTest

ファーストビューはデバイスに合わせたサイズに調整する必要があります。

どのデバイスからアクセスしてもレイアウトが崩れず、重要な情報が見切れないようにレスポンシブデザインを取り入れましょう。

画像の容量は小さくし、ページの読み込みスピードを改善しましょう。
ページ流入後、内容の読み込みが遅く表示に時間がかかれば、直帰や離脱につながります。
また、ページスピードは広告の品質スコアにも影響があり、品質スコアが改善されることで、広告ランクが上がり上位掲載されるなどのメリットもあります。

基本的には通常のウェブサイト改善と変わらず、以下の手順で進めます。

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

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

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

仮説を立てる際は当社サービスの SiTest（サイテスト） を活用することが可能です。
ヒートマップ機能を用いると、注目されている個所とされていない箇所が視覚的に色で分かります。

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

しかし、「ヒートマップで現状は分かったけれど、そこからどう仮説を立てて具体的な改善策を考えればいいか分からない…」と悩む方も多いのではないでしょうか。

そんな時に役立つのが「AI診断」です。
AI診断なら、ヒートマップの分析データをもとに、サイトの課題発見から具体的な「改善策の提案」までAIが自動で行ってくれます。

分析に時間をかけず、すぐに次のアクションへ移りたい方はぜひご活用ください！

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

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

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

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

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

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

伝えたいことが多すぎてテキストが多くなり結局何を伝えたいのか分からなくなるケースもあります。難しい言葉や英語表記を使うと、検索してきたユーザーが知りたい内容と合わない可能性があるため注意が必要です。
また、複数の画像を横にスライドさせて切り替える「スライダー」機能を多用するケースにも気をつけましょう。 スライダーは一見便利ですが、 2 枚目以降の画像はユーザーから見られにくく、重要な情報が見落とされる原因になります。
ユーザーにとって分かりやすい内容を厳選し、整理して伝えましょう。

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

ななし株式会社様は高級時計のレンタルサービス「 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％向上

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

ファーストビューはウェブデザインにおいて重要な要素であり、訪問者の最初の印象を形成する役割を果たします。そのため、魅力的なデザインとわかりやすいコンテンツが必要です。定期的なテストと最適化を通じて、効果的なファーストビューを作成し、ウェブサイトの成果に貢献しましょう。

また、ファーストビューを改善するためには、ページ内のユーザー行動を可視化できるヒートマップ、現状分析を行い仮説を立てて検証する A/B テストが効果的です。これら PDCA を高速に回すことのできる SiTest（サイテスト） がウェブサイトの課題を解決します。
無料トライアルも実施中のため、是非ご相談ください。

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