solo-landing-gen

/landing-gen

プロジェクトの PRD からランディングページのコンテンツを生成します。ヒーローセクション、機能、ソーシャルプルーフ、CTA、SEO メタタグ、A/B テスト用の見出し案を作成します。astro-static スタックが検出された場合は、実際のページファイルをスキャフォールドできます。

MCP ツール（利用可能な場合に使用）

• kb_search(query) — コンバージョンやコピーライティングに関する関連手法を検索します
• project_info(name) — プロジェクトのスタックと詳細を取得します
• web_search(query) — 競合のランディングページを分析します

MCP ツールが利用できない場合は、Glob + Grep + Read に切り替えます。

手順

1. $ARGUMENTS からプロジェクトを解析します。

   • プロダクト情報を得るため、PRD、README、または research.md を読みます。
   • 空の場合：AskUserQuestion で質問します。

2. スタックを検出します。

   • astro.config.* を確認 → astro-static（ページをスキャフォールド可能）
   • next.config.* を確認 → Next.js（ルートをスキャフォールド可能）
   • それ以外：コンテンツのみの Markdown を生成

3. PRD/README からランディングページの入力情報を抽出します。

   • 課題： 悩みを表す1文
   • ソリューション： プロダクトの説明1文
   • ICP： ターゲットユーザーのペルソナ
   • 機能： 差別化につながる上位3〜4個の機能と説明
   • 競合： ポジショニングのため research.md から取得（存在する場合）
   • 価格： 入手可能な場合

4. 競合のランディングページを分析します（任意。MCP/WebSearch が利用可能な場合）。

   • 競合上位3社のランディングページを検索します
   • 見出しのパターン、CTA の文言、ソーシャルプルーフの種類を記録します
   • ポジショニングの隙間を特定します

5. 必須の推論 — コンバージョン戦略： 生成前に、以下を書き出します。

   • 主要なコンバージョン： 唯一のアクションは何ですか？（登録／ダウンロード／購入）
   • 懸念事項： ユーザーがコンバージョンに至らない主な理由を3つ
   • 信頼のシグナル： それぞれの懸念をどう解消しますか？
   • ファーストビュー： 課題 + ソリューション + CTA のみ。それ以外は含めません

6. ランディングページのコンテンツを生成します。

   6a. ヒーローセクション

   • 見出し： 課題を中心に、メリットを訴求（8〜12語）
   • サブ見出し： プロダクトが課題をどう解決するか（15〜25語）
   • CTA ボタン： 行動を表す動詞 + 成果（「無料トライアルを開始」「今すぐダウンロード」）
   • ビジュアル： 表示すべき画像／スクリーンショット／デモを説明します

   6b. A/B テスト用の見出し案（5案）

   異なる切り口の見出しを5案生成します。

   1. 課題重視：「{problem}にうんざりしていませんか？」
   2. メリット重視：「{hassle}なしで{Outcome}」
   3. 好奇心：「{action}するための{adjective}な方法」
   4. ソーシャルプルーフ：「{outcome}を実現した{N}+人の{users}に加わりましょう」
   5. 直接的：「{Product}：{one-line value prop}」

   6c. 機能セクション（3〜4個の機能）

   各機能について、以下を記載します。

   • アイコンの候補（絵文字またはアイコン名）
   • 機能のタイトル（3〜5語）
   • 機能の説明（1〜2文）
   • メリットを訴求（プロダクトが何をするかではなく、ユーザーが何を得られるか）

   6d. ソーシャルプルーフセクション

   • お客様の声用のプレースホルダー（名前、役職、引用文のテンプレート）
   • 指標用のプレースホルダー（「X+人のユーザー」「Y%高速化」「Zか国」）
   • 信頼バッジ用のプレースホルダー（App Store の評価、受賞歴、報道）

   6e. CTA セクション

   • 見出しを再掲（または別案）
   • CTA ボタン（ヒーローと同じもの）
   • リスクを軽減する文言（「永久無料」／「クレジットカード不要」／「いつでもキャンセル可能」）

   6f. SEO メタタグ

   <title>{title — 50-60 chars}</title>
   <meta name="description" content="{description — 150-160 chars}">
   <meta property="og:title" content="{og title}">
   <meta property="og:description" content="{og description}">
   <meta property="og:image" content="{suggest image dimensions 1200x630}">
   <meta property="og:type" content="website">
   

7. 出力を書き込みます。

   astro-static が検出された場合： src/pages/index.astro または新しいルートにページをスキャフォールドします。

   それ以外の場合： docs/landing-content.md に書き込みます。

   # Landing Page Content: {Project Name}
   
   **Generated:** {YYYY-MM-DD}
   **Primary CTA:** {action}
   **Target ICP:** {persona}
   
   ## Hero
   **Headline:** {headline}
   **Subheadline:** {subheadline}
   **CTA:** {button text}
   **Visual:** {description}
   
   ## A/B Headlines
   1. {variant 1}
   2. {variant 2}
   3. {variant 3}
   4. {variant 4}
   5. {variant 5}
   
   ## Features
   {features with icons and descriptions}
   
   ## Social Proof
   {templates and placeholders}
   
   ## Final CTA
   {closing section}
   
   ## SEO Meta Tags
   {html meta tags}
   
   ---
   *Generated by /landing-gen. Fill in social proof, add visuals, then publish.*
   

8. 出力の概要 — 見出し、CTA、推奨する次のステップ。

注意事項

• 見出しはテスト可能なものにしてください。2〜3案で A/B テストを実施します
• 「ファーストビュー」はヒーローのみです。情報を詰め込みすぎないでください
• ソーシャルプルーフはプレースホルダーです。実データが得られたら差し替えます
• フェイクドアテストでは、ヒーロー + CTA + メールアドレスの入力欄で十分です（2時間で公開可能）
• /seo-audit と併用できます。コンテンツを生成してから、公開済みページを監査します

注意点

1. ヒーローのCTAはファーストビューに配置する必要があります — ユーザーが主要なアクションを見つけるためにスクロールする必要があると、コンバージョン率が40％以上低下します。ヒーローとは、見出し＋サブ見出し＋CTAボタン＋ビジュアルです。それ以外は何も配置しないでください。
2. CTAが多すぎると、意思決定が難しくなります — 1ページにつき主要なCTAは1つにしてください。「詳細を見る」や「料金を見る」などの二次的なアクションは、視覚的に目立たないようにします。同じ強さのボタンを3つ横並びにするのは避けてください。
3. ソーシャルプルーフの仮置きは、ソーシャルプルーフがないよりも悪影響があります — 「0人のユーザーが参加」や空の推薦文欄は、「誰も使っていない」という印象を与えます。実際のデータが得られるまで、ソーシャルプルーフのセクションは丸ごと削除してください。代わりに「{創業者名}が開発」と記載します。
4. ソーシャルシェアにはOG画像が必須です — og:image がないと、Twitter／LinkedIn／Slackで共有したリンクのプレビューが空白になります。1200x630pxの画像を使用してください。https://cards-dev.twitter.com/validator でテストしてください。
5. リリース前に見出しをA/Bテストしてください — 見出しを1つだけ選んで公開するのは避けてください。Google Ads（1日20ドル、3日間）を使って、3～5種類の案を比較テストします。最も良い案をランディングページに掲載してください。

よくある問題

PRDまたは製品情報が見つからない

原因： プロジェクトに docs/prd.md または製品の説明が記載されたREADMEがありません。 解決策： まず /validate を実行してPRDを生成するか、課題／解決策／機能を記載したREADMEを用意してください。

見出しが抽象的すぎる

原因： 課題の説明が弱い、または競合との差別化が不足しています。 解決策： 競合分析を含む research.md を追加してください。具体的な課題があれば、見出しも具体的になります。

ページのスキャフォールディング用に技術スタックを検出できない

原因： astro.config.* または next.config.* が見つかりません。 解決策： スキルはデフォルトでコンテンツのみのMarkdownを出力します。実際のページファイルを生成するには、プロジェクトがastro-staticまたはnextjs-supabaseスタックを使用していることを確認してください。