Claude + Vercel(v0)でノーアイデアから始めるAIゲーム開発

Claude + Vercel(v0)でノーアイデアから始めるAIゲーム開発

Clock Icon2025.02.28

ゲームソリューション部の えがわ です。

今回はAIにゲームの内容を考えてもらい、それをもとにゲームを作成し、公開まで行います。
ブラウザで動作し、コードも書かない、ということを条件とします。

ゲームの要件決め

ノーアイデアなので、まずはClaudeと対話してゲームの仕様を決めます。
モデルはClaude 3.7 Sonnetを使用しています。

ブラウザ上で動作するゲームを作成したいです。
どんなゲームがいいと思いますか?
Claude
ブラウザゲームを作成されるのは素晴らしいですね!いくつか候補を提案させていただきます:

**初心者向け:**
1. **クイズゲーム** - 様々なカテゴリの質問に答えるシンプルなゲーム
2. **メモリーカードゲーム** - カードをめくって同じ絵柄をマッチングさせる
3. **シンプルなクリッカーゲーム** - 要素をクリックしてポイントを稼ぐ育成ゲーム

**中級者向け:**
1. **テトリス風パズルゲーム** - ブロックを組み合わせるクラシックゲーム
2. **プラットフォーマー** - 2Dの横スクロールジャンプアクション
3. **タワーディフェンス** - 敵の侵入を防ぐ戦略ゲーム

**上級者向け:**
1. **マルチプレイヤーカードゲーム** - オンラインで対戦できるカードゲーム
2. **ローグライク** - ランダム生成ダンジョンの探索ゲーム
3. **ブラウザMMORPG** - シンプルなオンラインRPG

ご経験やスキルレベル、作りたいゲームのジャンルについて教えていただければ、より具体的なアドバイスができます。どのような方向性をお考えですか?

ここで「久しぶりにクリック連打したいな...」と思ったのでクリッカーゲームを選択します。
複雑そうな要件は除外するように伝えます。

シンプルなクリッカーゲーム - 要素をクリックしてポイントを稼ぐ育成ゲーム
これとてもいいですね!
このゲームの要件を考えてください。
Claude
# シンプルなクリッカーゲーム要件

## 基本コンセプト
クリックでリソースを獲得し、アップグレードを購入して効率を高める育成型ゲーム

## 主要機能

### 1. コアメカニクス
- **クリック要素**: 画面中央に配置された大きなボタン/オブジェクト
- **クリック報酬**: 1クリックごとに基本ポイント獲得
- **ポイント表示**: 現在の所持ポイントを常に表示
- **自動生成**: 一定時間ごとに自動でポイント獲得(アップグレード後)

### 2. アップグレードシステム
- **クリック効率アップグレード**: 1クリックあたりの獲得ポイント増加
- **自動生成アップグレード**: クリックしなくても自動でポイント獲得
- **アップグレード一覧**: 画面サイドに購入可能なアップグレード表示
- **コスト増加**: アップグレードごとに次回の購入コスト上昇

### 3. 進行要素
- **マイルストーン**: 特定のポイント達成で新機能解放
- **実績システム**: 特定条件達成で報酬獲得
- **プレステージ機能**: 進行をリセットして特殊ボーナス獲得(発展版)

### 4. UI/UX
- **シンプルで直感的なインターフェース**
- **視覚的フィードバック**: クリック時のアニメーション効果
- **統計情報**: 総クリック数、経過時間などの表示
- **セーブ機能**: ブラウザのローカルストレージを使用した進行保存

### 5. テーマ設定(例)
- **宇宙開発**: 惑星をクリックして資源を集め、宇宙船や基地を建設
- **クッキー工場**: クッキーをクリックして生産、オーブンや工場を購入
- **農場経営**: 作物をクリックして収穫、農具や設備を購入

## 技術要件
- **HTML/CSS/JavaScript**: フロントエンド開発
- **ローカルストレージ**: ゲーム進行の保存
- **レスポンシブデザイン**: 様々なデバイスでの動作対応

## 拡張可能性
- **テーマカスタマイズ**: プレイヤーによる見た目の変更
- **ミニゲーム**: 特定条件で解放されるサブゲーム
- **ソーシャル要素**: フレンド機能や簡易ランキング

このゲームの魅力は、シンプルな操作性と徐々に成長していく達成感にあります。初期実装はシンプルに始め、プレイヤーの反応を見ながら機能を追加していくことをお勧めします。

クッキー工場は既視感があるので、宇宙開発にしてみます。

テーマは宇宙開発でいきましょう!
進行要素、拡張可能性については初期のフェーズでは必要ありません。
Markdown形式で吐き出してください。
Claude
# 宇宙開発クリッカーゲーム仕様書

## コンセプト
宇宙の資源を集めて宇宙開発を進める、シンプルなクリッカー育成ゲーム

## 基本要素

### コアメカニクス
- **クリック要素**: 中央に配置された惑星(初期は小さな小惑星)
- **基本リソース**: 「宇宙資源」(Space Resources、略してSR)
- **クリック報酬**: 1クリックごとに1SR獲得
- **リソース表示**: 画面上部に現在のSR量を常時表示

### アップグレードシステム

#### クリック効率アップグレード
| アップグレード名 | 効果 | 初期コスト | コスト増加率 |
|----------------|------|-----------|------------|
| 採掘ドリル | クリックあたり+1SR | 10SR | ×1.5 |
| 高性能採掘機 | クリックあたり+5SR | 50SR | ×1.5 |
| 小惑星破砕装置 | クリックあたり+10SR | 200SR | ×1.5 |
| 量子採掘技術 | クリックあたり+50SR | 1000SR | ×1.5 |

#### 自動生成アップグレード
| アップグレード名 | 効果 | 初期コスト | コスト増加率 |
|----------------|------|-----------|------------|
| 自動採掘ロボット | 毎秒1SR | 15SR | ×1.5 |
| 採掘ステーション | 毎秒5SR | 100SR | ×1.5 |
| 軌道採掘施設 | 毎秒25SR | 500SR | ×1.5 |
| 自律型採掘艦隊 | 毎秒100SR | 3000SR | ×1.5 |

## UI/UX設計

### レイアウト

+------------------------------------------+
|  宇宙資源: 0 SR  |  毎秒: 0 SR          |
+------------------------------------------+
|                                          |
|                                          |
|                                          |
|             [惑星イメージ]               |
|             クリックして採掘             |
|                                          |
|                                          |
+------------------------------------------+
|  クリックアップグレード  |  自動生成    |
|  - 採掘ドリル (10SR)    |  - 自動採掘ロボット (15SR) |
|  - 高性能採掘機 (50SR)  |  - 採掘ステーション (100SR) |
|  - 小惑星破砕装置 (200SR) | - 軌道採掘施設 (500SR) |
|  - 量子採掘技術 (1000SR) | - 自律型採掘艦隊 (3000SR) |
+------------------------------------------+

### 視覚的フィードバック
- クリック時に小さな資源アイコン(+1SR, +2SR など)が惑星から浮かび上がるアニメーション
- アップグレード購入時に購入ボタンが光るエフェクト
- 自動生成時に定期的に小さな資源アイコンが自動的に表示される

### 統計情報
- 総クリック数
- 総獲得資源量
- プレイ時間

## 技術仕様

### 使用技術
- HTML5 / CSS3
- JavaScript (ES6+)
- ローカルストレージ(進行状況保存用)

### データ構造
// ゲーム状態の例
const gameState = {
  resources: 0,
  clickValue: 1,
  autoClickValue: 0,
  lastSaved: Date.now(),
  totalClicks: 0,
  totalResourcesEarned: 0,
  upgrades: {
    clickUpgrades: [
      { id: "drill", name: "採掘ドリル", cost: 10, value: 1, count: 0, multiplier: 1.5 },
      // 他のアップグレード...
    ],
    autoUpgrades: [
      { id: "robot", name: "自動採掘ロボット", cost: 15, value: 1, count: 0, multiplier: 1.5 },
      // 他のアップグレード...
    ]
  }
};

### 保存システム
- ブラウザのローカルストレージを使用
- 30秒ごとに自動保存
- 手動保存ボタンも実装

## 実装ロードマップ

1. 基本的なクリック機能とリソース表示
2. アップグレードシステムの実装
3. 自動生成機能の実装
4. 視覚的フィードバックとアニメーション
5. データ保存機能
6. UI/UXの改善とデザイン調整

これで初期フェーズの宇宙開発クリッカーゲームの基本仕様が完成します。将来的に進行要素や拡張機能を追加する際の土台として機能します。

これでゲームの要件は作成できました。
Claudeが提示したものを選択しているだけで要件ができています。

ゲームを作成してもらう

Vercelv0でコードを書いてもらいます。
Claudeが作成した要件をそのままコピペします。

ただ要件を提示しただけで次々とコードを書いてくれます

vercel_claude_02.png

できたみたいなので、動作確認を行います。

vercel_claude_01.png

指定の場所をクリックすると資源が増加したので問題なさそうです。
多少バグはありますが、今回はこれで完成とします。

ではこのゲームを公開します。

右上のDeployボタンで簡単に公開できます。
vercel_claude_08.png

Deployedになったので、URLにアクセスしてみます。

vercel_claude_03.png

ブラウザでゲームを遊ぶことができました!

claude_vercel.gif

なんとv0には一度しかプロンプトを投げていません!
ここから遊べますが、すぐに非公開にするかもです。

さいごに

AIを使用することで簡単なゲームならコードを書かずに数分で公開することが可能です。
要点定義から開発まで、用途に適したAIを使用することで開発生産性は向上します。
この記事がどなたかの参考になれば幸いです。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.