ファーストビューとは？LPの離脱を防ぐ5要素とチェックリスト
目次
ファーストビューとは、LPなどのページを開いたときにスクロールせずに見える最初の1画面のことです。広告のクリック数は悪くないのにLPに来た人がすぐ帰ってしまう場合、原因の多くはここにあります。その仕事は商品を説明しきることではなく、「自分のためのページだ」と数秒で判断してもらい、スクロールしてもらうことです。以下では重要な理由をデータで確認したうえで、入れるべき5つの要素、作り方の手順、コピーのテンプレ、ビジュアルのパターン、NG/OK例、表示速度を含む公開前チェックリスト、改善テストのアイデアを解説します。
01ファーストビューとは？LPで重要とされる理由
ファーストビューは、ページを開いたときにスクロールせずに見える範囲のことです。スマートフォンなら最初の1画面、PCならブラウザの表示領域がそれにあたります。
ファーストビューが重要とされる理由は、ユーザーの注意がページの上部に偏るからです。Nielsen Norman Groupの2018年の視線計測調査では、ページ閲覧時間の57%がファーストビュー（折り目より上）に費やされ、2画面目は17%、それ以降は合計26%でした。さらに、ファーストビュー内でも閲覧時間の65%以上が上半分に集中していたと報告されています。
もう1つ見落とせないのが表示速度です。Googleが公開した調査では、モバイルサイトの読み込みが3秒を超えると、53%の訪問が離脱するとされています（2016年の調査データ）。ファーストビューの中身がどれだけ良くても、表示される前に帰られてしまっては意味がありません。
なお、LPのページ全体をどの順番で組み立てるかについては、別記事「LP構成の作り方」で解説しています。ここでは、その1番目のブロックであるファーストビューの作り込みに絞ります。
02ファーストビューに入れる5つの要素
| 要素 | 役割 | 読み手の中で起きること |
|---|---|---|
| 1. メインコピー | 誰の、何を解決するかを示す | 自分に関係がある |
| 2. サブコピー | 方法・負担・条件を補足する | どうやって？ が解ける |
| 3. メインビジュアル | 結果や利用シーンを見せる | 自分ごととしてイメージできる |
| 4. 信頼の根拠 | 疑いを先回りして下げる | 怪しくなさそう |
| 5. CTA（またはCTAへの誘導） | 次の行動を示す | 何をすればいいかわかる |
この5つに加えて、もう1つ大前提になるのが直前の広告との一貫性です。広告で使った言葉・写真・色味がファーストビューにあると、読み手は「さっきの広告の続きだ」と安心してページにとどまります。
1. メインコピー
読み手の悩みか、得られる結果のどちらかを、具体的な言葉で示します。抽象的なブランドスローガンは、ファーストビューのメインコピーには向きません。
2. サブコピー
メインコピーで生まれた「どうやって？」「自分にもできる？」という疑問に、一文で答えます。期間・手間・価格・対象者などが入ることが多い部分です。
3. メインビジュアル
商品そのものよりも、「使ったあとの状態」や「使っている場面」を見せるほうが伝わる商材が多くあります。人物写真を使う場合は、ターゲットが自分を重ねやすい年代や雰囲気を選びます。
4. 信頼の根拠
導入社数、受賞歴、メディア掲載、資格などを小さく添えます。ただし、事実として示せるものだけに限り、「No.1」などの表示は調査条件を明記できるものに限定してください。
5. CTA
申し込みボタンをファーストビューに入れるかどうかは、流入の温度で判断します。比較検討が進んだ人が多いなら入れたほうがよく、説明が必要な商材なら「詳しく見る」のような誘導やスクロールを促す矢印で十分な場合もあります。
03ファーストビューの作り方（4ステップ）
ファーストビューは、デザインから考え始めると「見た目は整っているのに何のページかわからない」状態になりがちです。次の順番で、言葉から先に決めていきます。
ステップ1. 流入元の広告と、来る人の状態を確認する
どの広告から、どんな言葉を見て来る人なのかを書き出します。広告で約束したこと、使った写真や色味は、ファーストビューに引き継ぐ素材になります。
ステップ2. コピーを3段で決める
後述のテンプレに沿って、上段（対象者・悩み）、中段（得られる結果）、下段（方法・負担・根拠）を文章だけで決めます。この段階で関係者の合意をとっておくと、デザインの手戻りが減ります。
ステップ3. ビジュアルと信頼の根拠、CTAを選ぶ
コピーを補うビジュアルのパターンを選び、事実として示せる根拠とCTAの有無を決めます。要素を足すたびに、メインコピーが一番目立つ状態を保てているかを確認します。
ステップ4. スマートフォンの実機で確認し、テストする
デザインができたら、画面の小さい機種と大きい機種の両方で表示を確かめ、5秒テストと公開前チェックリストで確認します。公開後は1要素ずつ変えて、数字で比べます。
04メインコピーとサブコピーの組み立てテンプレ
ファーストビューのコピーは、次の3段で組み立てると漏れがなくなります。
| 段 | 入れる内容 | 例（架空の経理代行サービス） |
|---|---|---|
| 上段（小） | 対象者または悩み | 経理担当が辞めてしまった、社員30名までの会社へ |
| 中段（大） | 得られる結果 | 月末の締め作業、来月から丸ごとお任せ |
| 下段（小） | 方法・負担・根拠 | 最短5営業日で引き継ぎ。クラウド会計にそのまま対応 |
上段で「自分のことだ」と思わせ、中段で結果を約束し、下段で「本当にできそう」と納得させる流れです。中段だけを大きくし、上段と下段は小さく添えると、ひと目で読める情報量に収まります。
そのまま使えるコピーの型
- 対象者＋結果型：〇〇な人へ。△△が□□になる
- 悩み代弁＋解決型：「〇〇なのに△△」を、□□で解決
- 数字＋結果型：〇日で／〇分で、△△できる
- 比較型：〇〇ではなく、△△を選ぶという選択
- オファー型：初回〇〇円で、△△を試せます
05メインビジュアルの4パターンと選び方
| パターン | 見せるもの | 向いている商材 | 注意点 |
|---|---|---|---|
| 結果訴求 | 使ったあとの状態、変化 | 美容、スクール、BtoBの成果 | 誇張や効果の保証に見せない |
| 利用シーン訴求 | 使っている場面、生活の中 | 食品、日用品、アプリ | 背景の情報量を抑える |
| 商品訴求 | 商品そのもの、パッケージ | 見た目に特徴がある商品 | 何の商品か一目でわかる角度で |
| 人物・権威訴求 | 代表者、専門家、スタッフ | 士業、医療、コンサル | 人物とコピーの関係を明確に |
迷ったときは、「この写真だけを見て、何のページかわかるか」を確認してください。写真が雰囲気づくりだけになっている場合は、コピーとの役割分担を見直します。
06スマートフォンのファーストビューで気をつけること
SNS広告からの流入は、スマートフォンが中心です。PCで作ったデザインを縮めただけのファーストビューは、次のような問題が起きやすくなります。
- メインコピーが小さくなりすぎて、ひと目で読めない
- 画像の中に文字を入れたため、縮小で潰れて読めない
- ヘッダーやバナーが画面の上部を占領し、肝心のコピーが下に押し出される
- ボタンが小さく、指で押しにくい
スマートフォンの画面幅は機種によって異なるため、特定の1台だけでなく、画面の小さい機種と大きい機種の両方で確認するのが確実です。ボタンなどのタップ対象については、Webアクセシビリティの国際ガイドラインWCAG 2.2で、最低24×24 CSSピクセルという基準が示されています。CTAボタンはこれを大きく上回るサイズにしておくと安心です。
07ファーストビューのサイズの考え方
ファーストビューとして見える範囲は、端末の画面サイズやブラウザの表示領域で変わるため、全員に共通する「正しいサイズ」はありません。次の手順で、自社のLPにとっての基準を決めるのが現実的です。
- 実際の来訪者の画面サイズを調べる：アクセス解析ツールで、LPに来ている人の端末と画面解像度の内訳を確認する。SNS広告からの流入なら、多くはスマートフォンになる
- 確認する画面を決める：内訳の上位から、画面の小さい機種と大きい機種を選び、その両方で最初の1画面を確認する
- 一番小さい画面に要素を収める：メインコピーとCTA（またはスクロールを促す要素）は、画面の小さい機種でもスクロールせずに見える位置に置く
- ブラウザの表示領域を差し引く：アドレスバーやSNSアプリ内ブラウザのバーで、実際に見える高さは画面の高さより短くなる。デザインツールの画面ではなく、実機で確かめる
画像を大きくしてファーストビュー全体を埋めるデザインは、画面の小さい機種でコピーが下に押し出されやすくなります。サイズで迷ったら、「一番小さい画面で、メインコピーが読めるか」を基準にしてください。
08ファーストビューのNG例・OK例の比較
| 項目 | NG | OK |
|---|---|---|
| メインコピー | 未来を創る、新しい経理のかたち | 月末の締め作業、来月から丸ごとお任せ |
| 対象者 | 書いていない | 社員30名までの会社へ |
| ビジュアル | 抽象的なイメージ画像 | 経理担当が定時で帰る様子 |
| 信頼の根拠 | 「業界No.1」（条件なし） | 事実として示せる資格や実績を小さく |
| 広告との一致 | 広告と別の写真・別の言葉 | 広告と同じ写真・同じキーワード |
| 情報量 | 特徴を5つ並べる | 結果を1つに絞り、残りはスクロール後へ |
| 表示 | 大きな動画や画像で読み込みが遅い | 画像を軽量化し、先にコピーが表示される |
09ファーストビューの「5秒テスト」
完成したファーストビューは、関係者以外の人に5秒だけ見せて、次の3つを答えてもらうと客観的に確認できます。
- 何のページだと思ったか
- 誰向けのページだと思ったか
- 次に何をすればいいと思ったか
3つとも狙いどおりに答えられれば合格です。答えがばらつく場合は、メインコピーの具体性か、ビジュアルとコピーの関係に問題があります。社内の人は商品を知っているため判定が甘くなりがちです。できるだけ商品を知らない人に見てもらってください。
10ファーストビューの公開前チェックリスト
- 直前の広告と同じキーワード・写真・色味が入っているか
- 誰向けのページか、メインコピーの上段か中段でわかるか
- 得られる結果が、具体的な言葉で書かれているか
- メインビジュアルだけを見て、何のページか想像できるか
- 信頼の根拠は、事実として示せるものだけか
- スマートフォンの小さい画面でも、メインコピーが改行で崩れていないか
- 画像内の文字が、縮小されても読める大きさか
- CTAボタン、またはスクロールを促す要素があるか
- ボタンは指で押しやすい大きさか
- 回線が遅い状態でも、コピーが早めに表示されるか
11ファーストビューの改善テストのアイデア
ファーストビューは、LPの中でも数字が動きやすい場所です。改善するときは、1回に1つの要素だけを変えて比べます。
| 変える要素 | Aパターン | Bパターン |
|---|---|---|
| メインコピーの切り口 | 結果を約束する | 悩みを代弁する |
| 対象者の明示 | なし | 上段に「〇〇な方へ」を追加 |
| ビジュアル | 商品写真 | 利用シーンの写真 |
| 信頼の根拠 | なし | 実績や資格のバッジを追加 |
| CTA | ファーストビューにボタンなし | ボタンあり |
| オファーの見せ方 | 価格を出さない | 初回価格を出す |
テストの結果は、ファーストビューからの離脱率（またはスクロール率）と、最終的なCVRの両方で見ます。スクロール率が上がってもCVRが下がる場合は、期待をあおりすぎて後半とずれている可能性があります。
テストで見落としやすいのは、広告側の変化です。テスト中に広告の素材や配信先が変わると、LPの差なのか、来る人が変わったのかを区別できません。広告とLPの担当が分かれている場合は、変更の予定を共有しておく必要があります。また、ファーストビューを直しても最終のCVRが動かないときは、広告で集めている人や、フォーム、LINE登録といったその先の段階に原因があることも考えられ、1画面目だけを直し続けても解決しません。
テキストと画像を自分で差し替えられるLPなら、コピーの比較は自社で十分に回せます。修正のたびに制作会社やデザイナーへの依頼が必要な体制だと、テストの間隔が空きやすいため、どこまで社内で編集できるかも確認しておきましょう。
12よくある質問
Q. ファーストビューに動画を使ってもいいですか
使えますが、読み込みの遅さと、動画が再生されない環境への配慮が必要です。動画が表示される前でもコピーが読める状態にしておき、動画は補足として扱うのが安全です。
Q. ファーストビューにCTAボタンは必須ですか
必須ではありません。比較検討が進んだ人が多い流入ではボタンがあったほうが有利なことが多く、説明が必要な商材ではスクロールを促す設計のほうが合う場合もあります。A/Bテストで判断するのが確実です。
Q. 広告ごとにファーストビューを変えるべきですか
訴求の軸が大きく違う広告を出しているなら、ファーストビューだけでも出し分ける価値があります。中盤以降を共通にしておけば、運用の負担は大きく増えません。
13まとめ
- ユーザーの注意はページ上部に偏るため、ファーストビューが続きを読むかどうかを左右する
- 入れる要素は、メインコピー・サブコピー・ビジュアル・信頼の根拠・CTAの5つ。大前提は広告との一貫性
- 作り方は「広告の確認 → コピー → ビジュアル・根拠・CTA → 実機確認」の順。コピーは「対象者 → 結果 → 方法と根拠」の3段で組み立てる
- サイズに正解はないため、来訪者の画面サイズを調べ、一番小さい画面でメインコピーが読めるかを基準にする
- 完成したら5秒テストとチェックリストで確認し、表示速度とスマートフォンでの見え方も必ず確かめる
- 改善は1要素ずつ。スクロール率とCVRの両方で判断する
広告で生まれた期待を最初の1画面で受け止められているか、まずはそこから見直してみてください。Lic.では、広告のクリエイティブとLPのファーストビューを分けずに設計しています。
広告のクリックはあるのに、申し込みが増えない？
広告運用を前提に、離脱防止の設計までふくめたLPや、配信用の広告クリエイティブを制作します。公開後も、配信データをもとに改善を続けます。
- 離脱防止まで考えたLP制作
- 配信用の広告クリエイティブ制作
- 配信データをもとにした継続的な改善
まだ具体的に決まっていない段階のご相談も歓迎です。
参考
- Nielsen Norman Group「Scrolling and Attention」 https://www.nngroup.com/articles/scrolling-and-attention/
- Think with Google「Find out how you stack up to new industry benchmarks for mobile page speed」 https://thinkwithgoogle.com/intl/en-gb/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks
- W3C「Understanding Success Criterion 2.5.8: Target Size (Minimum)」 https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- 消費者庁「表示に関する実態調査（No.1表示に関する実態調査報告書）」 https://www.caa.go.jp/policies/policy/representation/fair_labeling/survey
