landing-pages

ランディングページ

すべてのランディングページが追求する主要なコンバージョン目標は、1つだけです。競合する目標が複数あると、コンバージョン率が低下します。1つの目標に、1つのページです。

対象範囲

次の場合にこのスキルを使用します。

• リード獲得または販売を目的としたランディングページを作成する
• CTA ボタンやコンバージョン要素を設計する
• ファーストビューを最適化する
• ソーシャルプルーフを戦略的に配置する
• ランディングページの A/B テストを計画する
• 目標に合ったランディングページの種類を選ぶ

原則

1. 1つの目標に、1つのページ

すべてのランディングページが追求する主要なコンバージョン目標は、1つだけです。目標が複数あると、コンバージョン率が低下します。

2. ランディングページはホームページではありません

ホームページは幅広い情報を提供します。ランディングページは、ターゲットを絞り、気を散らすものを排除して、販売やリード獲得を行います。

3. 訪問者は事前に選別されています

ランディングページにアクセスする人は、すでに広告を見たか、キーワードを検索しています。ページでは、提示した約束を果たす必要があります。

4. 取引の前に信頼を築く

信頼がなければ、ユーザーはコンバージョンに至りません。ソーシャルプルーフ、透明性、プロフェッショナルなデザインは必須です。

5. モバイルファーストは必須です

訪問者の半数以上はモバイルからアクセスします。スマートフォンで正常に動作しないページは、潜在的な成果の半分を無駄にします。

6. 意見よりテストを優先する

CTA ボタンを赤にするか緑にするかは、デザイナーの判断ではなく、A/B テストのデータで決めます。

ルール

DO：適切なランディングページの種類を選ぶ

種類	目標	長さ	特徴
オプトインページ	リードを獲得する	短め〜中程度	無料特典または価値との交換
セールスページ	製品・サービスを販売する	長め	あらゆる懸念に対応する
クリック誘導ページ	次のファネル段階へ進める	短め	関心を高め、売り込みはしない
スクイーズページ	最小限のデータを取得する	最小限	メールアドレス欄と CTA のみ
ウェビナー／イベントページ	登録を獲得する	中程度	日時、登壇者、カウントダウン

DO：主要なメッセージをファーストビューに提示する

スクロールせずに見える範囲に、次の要素を含める必要があります。

1. 見出し： 1文で明確なメリットを伝えます。言葉遊びやなぞかけは避けます。
2. サブ見出し： 内容を補足するか、懸念に対応します。
3. ヒーロービジュアル： メリットを視覚化する画像または動画です。
4. CTA ボタン： 目につきやすく、コントラストが高く、行動を促すものです。
5. 信頼要素： ソーシャルプルーフを少なくとも1つ含めます。

DO：行動を促す CTA ボタンを設計する

• メリットを含め、行動を促す文言にします：「無料トライアルを開始する」「見積もりを依頼する」。
• 避ける文言：「送信」「続ける」「ここをクリック」。
• 他の要素より視覚的に目立たせます（コントラストのある色を使用）。
• 長いページでは、各セクションの後に CTA を繰り返します。
• 1ページにつき主要な CTA の種類は最大1つです。

DO：コンバージョンにつながる構成にする（長文形式）

1. 問題を示す — ユーザーの悩みを理解していることを伝えます。
2. 解決策を提示する — 提案する内容が解決策になることを示します。
3. メリットを具体的に示す — 機能ではなく利点を箇条書きにします。
4. ソーシャルプルーフを提示する — お客様の声、事例、評価を紹介します。
5. 懸念に対応する — FAQ セクションを設けます。
6. 緊急性を高める — 本当に根拠がある場合に限り、制限やカウントダウンを使います。
7. CTA を繰り返す — 最後に、目立つ行動喚起を配置します。

DO：フォームの項目を最小限にする

• 絶対に必要なデータだけを求めます。項目が増えるたびにコンバージョン率は下がります。
• オプトイン：できればメールアドレスのみ。
• 販売：初回の連絡では名前とメールアドレスのみ。

DO：ナビゲーションを削除するか、最小限にする

• ランディングページには、完全なウェブサイトのナビゲーションを設けません。
• 最大でも、ロゴ（メインサイトへのリンク）とフッターの法的通知／プライバシーポリシーにとどめます。

DON'T：広告の約束を破らない

• 広告で「無料相談」を約束した場合、ページではその内容を正確に提供する必要があります。

DON'T：関連性のないストックフォトを使わない

• ありきたりなビジネス向けストックフォトでは、信頼を築けません。
• 実際の写真や、製品を意味のある形で表現したビジュアルを使います。

DON'T：同等の CTA を複数提示しない

• 1ページにつき目標は1つだけです。それだけです。

DON'T：テストせずに公開しない

• A/B テストの計画なしにランディングページを公開するのは、希望的観測に基づくマーケティングです。
• 最低限、見出しのバリエーション、CTA の文言、ヒーロー画像をテストします。

パターン

問題提起・深刻化・解決策（PAS）

営業とリード獲得向けです。1. 問題を明確に示す、2. 深刻化させる（解決しない場合に何が起きるかを示す）、3. 提案するオファーを解決策として提示する。詳しくは references/conversion-patterns.md を参照してください。

社会的証明のサンドイッチ

3か所に社会的証明を配置します。1. ファーストビュー（ロゴ、顧客数）、2. メリットのセクションの後（写真付きのお客様の声）、3. 最後の CTA の直前（評価、保証）。

動画ランディングページ

説明が必要な製品向けです。ヒーローセクションに自動再生を無効にした動画（最大90秒）を配置し、その下にテキストの要約と CTA を続けます。

カウントダウンによる緊急性の演出

期間限定のオファー向けです。CTA の上にカウントダウンタイマーを配置します。実際の締め切りがある場合にのみ使用してください。偽のカウントダウンは信頼を永久に損ないます。

アンチパターン

情報過多

テキストが多すぎる、セクションが多すぎる、視覚要素が多すぎる状態です。解決策： すべてのセクションに、コンバージョンの流れの中での役割を持たせます。

見つけにくい CTA

CTA が目立たない、小さすぎる、または大幅にスクロールしないと表示されない状態です。解決策： ファーストビューと各セクションの後に CTA を配置します。コントラストの高い色を使い、十分な大きさにします。

汎用的な見出し

「ようこそ」や「ソリューションを提供します」などです。ユーザーに呼びかけていると感じられません。解決策： 「30日でリードを50％増やす」のように、メリットを重視した見出しにします。

モバイルで機能しないファネル

デスクトップでは優れていても、モバイルでは使いにくい状態です。トラフィックの50％以上がコンバージョンできません。解決策： モバイルファーストで設計します。CTA ボタンは親指で届く位置に配置します。

仮説のない A/B テスト

ランダムなバリエーションをテストしても、実行につながる知見は得られません。解決策： すべてのテストに仮説を立てます。「Z という理由から、X を変更すれば Y になると期待します。」

チェックリスト

• ページごとにコンバージョン目標を1つだけ定義している
• ランディングページの種類を選択している（オプトイン、販売、クリック誘導など）
• ファーストビューに、見出し、副見出し、ヒーロービジュアル、CTA、信頼要素がある
• CTA ボタンが行動を促す文言で、コントラストが高い
• ナビゲーションを削除するか、ロゴと法的情報のみに縮小している
• フォームのフィールドを最小限にしている
• 少なくとも3か所に社会的証明を配置している
• よくある反論に答える FAQ セクションがある
• モバイル版を個別に確認し、最適化している
• 広告の訴求内容とランディングページの内容が一致している
• 読み込み時間が3秒未満である
• 少なくとも1つの仮説を含む A/B テスト計画がある
• トラッキングとコンバージョン測定を設定している

相互参照

• customer-journey — ランディングページは中心的なタッチポイントです
• design-process — ランディングページの作成にも同じプロセスを適用します
• ai-design-workflow — AI は見出し、CTA、コピーのバリエーションを生成できます
• website-audit — 既存のランディングページは監査対象の一部です
• usability — フォームとコンバージョンの最適化
• ui-design — コンバージョン要素のビジュアルデザイン