landing-page-generator-skill

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

コンバージョンにつながるランディングページを、自己完結型の単一 HTML ファイルとして作成し、同梱の監査スクリプトで検証します。

同梱リソース

リソース	用途	読み込み／実行するタイミング
assets/template.html	9 セクション、4 テーマ、SEO メタデータ、スキーマ、組み込み済みの CWV 最適化を備えた、本番環境対応のページ用スキャフォールド	新しいページを作成するたびに、最初のひな形としてコピーします
references/copy-frameworks.md	PAS／AIDA／BAB の適用方法、ヒーローコピーのルール、CTA の定型、トーンのルール	コピーを書く前に
references/section-library.md	セクションごとのパターン、バリエーション、ルール	セクションを追加／削除／調整するとき
references/design-styles.md	テーマの選択、トークン、タイポグラフィ、画像のルール	テーマを選ぶとき、またはブランドカラーを適用するとき
references/optimization.md	手動チェックリスト、CWV の目標値、A/B テスト、トラブルシューティング、ベンチマーク	納品前、およびパフォーマンスの低いページの問題を診断するとき
scripts/*.py	自動監査（「検証」手順を参照）	下書きのたび、納品前

まず確認すること

生成前に、以下の内容を確認します。出力を大きく左右する 2～3 項目だけを質問してください。ユーザーが「とにかく下書きを」と言った場合は、そのまま進め、成果物の冒頭に前提条件を列挙します。

• コンバージョン目標とオファー — 訪問者に促す単一のアクションと、訪問者が得るもの（1 ページ、1 つの目標、1 つの CTA）
• ターゲットオーディエンスと認知レベル — コピーのフレームワークを選択します（下記参照）
• 主な課題と主なメリット — ヒーローの見出しと「問題／解決策」セクションを決定します
• 流入元 — 広告、メール、オーガニック検索など（メッセージの一貫性を設定します）
• ブランド上の制約 — 既存のカラー、ロゴ、スクリーンショットがあるか、自由にデザインできるか

ワークフロー

1. フレームワークとテーマを選択する

オーディエンスの認知レベルに応じてコピーのフレームワークを選択します（詳細は references/copy-frameworks.md を参照）。

オーディエンス	フレームワーク
問題を認識している	PAS
情報を必要としている	AIDA
変化を望み、解決策があることを認識している	BAB

プロダクトの種類に応じてデザインテーマを選択します（詳細は references/design-styles.md を参照）：dark-saas（開発者向けツール、技術系 SaaS）、clean-minimal（サービス、ヘルスケア、教育）、bold-startup（消費者向け、クリエイティブ）、enterprise（B2B エンタープライズ、金融、政府機関）。

2. テンプレートを使って作成する

assets/template.html をコピーし、<body> に data-theme を設定して、すべての {{PLACEHOLDER}} を置き換えます。テンプレートのセクション順は標準です：ヒーロー → ソーシャルプルーフバー → 問題 → 解決策 → 利用方法 → お客様の声 → 価格 → FAQ → 最終 CTA。該当しないセクション（リード獲得用ページの価格セクションなど）は削除できますが、順序は変更しないでください。信頼性の提示は主張に先行し、異論への対応は最後の訴求に先行する必要があります。

テンプレートですでに適用されている、必ず守るべき要件 — 編集時もそのまま維持してください。

• H1 は 1 つだけにし、ナビゲーションはロゴと CTA のみにします（リンクを追加するたびに離脱経路が増えます）
• 同じ CTA アクションを約 3 回繰り返し、各ボタンの下に心理的ハードルを下げる文言を配置します
• 画像には明示的な幅と高さを設定し、ファーストビューより下では loading="lazy"、ヒーロー画像では fetchpriority="high" を指定します
• viewport メタデータ、メタディスクリプション、OG タグ、FAQPage スキーマ

誠実さに関するルール：お客様の声、顧客名、ロゴ、数値、保証を決して捏造しないでください。ユーザーから提供されていない場合は、明確に示したプレースホルダーを残し、必要な情報を列挙します。捏造したソーシャルプルーフは、ユーザーにとって法的リスクとなり、信頼を損ないます。

3. 監査スクリプトで検証する

完成した HTML に対して、3 つすべてを実行します（機械可読な出力には --json を使用できます）。

python scripts/conversion_checklist.py page.html   # 20+ point structure audit
python scripts/cta_analyzer.py page.html           # CTA placement, copy strength, consistency
python scripts/page_speed_estimator.py page.html   # Est. Core Web Vitals (LCP, CLS, INP)

グレード B 未満の項目と、フラグが立ったすべての問題を修正してから、再実行します。また、references/optimization.md の手動チェックも行います（見出しが価値をきちんと伝えているかどうかはスクリプトでは判断できないため、先入観なしに読み返してください）。

4. 納品

HTML ファイルと簡潔な概要を提出します。概要には、選択したフレームワークとテーマ（およびその理由）、監査スコア、行った仮定、ユーザー側で入力が必要なプレースホルダー（画像、実際のお客様の声、登録 URL、アナリティクス）を記載します。

ページに実際のトラフィックが流入する場合は、見出しの A/B テストを提案します。見出しは一般に、最も影響の大きい要素です（フレームワークについては references/optimization.md を参照）。

既存ページの監査

ランディングページの新規作成ではなく、既存ページのレビューや改善を依頼された場合は、対象ページに 3 つのスクリプトすべてを実行し、手動チェックとトラブルシューティング表について references/optimization.md を読みます。調査結果は、コンバージョンへの影響が大きい順に提示します（メッセージの一致度とファーストビューの CTA に関する問題を先に、見た目の問題を最後にします）。

対応範囲

対応範囲: ページ構成、コピーの適用、デザインテーマ、コンバージョン最適化、CTA 戦略、SEO メタ情報、CWV 最適化、A/B テストの設計、既存ページの監査。

対象外: トラフィックを誘導する広告キャンペーンの実施、CMS／ウェブサイトビルダーの管理、アナリティクスプラットフォームの設定、バックエンドでのフォーム処理（テンプレートのフォームには、ユーザー側で接続が必要な URL が指定されています）。

ベンチマークに関する注意: 業界全体のコンバージョン中央値（2025 年時点で約 6.6%）はカテゴリによって大きく異なります。SaaS のトライアルは 10～25%、e コマースは 2～3% です。あくまで参考値として扱い、実際のベンチマークにはユーザー自身のベースラインを使用してください。