CVRを決めるLPの情報設計：ファーストビューの型

ランディングページのCVRは、デザインの美しさではなく情報の並び順で決まります。特にファーストビューは、訪問者が離脱するかどうかを判断する数秒間を担っています。同じ写真、同じ色、同じフォントでも、置く順番を変えるだけで結果が変わります。逆に言えば、並び順が間違っているLPは、デザインを作り直しても改善しません。

ファーストビューの設計は、センスの問題ではなく情報の優先順位を決める作業です。訪問者が知りたい順に並べる。それだけです。にもかかわらず難しく感じるのは、作る側が伝えたい順に並べてしまうためです。会社の想い、こだわり、技術力。これらは訪問者が3番目以降に知りたい情報であり、最初に置くと離脱の原因になります。

ここでは、ファーストビューに何を、どの順で、どの粒度で置くのかを、社内でそのまま使える判断基準として整理します。表示速度の改善やサイト全体の設計は扱わず、1ページの中の情報の並びだけに絞ります。

3秒で答えるべき3つの問い

訪問者が無意識に確認しているのは、次の3点です。

1. これは何のページか
2. 自分に関係があるか
3. 次に何をすればよいか

この3つに答えていないファーストビューは、どれだけ作り込んでも離脱します。キャッチコピーが抽象的で「何のページか」が分からない、というのが最も多い失敗です。

3つの問いは、それぞれ担当する要素が違います。1つ目はキャッチコピーとページ見出し、2つ目はターゲットの明示と課題の言語化、3つ目はボタンの文言です。1つの要素で2つ以上の問いに答えさせようとすると、どちらも伝わらなくなります。「業界No.1の品質で、御社の課題を解決します」という一文は、3つのどれにも答えていない典型例です。

型

実務では、次の順序で構成すると外しにくくなります。

• 誰のためのページか（ターゲットの明示）
• 何が得られるか（ベネフィットを具体的な数字で）
• なぜあなたなのか（差別化の一行）
• 行動（ボタン1つ。迷わせない）

補足として、実績数値や取引社数をボタンの近くに置くと、行動直前の不安を下げられます。ただし根拠を示せる数値に限ります。出典のない「満足度98%」は、かえって信用を落とします。

この4要素を縦に積むと、上から読んだときに「自分のことだ」「これが手に入る」「ここに頼む理由がある」「では押そう」という流れができます。順番を入れ替えると、この流れが途切れます。よくあるのは、差別化の一行を最上部に置いてしまうケースです。まだ自分に関係があると分かっていない相手に差別化を語っても、比較の土台がないため意味を持ちません。

ターゲットの明示は「絞るほど広がる」

ターゲットを絞ると反応が減る、という懸念は実務上ほぼ逆に働きます。絞った表現のほうが、該当する人に強く刺さり、該当しない人が早く離脱するため、問い合わせの質が上がります。

絞り方には段階があります。抽象的な順に並べると、下に行くほど反応が具体的になります。

4段階目まで絞っても、問い合わせ総数が減らないことは珍しくありません。減るのは、もともと受注に至らなかった相談です。母数ではなく、商談化率で評価すると、絞ることの効果が見えます。

絞る軸は、次の4つから選ぶと言葉になりやすいです。

• 業種・職種（誰が読んでいるか）
• 規模（従業員数、売上、店舗数など、読者が自分で判定できる数値）
• 状況・タイミング（今まさに困っている場面）
• すでに試したこと（「代理店に任せてみたが成果が出ない方へ」など）

4つ目は反応が強く出やすい軸です。過去に失敗した経験に触れると、読み手は「この人は事情を分かっている」と受け取ります。ただし、他社を批判する書き方にすると印象が悪化するため、状況の描写にとどめます。

キャッチコピーは「動作」か「数値」で書く

キャッチコピーが機能するかどうかは、読んだ人が具体的な場面を思い浮かべられるかで決まります。形容詞と抽象名詞だけの一行は、場面を作れません。

書き換えの例を挙げます。

書き換え前：お客様に寄り添う、最適なWebソリューションをご提供します

書き換え後：問い合わせが月3件から12件に増えた、製造業向けのLP改善

後者には、変化の前後（3件→12件）、対象（製造業）、手段（LP改善）が入っています。読み手が自社に置き換えて計算できる状態になっていることが条件です。

数値が出せない場合は、動作で書きます。「寄り添う」ではなく、具体的に何をするのかを書きます。

書き換え前：親身なサポート体制

書き換え後：初回は3時間、現場を見てから提案します

なお、自社の実績数値を使う場合は、条件を添えるほうが信用されます。「ROAS 1,034%」と書くだけでは疑われますが、どの業種で、どの期間で、何をした結果なのかを1行添えると、検証可能な情報として読まれます。数値の大きさより、検証できる形になっているかが信用を左右します。

ボタンは1種類に絞り、文言で行動の重さを下げる

ファーストビューに置くボタンは1種類にします。2種類以上あると、訪問者は「どちらが自分向けか」を考える作業を強いられ、その場で判断が止まります。

電話とフォームを併記したい場合は、フォームをボタンにし、電話番号はボタンの下に小さく添える形にします。同じ大きさで並べると、選択のコストが発生します。

文言は、押した後に何が起こるのかが分かる形にします。行動の重さの順に並べると次のようになります。

広告から流入させる場合、検討段階が浅い層が多くなります。その場合は下の2つのように、人と話さずに済む出口を用意したほうが反応が取れます。ただし、獲得した連絡先をその後どう扱うかを決めていないと、件数が増えただけで受注は増えません。

スマートフォンでは「縦の順番」が型になる

スマートフォンでは横並びのレイアウトが崩れるため、要素を縦に並べたときの順番が、そのまま情報の優先順位になります。PCで作った配置をそのまま縮小すると、意図した順番と違う順で読まれます。

実機で確認する項目は次のとおりです。

1. スクロールせずに見える範囲に、ターゲットの明示とキャッチコピーが両方入っているか
2. ボタンが、最初の画面内に少なくとも一部見えているか
3. ロゴとグローバルメニューが、画面の上半分を占めていないか
4. キャッチコピーの文字が、画像の上に乗って読みにくくなっていないか
5. 1行の文字数が長すぎず、折り返しが不自然な位置で起きていないか

3つ目は見落としが多い箇所です。企業サイトの体裁を整えようとして、ロゴ・メニュー・お知らせバーを上部に積むと、最初の画面がほぼ案内表示だけで埋まります。LPに限っては、グローバルメニューを置かない選択も十分に成立します。移動先が増えるほど、フォームまで到達する割合は下がるためです。

ファーストビュー直後の3ブロックまでが1セット

ファーストビューは単体では完結しません。スクロール直後の3ブロックまでが、実質的に一続きの説得単位です。ここで情報が途切れると、ファーストビューで作った期待が消えます。

順番の基本形は次のとおりです。

• 1ブロック目：課題の言語化。 訪問者が抱えている状況を、こちらの言葉で並べます。「自分のことだ」という確認を取る役割です
• 2ブロック目：解決の手段と根拠。 何をするのか、なぜそれで解決するのかを説明します
• 3ブロック目：実例。 具体的な事例を1件、条件込みで示します。抽象的な強みの列挙より、1件の具体例のほうが効きます

この3ブロックを飛ばして、いきなり料金表やサービス一覧を置くLPは反応が鈍くなります。訪問者はまだ「自分に必要か」を判断していない段階であり、価格を見る準備ができていません。

流入元の言葉と、ファーストビューの言葉を一致させる

広告や検索から来た人が最初に確認しているのは、クリックする直前に読んだ言葉が、着地したページにあるかどうかです。ここが一致していないと、内容が良くても「違うページに来た」と判断されます。

具体的には、次のような不一致が離脱を生みます。いずれも、LP単体を見ている限り気づけません。

• 広告文は「格安」を打ち出しているが、LPには価格が一切書かれていない
• 広告文は「製造業向け」だが、LPのキャッチコピーは「すべての企業様へ」になっている
• 検索キーワードは「料金」だが、着地するのはサービス紹介ページで、料金への導線が下部にしかない
• 展示会で配った資料の言葉と、QRコードの着地先の言葉が違う

確認の手順は単純です。広告の見出し・説明文と、LPのファーストビューを並べて、同じ単語が使われているかを目で照合します。広告を複数パターン出している場合は、パターンごとに着地先を分けるか、少なくとも最も配信量の多いパターンに合わせます。

検索流入の場合は、Search Consoleで実際の検索語を確認します。「料金」「費用」を含む語で流入しているのに、ファーストビューに費用の目安がないページは、言葉の不一致が起きている状態です。費用を明示できない場合でも、「30万円から」「要件により変動」といった範囲だけは示すほうが離脱は減ります。

入れない要素を先に決める

ファーストビューの設計は、足す作業よりも削る判断のほうが成果に直結します。置ける情報量には物理的な上限があり、要素が増えるほど1つあたりの伝達力が下がります。

ファーストビューに入れない要素として、実務では次を基準にしています。

判断に迷う場合の目安として、その要素を削ってCVRが下がるかどうかを説明できないなら、ファーストビューには置かないという基準を使っています。装飾としての情報は、上部ではなく下部に移すほうが、全体の到達率が上がります。

検証は要素を1つずつ入れ替える

改善の検証は、ファーストビューだけを対象に、変更点を1つに限って比較するのが基本です。デザイン全面変更で比較すると、どの要素が効いたのか分からないまま終わります。

入れ替える順序は、影響が大きいものから並べると次のようになります。

1. キャッチコピー（同じ内容を、数値ありと数値なしで比較する）
2. ターゲットの明示の有無、および絞り方の段階
3. ボタンの文言（行動の重さを1段変える）
4. ボタンの位置（キャッチコピーの直下か、説明文の後か）
5. メインビジュアルの内容（人物か、作業風景か、成果物か）

判定に必要な期間は、流入量によって変わります。1日あたりの到達数が少ないページで数日間の差を見ても、偶然の範囲を超えません。件数が十分に集まるまで判定を保留するという運用を先に決めておくと、思い込みでの差し替えを防げます。

なお、流入元ごとに反応が違う点も押さえておきます。広告から来た人と、検索から来た人と、名刺のQRコードから来た人では、必要な情報が違います。流入元別に成果を分けて見ないと、平均値で判断してしまいます。

ファーストビューの点検チェックリスト

社内の確認表にそのまま転記できる形で並べます。既存のLPを点検する場合も、新規に作る場合も、同じ順で使えます。

3つの問いに答えているか

1. スクロールせずに見える範囲だけを見て、何のページか5秒で言えるか（社内の別部門の人に見せて確認する）
2. ターゲットが明示されており、読み手が自分で該当判定できる条件になっているか
3. 次にとる行動が1つだけ示されているか

文言

1. キャッチコピーに、数値または具体的な動作が入っているか
2. 形容詞と抽象名詞だけで構成された一行になっていないか
3. 掲載している数値に、業種・期間・条件が添えられているか
4. 根拠を示せない数値が載っていないか
5. 自社の想い・沿革・こだわりが、ファーストビューに入り込んでいないか

行動導線

1. ボタンが1種類に絞られているか
2. ボタンの文言で、押した後に何が起こるか分かるか
3. 電話番号とフォームが同じ大きさで並んでいないか
4. ボタンの近くに、行動直前の不安を下げる情報（実績、所要時間、費用の有無）があるか
5. グローバルメニューによって、ページ外への出口が増えていないか

スマートフォン実機

1. 実機（PCの画面幅縮小ではなく実際の端末）で確認したか
2. 最初の画面内に、ターゲットの明示とキャッチコピーが両方入っているか
3. ボタンが最初の画面内に一部でも見えているか
4. 上部の案内表示（ロゴ、メニュー、お知らせ）が画面の上半分を占めていないか
5. 画像の上に乗った文字が読めるか（明るい画像＋白文字になっていないか）

直後の3ブロック

1. 1ブロック目で、訪問者の課題が言語化されているか
2. 2ブロック目で、解決の手段と根拠が示されているか
3. 3ブロック目で、具体的な事例が条件込みで1件示されているか
4. 料金やサービス一覧が、3ブロックより前に出てきていないか

何から手を付けるか

作り直しから始める必要はありません。キャッチコピーとボタンの文言だけを差し替えるのが、最も工数が軽く、効果が判定しやすい着手点です。

順序としては次のとおりです。

1. 現状の数値を記録する。 流入数、フォーム到達数、送信完了数を、流入元別に控えます。ここがないと改善したかどうかが分かりません
2. ターゲットを1行で書く。 業種・規模・状況の3つを入れ、読み手が自分で該当判定できる条件にします
3. キャッチコピーを数値または動作で書き直す。 変化の前後、対象、手段の3点が入っているか確認します
4. ボタンを1種類に絞り、文言の重さを1段下げる。 「お問い合わせ」から「料金表をダウンロードする」への変更などが該当します
5. スマートフォン実機で確認する。 最初の画面内に、ターゲット・キャッチコピー・ボタンが収まっているかを見ます
6. 件数が集まるまで判定を待つ。 判定の期日を先に決め、それまで触らない運用にします

ここまでで、デザインの作り直しは1度も発生しません。ファーストビューの改善は、文言と順番の作業です。順番を整えたうえで反応が足りない場合に、初めてデザインや写真の検討に進むほうが、費用と時間の使い方として合理的です。