ファーストビューとは？LP で離脱を防ぐ作り方と入れるべき要素

2026 年 11 月 12 日

LP に訪れた人は、最初の数秒で「読み続けるか、閉じるか」を決めています。この最初の判断が行われる画面が、ファーストビューです。どれだけ中身が充実していても、最初の画面で興味を持たれなければ、下まで読まれません。

この記事では、ファーストビューの意味、入れるべき要素、キャッチコピーの作り方、メイン画像と CTA の配置、スマホでの表示範囲、改善の進め方を説明します。表示される範囲は端末で変わるため、実機で確認しながら調整する前提で読んでください。

ファーストビューとは

ファーストビューは、ページを開いたときに、スクロールせずに最初に表示される範囲のことです。印刷物の表紙にあたる部分で、LP の第一印象を決めます。

画面サイズによって範囲が変わる

ファーストビューの範囲は固定ではありません。PC、タブレット、スマホで画面の大きさが違い、スマホでも機種やブラウザのバーの有無で縦の長さが変わります。一般的なスマホでは、縦に表示できる範囲が狭いため、入れられる情報も限られます。

ファーストビューの役割

最初の画面の役割は、次の 3 つを短時間で伝えることです。

何のページか(商品やサービスの内容)
自分に関係があるか(誰のための何か)
次に何をすればよいか(行動の入口)

これらが伝わらないと、読者は戻るボタンを押して離れます。LP 全体の流れの中での位置づけは、LP の構成の記事でも説明しています。

入れるべき要素

ファーストビューには、次の要素を過不足なく入れます。

要素	役割	ポイント
キャッチコピー	一言で価値を伝える	読者の悩みや得られる結果に触れる
サブコピー	キャッチコピーを補足する	対象者や具体的な内容を添える
メイン画像	内容を視覚的に伝える	商品や利用場面が分かるもの
CTA ボタン	行動の入口	押す先が分かる文言にする
ロゴ・サービス名	誰のページかを示す	小さくてもよいが、必ず入れる
信頼の根拠	安心感を与える	実績や受賞歴は、根拠が確認できるものだけ

すべてを入れようとして詰め込むと、読みにくくなります。優先度は、キャッチコピー、CTA、メイン画像の順です。信頼の根拠は、確かな情報があれば小さく添える程度にとどめます。

入れないほうがよいもの

長い文章。最初の画面では読まれない
ナビゲーションのリンクを多数並べること。他のページへ離脱する原因になる
動きの激しい自動再生の動画や、読み込みに時間がかかる素材。表示速度が落ちる
根拠のない「No.1」「最安」などの表現。景品表示法上の問題になる恐れがある

キャッチコピーの作り方

キャッチコピーは、読者が最初に読む文章で、LP の入口です。

考え方の順序

読者の悩みや望みを書き出す。「SNS からの申し込みが増えない」など
商品が提供する価値を 1 文で言う。「リンクを分けて、反応の違いが分かる」など
読者の言葉に直す。専門用語を減らし、日常で使う言葉にする
不要な言葉を削り、短くする

パターンの例

パターン	例
悩みに寄り添う	リンクを貼っても、どこで読まれているか分からない方へ
得られる結果を示す	投稿ごとの反応の違いが、ひと目で分かる
対象を絞る	SNS で商品を紹介するアフィリエイター向け
数字を使う(根拠があるとき)	設定は 3 ステップ

数字は、実際に確認できる事実だけを使います。「利用者 No.1」「満足度 98%」などは、調査の出典と条件を示せないなら使わないでください。

コピーを読み比べる

作ったコピーは、第三者に見せて「何のページだと思うか」を聞くと、伝わり方を確かめられます。自分では分かりきっていることが、初めて見る人には伝わらない場合があります。

メイン画像と CTA の配置

メイン画像

メイン画像は、キャッチコピーと合わせて、商品や結果を想像させる役割を持ちます。

商品そのものか、利用している場面を写す
画像の中に、読ませたい文字を入れすぎない
人物の視線や向きが、CTA や文字へ向かうと、視線が誘導される
ファイルは圧縮して、表示を遅くしない

画像の選び方は、LP デザインの記事で詳しく扱っています。

CTA の配置

CTA は、ファーストビューの中に必ず入れます。スクロールしないと押せない位置にあると、すぐに申し込みたい読者を逃します。

キャッチコピーとサブコピーの直下に置く
背景と区別できる色にする
文言は、押した先の行動が分かるものにする。「無料」と書くなら、実際に無料と言える条件がある場合だけにする
最初の画面に置く CTA は 1 つにして、迷いを減らす

文言、色、大きさの考え方は、CTAの記事を参照してください。

スマホでの表示範囲

スマホでは、ブラウザのアドレスバーや下のバーが画面を占めるため、実際に使える縦の範囲は端末の画面より小さくなります。LINE や Instagram のアプリ内ブラウザでは、上部のバーの形が通常のブラウザと異なります。

確認方法

実機で、主要な機種とアプリ内ブラウザを開いて確認する
ブラウザの開発者ツールの端末表示も使えるが、実機の表示とずれる場合がある
小さい画面の機種でも、CTA が最初の画面に入っているか確認する

スマホの作りのコツ

キャッチコピーは 2 〜 3 行に収める
画像は縦に長くしすぎず、CTA が画面外に押し出されないようにする
文字は読める大きさを保つ。小さくして詰め込まない
画像が読み込まれる前でも、文字と CTA が先に表示されるようにする

スマホ向けの具体的な注意点は、離脱を防ぐ観点とあわせて、別の記事に整理しています。

改善の進め方

ファーストビューは、LP の中で最も改善の効果が出やすい部分です。ただし、勘で変えるのではなく、数字で確認します。

見る数字

直帰率。最初の画面だけで離れた人の割合
CTA のクリック率
スクロール到達率。どこまで読まれているか

ページの種類や流入元により水準は違うため、自分の過去の数字と比べます。

手順

現在の数字を、1 〜 2 週間記録する
変更する要素を 1 つに絞る。キャッチコピー、メイン画像、CTA の文言のどれか
変更前後を比べる。流入元と端末をそろえる
効果があれば残し、なければ戻して別の案を試す

候補を 2 つ作り、同時に配信して比べる方法が、A/B テストです。同じ期間に、同じ条件の読者へ別の案を見せるため、時期の違いによる影響を避けられます。

流入元ごとに分ける

SNS ごとに読者の期待が違うため、同じファーストビューでも反応が変わります。流入元ごとに URL を分けて、クリックの数を比べると、どの媒体にどの訴求が合うかが分かります。

まとめ

ファーストビューは、LP を開いて最初に見える範囲で、読者が読み続けるかを決める場所です。何のページか、自分に関係があるか、次に何をすればよいかを、短時間で伝える必要があります。キャッチコピー、メイン画像、CTA を優先し、長い文章や根拠のない表現は入れません。スマホでは表示範囲が狭くなるため、実機とアプリ内ブラウザで確認し、1 回に 1 つの要素だけを変えて改善してください。

LP を SNS ごとに別の URL で配信し、反応の違いを比べたい場合は、Boostlink が使えます。クリック分析で数字を確認でき、プロプランでは A/B テストにも対応しています。

LP への集客に使える SNS アカウントを探している場合は、アカウントの購入や M&A を扱う Boostshop も選択肢です。購入の際は各プラットフォームの利用規約を確認してください。