landing-page-generator

ランディングページジェネレーター

実証済みのコピーライティングフレームワーク、セクションパターン、コンバージョン最適化手法を活用して、コンバージョン率の高いランディングページをデザイン・構築します。

---

目次

• キーワード
• クイックスタート
• 主要なワークフロー
• ページセクションライブラリ
• コピーライティングフレームワークの適用
• コンバージョン最適化チェックリスト
• デザインスタイルのリファレンス
• CTA 戦略
• SEO とパフォーマンス
• A/B テストフレームワーク
• ベストプラクティス
• 統合ポイント

---

キーワード

ランディングページ、ランディングページのデザイン、コンバージョン最適化、リード獲得ページ、キャンペーンページ、マーケティングページ、ヒーローセクション、CTA 戦略、ランディングページのコピー、ランディングページジェネレーター、プロモーションページ、コンバージョンページ、リード獲得ページ、シングルページサイト、ランディングページテンプレート、A/B テスト、ページレイアウト、ファーストビュー、ソーシャルプルーフ、料金表、FAQ セクション、お客様の声ブロック

---

まず確認すること

ページを生成する前に、以下の情報を確認してください。不明な点や曖昧な点があれば、推測せずに質問してください。

• コンバージョンの目標とオファー — 1つだけのアクションと、訪問者が得られるもの（すべてのページには1つの目標と1つの CTA があります）
• ターゲットオーディエンスと認知度 — 対象者と、その人たちが知っていること（コピーライティングフレームワーク PAS／AIDA／BAB の選択に影響します）
• 主な悩みと主なメリット — 問題と主要な成果（ヒーローの見出しや問題／解決策の各セクションに反映されます）
• トラフィックソース — 広告、メール、オーガニック（メッセージの一致度とページの調整方針を決めます）

質問のルール：出力に最も大きく影響する2〜3項目だけを質問してください。ユーザーが「とにかく下書きを作って」と言った場合は、そのまま進め、成果物の冒頭に前提を記載してください。

クイックスタート

ランディングページを生成する

1. 情報を集めます：製品、オーディエンス、悩み、主なメリット、オファー
2. デザインスタイルを選択します（dark-saas、clean-minimal、bold-startup、enterprise）
3. オーディエンスの認知度に基づいてコピーライティングフレームワークを選択します（PAS、AIDA、BAB）
4. 次の順序でセクションを構築します：ヒーロー > 問題 > 解決策 > ソーシャルプルーフ > 仕組み > CTA
5. 公開前にコンバージョン最適化チェックリストを実施します
6. 見出しと CTA のバリエーションで A/B テストを設定します

ランディングページ概要テンプレート

## Landing Page Brief
- Product/Service: [Name]
- Value proposition: [One sentence]
- Target audience: [Who and what they need]
- Key pain point: [Primary problem you solve]
- Key benefit: [Primary outcome they get]
- Offer: [What you are offering — trial, demo, download, purchase]
- Traffic source: [Where visitors come from — ads, email, organic]
- Design style: [dark-saas / clean-minimal / bold-startup / enterprise]
- Copy framework: [PAS / AIDA / BAB]

---

主要なワークフロー

ワークフロー 1：ランディングページ全体の構築

ステップ 1：唯一の目標を定義する

すべてのランディングページには、1つの目的と1つの CTA があります。何よりも先に定義してください。

• 訪問者にどのようなアクションを取ってほしいですか？
• その見返りとして、訪問者は何を得られますか？
• トラフィックソースは何ですか（見出しとの一致度を判断するために必要です）？

ステップ 2：コピーライティングフレームワークを選択する

フレームワーク	適している状況	オーディエンスの認知度
PAS（問題 > 深刻化 > 解決）	オーディエンスが問題を認識している	問題認知
AIDA（注意 > 関心 > 欲求 > 行動）	オーディエンスに説明が必要	未認知から問題認知
BAB（導入前 > 導入後 > 橋渡し）	オーディエンスが変化を望んでいる	解決策認知

ステップ 3：順番にセクションを構築する

順序	セクション	目的
1	ヒーロー	5秒で価値を伝える
2	ソーシャルプルーフバー	すぐに信頼性を高める
3	問題提起	相手の悩みを理解していることを示す
4	解決策／メリット	解決策を提示する
5	仕組み	認知される複雑さを軽減する
6	メリット付きの機能	得られるものを詳しく説明する
7	お客様の声	実際の顧客からの証拠を示す
8	料金（該当する場合）	判断を後押しする
9	FAQ	懸念に対応する
10	最終 CTA	リスクを軽減して、もう一度行動を促す

ステップ 4：セクションごとにコピーを書く

以下のページセクションライブラリにある、各セクション固有のガイドラインを使用してください。

ステップ 5：コンバージョン向けに最適化する

公開前にコンバージョン最適化チェックリストを実施してください。

ワークフロー 2：キャンペーンのランディングページ

広告キャンペーン、メールキャンペーン、ローンチイベント向け：

ステップ 1：メッセージの一致

ランディングページの見出しは、必ず流入元となる広告／メールと一致させます。

• 広告に「チャーンを 30％削減」とある場合、ランディングページの見出しにも「チャーンを 30％削減」と記載します
• 期待が一致しないと、ユーザーはすぐにページから離脱します

ステップ 2：メッセージを 1 つに絞る

すべてのナビゲーション、サイドバーリンク、二次 CTA を削除します。

• ヘッダーナビゲーションを設置しません（離脱経路をなくします）
• 法的要件を満たすためのリンクを除き、フッターリンクを設置しません
• 1 つの CTA をページ内で 2～3 回繰り返します
• すべてのセクションを 1 つのコンバージョン目標に結び付けます

ステップ 3：流入元に合わせて調整

流入元	ページの調整
有料検索（Google）	H1 に検索キーワードを含めます
有料ソーシャル（Meta、LinkedIn）	広告のフック／メリットを冒頭に示します
メールキャンペーン	メールで約束した内容を冒頭に示します
オーガニック検索	包括的な回答を冒頭に示します
紹介／パートナー	紹介元の文脈を冒頭に示します

---

ページセクションライブラリ

ヒーローセクション

最も重要なセクションです。5 秒以内に価値を伝える必要があります。

構成要素：

• 見出し（主要な価値提案）
• サブ見出し（見出しを補足し、具体性を加える）
• メイン CTA ボタン
• セカンダリ CTA（任意。より気軽に実行できるもの）
• 補助ビジュアル（製品のスクリーンショット、イラスト、動画）
• 信頼の証（ソーシャルプルーフバー、顧客数、バッジ）

ヒーローのバリエーション：

バリエーション	レイアウト	最適な用途
センタリング	テキストを中央に配置し、その下に CTA、さらに下にビジュアルを配置	シンプルなオファー、明確な価値提案
分割	左側にテキスト、右側にビジュアル（またはその逆）	視覚的な訴求力／スクリーンショットの強い製品
動画背景	雰囲気のある動画にテキストを重ねる	ブランド重視のページ、認知向けページ
ミニマル	見出しと CTA のみで、ビジュアルなし	購買意欲の高いユーザーからの流入、直接的なオファー
ソーシャルプルーフヒーロー	お客様の声を見出しにする	冒頭に紹介できる強力な顧客事例がある場合

ヒーローコピーのガイドライン：

• 見出し：6～12 語で、主要なメリットを含めます
• サブ見出し：1～2 文で、具体性を加えるか、「どのように」を説明します
• CTA：行動を表す動詞＋得られるもの（「無料トライアルを始める」）
• CTA の下の補足テキスト：心理的な負担を軽減します（「クレジットカードは不要です」）

課題セクション

何かを売り込む前に、読者の気持ちを理解していることを伝えます。

構成：

• 読者自身の言葉で表した 2～3 個の悩み
• それぞれの悩みを具体的にし、読者が自分事として認識できるようにします
• 任意：課題によるコストを数値化します（「この課題によって、チームには毎月平均 $X のコストが発生します」）

ソリューション／メリットセクション

製品を、読者が求める成果に結び付けます。

構成：

• 主なメリットを 3～5 個（機能ではなくメリット）
• 各メリットを次のパターンで説明します：[できること] ＞ [それが重要な理由] ＞ [具体的な成果]
• 各メリットをビジュアルで補足します（アイコン、スクリーンショット、イラスト）

仕組みセクション

認識される複雑さを、3～4 個のシンプルなステップに減らします。

構成：

• ステップ 1：[アクション]（簡単な説明を添える）
• ステップ 2：[アクション]（簡単な説明を添える）
• ステップ 3：[アクション]（簡単な説明を添える）
• ステップ 4（任意）：[成果]（「[期間]以内に結果を確認できます」）

ルール：

• 4 ステップを超えないようにします（複雑さはコンバージョンを妨げます）
• 各ステップは行動を表す動詞で始めます
• 各ステップは単独で理解できるようにします

ソーシャルプルーフセクション

コンバージョンへの影響が大きい順：

種類	影響	例
指標を含む実名のお客様の声	最高	「90 日間でチャーンを 23％削減」— Sarah Chen、マーケティング担当副社長
顧客ロゴ	高	認知度の高いブランドロゴを横一列に表示
集計指標	高	「2,847 チーム、40 か国以上、評価 4.8／5」
星評価／レビュー評価	中	「G2 で 5 点満点中 4.8（500 件以上のレビュー）」
導入事例へのリンク	中	「[Company] がどのように [result] を達成したかをご覧ください」
一般的なお客様の声	低	「素晴らしい製品です！」— John D.

料金セクション

ガイドライン：

• ティアは最大2〜4つ（3つが最適です）
• おすすめのティアを視覚的に強調します
• 機能比較表で、各ティアに含まれる内容を示します
• エンタープライズ向けのティアには、個別のニーズに対応する「お問い合わせ」を設けます
• 年払いと月払いの両方を提供する場合は、切り替えを用意します
• 料金の近くに信頼につながる要素を配置します（保証、いつでもキャンセル可能など）

FAQセクション

ガイドライン：

• 質問は最大5〜8件にします
• 購入をためらう実際の理由に対処する質問を選びます
• 回答は簡潔にします（1〜3文）
• SEO対策としてFAQPageのスキーママークアップを含めます

含める一般的なFAQの質問：

• 料金体系を教えてください。
• いつでもキャンセルできますか？
• セットアップにはどのくらい時間がかかりますか？
• 無料トライアルはありますか？
• データは安全ですか？
• どのような連携に対応していますか？
• [競合製品]との違いは何ですか？

最終CTAセクション

構成：

• 核となる価値を改めて伝える見出し
• 補足する1文
• メインのCTAボタン（ヒーローと同じ）
• リスクを軽減する文言（保証、クレジットカード不要、いつでもキャンセル可能など）
• 任意：顧客数またはお客様の声の抜粋

---

コピーライティングフレームワークの適用

ランディングページへのPASの適用

セクション	PASの要素	コピーのアプローチ
ヒーローの見出し	Problem（問題）	課題を率直に示します
問題提起セクション	Agitate（煽り）	対処しない場合の影響を示します
ソリューションセクション	Solve（解決）	解決策として製品を紹介します
CTA	Solve（解決）	解決策を利用するための明確なアクションを示します

例：

• ヒーロー：「チームは毎週4時間を手作業のレポート作成に費やしています」
• 問題提起：「これは年間200時間に相当し、フルタイム従業員1人が表計算に費やす時間と同じです。その間にも、競合他社は機能をリリースしています。」
• ソリューション：「[Product]がレポート作成を自動化します。一度設定すれば、毎週月曜の朝にレポートを受け取れます。」
• CTA：「レポートを自動化する — 無料トライアルを開始」

ランディングページへのAIDAの適用

セクション	AIDAの要素	コピーのアプローチ
ヒーローの見出し	Attention（注意）	大胆で、目を引くメッセージ
メリットセクション	Interest（関心）	関連する詳細やメリットを加えて説明します
社会的証明	Desire（欲求）	根拠を示し、変化後の姿を具体的に描きます
CTA	Action（行動）	明確で、行動を促す呼びかけ

ランディングページへのBABの適用

セクション	BABの要素	コピーのアプローチ
ヒーロー＋問題提起	Before（導入前）	現在のつらい状況
ソリューション＋メリット	After（導入後）	実現したい将来の状況
仕組み	Bridge（橋渡し）	製品がどのように目標達成を支援するか

---

コンバージョン最適化チェックリスト

ファーストビュー

• 見出しで6秒以内に価値が伝わる
• モバイル（375pxのビューポート）でスクロールせずにCTAが見える
• ナビゲーション項目は1つ以下（またはナビゲーションなし）
• サブ見出しで見出しの内容を具体化している
• ビジュアルがメッセージを補強している（装飾目的ではない）

ページ全体

• ページ全体を通じてコンバージョン目標が1つに絞られている
• CTAが2〜3回表示される（ヒーロー、中盤、フッター）
• 最初の2回のスクロール以内に社会的証明が表示される
• すべての機能に対応するメリットが示されている
• 最終CTAの前に懸念点が解消されている
• すべてのCTAの近くにリスクを軽減する文言がある
• CTAと競合する外部リンクがない
• フォームで必須の情報だけを尋ねている

信頼性と信用性

• お客様の声には氏名が記載され、具体的な内容が含まれている
• 許可を得た企業ロゴを使用している
• 該当する場合、セキュリティバッジや認証を表示している
• データ収集フォームからプライバシーポリシーにリンクしている
• 住所または会社情報を確認できる

モバイル

• モバイルでページが3秒以内に読み込まれる
• CTAボタンが親指で操作しやすい（高さ48px以上）
• 拡大しなくてもテキストが読める（16px以上）
• 横スクロールがない
• フォームがモバイルキーボードで使いやすい

---

デザインスタイルの参考資料

スタイルの選択肢

スタイル	ビジュアルの雰囲気	最適な用途
ダーク SaaS	暗い背景、鮮やかなアクセント、グラデーション効果	開発者向けツール、技術製品、モダンな SaaS
クリーンでミニマル	白い背景、控えめな境界線、すっきりしたタイポグラフィ	専門サービス、医療、教育
大胆なスタートアップ	大きなタイポグラフィ、鮮やかな色、ダイナミックなレイアウト	消費者向け製品、スタートアップ、クリエイティブツール
エンタープライズ	落ち着いた色調、構造化されたレイアウト、保守的なデザイン	B2B エンタープライズ、金融、行政

ビジュアル階層のルール

1. 見出しはページ内で最も大きなテキスト要素にします
2. CTA ボタンは視覚的に最も目立つ要素にします
3. 補足テキストは見出しよりも明らかに小さくします
4. 余白でセクションを分け、ゆとりを持たせます
5. 色のコントラストは WCAG AA 基準（テキストで最低 4.5:1）を満たします
6. 料金ページでは、おすすめプランを視覚的に区別します

---

CTA 戦略

CTA の配置

位置	目的	コピーの方針
ヒーロー	主なコンバージョンポイント	行動＋メリット：「無料トライアルを始める」
メリットの後	高まった関心を捉える	行動を促す：「実際の動作を見る」
ソーシャルプルーフの後	信頼を活用する	ソーシャル：「2,847 チームに参加する」
ページのフッター	最後の機会	緊急性：「今日始めましょう — 14 日間無料」

CTA コピーの定型文

[Action Verb] + [What They Get]

• 「無料トライアルを始める」
• 「完全版ガイドを入手する」
• 「チーム向けの料金を見る」
• 「最初のダッシュボードを作成する」

CTA の補足テキスト

ボタンの下に次の文言を表示して、利用開始のハードルを下げます。

• 「クレジットカードは不要です」
• 「2 分でセットアップできます」
• 「いつでもキャンセルできます」
• 「14 日間無料」
• 「2,847 チームに参加する」

---

SEO とパフォーマンス

SEO チェックリスト

• タイトルタグ：主なキーワード＋ブランド、50～60 文字
• メタディスクリプション：メリット＋CTA、150～160 文字
• H1：各ページに 1 つ、主なキーワードを含める
• OG 画像：1200x630px、製品名と価値提案を含める
• 正規 URL を設定
• すべての画像に alt テキストを設定
• 構造化データ：FAQ セクションがある場合は FAQPage スキーマを使用
• モバイルビューポートの meta タグを設定

パフォーマンス目標

指標	目標	達成方法
最大コンテンツの描画（LCP）	2.5 秒未満	ヒーロー画像を最適化し、最新の形式（WebP/AVIF）を使用する
累積レイアウトシフト（CLS）	0.1 未満	すべての画像と埋め込みコンテンツに明示的な寸法を設定する
次の描画までのインタラクション（INP）	200ms 以下	重要でない JavaScript の読み込みを遅らせ、長いタスクを分割する（INP は 2024 年 3 月に FID に代わりました）
最初のバイトまでの時間（TTFB）	600ms 未満	CDN、サーバーサイドレンダリング、または静的生成を使用する
ページの合計サイズ	1MB 未満	画像を圧縮し、JavaScript バンドルを最小化する

---

A/B テストのフレームワーク

テスト対象（影響の大きい順）

1. 見出し — 最も影響の大きい要素です。2～3 種類のバリエーションをテストします。
2. CTA のコピーと色 — 行動を促すテキストと視覚的な目立ちやすさをテストします。
3. ヒーロー画像／ビジュアル — 製品のスクリーンショット、イラスト、動画を比較します。
4. ソーシャルプルーフの配置 — ファーストビューの上部と、メリットの後を比較します。
5. フォームの長さ — 入力項目を減らす場合と、見込み客の質を高める場合を比較します。
6. 価格の表示 — 年額と月額のデフォルト設定、価格アンカーを比較します。

テストのルール

• 一度にテストする変数は 1 つにします
• テストは最低 14 日間、または各バリエーションで 1,000 人の訪問者を集めるまで実施します
• 勝者を決める前に統計的有意性（信頼度 95%）を計算します
• すべてのテストについて、仮説、バリエーション、結果を記録します
• 初期の結果を根拠にテストを早期終了しないでください

テストの記録

## A/B Test: [Name]
- Page: [URL]
- Hypothesis: [If we change X, then Y improves because Z]
- Control: [Current version]
- Variant: [Changed version]
- Primary metric: [Conversion rate / Click rate / Signup rate]
- Duration: [Start - End]
- Traffic per variant: [Number]
- Result: [Winner + lift + confidence]
- Learning: [What we apply going forward]

---

ベストプラクティス

1. 1ページにつき1つの目標 — ページ上のすべての要素は、唯一のコンバージョン目標に役立つ必要があります。コンバージョンにつながらない要素は削除してください。

2. メッセージを一致させる — ランディングページの見出しは、訪問のきっかけとなった広告、メール、またはリンクのメッセージを反映させる必要があります。期待との不一致は、離脱の主な原因です。

3. ナビゲーションを削除する — ランディングページには、法的要件を除き、ヘッダーナビゲーション、サイドバー、フッターリンクを設置しないでください。ページから離れる経路はすべて、コンバージョンの機会損失になります。

4. モバイルファースト — まず幅375pxのビューポート向けにデザインしてください。広告トラフィックの大半はモバイルデバイスから訪れます。

5. ファーストビューにCTAを配置する — 主要なCTAは、デスクトップでもモバイルでもスクロールせずに見える位置に配置してください。

6. ソーシャルプルーフを早めに示す — 信頼性を示す要素は、最初の2回のスクロール以内に配置してください。コンバージョンには信頼が欠かせません。

7. フォームの入力項目を最小限にする — 入力項目が1つ増えるごとにコンバージョン率は低下します。見込み客の適格性を判断するために必要な最小限の項目だけを尋ねてください。

8. 速度がコンバージョンを左右する — 読み込み時間が1秒延びるごとに、コンバージョン率は約7％低下します。積極的に最適化してください。

9. 徹底的にテストする — 見出しだけでもコンバージョン率に20～50％の差が生じることがあります。影響の大きい要素はすべてA/Bテストしてください。

10. すべてのCTAの近くでリスクを軽減する — 「クレジットカード不要」「返金保証」「いつでも解約可能」などの文言を添えてください。意思決定の瞬間に最後の懸念を取り除きます。

---

連携ポイント

• コピーライティング — コピーの作成に使用します。ランディングページジェネレーターは構成と最適化を担当し、コピーライティングは文言を担当します。
• 広告クリエイティブ — ランディングページへの流入を促す広告に使用します。広告とページのメッセージを一致させてください。
• マーケティング心理学 — 心理学の原則（アンカリング、ソーシャルプルーフ、損失回避）を活用して、ページの各要素を強化します。
• キャンペーン分析 — ランディングページのパフォーマンスを測定し、得られた知見を最適化に活用します。
• ブランドガイドライン — 一貫性を保つため、ブランドのビジュアルおよびトーン＆マナーの基準を参照します。
• コンテンツヒューマナイザー — 初稿後のページコピーが機械的またはありきたりに聞こえる場合に使用します。

---

トラブルシューティング

症状	考えられる原因	対処方法
有料トラフィックの直帰率が高い	見出しが広告と一致していない	広告コピーとランディングページのH1で、メッセージが完全に一致していることを確認します。
モバイルでCTAがファーストビューに表示されない	ヒーローセクションが高すぎる、またはCTAの優先度が低い	幅375pxのビューポートでテストします。CTAはスクロールせずに見える位置に配置する必要があります。
トラフィックは多いがコンバージョンがゼロ	コンバージョンの計測が機能していない	サンクスページでピクセルが発火することを確認します。実際にコンバージョンを発生させてテストします。
ページの読み込みが遅い（モバイルで3秒超）	画像が最適化されていない、JavaScriptが重い	page_speed_estimator.pyを実行します。画像をWebPに変換し、重要でないJavaScriptの読み込みを遅延させます。
フォームは送信されるがCRMにリードがない	フォームからCRMへの連携が機能していない	フォーム送信を最初から最後までテストします。Webhook/API接続を確認します。
CTAが多く、訪問者が混乱している	コンバージョンへの経路が多すぎる	ランディングページごとに目標を1つにします。すべてのCTAで同じアクションに誘導してください。
コピーは良いのにコンバージョン率が低い	ソーシャルプルーフやリスク軽減策がない	conversion_checklist.pyを実行します。CTAの近くに、お客様の声と「クレジットカード不要」の文言を追加します。

---

成功基準

• 主要なCTAのコンバージョン率が6.6％を超えている（2025年の全業界中央値）
• モバイルで3秒以内にページが読み込まれる（LCPが2.5秒未満、CLSが0.1未満）
• CTAがデスクトップ（1440px）とモバイル（375px）の両方でファーストビューに表示される
• 競合するナビゲーションや離脱経路がなく、コンバージョン目標が1つに絞られている
• メッセージが一致している：ランディングページの見出しが流入元（広告、メール、リンク）のメッセージを反映している
• 最初の2回のスクロール以内にソーシャルプルーフが表示される
• トラフィックの多いページでは、見出しまたはCTAのA/Bテストが常に実施されている

---

対象範囲と制限事項

対象範囲： ランディングページの構成、セクションのパターン、コピーのフレームワーク適用、コンバージョン最適化、CTA 戦略、SEO メタタグ、A/B テストのフレームワーク、デザインスタイルのガイダンス。

対象外： ページのコピー作成（copywriting を使用）、トラフィックを誘導する有料広告キャンペーン（paid-ads を使用）、CMS／ウェブサイトビルダーの管理、分析プラットフォームのセットアップ。

制限事項： コンバージョンのベンチマークは、業界、トラフィックソース、オファーの種類によって大きく異なります。中央値の 6.6% は全業界を対象としたもので、SaaS のトライアルでは 10～25%、E コマースでは 2～3% になる場合があります。

---

Python 自動化ツール

1. ページ速度推定ツール（scripts/page_speed_estimator.py）

HTML ソースから Core Web Vitals を推定します。LCP、CLS のリスク、スクリプト／画像の分析、コンバージョンへの影響を確認できます。

python scripts/page_speed_estimator.py page.html
python scripts/page_speed_estimator.py page.html --json

2. CTA 分析ツール（scripts/cta_analyzer.py）

ランディングページ全体の CTA の配置、コピーの強さ、摩擦のレベル、一貫性を分析します。

python scripts/cta_analyzer.py page.html
python scripts/cta_analyzer.py page.html --json

3. コンバージョンチェックリスト（scripts/conversion_checklist.py）

2025～2026 年のベストプラクティスとベンチマークに照らし合わせ、20 項目以上にわたるコンバージョン最適化の包括的な監査を実施します。

python scripts/conversion_checklist.py page.html
python scripts/conversion_checklist.py page.html --json