ランディングページの構成テンプレート｜CV が上がるセクション設計

ランディングページは、訪問者が上から順に読み進める前提で設計します。ファーストビューで離脱されると、下段の事例や FAQ は読まれません。セクションの順序は、心理の流れ（注意 → 共感 → 理解 → 信頼 → 行動）に沿って並べる必要があります。

テンプレートは型通りに使うのではなく、商品の価格帯、検討期間、競合の多さに応じてブロックの追加・省略を行います。ここでは汎用性の高い 8 セクション構成をベースに解説します。

同一サービスでも、広告流入 LP とオーガニック LP で最適な構成は異なる場合があります。流入経路ごとにテンプレートを用意し、計測で比較するのが理想的です。

① ヒーロー：誰向けか、何が得られるか、主 CTA を 5 秒で伝える。② 課題・共感：訪問者の悩みを言語化し「自分ごと化」させる。③ 解決策・特徴：機能ではなくベネフィット中心に 3 点程度に絞る。

④ 社会的証明：レビュー、導入数、メディア掲載、受賞歴。⑤ 詳細説明・比較：競合との違い、使い方のステップ。⑥ 料金・プラン：不安を減らす返金保証や FAQ へのリンク。⑦ FAQ：購入・申込前の障壁を取り除く。⑧ 最終 CTA：ヒーローと同じアクションを再度提示。

スクロール深度の計測を入れると、どのセクションで離脱が多いかが分かり、改善の優先順位が明確になります。

各セクション間の余白と見出しサイズを統一すると、長い LP でも読み疲れしにくくなります。スマホでは 1 セクション 1 画面弱を目安に、情報量を調整してください。

ヒーローは LP の成否を決める最重要ブロックです。見出し・サブコピー・CTA・信頼要素（ロゴ、星評価）の 4 点が、ファーストビューに収まるよう設計します。

CTA ボタンはページ内で色と文言を統一し、スクロールのたびに視界に入る位置（固定ヘッダーや各セクション末尾）に配置します。

「詳しく見る」より「無料で試す」「今すぐ予約」のように、具体的な行動を示す文言の方が CTR は高い傾向があります。コピーの書き方は「ランディングページのコピーライティング」も参照してください。

BtoB SaaS では、セキュリティ・サポート・導入事例を④の前に置くことが多いです。EC・D2C では、商品画像ギャラリとレビューを③の直後に配置し、衝動買いを促します。

リード獲得型（資料 DL・セミナー申込）では、フォーム直前に「得られる内容の目次」を置くと CVR が上がりやすいです。採用 LP では、文化・働き方・ストーリーを機能説明より前に持ってくるパターンが効果的です。

DesignLayer はヒーロー、特徴、料金、FAQ、CTA などの UI パターンを組み合わせて HTML を生成します。ブリーフで業種と CV を指定すれば、このテンプレートに沿ったたたき台が短時間で得られます。

BtoB SaaS 向けの詳細な設計例は「BtoB SaaS ランディングページの作り方」の記事で、セクション構成とコピーの具体例を紹介しています。

ヒーロー：見出し 1 本、サブコピー 2 行以内、CTA ボタン 1 つ、信頼要素（ロゴ等）が視界に入るか。

特徴：見出しだけ読んでも価値が伝わるか。3 列以上並べるとスマホで冗長にならないか。

FAQ：営業メールやチャットでよく聞かれる質問を反映しているか。

最終 CTA：ページ全体のストーリーと矛盾しない文言か。

詳細なブリーフ設計は「AI でランディングページのたたき台を作る方法」も参考にしてください。

構成が固まったら、ワイヤーフレームより先に「読めるモック」を作ると、ステークホルダーのフィードバックが具体化しやすくなります。DesignLayer で生成した HTML をスタジオで調整し、セクション順や見出しをその場で試せます。

本番公開前には、モバイル表示、フォーム動作、メタタグ、表示速度を確認してください。エクスポートと QA の手順は /docs/export-html にまとめています。

テンプレートは出発点です。A/B テストでヒーローのコピーや CTA 位置を変え、自社データに基づいて最適化していくことが、長期的な CV 改善につながります。

セクションを増やしすぎると離脱率が上がるため、初版は 8 ブロック以内に抑え、公開後のデータを見て追加するアプローチが安全です。

FAQ は SEO と CVR の両方に効くセクションです。検索ユーザーがよく調べるキーワード（「料金」「解約」「サポート」「セキュリティ」）を Q の文言に自然に含めます。

A は 2〜3 文で簡潔に。長い説明は別ページへリンクし、LP 上では障壁を取り除く要点だけを書きます。

営業・カスタマーサポートに「よく聞かれる質問 Top 10」をヒアリングし、FAQ の初期案に反映させると、実務に即した内容になります。

DesignLayer 生成時に FAQ セクションを含めておくと、たたき台段階から Q&A のたたきを用意でき、本番公開前の文案整理がスムーズになります。

LP トラフィックの半数以上がスマホから来るケースが多いため、構成設計もモバイル基準で行います。

縦長 1 カラムでは、ヒーロー → CTA → 信頼要素の順が特に重要です。横並び 3 列の特徴ブロックは、スマホでは縦積みにして 1 項目ずつ読ませる設計にします。

DesignLayer のスタジオでプレビュー幅を変えながら、各セクションの「スクロール 1 回あたりの情報量」を確認してください。

タップしやすい CTA（最低 44px 相当の高さ）と、フォーム入力時のキーボード表示を想定した余白も、構成段階から検討しておくと後戻りが減ります。

AB テストを想定する場合は、ヒーローと CTA だけを差し替え可能な構造にしておくと、開発コストを抑えつつ改善サイクルを回せます。DesignLayer のたたき台で複数案の骨格を先に作り、本番実装前に社内で方向性を絞る方法も有効です。