LPの構成は、ファーストビュー、共感(課題提起)、解決策の提示、ベネフィット、機能・サービス詳細、実績・事例、社会的証明、料金、FAQ、CTAとフォームの10ブロックが基本形です。この順番には理由があって、読み手の心理が「自分に関係あるか」→「この方法で解決するのか」→「本当に効くのか」→「自分にもできるか」と移っていく流れに合わせています。ただし全部を必ず入れる必要はなく、商材の単価と検討期間によって削るブロックが変わります。

先日、BtoB向けの業務システムを提供している企業から、新規LPの構成レビューを依頼されました。送られてきたワイヤーフレームを見ると、上から順に「会社概要」「サービスの機能一覧」「導入の流れ」「料金表」「お問い合わせ」。

きれいに整理されてはいるのですが、これは会社案内の構成です。LPの構成ではありません。

何が違うかというと、視点の起点です。会社案内は「自社が何者で、何を提供しているか」から始まります。LPは「訪問者がいま何に困っているか」から始めます。この起点がずれていると、どれだけ丁寧に情報を並べても読み進めてもらえません。

基本の10ブロックと、その並び順

まず全体像です。BtoBのリード獲得型LPを想定した標準構成が次の10ブロックになります。

#ブロック役割訪問者の心の動き
1ファーストビュー誰の何を解決するかを一目で伝える「自分向けのページか」
2共感・課題提起訪問者の課題を言語化する「まさにその状況だ」
3解決策の提示サービスがどう解決するかを示す「そういう方法があるのか」
4ベネフィット導入後にどうなるかを描く「そうなれるなら良い」
5機能・サービス詳細中身を具体的に説明する「実際には何をするのか」
6実績・導入事例数値と固有名詞で裏づける「本当に効くのか」
7社会的証明第三者の評価を示す「他社も使っているのか」
8料金・プラン費用の目安を提示する「予算に収まるか」
9FAQ残った不安を先回りで潰す「ここが引っかかる」
10CTA・フォーム行動のハードルを下げる「では問い合わせよう」

この並びで押さえておきたいのは、2と3の位置です。

多くのLPは1のファーストビューの直後に5の機能説明を持ってきます。作り手からすると自然な流れなのですが、読み手はまだ「なぜこれが必要なのか」を理解していない段階です。機能の羅列を読まされても頭に入りません。

課題提起を挟むと、この問題が解消します。「月末の集計作業に毎回3日かかっていませんか」「担当者が退職すると業務が止まる状態になっていませんか」。訪問者が自分の状況として認識してから機能説明に入ると、同じ内容でも受け取り方が変わります。

商材によって型が変わる

10ブロックは基本形であって、そのまま全商材に当てはめるものではありません。実務では3つの型に分かれます。

BtoBリード獲得型(問い合わせ・相談が目的)

10ブロックをほぼフルで使う型です。単価が高く検討期間が長いため、訪問者は慎重に情報を集めます。実績・事例(6)と社会的証明(7)を厚くして、FAQ(9)で稟議の場面を想定した質問に答えておくと、担当者が社内を説得する材料になります。

料金(8)を載せるかどうかは判断が分かれるところですが、目安のレンジだけでも出しておくほうが問い合わせの質は上がります。金額が全く見えないと、予算感の合わない問い合わせが増え、営業側の工数が膨らみます。

資料ダウンロード型(リード情報の獲得が目的)

構成を大幅に削る型です。訪問者が払うコストは「メールアドレスを入力する」ことだけなので、長い説得を必要としません。

ファーストビュー、課題提起、資料の中身(目次レベル)、フォーム。この4ブロックで足ります。実績や料金を長々と説明すると、かえって「営業されそう」という警戒感が出て離脱につながります。資料の設計そのものはホワイトペーパーの作り方にまとめています。

EC・商品購入型

料金(8)が中心に来る型です。価格、送料、返品条件が見えないと購入判断ができないため、これらを早い段階で提示します。

一方でベネフィット(4)の抽象的な説明は短くして、商品写真と仕様、レビューに置き換えます。「どうなれるか」よりも「何が届くか」を知りたいフェーズだからです。

ブロックを削る判断基準

構成テンプレートを渡すと、多くの場合「全部埋めなければ」という方向に進みます。ただ、LPは長ければ良いというものではありません。

削るかどうかの判断は、次の2つで決めています。

ひとつは、訪問者が払うコストの大きさです。メールアドレスだけを入力するのか、数百万円の契約を検討するのか。コストが小さいほど必要な説得は少なくなり、ブロックを削れます。

もうひとつは、流入元です。指名検索で来た人はすでに会社名を知っているので、課題提起(2)を長く書く必要はありません。逆に、広告から来た人は自社のことを何も知らない状態なので、共感の入口が必要になります。同じLPでも流入元によって最適な構成が変わるため、広告用とオーガニック用でファーストビューだけ差し替える方法も現実的です。

流入元ごとの数字の差を確認する手順はGAでCVRを分析する方法で扱っています。

ファーストビューに入れる4つの要素

構成の中でも、ファーストビューは単独で切り出して設計する価値があります。ここで離脱されると、以降のブロックは存在しないのと同じになるためです。

入れる要素は4つです。

  • キャッチコピー:誰のどの課題を解決するかを一文で示します。「次世代プラットフォーム」のような抽象語ではなく、訪問者が使う言葉で書きます
  • サブコピー:キャッチコピーを補足し、具体的な手段や条件を添えます
  • ビジュアル:実際の管理画面やサービス利用シーン。ストック写真は信頼性を落としやすい部分です
  • CTAボタン:ここに1つ目を置きます。最下部まで待たせる必要はありません

Nielsen Norman Groupの調査では、ユーザーの閲覧時間の57%がスクロールなしで見える範囲に集中しているとされています。構成全体を丁寧に作っても、この最初の一画面で「自分に関係ない」と判断されると先を読んでもらえません。

キャッチコピーの詰め方とCTAの文言についてはLPのCVRを上げるUI改善ポイント10選CTAの最適化で具体的に扱っています。

CTAは何箇所に置くか

構成を考えるとき、CTAを1箇所しか置かないケースがよくあります。作り手としては「くどくならないように」という配慮なのですが、結果として大半の訪問者はCTAを見ないまま離脱します。

配置の目安は3〜4箇所です。

1つ目はファーストビュー内。すでに検討が進んでいる訪問者は、説明を読まずに問い合わせたい状態にあります。

2つ目は実績・事例ブロックの直後。「本当に効くのか」という疑問が解消された直後が、行動に最も近いタイミングです。

3つ目は料金・FAQの後。ページ最下部まで読んだ訪問者は、情報収集を終えて判断段階に入っています。

加えて、スマートフォンでは追従バーを置く方法があります。画面が狭く、CTAの位置がスクロール位置に依存しやすいためです。

フォーム項目は構成段階で決めておく

LPの構成を考える段階で、フォームの項目数まで一緒に決めておくと後戻りが減ります。

デザインが完成してからフォームの項目を決めると、営業部門や情報システム部門から「この項目も必要」という要望が積み上がり、気づくと10項目を超えていることがあります。

初回接触で必要な項目は、名前、メールアドレス、会社名、相談内容の4つです。役職や従業員数、予算規模は、商談の中で聞けば済みます。項目数と離脱率の関係についてはフォーム最適化(EFO)でCVRを改善で詳しく扱っています。

構成テンプレートをそのまま使うときの注意

ここまで型を紹介してきましたが、テンプレートには限界もあります。

同じ業界で同じテンプレートを使ったLPが並ぶと、訪問者から見て差が見えなくなります。構成が同じでも、課題提起の言葉づかいや事例の具体性で読み応えは変わるため、中身の作り込みで差をつける必要があります。

また、テンプレートは「最初の1本目」を作るための道具です。公開後は、実際のデータを見ながらブロックの順番や有無を検証していくことになります。どのブロックまで読まれているかはヒートマップで確認でき、順番の入れ替えはABテストで検証できます。見方はヒートマップ分析の見方と活用法にまとめました。

構成が決まったあと、実際に制作を依頼する段階での費用感はLP制作の費用相場が参考になります。公開後に数字を見ながら改善を回していく手順はLPO(ランディングページ最適化)の進め方にまとめています。

作る前に、既存LPの数字を見ておく

新しくLPを作る前に、既存のLPやサービスページの数字を確認しておくと、構成の判断材料が増えます。

どのブロックまでスクロールされているか。どこでCTAがクリックされているか。フォームのどの項目で入力が止まっているか。この3つがわかると、新しいLPで「厚くするブロック」と「削るブロック」の判断が具体的になります。

逆に、何のデータもない状態でテンプレートだけを埋めると、公開後に「なぜこの構成なのか」を説明できず、改善の議論も進みません。

株式会社ティーラが提供するCVアップパートナーズでは、LPの構成設計から公開後の改善サイクルまで一貫して支援しています。既存LPの構成診断も行っていますので、まずは現状の課題を整理するところから始めてみてください。

無料でサイト診断を受ける

参考文献

  1. Nielsen Norman Group「Scrolling and Attention」https://www.nngroup.com/articles/scrolling-and-attention/
  2. Unbounce「Conversion Benchmark Report」https://unbounce.com/conversion-benchmark-report/