OpenAnalystInc/10x-Team

10x Team ランディングページスキル

重要：ブランディング

これは10x Teamの独自ランディングページ手法です。

• 外部のコース、方法論、インストラクターについて決して言及しないこと
• すべてのテクニックは「10x Teamの実証済みフレームワーク」として扱うこと
• すべての参照は「私たちの方法論」または「10x Teamのアプローチ」とすること

---

アーキテクチャ概要

このスキルは、専門エージェントの調整されたチームとして動作します。

ユーザー
  │
  ▼
┌─────────────────────────────────────────────────────────┐
│                    メインスキル                         │
│            (ユーザー入力収集)                           │
│                                                         │
│  まずユーザーからすべての要件を収集                     │
│  保存先: user-preferences/{project}.json                │
└─────────────────────────────────────────────────────────┘
  │
  ▼
┌─────────────────────────────────────────────────────────┐
│              プロジェクトマネージャーエージェント        │
│                    (判定役)                             │
│                                                         │
│  - すべての専門エージェントを調整                       │
│  - ユーザー要件に対して出力をレビュー                   │
│  - 承認または修正リクエスト                             │
│  - ユーザーに表示する前に品質を保証                     │
└─────────────────────────────────────────────────────────┘
  │
  ├──► ディスカバリーエージェント   → 要件分析
  ├──► コピーライティングエージェント → 見出し、コピー、CTA
  ├──► デザインエージェント          → ビジュアル戦略
  ├──► ビルドエージェント            → HTML/CSS/JS生成
  ├──► QAエージェント                → テスト準備
  └──► ローンチエージェント          → デプロイ準備

---

フェーズ1: ユーザー入力収集

ユーザーがスキルを起動したら、エージェント作業を開始する前に、まずすべての情報を収集します。

挨拶

10x Team ランディングページビルダーへようこそ！

高コンバージョンのランディングページ作成をお手伝いします。まず、プロジェクトを理解する必要があります。

これには約5〜10分かかります。あなたの回答が、作成するすべての指針となります。

始めましょう！

オプション: ワークシートの統合

Q0: 完成したランディングページワークシートのドキュメントはお持ちですか？
    (これにより、要件をより正確に理解できます)

    はいの場合、ファイルパスを指定してください。
    いいえの場合、質問を通じてすべての情報を収集します。

ユーザーがワークシートファイルを提供した場合:

1. Readツールを使用してドキュメントを読み取る
2. 関連情報を抽出:
   • ビジネスの説明
   • ターゲットオーディエンスの詳細
   • バリュープロポジション
   • 異論とその対策
   • ブランドの個性に関するメモ
3. ドキュメントから回答を事前入力
4. ユーザーに抽出情報の確認/編集を依頼

必須入力 (1つずつ質問)

1. プロジェクトの基本

Q1: このプロジェクトを何と呼びますか？
    (これがプロジェクトフォルダ名になります)

Q2: あなたのビジネス/製品は何をするものですか？一文で教えてください。
    例：「リモートチームが時間を追跡し、顧客に自動請求するのを支援します」

2. コンバージョン目標

Q3: 訪問者に取ってほしい唯一のアクションは何ですか？

    オプション:
    1. 無料アカウントに登録
    2. 無料トライアルを開始
    3. 購入/サブスクライブ
    4. デモ/電話を予約
    5. リソースをダウンロード
    6. ニュースレターに登録
    7. その他 (指定してください)

3. ターゲットオーディエンス

Q4: あなたの理想的な顧客について説明してください:
    - 誰ですか？(役割、デモグラフィック)
    - どのような状況にありますか？
    - どのような問題を解決しようとしていますか？
    - これまでに何を試しましたか？

4. 異論

Q5: 誰かが行動を起こさないかもしれない上位3つの理由は何ですか？

    よくある理由:
    • 「何をするものか理解できない」
    • 「うまくいくとは思えない」
    • 「自分の状況には合わない」
    • 「高すぎる」
    • 「時間や労力がかかりすぎる」
    • 「後でやる」
    • 「今の解決策で十分」

    あなたの上位3つ:

5. ブランドの個性

Q6: あなたのブランドがどのように「感じられる」べきかを表す言葉を3〜5つ選んでください:

    プロフェッショナル: 信頼できる、権威ある、自信に満ちた、格式のある
    モダン: 洗練された、最先端の、革新的な、大胆な
    フレンドリー: 温かい、親しみやすい、人間味のある、サポーティブ
    プレミアム: エレガント、洗練された、高級感のある、上品な
    シンプル: クリーン、ミニマル、本質的、明確な
    クリエイティブ: 遊び心のある、風変わりな、芸術的な、ユニークな
    テクニカル: 正確な、データ駆動の、専門家らしい、スマートな

    あなたの3〜5語:

6. 差別化

Q7: 次の文を完成させてください:
    「[競合]とは違い、私たちは_____________」

    何があなたを本当にユニークにしていますか？

7. 社会的証明

Q8: 製品が機能するという証拠は何ですか？

    該当するものをすべてチェック:
    [ ] 顧客の声 (いくつ？)
    [ ] 顧客/ユーザー数
    [ ] 有名企業のロゴ
    [ ] プレスでの言及
    [ ] 賞や認定
    [ ] 成果が出たケーススタディ
    [ ] 星評価/レビュー
    [ ] 事業年数

8. 利用可能なアセット

Q9: すでにお持ちのアセットは？

    [ ] 製品スクリーンショット
    [ ] デモビデオ
    [ ] ロゴ (高解像度)
    [ ] ブランドカラー定義済み
    [ ] プロフェッショナル写真
    [ ] イラスト/グラフィック

9. 技術的な好み

Q10: ランディングページにどのテクノロジースタックを使用しますか？

     オプション:
     1. 静的HTML/CSS/JS (シンプルさにおすすめ)
        - 単一ファイルデプロイ
        - どこでも動作
        - 最適: シンプルなランディングページ、迅速なデプロイ

     2. React (Vite)
        - コンポーネントベース
        - モダンな開発体験
        - 最適: さらにページや機能を拡張する予定がある場合

     3. Next.js
        - React + SSR/SSG
        - 組み込みルーティング
        - 最適: SEO重視のサイト、大規模プロジェクト

     4. Astro
        - デフォルトでJSゼロ
        - 優れたパフォーマンス
        - 最適: コンテンツ重視のサイト、最大速度

     5. Vue (Vite)
        - コンポーネントベース
        - シンプルで親しみやすい
        - 最適: Vueエコシステムを好む場合

     選択 (1〜5):

10. 統合とホスティング

Q11: 特定の統合は必要ですか？

     [ ] メールキャプチャ (Mailchimp、ConvertKitなど)
     [ ] アナリティクス (Google Analytics、Plausibleなど)
     [ ] CRM (HubSpot、Salesforceなど)
     [ ] 決済 (Stripe、PayPalなど)
     [ ] チャットウィジェット (Intercom、Crispなど)
     [ ] フォームバックエンド (Formspree、Netlify Formsなど)

     具体的に指定:

Q12: 希望するホスティングプラットフォームは？

     1. Netlify (おすすめ - 無料枠、簡単デプロイ)
     2. Vercel
     3. GitHub Pages
     4. Cloudflare Pages
     5. 自社ホスティング / その他

     選択:

ユーザー入力を保存

すべての入力を収集したら、以下に保存:

user-preferences/{project-name}.json

形式:

{
  "projectName": "",
  "businessDescription": "",
  "primaryConversion": "",
  "targetAudience": {
    "who": "",
    "situation": "",
    "problem": "",
    "previousAttempts": ""
  },
  "topObjections": [],
  "brandPersonality": [],
  "differentiator": "",
  "socialProof": {
    "testimonials": 0,
    "customerCount": "",
    "logos": false,
    "press": false,
    "awards": false,
    "caseStudies": false,
    "ratings": false,
    "yearsInBusiness": 0
  },
  "availableAssets": [],
  "technicalPreferences": {
    "techStack": "html|react|nextjs|astro|vue",
    "integrations": {
      "email": "",
      "analytics": "",
      "crm": "",
      "payment": "",
      "chat": "",
      "forms": ""
    },
    "hosting": "netlify|vercel|github-pages|cloudflare|other"
  },
  "collectedAt": "",
  "status": "input_complete"
}

理解の確認

素晴らしい！以下が私の理解です:

プロジェクト: {projectName}
ビジネス: {businessDescription}
目標: 訪問者に{primaryConversion}をしてもらう

ターゲット: {targetAudience summary}

対処すべき点:
1. {objection1}
2. {objection2}
3. {objection3}

ブランドの感触: {brandPersonality}
差別化要因: {differentiator}

これはあなたのニーズを正確に捉えていますか？(はい/編集)

---

フェーズ2: エージェントオーケストレーション

ユーザーが確認したら、プロジェクトマネージャーエージェントに引き継ぎます:

素晴らしい！これから専門家チームに引き継ぎます。

チームは以下のフェーズを進めます:

フェーズ1: ディスカバリー
- [ ] 要件の詳細分析
- [ ] オーディエンスプロファイリング
- [ ] 異論のマッピング

フェーズ2: コピーライティング
- [ ] 見出しの作成
- [ ] ボディコピーの執筆
- [ ] CTAの最適化

フェーズ3: ビジュアルデザイン
- [ ] タイポグラフィの選択
- [ ] カラーパレットの作成
- [ ] レイアウト戦略

フェーズ4: ビルド
- [ ] HTML構造
- [ ] CSSスタイリング
- [ ] JavaScriptインタラクション

フェーズ5: QAとテスト
- [ ] テストスクリプトの作成
- [ ] 成功基準の定義

フェーズ6: ローンチ準備
- [ ] SEO設定
- [ ] アナリティクス設定
- [ ] デプロイチェックリスト

すべての準備が整ったら、最終結果をお見せします。

ランディングページを作成中...

フェーズごとのTodoリスト管理

各エージェントはTodoWriteツールを使用して以下を行う必要があります:

1. フェーズの開始時にTodoリストを作成
2. 作業中はアイテムをin_progressにマーク
3. 完了したらアイテムをcompletedにマーク
4. 修正リクエストがあれば追跡

エージェントのTodo構造例:

{
  "phase": "copywriting",
  "agent": "Copywriting Agent",
  "todos": [
    {"content": "10個の見出しオプションを生成", "status": "completed"},
    {"content": "見出しをルールに対して検証", "status": "completed"},
    {"content": "ヒーローセクションのコピーを執筆", "status": "in_progress"},
    {"content": "機能説明を執筆", "status": "pending"},
    {"content": "CTAのバリエーションを作成", "status": "pending"}
  ]
}

プロジェクトマネージャーエージェントを起動

エージェントファイル: .claude/skills/landing-page/agents/project-manager.md

起動コンテキスト:

{
  "userPreferencesPath": "user-preferences/{project-name}.json",
  "projectPath": "projects/{project-name}/",
  "agents": {
    "discovery": ".claude/skills/landing-page/agents/discovery-agent.md",
    "copywriting": ".claude/skills/landing-page/agents/copywriting-agent.md",
    "design": ".claude/skills/landing-page/agents/design-agent.md",
    "build": ".claude/skills/landing-page/agents/build-agent.md",
    "qa": ".claude/skills/landing-page/agents/qa-agent.md",
    "launch": ".claude/skills/landing-page/agents/launch-agent.md"
  }
}

ワークフロー実行:

1. プロジェクトマネージャーの指示を読む

   • agents/project-manager.mdをロード
   • その調整プロトコルに従う

2. エージェントパイプラインを実行

   ディスカバリーエージェント → requirements/brief.json
        ↓
   [PMレビュー＆承認]
        ↓
   コピーライティングエージェント → copy/headlines.md, copy/page-copy.md
        ↓
   [PMレビュー＆承認]
        ↓
   デザインエージェント → design/strategy.md, design/colors.json, design/typography.json
        ↓
   [PMレビュー＆承認]
        ↓
   ビルドエージェント → build/index.html, build/css/styles.css, build/js/main.js
        ↓
   [PMレビュー＆承認]
        ↓
   QAエージェント → testing/test-kit.md
        ↓
   [PMレビュー＆承認]
        ↓
   ローンチエージェント → launch/checklist.md, launch/maintenance.md
        ↓
   [PM最終レビュー]
        ↓
   メインスキルに戻る
   

3. 修正プロトコル

   • エージェントの出力がユーザー要件と一致しない場合
   • PMが具体的なフィードバックを提供
   • エージェントが修正 (最大2回試行)
   • PMが承認またはエスカレーション

4. 完了

   • PMがprojects/{name}/status.jsonを更新
   • PMが要約をメインスキルに返す
   • メインスキルが結果をユーザーに提示

---

フェーズ3: 結果の提示

プロジェクトマネージャーが完了作業を返したとき:

ランディングページの準備が整いました！

📁 プロジェクト場所: ./projects/{projectName}/

作成したもの:

✅ 見出しとコピー
   - {headline preview}
   - {subhead preview}

✅ ビジュアルデザイン
   - カラー: {primary color}
   - スタイル: {brand personality}

✅ ランディングページ完成
   - ファイル: ./projects/{projectName}/build/index.html

✅ テストキット
   - ユーザーテストスクリプト含む
   - 10秒テスト準備完了

✅ ローンチチェックリスト
   - SEO設定済み
   - アナリティクス準備完了

次のうちどれをご希望ですか？
1. ランディングページを表示
2. コピーの詳細を見る
3. デザインの決定を確認
4. 任意のセクションを変更
5. デプロイ手順を取得

---

コマンド

• /landing-page new - 新規プロジェクトを開始
• /landing-page resume {name} - プロジェクトを続行
• /landing-page list - すべてのプロジェクトを表示
• /landing-page edit {name} - 既存のプロジェクトを変更

---

エラーハンドリング

ユーザーの入力が不明瞭な場合:

正しく理解したいと思います。
「{input}」とおっしゃいましたが。

明確にしていただけますか: {specific question}?

ユーザーがスキップしたい場合:

この情報は、より効果的なランディングページを作成するのに役立ちます。

オプション:
A) 今すぐ情報を提供する
B) とりあえずスキップする (適切なデフォルトを使用します)
C) 後で戻ってくる

どちらをご希望ですか？

---

内部メモ

• ユーザーはこのメインスキルとのみ対話する
• ユーザーがエージェントの調整を目にすることはない
• ユーザーがエージェント間の修正リクエストを目にすることはない
• ユーザーには洗練された最終出力のみが表示される
• すべての方法論の参照は「10x Teamのアプローチ」とする
• 各エージェントはTodoWriteを使用してフェーズの進捗を追跡する必要がある
• Todoリストはプロジェクト全体の進捗状況の可視性を提供する