ランディングページ(LP)は、縦に長い1枚のページの中で「訪問者に行動してもらう」ことを唯一の目的に設計されています。そのためレイアウトの組み方が、そのままCVR(コンバージョン率)に直結します。
当メディアは2009年の開設以来、17年間にわたって国内外のLPを収集・掲載し続け、これまで3,000枚以上のLPを見てきました。その経験から見えてきた、成果を出すLPのレイアウトの原則を、目的別・業種別にわかりやすく解説します。
この記事でわかること
- LPレイアウトの基本原則
- BtoC物販・EC型の基本構成
- BtoBリード獲得型の基本構成
- 各セクションの役割と書き方のポイント
- CTAボタンの配置と設計
- 目的別レイアウトのバリエーション
- よくある失敗と対策
- LPレイアウトの基本原則
- LPは「縦に読まれる」ものとして設計する
- 3秒で「自分に関係がある」と伝える
- BtoC物販・EC型の基本構成
- ① ファーストビュー
- ② 3つの強み・訴求ポイント
- ③ 商品詳細・使い方
- ④ お客様の声・口コミ
- ⑤ よくある質問(FAQ)
- ⑥ 最終CTA(購入・申込)
- BtoBリード獲得型の基本構成
- ① ファーストビュー
- ② 課題の明確化
- ③ サービス内容・特徴
- ④ 実績・事例・数字
- ⑤ お客様の声・導入事例
- ⑥ 料金プラン
- ⑦ CTA(問い合わせ・資料請求)
- CTAボタンの配置と設計
- CTAは3か所以上設置する
- CTAボタンのテキストと色
- 目的別レイアウトのバリエーション
- よくある失敗と対策
- まとめ
- LP制作 CVR改善 診断チェックリスト
LPレイアウトの基本原則
LPは「縦に読まれる」ものとして設計する
通常のWebサイトと異なり、LPは原則として1ページに情報をすべて収めます。訪問者はページを上から下へスクロールしながら読み進め、最終的にCTAボタン(申込・購入・問い合わせボタン)をクリックするという流れを想定して設計します。
この「上から下への流れ」の中で、訪問者の心理状態は段階的に変化します。
訪問者の心理変化(AIDMAモデル)
- Attention(注目):ファーストビューで「自分に関係がある」と気づく
- Interest(興味):サービスや商品の内容に引き込まれる
- Desire(欲求):「欲しい・やってみたい」という気持ちが高まる
- Memory(記憶):実績・お客様の声で信頼感が形成される
- Action(行動):CTAボタンをクリックしてコンバージョン
LPのレイアウトはこの心理変化に沿って構成することで、訪問者をスムーズにCVへ導けます。
3秒で「自分に関係がある」と伝える
ユーザーはページを開いてからわずか3秒程度で、そのサイトを見続けるかどうかを判断すると言われています。ファーストビュー(スクロールしなくても見える最初の画面)で「誰のための」「何ができる」サービスなのかを瞬時に伝えることが、離脱を防ぐ最大のポイントです。
ファーストビューでよくある失敗
「当社は〇〇のリーディングカンパニーです」のような自社アピールから入るLPは、訪問者が「自分に関係があるかどうか」を判断できず、離脱につながりやすい。「あなた(訪問者)の悩みを解決できる」という視点で書き直すと改善することが多い。
BtoC物販・EC型の基本構成
化粧品・健康食品・サプリメント・生活用品など、個人消費者に商品を販売するLPの基本的なレイアウトパターンです。

① ファーストビュー
LPで最も重要なセクションです。以下の要素を盛り込みます。
- キャッチコピー:ターゲットの悩みや欲求を直接突く一文。「〇〇で悩んでいませんか?」「△△が実現できます」など
- 商品・サービスのビジュアル:化粧品・食品は特にビジュアルの質が購買意欲に影響する
- 実績・信頼の数字:「累計〇万個突破」「顧客満足度〇%」など、一目で信頼できる数字を入れる
- CTAボタン:「今すぐ購入」「トライアルを試す」など、スクロール前に必ず1つ設置する
② 3つの強み・訴求ポイント
自社商品の優れたポイントを3つに絞って視覚的に訴求します。1つでは物足りなく、5つでは多すぎて記憶されません。3つが最も認知されやすい数です。
- 配合成分・素材・原料のこだわり
- 他社との違い・独自技術
- 価格・コスパの優位性
- 受賞歴・認定・特許
「その秘密は…」「これには理由があります」のようにストーリーで語ると、次のセクションへの引き込みになります。
③ 商品詳細・使い方
商品の具体的な内容・成分・使い方・効果的な使用シーンを説明します。
重要なのは「ユーザーの日常のマズい状態」→「この商品を使った理想の状態」という流れで書くことです。危機感を煽りすぎず、自然な購買意欲を引き出します。
なお、医薬品・医薬部外品・化粧品・健康食品などは薬機法(旧薬事法)の規制があります。効果・効能の表現には十分注意してください。
④ お客様の声・口コミ
社会的証明(ソーシャルプルーフ)として、実際のユーザーの声は非常に効果的です。
- ターゲットに近い属性の人の声を選ぶ(年齢・性別・悩み・ライフスタイル)
- 実名・顔写真があると信頼性が大幅に上がる
- ビフォーアフターで変化を可視化する
- 具体的な数字や変化が入っているものを優先する
⑤ よくある質問(FAQ)
購入・申込前に訪問者が感じる「不安・疑問」を先回りして解消します。
FAQ設置の効果は大きく、購入直前の離脱を防ぐ重要な役割があります。「解約できるか」「副作用はないか」「配送はどのくらいかかるか」など、実際に問い合わせが多い内容を中心に構成しましょう。
⑥ 最終CTA(購入・申込)
ページ最後の決断を促すセクションです。
- 価格・特典・キャンペーン内容を明示する
- 「今だけ」「期間限定」の希少性を出す(事実に基づいて)
- 申込フォームをシンプルにする(入力項目は最小限に)
- 決済のセキュリティマークを表示して安心感を出す
BtoBリード獲得型の基本構成
SaaS・BtoBサービス・コンサルティング・採用などで「問い合わせ・資料請求・無料相談」などのリードを獲得するためのLPです。物販型と比べて意思決定の期間が長く、複数人が関与するため、信頼・実績の訴求が特に重要になります。

① ファーストビュー
BtoBでは「このサービスで何の課題が解決できるか」を明確に伝えることが最優先です。「〇〇の課題をお持ちですか?」という問いかけか、「〇〇を実現するためのサービス」という端的な説明が効果的です。
② 課題の明確化
ターゲット企業・担当者が抱えている課題を言語化して「自分ごと化」させます。「こんなお悩みありませんか?」という形式でチェックリスト的に示すと、読み手が自分の状況を重ねやすくなります。
③ サービス内容・特徴
3〜5つのポイントに絞り、図解や数字を使ってわかりやすく説明します。BtoBは専門的な内容になりがちですが、「何ができる」ではなく「何が変わる」という変化の視点で書くとCVRが上がりやすいです。
④ 実績・事例・数字
BtoBでは定量的な実績が信頼の決め手になります。
- 導入企業数・業種の幅広さ
- 具体的な改善率・コスト削減額
- 受賞歴・認定・上場企業導入実績
- 取引先ロゴ(許諾を得たもの)
⑤ お客様の声・導入事例
BtoBの場合、担当者名・会社名・業種が明示された声が最も説得力があります。「課題→導入理由→導入後の変化」という構成で書くと、検討者がイメージしやすくなります。
⑥ 料金プラン
「料金が不明瞭だと問い合わせしにくい」という心理を考慮し、概算でも料金感を示すことをおすすめします。プランが複数ある場合は比較表にまとめ、推奨プランを視覚的に目立たせると選択を促しやすくなります。
⑦ CTA(問い合わせ・資料請求)
BtoBでは「いきなり購入」ではなく、「まず資料請求」「まず無料相談」という低いハードルのCTAが効果的です。入力フォームは名前・会社名・メールアドレスのみにすると離脱率が大幅に下がります。
CTAボタンの配置と設計
LPの成果を左右する最重要要素がCTAボタンの設計です。

図3:CTAボタンの配置パターン(3か所設置が基本)
CTAは3か所以上設置する
LPは縦に長いため、購入意欲が高まったタイミングにすぐアクションできる環境を作ることが重要です。スクロールしないとボタンが見つからない状態は、機会損失につながります。
CTAを設置すべき場所
- ファーストビュー内(スクロール前に必ず1つ)
- 主要なコンテンツの区切り(訴求ポイント・お客様の声の後など)
- ページ最下部(最終的な決断を促す)
CTAボタンのテキストと色
「お申し込みはこちら」という漠然とした文言より、得られる価値や次のアクションを具体的に示した文言の方がCVRが高い傾向があります。
| 目的 | 効果が低い文言 | 効果が高い文言 |
|---|---|---|
| 物販・EC | お申し込みはこちら | 今すぐトライアルを試す(初回980円) |
| リード獲得 | 資料請求はこちら | 無料で資料をダウンロードする |
| 相談・問い合わせ | お問い合わせ | 無料で相談してみる(24時間以内に返信) |
| セミナー・イベント | 詳細はこちら | 無料で参加を申し込む(残〇席) |
色については、ページ内で最も目立つ色をCTAボタンに使うことが基本です。ページのメインカラーと補色関係にある色(例:青系ページにはオレンジや赤)が効果的なことが多いですが、A/Bテストで検証することをおすすめします。
目的別レイアウトのバリエーション
| LP種別 | 主なCTA | 特に重要なセクション | 特徴・注意点 |
|---|---|---|---|
| 物販・EC型 | 購入・定期申込 | 商品ビジュアル・お客様の声 | ビジュアルの質がCVRに直結 |
| BtoBリード獲得型 | 問い合わせ・資料請求 | 実績・事例・料金 | 意思決定者を意識した言語選択 |
| イベント・セミナー型 | 参加申込 | 登壇者・開催概要・残席数 | 希少性・期限を明確に |
| 採用LP型 | エントリー・説明会申込 | 社風・メンバー・働く環境 | 「人」が伝わるコンテンツが重要 |
| アプリDL型 | ストアへ遷移 | 機能紹介・スクリーンショット | スマホファーストで設計 |
よくある失敗と対策
失敗① ファーストビューに情報を詰め込みすぎる
テキスト・画像・ボタンを詰め込みすぎると視線が分散し、訪問者は何を見ればいいかわからなくなります。ファーストビューに入れる要素は「キャッチコピー・ビジュアル・CTAボタン」の3点に絞るのが基本です。
失敗② CTAボタンが少ない・見つけにくい
購入意欲が高まったタイミングでボタンが見当たらないと、そのまま離脱につながります。ページ全体を通じて3か所以上、目立つ色・大きさで設置しましょう。
失敗③ スマートフォン表示を後回しにする
現在のLPアクセスの多くはスマートフォンからです。PCで完璧に仕上げてもスマホで崩れていれば成果は出ません。制作段階からスマホ表示を優先して設計することをおすすめします。
失敗④ 「作って終わり」にする
完成したLPはスタートにすぎません。アクセスデータを見ながらキャッチコピー・画像・CTAボタンを継続的に改善することで、CVRは着実に上がっていきます。A/Bテストを活用して、データに基づいた改善を続けることが重要です。
まとめ
LPレイアウトのポイントまとめ
- ファーストビューで「3秒以内に自分ごと化」させる
- 訪問者の心理変化(AIDMA)に沿ってコンテンツを配置する
- 強みは3つに絞って視覚的に伝える
- お客様の声・実績で信頼を積み上げる
- CTAボタンは3か所以上・目立つ色で設置する
- 目的に合わせてレイアウトをカスタマイズする
- 公開後もデータを見ながら継続的に改善する
LPのレイアウトに「絶対の正解」はありません。業種・ターゲット・広告との組み合わせによって最適解は変わります。大切なのは、公開後のデータを見ながら継続的に改善を続けること。A/Bテストでキャッチコピーやボタン・画像を比較しながら育てていくことで、同じ広告費でも成果は大きく変わります。
この記事は「ランディングページ集めました」(https://lp-web.com/)が執筆・監修しています。 当メディアは2009年より国内外のLPを収集・掲載しているLP専門キュレーションサイトです。