コンテンツを増やし、デザインも刷新した新しいLPが、なぜか古いLPに負ける——珍しいことではない。デザイナーにとっては苦労が水の泡に思える結果だが、原因の多くは1か所、ページの入口であるファーストビューにある。
ユーザーはページを開いて数秒で「続きを読むか」を判断する。ここで心をつかめなければ、どんなに改善した下層コンテンツも見られない。情報を詰め込みすぎたり、デザインを優先して価値が伝わらなかったりすると、フルリニューアルでも成果を落とす。だからこそ、作り直す前にまずファーストビューだけを改善するのが空振りしない近道だ。実際、伸び悩んでいたLPがファーストビューの改善だけでCVRが約2倍になった例もある。本稿では、ファーストビューを効かせる7つの要素を解説する。
メインコピー——シンプルに、便益から
メインコピーはLPで最初に目に入る言葉で、ファーストビュー最重要の要素だ。「何のサービスで、どんな強みか」が一瞬で伝わらなければ、スクロールされずに離脱される。研ぎ澄ますには3条件。ベネフィット——機能ではなく、使って得られる未来を語る。「豊富な講座数のオンライン英会話」より「毎日10分で英語が自然に話せる」。独自性——自社だけの強みを一言で。「転職支援サービス」より「未経験からのエンジニア転職に強い転職サービス」。分かりやすさ——専門用語を避け、ターゲットが使う言葉で、理想は2行以内・15〜20文字。「クラウドベースのナレッジマネジメントプラットフォーム」より「社内の情報を1分で探せるツール」。脳は長い文章に出会うと「労力がかかりそう」と判断してスルーするので、冗長なコピーは読まれる前に離脱を招く。まずは自社のメインコピーが便益をシンプルに伝えているかを確認したい。
呼びかけコピー——「自分ごと化」を促す
サービスの特徴を伝えるだけでは足りない。ファーストビューには「これは自分のことだ」と思わせる共感のきっかけが要る。有効なのが、ユーザーの悩みや「こうなりたい」を代弁する呼びかけだ。ポイントは、心をつかみつつ間口を狭めすぎないこと。抱える課題や理想の未来を言葉にすると心理的距離が一気に縮まる。「面接に自信が持てないあなたへ」「強みを持って働きたい方へ」のような一文だ。メインコピーの上か下に、少し小さめに置くと自然に目に入る。
反対側にも注意したい。ペルソナを意識しすぎると潜在顧客を取りこぼす。プログラミングスクールの「初めてのプログラミングはこのスクールで」は、すでに少し学んだ層に響かないかもしれない。「未経験からでも実務で使えるスキルが身につく」なら、初心者に向けつつキャリアアップ層にも届く。共感と間口の広さは時に相反するので、メインコピーとのバランスを取りながら、適度に広く共感を呼びつつターゲットに刺さる表現を心がける。
サブコピー——強みを端的に示す
呼びかけで自分ごと化を促したら、サービスの強みを端的に伝え、スクロールの動機づけをする。ユーザーにとってのメリットや安心できる理由を短く示すのがサブコピーだ。エンジニアスクールなら「受講生の92％が未経験からスタート」（安心感）、「会員数10万人突破」（社会的証明）、「充実の就職・転職サポート」（具体的メリット）など。呼びかけとサブコピーの順序は逆でも問題ない。片方を呼びかけにするなら、もう片方をサービスのメリットを端的に伝えるコピーにすると情報が整理され、「自分ごと化」と「強み」が両方伝わる。
ヒーロー画像——ビジュアルでも自分ごと化させる
ファーストビューに大きく置くメインビジュアルを「ヒーロー画像」と呼ぶ。開いた瞬間に最初に目に入り、「自分に関係あるか」を直感的に判断する材料になる。選ぶ鍵は、ユーザーが自分を投影できる場面をイメージさせること。3つの型がある。利用シーンは第三者がサービスを使う姿を見せ、「自分も使えるかも」と想像させる（決済アプリなら支払う姿）。UIは実際の画面を見せ、「自分がこの画面を操作する」状況をシミュレートさせる。より主観的な体験感を与えやすく、利用イメージの湧きにくい無形商材やBtoBに向く（法人向けSaaSの管理画面など）。理想の未来は利用後のポジティブな状態を見せ、自分を未来に投影させる（転職後に笑顔で働く姿など）。導入前に触れる機会が少ない商材は利用シーンやUIを、すでに知られた商材は理想の未来を優先すると効果的だ。
写真・イラスト・動画のどれにするかは悩みどころで、最終的にはA/Bテストで決めるのがよいが、傾向はある。写真はリアルさ・信頼感・理想の未来の想像に効き、転職・医療・美容など「人」に関わるサービスと相性がいい。イラストは親しみやすさや柔らかさを出せ、ITや教育、若年層向けに向く。動画は静止画では伝わりにくい操作感や臨場感、ストーリー性を表現でき、より具体的な体験イメージを与えられるが、読み込みが遅く離脱リスクもある。いずれもサービス特性とブランドイメージに合うかで決める。
信頼性・権威性を一目で伝える
「このサービスは安心できる」と直感的に感じてもらうことも、行動を大きく左右する。第三者や多数に支持されている「信頼性・権威性」を示せると成果は改善しやすい。これは心理学でいう社会的証明（Social Proof）——人は「他の人が選んでいるものは正しい」と無意識に判断するため、実績や第三者評価が強い安心材料になる。「累計◯万人が利用」「満足度◯％」のような具体的な数値は抽象表現より説得力を持つ。受賞歴や公的認定は、文章よりバッジやアイコンで視覚的に示すと瞬時に伝わる。導入企業のロゴはファーストビュー下部に配置すると効果的で、一部が見切れていても印象を残せる。有名企業のロゴは「この会社も使うなら安心」とBtoBの信頼獲得に直結する。
注意点が一つ。信頼性を示すときは必ず数字や情報の出典を明記する。誇張や根拠のない表現は信頼を失うだけでなく罰則の対象にもなり、「◯◯ランキングNo.1」には根拠となる第三者機関の調査が要る。健康食品・化粧品・美容は薬機法など各種法令の規制がかかる場合があるので、掲載前の法的チェックが望ましい。信頼性訴求は事実に基づく必要があり全広告主が使えるわけではないが、示せる実績や評価があるなら、不安を取り除き行動を後押しする強力な要素になるので積極的に取り入れたい。
CTAボタン——「次の行動」を具体的に示す
CTA（Call To Action）ボタンは、次にどう行動すればいいかを示す最重要の要素だ。ここが分かりにくいと、せっかくの興味が行動につながらず離脱を招く。ポイントは行動を具体的にイメージできるか。「無料登録」のような抽象的な文言はクリックされにくい。押した次に起こることが想像しにくいからだ。「無料会員登録して求人を探す」「今すぐ診断を受ける」のように次にできることを具体的に示すと行動に移してもらいやすい。これは心理学の実行意図（implementation intention）に近く、「押せば何が起きるか」が明確になることで意思決定の負荷が下がる。ボタン上に「かんたん登録1分」などのマイクロコピーを添えるだけでも心理的ハードルが下がり、クリック率が上がることがある。
大前提として、CTAボタンはファーストビュー内に置く。スクロールしないと見えない位置では、「今すぐ試したい」ユーザーを取りこぼす。目立つ位置・色・デザインにし、背景に溶けないようキーカラーと異なる色を使い、ドロップシャドウで「押せるボタン」だと視覚的に伝える。文言はすべて同じにせず、セクションに合わせる——求人紹介なら「登録して求人を探す」、無料面談の紹介なら「無料面談に申し込む」のように。
視線の動きと余白を設計する
ファーストビューのデザインは、ただきれいに見せるだけでなく、視線の流れ・余白・レイアウトを意識することで成果が変わる。人の視線は「Z型」「F型」に流れるとされるので、メインコピー→サブコピー→CTAボタンへ自然に移るよう配置する。情報を詰め込みすぎると読みにくく直帰率が上がるので、余白を活かして視覚的に整理し、伝えたい要素を際立たせる。利用者数・受賞歴・導入企業ロゴは社会的証明になるため、CTAやメインコピーの近くに置くと、ユーザーが安心して行動に移しやすい。
まずは、今すぐ直せるところから
新しいLPが古いLPに負けるのは「失敗」ではなく、改善のヒントを見つけるチャンスだ。ファーストビューの要素を一つずつ見直すだけで成果は大きく変わりうる。大事なのは、結果に落ち込まず改善サイクルを回し続けること。LPを開いて5つを書き出してみたい——メインコピーは便益と独自性をシンプルに伝えているか、呼びかけは共感を得られるか、サブコピーは強みを端的に伝えているか、ヒーロー画像は自分ごと化しやすいか、CTAは次の行動が分かりやすくマイクロコピーを工夫しているか。そのなかから「今すぐ直せそう」なものを一つ選んで変えてみる。小さな改善でもCVRがぐっと上がることはよくある。進めるうちにLP全体の方向性も整理され、次の改善点が見えてくるはずだ。
.webp)
.webp)
