LP（ランディングページ）の構成とは、ファーストビュー・問題提起・解決策・CTA・導入事例・料金・FAQなどのセクションを、ユーザーの心理変化に沿って配置する設計のことです。構成の良し悪しがCVR（コンバージョン率）を決定づけるため、LP制作で最も重要な工程と言えます。
この記事では、Web制作20年の経験から、CVRを高めるLPの構成テンプレートを体系的に解説します。基本の10セクション一覧から、ファーストビューの設計、CTA配置の最適解、業界別の構成パターン、ワイヤーフレームの作成手順まで網羅しています。LP制作を外注する場合も自社で制作する場合も、構成の全体像を把握しておくことで、制作パートナーとの認識齟齬を防ぎ、成果の出るLPに仕上がります。
LPの構成要素 — 基本の10セクション一覧
LPは複数のセクションで構成されますが、闇雲にセクションを並べても成果は出ません。各セクションには明確な役割があり、ユーザーの心理変化に対応しています。以下が、CVRの高いLPに共通する基本の10セクションです。
| No. | セクション名 | 役割 | ユーザー心理 | 省略可否 |
|---|---|---|---|---|
| 1 | ファーストビュー（FV） | 第一印象の形成・離脱防止 | 「自分に関係あるか？」 | 必須 |
| 2 | 問題提起 | 課題の言語化・共感の獲得 | 「そうそう、この悩みがある」 | 必須 |
| 3 | 解決策の提示 | 商品・サービスの概要紹介 | 「これで解決できるかも」 | 必須 |
| 4 | メリット・特徴 | 他社との差別化・選ぶ理由 | 「なぜこのサービスなのか？」 | 必須 |
| 5 | 導入事例・お客様の声 | 社会的証明・信頼の獲得 | 「本当に成果が出るのか？」 | 強く推奨 |
| 6 | 実績・数字 | 権威性の証明 | 「どれくらいの実績があるか？」 | 推奨 |
| 7 | 料金プラン | 価格の透明性・比較検討 | 「いくらかかるのか？」 | 商材による |
| 8 | 利用の流れ | 手順の可視化・不安の解消 | 「どう進めればいいのか？」 | 推奨 |
| 9 | FAQ | 残る疑問の解消 | 「この点が気になる」 | 強く推奨 |
| 10 | CTA（コールトゥアクション） | 行動の促進・コンバージョン | 「申し込もう / 相談しよう」 | 必須 |
この10セクションは、あくまで「基本形」です。商材やターゲットによってセクションの順序を入れ替えたり、一部を省略したりすることは問題ありません。ただし、ファーストビュー・問題提起・解決策・CTAの4セクションは、どのLPでも省略できない骨格です。
セクションの順序が重要な理由
LPはWebサイトのように回遊するものではなく、上から下に読み進める一方通行のコンテンツです。ユーザーの心理は「興味→共感→理解→信頼→行動」の順に変化します。この心理変化の順序に逆らった構成 — たとえば、問題提起の前に料金を提示する — は、離脱の原因になります。
Unbounceの調査によると、LPの平均CVRは業界横断で4.3%、上位25%のLPは11.45%以上のCVRを達成しています。この差を生む最大の要因が、セクションの構成と順序です。構成を最適化することで、同じ広告費・同じ流入数でもCVRを2〜3倍に改善できる可能性があります。
ファーストビュー（FV）の設計 — 3秒で離脱を防ぐ要素
ファーストビュー（FV）とは、ユーザーがLPにアクセスした直後にスクロールせずに見える画面領域のことです。LPの成否を決める最も重要なセクションであり、ユーザーの約50%がFVだけで離脱するかどうかを判断します。
FVに必要な5つの要素
- キャッチコピー（h1）: ユーザーの課題に直接刺さる一文。「何が得られるか」を明確にする
- サブコピー: キャッチコピーを補足する1〜2行の説明文。具体的な数字やベネフィットを含める
- メインビジュアル: 商品・サービスの利用イメージを伝える画像や動画
- CTA（一次CTA）: FV内に配置する最初のCTAボタン。スクロールせずにアクションできる導線
- 信頼性の根拠: 導入社数、受賞歴、メディア掲載ロゴなど、初見の信頼を補強する要素
キャッチコピーの設計パターン
キャッチコピーはLPのCVRに最も影響する要素の1つです。Web制作20年の経験で効果が高いと実感しているパターンは以下の通りです。
| パターン | 構成 | 例 |
|---|---|---|
| ベネフィット直球型 | 「〇〇が△△になる」 | 「問い合わせ数が3倍になるLP制作」 |
| 数字訴求型 | 具体的数値で成果を示す | 「導入企業300社、平均CVR改善率187%」 |
| 課題共感型 | ターゲットの悩みをそのまま表現 | 「広告費をかけても問い合わせが増えない…」 |
| 質問型 | ユーザーに問いかける | 「その LP、本当に成果が出ていますか？」 |
| 権威型 | 実績や専門性で訴求 | 「10年連続 顧客満足度No.1のLP制作」 |
キャッチコピーの文字数は15〜30文字が目安です。長すぎると認知負荷が上がり、短すぎると訴求力が不足します。HubSpotの調査では、具体的な数字を含むキャッチコピーは含まないものと比較してクリック率が36%高いと報告されています。
FVの設計で避けるべきミス
FVの設計で多くの制作者が犯すミスを挙げます。
- キャッチコピーが抽象的すぎる: 「ビジネスを加速する」「未来を変える」のような曖昧な表現は、ユーザーに「自分ごと」として認識されない
- 情報を詰め込みすぎる: FVにすべてのメリットを並べると、かえって何も伝わらない。伝えることは1つに絞る
- CTAが目立たない: 背景色とCTAボタンの色が同系色で埋もれている。コントラスト比を確保する
- モバイル表示を考慮していない: PC版では綺麗に収まるFVが、モバイルではCTAが画面外に押し出されている
- ページの読み込みが遅い: FVに高解像度の画像や動画を無圧縮で配置し、表示に5秒以上かかる
特にモバイルのFV設計は、PC版とは別に考える必要があります。モバイルではFVの高さが限られるため、キャッチコピー・サブコピー・CTAの3要素を画面内に収めることを最優先とし、メインビジュアルやロゴはスクロール後に表示しても問題ありません。
FVの高さの目安
FVの高さはデバイスによって異なります。以下の範囲に収めることを目安にしてください。
- PC: 600〜750px（フルHDモニタで画面内に収まるサイズ）
- タブレット: 500〜700px
- スマートフォン: 500〜650px（iPhoneのviewportを基準）
重要なのは、キャッチコピーとCTAがスクロールなしで表示されることです。背景画像の美しさやアニメーションの演出よりも、ユーザーが即座に「何のページか」「何をすればいいか」を理解できることを優先してください。
CTA（コールトゥアクション）の最適な配置と文言
CTAはLPの目的そのものであり、すべてのセクションはCTAに向けてユーザーを誘導するために存在します。CTAの配置・文言・デザインがCVRに直結するため、感覚ではなくデータに基づいて設計することが重要です。
CTAの配置パターン
LPにおけるCTAの配置には、大きく3つのパターンがあります。
- FV内CTA: ファーストビュー内にCTAを配置する。即決型のユーザーを取りこぼさない
- セクション間CTA: 各セクションの間にCTAを挟む。ユーザーが「もういいかな」と思ったタイミングで行動できる
- ボトムCTA: ページ最下部に配置する。全セクションを読み終えた納得度の高いユーザーを獲得する
効果的なLPでは、この3パターンをすべて使います。具体的には、FV内に1つ、セクション間に2〜3つ、ボトムに1つ、計4〜5つのCTAを配置するのが標準です。
CTA文言の比較
CTAボタンの文言によってクリック率は大きく変わります。以下は、業界で広く知られている文言の効果比較です。
| CTA文言 | 心理的特徴 | 適するケース |
|---|---|---|
| 「無料で相談する」 | ハードルが低い。「無料」がクリック率を押し上げる | BtoB、コンサル、制作会社 |
| 「今すぐ申し込む」 | 緊急性を感じさせる。即決ユーザー向け | キャンペーンLP、期間限定オファー |
| 「資料をダウンロードする」 | 個人情報の提供と引き換えに情報を得る | BtoB、SaaS、ホワイトペーパー |
| 「まずは無料で試す」 | リスクゼロを強調。トライアル提供型 | SaaS、サブスク、EC |
| 「見積もりを依頼する」 | 具体的なアクション。購買意欲が高い層向け | 制作会社、リフォーム、BtoB |
| 「お問い合わせはこちら」 | 汎用的だが曖昧。クリック率は最も低い傾向 | 特に推奨しない |
WordStreamの調査によると、CTAに「無料」を含めるとクリック率が平均28%向上する結果が出ています。また、一人称（「〇〇を手に入れる」）のほうが二人称（「〇〇を手に入れてください」）よりもクリック率が高いという結果もあります。
CTAデザインの3原則
CTAボタンのデザインは、以下の3原則に従ってください。
- コントラスト: CTAボタンの色は、ページ内で使われていない色にする。補色関係にある色が最も目立つ。背景が白系なら青やオレンジ、ダーク系なら明るいグリーンやイエローが有効
- サイズ: CTAボタンはページ内で最も大きなボタンにする。モバイルでは横幅いっぱい（width: 100%）のボタンが効果的
- 余白: CTAボタンの周囲に十分な余白を確保する。他の要素と近すぎると視覚的に埋もれ、クリック率が下がる
マイクロコピーの活用
CTAボタンの直下に1行の補足テキスト（マイクロコピー）を添えると、クリック率が向上します。
- 「最短30秒で入力完了」（手間の少なさ）
- 「クレジットカード不要」（リスクの低さ）
- 「毎月100社以上にご利用いただいています」（社会的証明）
- 「〇〇日まで限定50%OFF」（緊急性）
マイクロコピーは、ユーザーがCTAボタンをクリックする直前の「最後の一押し」として機能します。ボタンの文言だけでは伝えきれない安心感や緊急性を補足する役割です。
問題提起 → 解決策の流れ — PASONAの法則とBEAFの法則
LPの中盤を構成する「問題提起→解決策→メリット」の流れは、ユーザーの心理を「共感→期待→納得」に導くストーリー設計です。この流れを体系化したフレームワークとして、PASONAの法則とBEAFの法則の2つが広く使われています。
PASONAの法則
PASONAの法則は、マーケティングコンサルタントの神田昌典氏が提唱したセールスライティングのフレームワークです。LPの構成にそのまま適用できます。
| ステップ | 意味 | LPでの実装 |
|---|---|---|
| P: Problem（問題） | ユーザーの抱える課題を提示 | 「こんなお悩みはありませんか？」セクション |
| A: Affinity（親近感） | 課題への共感を示す | 「私たちも同じ課題に直面していました」 |
| S: Solution（解決策） | 自社サービスを解決策として紹介 | サービス概要・特徴の提示 |
| O: Offer（提案） | 具体的なオファー（条件）を提示 | 料金プラン・特典・限定オファー |
| N: Narrowing（絞り込み） | 対象や期間を限定し緊急性を出す | 「先着30社限定」「〇月〇日まで」 |
| A: Action（行動） | CTAで行動を促す | 「今すぐ無料で相談する」 |
PASONAの法則は、特にBtoB向けのLP（問い合わせ獲得型・資料請求型）で高い効果を発揮します。ユーザーの課題を起点にストーリーを組み立てるため、「自分ごと」として受け取ってもらいやすい構成です。
BEAFの法則
BEAFの法則は、ECやBtoC向けのLPで効果的なフレームワークです。
| ステップ | 意味 | LPでの実装 |
|---|---|---|
| B: Benefit（ベネフィット） | 商品を使った結果得られるメリット | ビフォー・アフターの提示 |
| E: Evidence（根拠） | ベネフィットの裏付けとなる証拠 | データ、受賞歴、専門家の推薦 |
| A: Advantage（優位性） | 競合と比較した際の優位性 | 比較テーブル、独自技術の説明 |
| F: Feature（特徴） | 商品・サービスの具体的な特徴 | スペック、機能一覧、素材・製法 |
BEAFの法則では、最初に**ベネフィット（結果）**を見せてからその根拠を提示する、という順序がポイントです。「この商品にはこんな特徴があります」ではなく、「こんな結果が得られます。その理由は〜」という構成にすることで、ユーザーの興味を持続できます。
2つの法則の使い分け
| 比較項目 | PASONAの法則 | BEAFの法則 |
|---|---|---|
| 適する業種 | BtoB、コンサル、サービス業 | EC、BtoC、物販 |
| 起点 | ユーザーの「課題」 | 商品の「ベネフィット」 |
| CVの種類 | 問い合わせ、資料請求、無料相談 | 購入、カート追加、定期購入 |
| ストーリー | 課題→共感→解決→提案→行動 | 結果→根拠→差別化→特徴 |
| LP全体の長さ | 長め（4,000〜8,000px） | 中〜長め（3,000〜6,000px） |
どちらのフレームワークを選ぶかは、商材とターゲットによります。BtoB向けの問い合わせ獲得LPならPASONA、EC系の購入促進LPならBEAFが基本です。ただし、両方を組み合わせて使うケースも多く、たとえば「PASONAの流れで全体を構成し、解決策セクション内ではBEAFの順序でサービスを紹介する」といったハイブリッド構成も効果的です。
問題提起セクションの書き方
問題提起セクションは、ユーザーが「そうそう、これが困っている」と共感するための場所です。以下のポイントを押さえてください。
- ユーザーの言葉で書く: 専門用語ではなく、ユーザーが実際に口にする言葉で課題を表現する。「CVRが低い」ではなく「広告費はかけているのに問い合わせが来ない」
- 具体的なシーンを描写する: 「上司に報告するたびに、成果が出ていないことを説明しなければならない」のように、ユーザーが置かれている状況をリアルに描く
- 3〜5個の箇条書きで列挙する: 課題を箇条書きで並べることで、1つでも当てはまればユーザーは「自分のことだ」と感じる
- 課題の深刻さを示す: 放置するとどうなるかを示唆する。「このまま放置すると、広告費だけが膨らみ続けます」
解決策セクションの書き方
解決策セクションでは、問題提起で示した課題を自社の商品・サービスがどう解決するかを提示します。
- 課題と解決策を1対1で対応させる: 問題提起で挙げた各課題に対して、それぞれの解決策を示す
- 「何ができるか」ではなく「何が変わるか」で伝える: 機能の羅列ではなく、ユーザーの状態がどう変わるかを描く
- ビジュアルで補強する: 解決策のイメージ図、利用画面のスクリーンショット、ビフォー・アフターの写真で理解を補助する
- 具体的な数字を含める: 「改善する」ではなく「平均で1.8倍に改善する」のように、可能な限り数字で示す
導入事例・お客様の声セクションの設計
導入事例・お客様の声は、**社会的証明（ソーシャルプルーフ）**を提供するセクションです。どれだけ自社の強みを語っても、ユーザーが最も信頼するのは「同じ立場の人の体験談」です。Nielsen Norman Groupの調査でも、ユーザーの92%が「知らない人のレビューでも、企業の自己宣伝より信頼できる」と回答しています。
効果的な導入事例の構成
導入事例は、以下の4要素で構成すると説得力が増します。
- 課題（Before）: 導入前にどのような課題を抱えていたか
- 選定理由: なぜ自社サービスを選んだか。競合と比較した際のポイント
- 導入後の変化（After）: 具体的な数字での改善結果（「問い合わせが月5件→月22件に」など）
- 担当者のコメント: 実名・肩書き・顔写真付きのコメント。可能であれば企業ロゴも
お客様の声（テスティモニアル）の設計ポイント
- 実名・顔写真・肩書きを掲載する: 匿名のレビューよりも信頼性が格段に高い。「東京都・30代・男性」よりも「株式会社〇〇 マーケティング部 田中様」のほうが響く
- 具体的な数字を含む声を優先する: 「とても満足しています」よりも「CVRが2.3倍に改善しました」のほうが説得力がある
- ネガティブな要素も含める: 「最初は半信半疑でしたが」「正直、費用は安くないですが」のような正直な声が含まれると、全体の信頼性が向上する
- ターゲットに近い属性の声を選ぶ: BtoB向けLPならBtoB企業の声、中小企業向けなら中小企業の声を優先的に掲載する
導入事例がまだ少ない場合の対策
サービス立ち上げ直後で導入事例が不足している場合、以下の代替手段で社会的証明を補うことができます。
- β版テストの結果: β版を利用したユーザーのフィードバックを導入事例として掲載
- 導入社数・利用者数: 「100社が導入」「累計10,000ユーザーが利用」などの数字を掲示
- メディア掲載実績: プレスリリースやメディア記事で取り上げられた実績をロゴで表示
- 業界専門家の推薦: その業界の有識者からの推薦コメント
- 自社の実績: サービス提供者自身の実績（「過去200サイトのLP制作で培った知見」など）
事例がゼロの状態でも、「実績ゼロだから社会的証明を省略する」のは避けてください。何かしらの代替手段で信頼性を補強することが、CVRの維持には不可欠です。
料金セクションの見せ方 — 比較テーブルの設計パターン
料金セクションは、ユーザーが最も知りたい情報の1つでありながら、設計を間違えるとCVRを下げる原因にもなるセクションです。料金の見せ方は、商材の性質と価格帯によって最適なパターンが異なります。
料金セクションの設計パターン
| パターン | 内容 | 適するケース |
|---|---|---|
| 松竹梅型（3プラン） | 3段階のプランを比較テーブルで表示 | SaaS、定額サービス、パッケージ商品 |
| 料金レンジ型 | 「30万円〜80万円」のように幅を提示 | 受託制作、コンサル、カスタムメイド |
| 事例ベース型 | 「A社の場合：〇〇万円」と具体例で示す | 高単価BtoB、コンサル |
| 料金非公開型（問い合わせ誘導） | 料金を記載せずCTAへ誘導 | エンタープライズ向け、カスタム見積もり |
松竹梅型プランの比較テーブル設計
3プラン構成の場合、中間プランをおすすめとして強調するのが定石です。これは「おとり効果（Decoy Effect）」と呼ばれる心理効果を利用したもので、3つの選択肢がある場合、人は真ん中を選びやすい傾向があります。
比較テーブルの設計で押さえるべきポイントは以下の通りです。
- おすすめプランを視覚的に強調する: 色の違い、「人気No.1」バッジ、枠線の強調などで最も売りたいプランを目立たせる
- プラン間の違いを明確にする: 機能の有無だけでなく、「どのような課題を持つ人に向いているか」をプラン名やサブタイトルで表現する
- CTAをプランごとに配置する: 各プランの直下にCTAボタンを配置し、プランを選んだ直後に行動できるようにする
- 年額と月額の切り替えを用意する: SaaS系の場合、年額割引の表示で年額契約への誘導を図る
料金レンジ型の設計ポイント
受託制作やコンサルティングのように、案件ごとに費用が変動する商材では、料金レンジ型が適しています。「30万円〜80万円」のような幅のある表記が一般的ですが、ユーザーは「結局いくらかかるのか分からない」と不安を感じやすいのが難点です。
この不安を解消するために、以下の工夫を取り入れてください。
- 事例ベースの料金例を併記する: 「A社様（LP1ページ＋フォーム）：35万円」のように、実際の制作事例と費用を掲載する
- 費用に影響する要素を明示する: 「デザインの作り込み」「ページ数」「アニメーションの有無」など、費用が変動する要因をリスト化する
- 見積もりまでのステップを簡潔に示す: 「無料相談→ヒアリング→お見積もり（最短3営業日）」のように、見積もり取得の手順を可視化する
LP制作の費用相場について詳しくは、「LP制作の費用相場とSEM広告で成果を出すポイント」で解説しています。
FAQセクションの構成 — ユーザーの不安を解消する
FAQセクションは、ユーザーがCTAをクリックする直前に残る「最後の疑問」を解消するためのセクションです。CTAの直前に配置することで、「気になる点はあるけど、聞くほどでもないし…」という理由での離脱を防ぎます。
FAQの設計原則
- ユーザーの実際の質問を収集する: 営業・カスタマーサポートが頻繁に受ける質問をベースにする。想像で作ったFAQは的外れになりやすい
- 質問は具体的に書く: 「料金について」ではなく「料金の支払い方法にはどのような選択肢がありますか？」のように、ユーザーが実際に使う言葉で書く
- 回答は簡潔かつ完結に: 1つの回答は3〜5行程度にまとめる。長文が必要なテーマは別ページへのリンクを設ける
- 5〜10問に絞る: 多すぎると読まれない。最も重要な質問から順に並べる
- 購入の障壁を取り除く質問を優先する: 「返品はできますか？」「契約期間の縛りはありますか？」「個人情報は安全ですか？」などの不安系の質問を優先する
LPにおけるFAQの効果的な分類
| 質問カテゴリ | 例 | 目的 |
|---|---|---|
| 料金・費用 | 「追加費用はかかりますか？」 | 価格に対する不安の解消 |
| サービス内容 | 「対応可能な業種はありますか？」 | 対象範囲の明確化 |
| 手続き・フロー | 「申し込みから納品までどれくらいかかりますか？」 | プロセスの可視化 |
| 保証・サポート | 「契約後のサポート体制はどうなっていますか？」 | リスクの軽減 |
| 比較・選定 | 「他社サービスとの違いは何ですか？」 | 差別化の補強 |
アコーディオン形式の推奨
LPのFAQは、**アコーディオン（開閉式）**で実装することを推奨します。すべての質問と回答を展開した状態で表示すると、ページが長くなりすぎてユーザーが圧倒されます。アコーディオン形式にすることで、ユーザーは自分が気になる質問だけを選択的に確認でき、それ以外はスキップできます。
FAQ構造化データ（FAQPage JSON-LD）を実装すると、Google検索結果にFAQが表示される可能性があります。検索結果上でのCTR（クリック率）向上と画面占有面積の拡大が期待できるため、必ず実装してください。
業界別LP構成パターン
LP構成の基本は共通ですが、業界や商材の特性に応じてセクションの優先順位や表現が変わります。ここでは、主要な4業界のLP構成パターンを解説します。
BtoB SaaS
BtoB SaaSのLPは、意思決定者が複数いることを前提に設計します。情報収集している担当者と、最終決裁する上長では必要な情報が異なるため、両者をカバーする構成が必要です。
推奨するセクション順序は以下の通りです。
- FV（課題解決型キャッチコピー + 無料トライアルCTA）
- 3つの主要メリット（アイコン + 短文で端的に）
- 機能一覧（スクリーンショット付き）
- 導入事例（同業種の企業事例を2〜3社）
- 料金プラン（松竹梅型の比較テーブル）
- セキュリティ・サポート体制
- 導入の流れ（4〜5ステップ）
- FAQ
- CTA（無料トライアル or デモ予約）
BtoB SaaSのLP特有の要素として、セキュリティ・コンプライアンスセクションが重要です。「ISO 27001取得」「SOC 2 Type II準拠」「国内データセンター」など、情報システム部門の懸念を払拭する情報を明示してください。
EC（物販）
ECのLPは、感情的な購買意欲を刺激する構成が効果的です。BEAFの法則をベースに、ベネフィットを先に見せてから商品のスペックを提示します。
- FV（ベネフィット直球型キャッチコピー + 限定オファー）
- ビフォー・アフター（使用前後の変化を写真で）
- 成分・素材・製法の説明（なぜ効果があるのか）
- 利用者の声（写真付き5〜10件）
- 専門家の推薦コメント
- メディア掲載実績
- 他社商品との比較テーブル
- 料金（定期購入の割引を強調）
- FAQ（返品・解約・安全性に関する質問）
- CTA（「初回限定〇〇%OFF」の限定オファー）
EC系LPでは、限定性と緊急性の演出がCVRに大きく影響します。「期間限定」「数量限定」「初回限定価格」などのオファーをFVとボトムCTAの両方に配置してください。
教育・スクール
教育系のLPは、受講生の成功体験と卒業後のキャリアを軸に構成します。
- FV（「〇〇になれる」型のキャッチコピー + 無料体験CTA）
- カリキュラム概要（学べる内容の概要を4〜6項目で）
- 受講生の成果・卒業後のキャリア事例
- 講師紹介（経歴・専門性・メッセージ）
- 学習サポート体制（メンター制度、質問対応、コミュニティ）
- 受講料金（分割払い・給付金の対象可否を明記）
- 受講の流れ（無料体験→本申し込み→受講開始）
- FAQ（受講条件、未経験OK、働きながら可能か）
- CTA（無料体験レッスン or 無料カウンセリング）
教育系LPでの最重要セクションは受講生の成果事例です。「未経験から3ヶ月でエンジニアに転職」「副業で月10万円の収入」など、具体的な成果を提示することがCVRに直結します。
不動産
不動産系のLPは、物件の魅力を視覚的に伝えることと行動の敷居を下げることが重要です。
- FV（物件の外観写真 + エリア名 + 価格帯 + 資料請求CTA）
- 物件の特徴（3〜5つの主要ポイント）
- 間取り・写真ギャラリー
- 周辺環境・交通アクセス（地図 + 最寄り駅からの時間）
- 設備・仕様一覧
- 入居者の声 or モデルルーム見学者の感想
- 物件概要テーブル（所在地、構造、竣工時期、管理費等）
- FAQ（契約条件、初期費用、ペット可否など）
- CTA（資料請求 or モデルルーム見学予約）
不動産LPでは、写真のクオリティがCVRに直結します。プロカメラマンによる撮影を必ず行い、外観・リビング・キッチン・バスルーム・眺望など、10枚以上のギャラリーを用意してください。
業界別の比較まとめ
| 項目 | BtoB SaaS | EC（物販） | 教育 | 不動産 |
|---|---|---|---|---|
| 主要CVポイント | 無料トライアル / デモ予約 | 購入 / 定期購入 | 無料体験 / カウンセリング | 資料請求 / 見学予約 |
| 最重要セクション | 導入事例 + 料金プラン | ベネフィット + 利用者の声 | 受講生の成果事例 | 写真ギャラリー |
| フレームワーク | PASONA | BEAF | PASONA + BEAF | BEAF |
| LP全体の長さ | 5,000〜8,000px | 4,000〜7,000px | 5,000〜7,000px | 4,000〜6,000px |
| 意思決定者 | 担当者 + 上長（複数） | 個人（単独） | 個人（単独 or 保護者） | 個人 or 家族 |
| 検討期間 | 長い（1〜3ヶ月） | 短い（即日〜数日） | 中程度（1〜4週間） | 長い（1〜6ヶ月） |
LPのワイヤーフレーム作成手順
ワイヤーフレームとは、LPの各セクションの情報構成と配置をビジュアル化した設計図のことです。デザインの前段階で作成することで、「何をどの順序で見せるか」をチーム全体で合意してからデザインに着手できます。ワイヤーフレームの段階で構成の問題を発見・修正することは、デザイン完成後に修正するよりも圧倒的にコストが低いです。
ステップ1: 目的とターゲットの整理
ワイヤーフレームに着手する前に、以下の3点を明文化してください。
- LPの目的: 問い合わせ獲得 / 資料請求 / 購入 / 会員登録 など、CVの種類を1つに絞る
- ターゲットペルソナ: 誰に向けたLPか。年齢・職業・課題・情報リテラシーを具体的に定義する
- 流入元: リスティング広告 / SNS広告 / メルマガ / オーガニック検索 のどこから来るユーザーか
流入元によってユーザーの「温度感」が異なります。リスティング広告からの流入は検索意図が明確なためFVでの即決率が高い一方、SNS広告からの流入は興味段階のため、より丁寧な問題提起と共感が必要です。
ステップ2: コンテンツの洗い出し
LPに掲載するすべての情報を箇条書きで洗い出します。この段階では順序や見せ方は考えず、「LPに載せるべき情報」を網羅的にリストアップすることに集中してください。
洗い出す項目の例は以下の通りです。
- キャッチコピー案（3〜5パターン）
- サービスの特徴・メリット（5〜10個）
- 導入事例・お客様の声
- 料金プラン・費用の目安
- 競合との差別化ポイント
- よくある質問と回答
- 保証・サポート内容
- CTA文言の候補
- 掲載する画像・動画のリスト
ステップ3: セクションの構成と順序決定
洗い出した情報を、前述の「基本の10セクション」に割り当てます。各セクションに含める情報と、セクションの順序を決定してください。
順序の決定は、ユーザーの心理変化に沿って行います。
- 「自分に関係あるか？」→ FV
- 「この悩みがある」→ 問題提起
- 「解決できるかも」→ 解決策
- 「なぜこのサービス？」→ メリット・差別化
- 「本当に効果あるの？」→ 導入事例
- 「いくらかかる？」→ 料金
- 「気になる点がある」→ FAQ
- 「申し込もう」→ CTA
ステップ4: ワイヤーフレームの作成
セクション構成が決まったら、ツールを使ってワイヤーフレームを作成します。
推奨ツールは以下の通りです。
- Figma: 最も広く使われているUIデザインツール。コンポーネント機能で再利用性が高い
- Whimsical: ワイヤーフレーム専用ツール。ドラッグ＆ドロップで素早く作成できる
- 紙とペン: 初期段階のラフスケッチに最適。デジタルツールに入る前に手書きで構成を検証する
ワイヤーフレームで決めるべき項目は以下の通りです。
- 各セクションの縦方向の長さ（高さ）
- テキスト・画像・ボタンの大まかな配置
- CTAボタンの位置（何箇所に配置するか）
- PC版とモバイル版のレイアウトの違い
- ナビゲーション（追従ヘッダーの有無）
ステップ5: レビューとフィードバック
ワイヤーフレームが完成したら、関係者全員でレビューを行います。レビューのチェックポイントは以下の通りです。
- FVにキャッチコピーとCTAが含まれているか
- ユーザーの心理変化に沿った順序になっているか
- 各セクションの役割が明確か（重複や抜け漏れはないか）
- CTAの数と配置が適切か（少なすぎないか、多すぎないか）
- モバイル版のレイアウトに無理がないか
- コンテンツの優先順位が正しいか（最も重要な情報が上にあるか）
ワイヤーフレームの段階で合意が取れてからデザインに進むことで、デザイン完成後の「やっぱり構成を変えたい」という大きな手戻りを防げます。UIデザインの基礎については「UIデザインとは？基本概念から実務プロセスまで完全解説」で詳しく解説しています。
ステップ6: デザイン・実装への引き継ぎ
レビューを通過したワイヤーフレームをデザイナーに引き渡します。引き渡し時に以下の情報を添えてください。
- ターゲットペルソナの定義
- ブランドガイドライン（ロゴ、カラー、フォント）
- 参考にするLPのURL（3〜5件）
- 写真素材・動画素材のリスト
- コピーライティングの原稿
RINIAでは、ワイヤーフレーム作成からデザイン、コーディングまでを一貫して対応しています。LP制作の全体像と費用については「LP制作の費用相場」をご参照ください。UIデザインについても対応可能です。
CVRを上げるためのA/Bテスト設計
LP公開後の改善で最も効果的な手法がA/Bテストです。「感覚で改善する」のではなく、データに基づいた意思決定を行うことで、確実にCVRを向上させられます。
A/Bテストの基本原則
A/Bテストでは、1回のテストで変更する要素は1つに限定してください。複数の要素を同時に変更すると、どの変更がCVRに影響したのか判別できません。
テスト期間は最低2週間、理想的には4週間確保してください。1週間未満のテストは、曜日や時間帯のバイアスが排除できず、信頼性の低い結果になります。
テスト優先度の高い要素
CVRへの影響が大きい順にテストすべき要素を紹介します。
- キャッチコピー: LPのCVRに最も影響する要素。ベネフィット訴求と課題訴求のどちらが響くかをテストする
- CTA文言: 「無料で相談する」と「見積もりを依頼する」でクリック率が大きく変わる
- CTAの色: 背景色とのコントラストが高い色を選ぶ。赤・オレンジ・緑の比較が定番
- FVのメインビジュアル: 人物写真 vs イラスト、利用シーン vs 商品単体を比較
- フォームの項目数: 必須項目を3つに減らす vs 5つのままにする
- ページの長さ: 長文版（全セクション）vs 短文版（主要セクションのみ）
A/Bテストの実施手順
- 仮説を立てる: 「キャッチコピーを課題共感型に変更すると、CVRが改善する」のように、明確な仮説を設定する
- テストパターンを作成する: オリジナル（A）と変更版（B）の2パターンを用意する
- トラフィックを均等に分配する: VWOやAB Tastyなどの A/Bテストツールで、50:50に分配する
- 十分なサンプルサイズを確保する: 統計的有意差を得るために、各パターンで最低100コンバージョンを目指す
- 結果を分析し、勝者を実装する: 統計的に有意な差が出たら、勝者パターンを本番に反映する
- 次のテストに進む: 1つのテストが完了したら、次に優先度の高い要素のテストに進む
A/Bテストで犯しやすいミス
- テスト期間が短すぎる: 3日間で結果を判断し、たまたまの偏りを「改善」と誤認する
- 複数要素を同時に変更する: キャッチコピーとCTAの色を同時に変えて、どちらが効果的だったか分からない
- サンプルサイズが不足している: 月間100アクセスのLPでA/Bテストを行い、5件のCVでA/Bの優劣を判断する
- テスト中に他の変更を加える: A/Bテスト中に広告の配信設定を変更し、テスト結果の信頼性が失われる
- ページ全体を作り直してテストする: 全面リニューアルはA/Bテストではなく、前後比較に過ぎない。一要素ずつ変更することが正しいA/Bテストの手法
A/Bテストに使えるツール
A/Bテストを実施するための主要ツールを比較します。
| ツール | 費用 | 特徴 | 適するケース |
|---|---|---|---|
| VWO（Visual Website Optimizer） | 月額$199〜 | ビジュアルエディタで変更可能、ヒートマップ付き | マーケターが主導する場合 |
| Optimizely | 要問い合わせ | エンタープライズ向け、高度なターゲティング | 大規模トラフィックのサイト |
| AB Tasty | 要問い合わせ | AI活用のパーソナライゼーション機能 | パーソナライズも同時に行う場合 |
| Microsoft Clarity + GA4 | 無料 | ヒートマップ・セッション録画でユーザー行動を可視化 | テスト前の課題発見・仮説立案 |
Google Optimizeは2023年にサービスを終了しています。現在はVWOやOptimizelyが主要な選択肢です。小規模サイトの場合は、Microsoft ClarityのヒートマップとGA4のイベント計測を組み合わせて、手動でA/Bテストを行う方法もコストを抑えられます。
LP構成で失敗しやすいポイントと改善方法
Web制作20年の中で、LP構成に関する失敗を数多く見てきました。ここでは特に頻度の高い失敗パターンと、その改善方法を解説します。
失敗1: 広告のキーワードとFVの訴求がずれている
リスティング広告で「LP 制作 費用」というキーワードで集客しているのに、LPのFVが「圧倒的なクオリティで成果を出す」のような抽象的なキャッチコピーになっている。ユーザーは「費用」を知りたくてクリックしたのに、FVに費用の情報がないため即座に離脱します。
改善方法: 広告キーワードごとにFVを出し分けるか、FVのキャッチコピーに広告キーワードの要素を含めてください。広告文とLPの一貫性は、GoogleのQuality Scoreにも影響します。
失敗2: 情報を詰め込みすぎて「壁のような」LPになる
サービスの特徴を20個並べ、機能一覧を全て羅列し、導入事例を10件掲載する。情報量が多いこと自体は悪くありませんが、情報の優先順位がない状態で全てを並列に見せると、ユーザーは何が重要なのか分からず離脱します。
改善方法: 特徴は3〜5個に絞り込み、導入事例は2〜3件をピックアップして掲載し、残りは「事例一覧ページ」へのリンクで対応してください。LPは「全てを伝える」場ではなく「行動を促す」場です。
失敗3: CTAが1つしかない
ページ最下部にのみCTAを配置し、途中でCTAを見つけられないユーザーがいる。全セクションを読んでからCTAに到達するユーザーは少数派であり、途中で「もう十分だ、申し込もう」と思ったユーザーの受け皿がないのは機会損失です。
改善方法: FV内、セクション間（2〜3箇所）、ボトムの合計4〜5箇所にCTAを配置してください。多すぎると感じるかもしれませんが、同じCTAの繰り返しはユーザーにとって「いつでも行動できる安心感」を提供します。
失敗4: モバイル表示を軽視している
PCで完璧に見えるLPが、スマートフォンでは以下の問題を抱えていることがあります。
- テーブルが横にはみ出して横スクロールが発生する
- 画像が大きすぎてテキストがほとんど見えない
- CTAボタンが小さくてタップしにくい
- ページの読み込みが遅い（画像未最適化）
現在、LPへのアクセスの60〜80%がモバイルデバイスからです。PCファーストで設計してモバイル対応を後付けするのではなく、モバイルファーストで設計してPC版を拡張する方針が正しいです。
改善方法: ワイヤーフレームの段階でモバイル版を先に設計してください。テーブルはモバイルでは縦積みレイアウトに変換し、画像はWebP形式で圧縮し、CTAボタンは横幅100%で指でタップしやすいサイズ（高さ48px以上）を確保してください。
失敗5: 社会的証明が弱い
「お客様の声」セクションに、匿名の感想が2件だけ掲載されている。「東京都・A.K様：とても良かったです」のような抽象的な感想は、ユーザーの信頼獲得にほとんど寄与しません。
改善方法: 実名・肩書き・顔写真・具体的な数字を含む導入事例を最低3件掲載してください。事例が不足している場合は、導入社数・メディア掲載実績・自社の実績データで補強してください。
失敗6: ページの読み込みが遅い
表示速度はCVRに直接影響します。Googleの調査によると、モバイルページの読み込み時間が1秒から3秒に延びると直帰率が32%増加し、1秒から5秒に延びると90%増加します。
改善方法: 以下の最適化を行ってください。
- 画像のWebP変換と適切なサイズへのリサイズ
- 不要なJavaScript・CSSの削減
- フォントの最適化（サブセット化、preload指定）
- CDN（Content Delivery Network）の利用
- Lazy Loading（画面外画像の遅延読み込み）の実装
- サーバーレスポンスタイムの改善
PageSpeed Insightsでモバイルスコア80以上を目標値としてください。
失敗7: フォームの項目数が多すぎる
問い合わせフォームに「会社名・部署名・役職・氏名・メールアドレス・電話番号・住所・Webサイト・予算・詳細」の10項目を要求するLPをよく見かけます。項目数が多いほどフォームの離脱率は上がり、CVRは下がります。
改善方法: フォームの必須項目は3〜5個に絞ってください。「名前・メール・相談内容」の3項目でフォームを構成し、それ以外の情報は後日のヒアリングで取得する方針が、CVR最大化の観点では最適です。
HubSpotの調査では、フォーム項目を3つに減らすとコンバージョン率が最大50%向上するという結果が出ています。
まとめ — LP構成チェックリスト
LPの構成は、CVRを決定づける最も重要な設計要素です。テンプレートをそのまま使うのではなく、自社の商材・ターゲット・流入元に合わせてカスタマイズすることで、成果の出るLPに仕上がります。
この記事で解説した内容を、LP制作時のチェックリストとして活用してください。
構成全体のチェックリスト
- LPの目的（CVの種類）が1つに絞られているか
- ターゲットペルソナが明確に定義されているか
- 基本の10セクションのうち、必須セクション（FV・問題提起・解決策・CTA）が含まれているか
- セクションの順序がユーザーの心理変化に沿っているか
- PASONAまたはBEAFの法則に基づいたストーリー構成になっているか
ファーストビューのチェックリスト
- キャッチコピーがユーザーのベネフィットを明確に伝えているか
- サブコピーに具体的な数字が含まれているか
- CTAがスクロールせずに表示される位置に配置されているか
- モバイルでもFV内にキャッチコピーとCTAが収まっているか
- 広告キーワードとFVの訴求が一致しているか
CTAのチェックリスト
- CTAが4〜5箇所に配置されているか（FV内、セクション間2〜3箇所、ボトム）
- CTA文言が具体的なアクションを示しているか（「こちら」ではなく「無料で相談する」）
- CTAボタンが視覚的に目立つか（周囲とのコントラスト比を確認）
- マイクロコピーで最後の一押しがあるか
- フォームの項目数が5個以下か
信頼性のチェックリスト
- 導入事例またはお客様の声が3件以上掲載されているか
- 実名・肩書き・顔写真が含まれているか
- 具体的な数字（改善率、導入社数など）が掲載されているか
- FAQで購買の障壁となる疑問に回答しているか
- 外部データやの引用の出典が明記されているか
パフォーマンスのチェックリスト
- モバイルのPageSpeed Insightsスコアが80以上か
- 画像がWebP形式で最適化されているか
- モバイル表示でテーブルが横にはみ出していないか
- CTAボタンがモバイルでタップしやすいサイズか（高さ48px以上）
- ページ全体の読み込み時間が3秒以内か
LP構成の設計から制作、公開後のA/Bテストまで、一貫した支援をお求めの方はRINIAのLP制作サービスをご覧ください。コーポレートサイト制作やUIデザインも対応しています。LP制作の予算感は「ホームページ制作の費用相場」も合わせてご確認ください。まずはお問い合わせフォームからお気軽にご連絡ください。
無料相談する