⚡
★ 86.6k

ユースケース: マーケティングチームが AI でゲームキャンペーンのランディングページを作成する

マーケティング/ゲームチームは、AI コーディングエージェントを使ってキャンペーンのブレインストーム、完全なランディングページの設計・構築ができます — アイデアから完成品まで約17分で、「生成して祈る」のではなく規律あるプロセスで。

背景

MOBA ゲーム 「The Ended World」 の ミニゲーム ルーレット（spin-to-win）機能のキャンペーンをローンチする必要があります — ゲームはリリース済みで安定したプレイヤーベースがあります。以下が必要です：

  • キャンペーン専用のランディングページ、ポストアポカリプスゲームに合ったダーク＆エピックなトーン
  • 限定版の独占ヒーロースキンをハイライト
  • 「ゲームをダウンロード」CTA で App Store / Google Play に誘導
  • チームに開発者がいない — AI ですべてを構築する必要がある

ツール:

  • AI コーディングエージェント（Claude Code）+ Superpowers
  • スキル: Brainstorming、UI/UX Pro Max、Writing Plans、Subagent-Driven Development
  • 技術: HTML/CSS/JS のみ — フレームワーク不要

学べること

  1. Brainstorming スキル — AI が1つずつ質問して、何かを始める前に要件を正確に理解する
  2. UI/UX Pro Max スキル — プロジェクトに適したデザインインテリジェンス（カラーパレット、タイポグラフィ、レイアウトパターン）を検索
  3. Writing Plans スキル — 具体的なタスクを含む詳細な実装プランを作成
  4. Subagent-Driven Development — 複数のエージェントを並列ディスパッチして実装を高速化
  5. 自動コードレビュー — 完了後のコード品質チェック

ステップ 1: ブレインストーミング — 要件の発掘

AI に伝えること：

「MOBA ゲーム『The Ended World』のルーレットミニゲーム機能のキャンペーンをローンチする必要があります。ランディングページを一緒にブレインストームしましょう。」

AI が1つずつ質問（7問）：

AI はすぐに作業に取りかからず、コンテキストを正確に理解するために 1つずつ質問 します：

質問 1 — ゲームの段階:

「ゲームはどの段階にあり、主なターゲットプレイヤーは誰ですか？」

  • A. リリース済み、安定したプレイヤーベース
  • B. 新規リリース
  • C. プレローンチ/ベータ
  • D. その他

回答: 「A」

質問 2 — ミニゲームのメカニクス:

「ルーレット機能はどのように動作しますか？」

  • A. Spin-to-win クラシック — 回転してランダムな報酬を獲得
  • B. ポイント/トークンを貯めてからスピン
  • C. シーズン/イベントに応じたルーレット
  • D. 複合

回答: 「A」

質問 3 — ランディングページの目標:

「主な目標は何ですか？」

  • A. ハイプ＆告知の創出
  • B. 事前登録の収集
  • C. Web 上で直接プレイ
  • D. 複合

回答: 「A」

(質問 4-7 では、AI が同様に A/B/C/D の選択肢で質問を続けます:)

質問 4 — ビジュアルスタイル: 選択 A — ダーク＆エピック、ダークトーン、ネオン/グロー、ポストアポカリプス

質問 5 — 報酬: 選択 A — 限定版独占ヒーロースキン

質問 6 — 技術スタック: 選択 A — HTML/CSS/JS のみ

質問 7 — CTA: 選択 B — ゲーム未所有者向けのダウンロード重視「ゲームをダウンロード」（App Store / Google Play）。既存プレイヤー向けの「今すぐプレイ」ではなく。これは戦略的決定：新規ユーザー獲得を優先。

AI が統合して3つのアプローチを提案：

十分な情報を収集した後、AI は3つの方向を提案します：

アプローチ説明メリットデメリット
A. 「The Wheel of Fate」 — シングルページ シネマティック（推奨）スクロールする長いページ、各セクションがスクロールアニメーション付きの「映画のシーン」没入感、エピック、ストーリーテリングしやすいアニメーションがより複雑
B. 「Neon Arena」 — ヒーロー重視コンパクト短いページ、ルーレット + ネオンの大きなヒーローセクションに集中高速ロード、モバイルに効果的「wow factor」が少ない
C. 「Apocalypse Spin」 — インタラクティブショーケースルーレットのデモシミュレーション、スクロールで各報酬スロットにズームインタラクティブ、好奇心を刺激最も複雑

選択: Approach A — 「The Wheel of Fate」

ポイント: AI はすべての質問を一度にしません。各回答が次の質問を精緻化する助けになります。そして AI は分析付きの複数オプションを提示して選択を促し、自分で決定しません。

ステップ 2: 設計 — カラーパレット、タイポグラフィ & ページ構造

AI が UI/UX Pro Max スキルを活用：

AI がプロジェクトに適したデザインインテリジェンスを自動検索: ゲーミング MOBA、ダーク エピック、ポストアポカリプス、ネオングロー。

カラーパレット — 「Neon Apocalypse」:

役割Hex説明
Background#0F0F23ディープダーク — 基調のダーク背景
Primary#7C3AEDバイオレットネオン — ルーレットのメインカラー
Secondary#00FFFFシアンネオン — アクセント、グローエフェクト
CTA#F43F5Eローズレッド — 「ゲームをダウンロード」ボタンの際立ち
Text#E2E8F0ライトグレー — ダーク背景で読みやすい
Gold accent#FFD700ゴールド — スキン報酬のハイライト

タイポグラフィ:

  • 見出し: Russo One — ボールド、ゲーミング感、大文字
  • 本文: Chakra Petch — 読みやすく、sci-fi/ゲーミングの雰囲気を維持

ページ構造 — 6セクション シネマティックスクロール:

#セクション目的エフェクト
1Hero — 「The Wheel Awaits」閲覧者を引き込むアニメーション付きルーレット、パーティクルエフェクト、ネオングローパルス
2Storyline — 「Fate Calls」ルーレットのロアを語るスクロールでテキストフェードイン、パララックス背景
3How It Works3ステップの遊び方説明アイコンステップのリビールアニメーション
4Rewards Showcase独占スキンのハイライトホバーグロー付きカードグリッド、Legendary にゴールドシマー
5Countdown/UrgencyFOMO 創出 — イベント期間限定アニメーション付きカウントダウンタイマー
6CTA Final — 「Claim Your Fate」コンバージョン — ゲームダウンロードへ誘導グロー付き大型 CTA ボタン、App Store/Google Play リンク

固定要素: 上部にゲームロゴ + 小さな「ゲームをダウンロード」ボタン付きの薄いナビバー（スクロール時に常時表示）。

ビジュアルコンパニオン: AI はカラーパレット、タイポグラフィ、ページ構造のワイヤーフレームのプレビューをブラウザ上に直接表示 — テキストで読むよりはるかに分かりやすくなります。

ステップ 3: デザイン仕様 & 実装プラン

AI がデザイン仕様を作成：

設計を承認した後、AI は デザイン仕様ドキュメント として docs/superpowers/specs/ に統合します。仕様は別のレビュアーエージェントによって 自動レビュー されます。

仕様レビュー結果: Approved、3つの小さな提案付き（ブロッキングではない）：

  • カウントダウンにイベント終了日のデフォルト値を設定すべき（例: デプロイ後14日）
  • アイコンライブラリの明確化が必要（カスタム SVG か Font Awesome か）
  • パーティクル: ファイル構造に particles.js があるため JS ベースで確定

AI が実装プランを作成（11タスク）：

# Wheel of Fate Landing Page — Implementation Plan

**アーキテクチャ:** 6つのスクロールアニメーションセクションを持つ静的 HTML/CSS/JS ページ。
CSS がビジュアルスタイリング（ネオングロー、ダークテーマ、レスポンシブ）を処理。
JS がスクロールトリガーアニメーション（Intersection Observer）、
Canvas ベースのパーティクルシステム、カウントダウンタイマーを処理。

## Tasks:
1. Project Scaffold & Design System CSS
2. Sticky Navbar
3. Hero Section + Spinning Wheel SVG
4. Storyline Section
5. How It Works（3ステップ）
6. Rewards Showcase（カードグリッド）
7. Countdown Timer + JS
8. CTA Final + Footer
9. Particle Effects（Canvas）
10. Scroll Animations + Navbar Show/Hide
11. Responsive & Accessibility Polish

プランも 自動レビュー — Approved、2つの小さな注意事項付き：

  • 実際のスキン画像がある場合は loading="lazy" を追加
  • Task 11 では git add -A ではなく具体的な git add を使用すべき

ステップ 4: 実装 — Subagent-Driven Development

AI が各タスクを個別エージェントにディスパッチ：

順次コーディングする代わりに、AI は Subagent-Driven Development を使用 — 各タスクが独立したエージェントに割り当てられます：

タスクエージェント所要時間コミット
1. Scaffold & Design SystemAgent 1約1分fc24707
2. Sticky NavbarAgent 2約36秒00fbae5
3. Hero SectionAgent 3約50秒8cae0a5
4. StorylineAgent 4約42秒e150e17
5. How It WorksAgent 5約46秒77b7624
6. Rewards ShowcaseAgent 6約54秒1009a42
7. Countdown TimerAgent 7約58秒d4d61f9
8. CTA Final + FooterAgent 8約1分5ef6e78
9. Particle EffectsAgent 9約36秒54c7749
10. Scroll AnimationsAgent 10約36秒68829fc
11. PolishAgent 11約1分30秒dd53c9a

Task 9 と 10 は並列実行 — 別々の JS ファイルを作成し、相互依存がないため。

各タスク = 1コミット。 必要に応じてロールバックが容易で、各部分を個別にレビューできます。

ステップ 5: コードレビュー & 修正

AI が最終コードレビュアーをディスパッチ：

11タスク完了後、AI が自動で 実装全体のコードレビュー を実行します。

結果: Approved、修正が必要な1つの重要な問題付き：

問題説明修正
メディアクエリの順序タブレットブレークポイント (min-width: 768px) が max-width なしでデスクトップもオーバーライドand (max-width: 1023px) を追加
カーソルの誤解報酬カードに cursor: pointer だがクリック不可cursor: pointer を削除

AI が即座に修正しコミット: 15cc895

ポリッシュ中に AI が自動発見した改善点：

  • カウントダウンタイマーに時間終了時の clearInterval（メモリリーク防止）
  • パーティクルシステムにリサイズのデバウンス（ウィンドウリサイズ時のラグ防止）
  • カウントダウンに aria-live（スクリーンリーダー対応）
  • ナビバー CTA のタッチターゲット44px（モバイルアクセシビリティ基準）

最終結果

AI との作業 約17分 で、以下が完成：

成果物ステータス
完全なデザイン仕様承認済み
実装プラン（11タスク）承認済み
完成したランディングページ（HTML/CSS/JS）完了 — 12コミット
カラーパレット「Neon Apocalypse」6色、2フォント
6セクション シネマティックスクロールアニメーション付き、レスポンシブ
パーティクルエフェクト（Canvas）パフォーマンス最適化済み
カウントダウンタイマーアクセシブル、自動停止
コードレビュー & 修正2件の問題を修正

合計: 12コミット、ブレインストームから完成したランディングページまで。

適用された Superpowers 原則

原則適用方法
ブレインストーミングが先設計前に要件を正確に理解するための7つの順次質問
UI/UX Pro Max推測ではなく、適切なデザインインテリジェンスを検索
構造化されたプランデザイン仕様 → 実装プラン → レビュー → 実行
Subagent-Driven各タスク = 1エージェント、独立タスクは並列実行
自動レビュー仕様レビュー、プランレビュー、コードレビューすべて自動
YAGNIキャンペーンページに HTML/CSS/JS のみ — フレームワーク不要

マーケティング/ゲームチームへのヒント

  1. ブレインストーミングに具体的に回答する — AI が1つずつ質問するのには理由があります。回答が明確なほど、結果も適切になります。急いでスキップしないでください。

  2. ビジュアルコンパニオンを活用する — AI はブラウザ上にプレビューを表示できます。テキストで読むよりビジュアルモックアップを見た方が素早く判断できます。

  3. レビュープロセスを信頼する — AI は仕様、プラン、コードを自動レビューします。ただし最終アウトプットは確認すべきです — AI は良い枠組みを作りますが、ブランドボイスにはヒューマンタッチが必要です。

  4. 各タスク = 1コミット — あるセクションが気に入らなければ、残りの部分に影響を与えずに簡単にロールバックできます。

  5. コードを知る必要はない — 何を求めているかを知っていれば十分です。AI がすべての技術的な判断（カラーシステム、レスポンシブブレークポイント、アクセシビリティ、アニメーションパフォーマンス）を処理します。

まとめ: 「ゲームキャンペーン用のランディングページが必要」というアイデアから、6セクションのアニメーション、パーティクルエフェクト、カウントダウンタイマー付きの完成品まで — すべて約17分で。Superpowers は AI を「コード生成ツール」から「プロセスを持つチーム」に変えます: ブレインストーム → 設計 → プラン → 実装 → レビュー。