「うんこゲームセンター」を作ったよ💩（Claude Codeとの作業の進め方）

はじめに

Claude Code を使用して、「うんこゲームセンター」というサイトを作りました。

この記事では、Claude Code にどう指示を出し、人間とAIでどう役割分担をしていったかを紹介します。
これがベストな進め方だとは思っておらず、手探りで進めてなんとか公開できる形になった、という内容をまとめた記事です。ただ、「AIは導入したけれど、そこからどうやってプロダクトを完成まで持っていけばいいかわからない」という方にとって、ひとつの利用例になればと思います。

なお、今回作ったのは静的HTMLで構成されるゲームサイトです。そのため「まず全体像を作り、細かい仕様はその場で決めながら詰めていく」という探索的な進め方をしています。作るシステムによっては仕様書駆動開発やテスト駆動開発などが向いていて、最初に決めるべきことも変わってきます。ここは時間をかけてじっくり考えるのがよいと思います。

サイトの紹介

完成した「うんこゲームセンター」について、軽く説明しておきます。

• うんこをテーマにしたゲームが複数遊べる
  • 現在は4種類（うんこボウリング、うんこかけっこ、うんこピアノ、うんこエアホッケー）
  • ゲームは今後も追加予定
• トップページ＋各ゲームのページ、というシンプルな構成
• ターゲットは小学生

【トップページ】
ゲーム一覧があります。

【ゲーム：うんこボウリング】
うんこを投げてピンを倒します。4人まで対戦できます。

【ゲーム：うんこかけっこ】
6人のうんこたちから、1位になるうんこを予想します。
途中、風が吹いたり犬が乱入したり、様々なハプニングが起こります。

大まかな方針

具体的な流れに入る前に、 AIを使う上で意識した方針に触れておきます。これらを守ると、「完成はしたけどなんか違うな」とはなりにくいかと思います。

• 完成像をしっかり思い描いた上で開発する
• 確認・判断は人間が責任を持って行う（わからなければ都度調べる）
• 自分が思っていることを、十分にAIへ伝える
  • 文章で詳しく書いたり、図を手描きしたり。伝える労力を惜しまない
• 1回でイメージどおりのものができると思わない。根気強く修正していく

さらに、 Claude に伝えたことや、検討の結果決まったことは、ファイルにまとめておきます。後の会話でこれらを参照させることで、 Claude の認識が自分の考えからズレにくくなります。

開発手順

それでは、実際の開発の流れを説明していきます。

フォルダ構成

プロジェクトフォルダ内に、まず以下のフォルダとファイルを作ります。

doc/
program/
CLAUDE.md

フォルダの役割は次のように分けています。

• doc：仕様に関するドキュメントを保存する
• program：本番環境へデプロイするソースコードを置く

CLAUDE.md には、「本番へデプロイするのは program ディレクトリのみ」と明記しています。こうしておくと、実際の動作に関係ないドキュメントが本番環境に紛れ込むのを防げます。

プロジェクト概要の作成

作りたいものの概要を、できるだけ詳しく書いて Claude に伝えます。

プロジェクト概要（抜粋）

# サービスについて
* サービス名：うんこゲームセンター
* サービス形態はWebサイト
* うんこに関係する独立したゲームが複数個ある。技術的にも独立している
* サイト全体としてのメニューなども存在するが、あまり複雑な機能は不要（子ども向けなので）
  * サイトとしての説明などを掲載する
  * そのメニューから各ゲームに遷移する

# ゲームの案
詳しくは実際にゲームを作る際に考える
* ゴリラがうんこ投げる
* フンコロガシがうんこ大きくする
* うんこクリーニングセンター（小回りの効かないマシンで床を塗るタイムアタック）
* うんこコロコロレース。どのうんこが1位になるか予想しよう

# サービスイメージ
* バカバカしくてポップな雰囲気
* うんこを汚いもの／排泄物として扱わない
* 保護者が見ても安心するように
* 子供向けの雰囲気を前面に押し出す。説明を丁寧に。ルビを振る

これをもとに、Claude と壁打ちしながら仕様を起こしていきます。このとき「不明点や検討が必要なところは私に質問して」と伝えておくことで、AIの勝手な判断で仕様が決まることが少なくなります。その結果、次のようなプロトタイプ実装計画ができあがりました。

実装計画（抜粋）

# うんこゲームセンター 実装計画

## 1. サービス概要
- サービス名: うんこゲームセンター
- 形態: 静的Webサイト
- ホスティング: Cloudflare Pages
- 対象: 小学校低学年（ひらがな中心、漢字にはルビ）
- 主な利用デバイス: スマホ中心。PC・タブレットでもきれいに表示
- 雰囲気: バカバカしくポップ、清潔感、排泄物として扱わない
- 原則: 「設定しなくても即遊べる」

## 2. 技術方針

### 2.1 構成
- モノレポ
- ビルドツール: Vite（マルチページ構成、各ゲーム独立ページ）
- パッケージマネージャ: npm
- Node.js: LTS（Voltaでプロジェクトpin）
- Gitでバージョン管理

## 3. 制作ロードマップ
1. セットアップ（Vite + ディレクトリ雛形）
2. 最初のゲーム: うんこボウリング を実装
3. 2本目以降のゲームを追加しながら共通要件を洗い出し
4. 共通シェル（戻る/あそびかたモーダル、キャンバスフィッティング）原型を作成
5. デザイン調整・ブラッシュアップ
6. リリース（Cloudflare Pages）

運用環境やフレームワークも、この段階で決めておきます。これらは後から変更するとすべて作り直しになりかねないからです。また、先に決めておけばAIが実装する際にも「技術的にできること・できないこと」を判断しやすくなります。

ゲームの開発

次に開発に着手していきます。今回はまず「そもそもAIでゲーム開発が成立するのか」を確かめたかったので、ゲームを1つ作ってからサイト全体（トップページ）の開発に進むことにしました。

1本目はボウリングゲームにしました。理由は次のとおりです。

• ルールが明確：決めなければいけない仕様が少なく迷いにくい
• 3Dでの実装が必要：ある程度の開発ボリュームがあり、実現可能性を試すのにちょうどよい

まずは、自分が考えている完成イメージを、なるべく詳しくテキストと図に起こして Claude に伝えます。

うんこボウリング仕様（抜粋）

# タイトル
うんこボウリング

# 仕様
* 縦画面
* プレイ人数：1人〜4人

# 流れ
* ゲームにアクセス
* タイトル画面
  * 何人で遊ぶ？「1人」「2人」「3人」「4人」
  * いずれかを押すとゲームスタート
* 2回投げるのを5セット行う。複数人の場合は1セット(2投)ずつで交代
* すべての投擲が終わったら結果発表

# ゲーム詳細
* ボール（うんこ）をピンの方向にスライドさせることで投擲できる
* ガターはない。ガターの溝に柵が付いていて、当たると跳ね返るイメージ
* スペアやストライクも実装されている

図は自分が描きやすいように描きましたが、Claude はかなり意図どおりに読み取ってくれます。とはいえ常に正確とは限らないので、「図から読み取って理解したことを説明して」と伝え、認識のズレがないかを毎回確認するようにしています。

このメモと図を読み込ませて壁打ちしたあと、仕様を Claude に書き起こしてもらいます。

うんこボウリング仕様詳細（抜粋）

# うんこボウリング 仕様詳細

## 基本仕様
* 縦画面（9:16）
* 3D表現
* プレイ人数：1人〜4人

## 画面フロー

### 1. タイトル画面
* 「うんこボウリング」タイトルを表示
* 「何人であそぶ？」と表示し、「1人」「2人」「3人」「4人」のボタンを配置
* いずれかを押すとゲームスタート

### 2. 投球画面
* レーンを後ろから見下ろす視点（手前にうんこ、奥にピン）
* うんこをスライドして投球する
* 投球後、カメラがうんこを追いかけてピンに向かって移動する演出

## ゲームルール
* 2投 × 5フレーム制
* 複数人の場合は1フレーム（2投）ずつ交代
* ピンは10本（通常のボウリングと同じ配置）
* ガターなし（溝に柵が付いていて、ボールが当たると跳ね返る）

これを必要に応じて修正したら、次は実装計画を立てます。

実装計画（抜粋）

# うんこボウリング 実装計画

## 技術選定

| 用途 | ライブラリ |
|------|-----------|
| 3D描画 | Three.js |
| 物理演算 | Cannon-es（Cannon.jsのES module版） |
| ビルド | Vite（既存構成） |

## 実装フェーズ

### フェーズ1：環境構築と3Dシーンの土台
### フェーズ2：3Dモデル作成
### フェーズ3：投球メカニクス
### フェーズ4：ゲーム進行管理
### フェーズ5：スコアシステム
### フェーズ6：タイトル画面と結果発表
### フェーズ7：仕上げ

方針が問題なさそうであれば、実装を開始します。実装計画に沿って開発したところ、最初はこんなものができあがりました。

ボウリングの基本的な機能はそろっていて、イメージと大きく違うところはなさそうです。あとは、これを根気強く修正していきます。進め方はシンプルで、

• まずは大きな箇所を直す
• そのあと、細かい部分を指示して直していく

という流れです。どんなに細かい修正でもAIは応じてくれるので、納得がいくまで作り込みます。こうして、うんこボウリングは一通り完成しました。

ゲーム共通部分の開発

このサイトには複数のゲームがありますが、ゲームをまたいで共通で使う仕組みもあります。たとえば次のようなものです。

• 各ゲームのヘッダーにある「トップへ戻るボタン」
• 「遊び方ボタン」と、押したときに開くモーダル
• トップへ戻る際のローディング画面

これらは、1つ目のゲームがある程度完成したタイミングで「共通コンポーネントとして使えるようにして」と Claude に伝え、実装してもらいました。

トップページの開発

次はトップページの開発です。ゲームのときと同じように、イメージをテキストと図にして Claude に伝えます。

トップページ仕様（抜粋）

## 構成要素
* タイトル文字
* サイトの簡単な説明
* ゲーム一覧
* このサイトについて（少し詳細な説明を箇条書きで）
* フッター（コピーライト）

## イメージ
* 派手な感じでバカゲー感を出す
* 背景は夜のイメージ
* 構成要素の枠は、電球で光っているイメージ
* 背景には大きいうんこが1つ描かれている（とぐろ巻き）

壁打ちしながら仕様を詰めていった結果、以下のようなページができあがりました。

トップページのデザイン

指示どおりのものは出てきたのですが、もう少し別のデザインも見てみたくなりました。アイデアが欲しかったので、Claude に提案してもらうことにしました。「別々の方向性で4つくらい案を出して。それぞれ静的HTMLで実装して」と伝え、各案の説明文もあわせて作ってもらいました。

これらを見比べながらイメージを膨らませていき、今のデザインに決まりました。

ロゴについても、同じようにいくつか案を実装してもらったうえで決めています。

デプロイ

これでトップページと各ゲームが作れたので、サイトに必要なものはひととおりそろいました。あとは、これを公開するためのデプロイです。

今回はホスティングに Cloudflare を使いました。広く使われているサービスなので Claude も知識が豊富で、作業手順は聞けば詳しく教えてくれます。基本的にはそれに従えば問題なく公開できますが、「セキュリティ的に問題ないか」といった判断は、やはり自分で行う必要があります。この辺りはわからなければ都度調べたり、大変ですが基本的な知識を勉強して身につけておいたりするのがよいと思います。

こうして、無事にサイトを公開できました。

まとめ

具体的な指示の内容はケースバイケースなので、そのまま真似できるとは限りません。今回はこんなふうに Claude との会話を積み重ねながらサイトを作ってきました。

AIはどんなに細かい要望でも、嫌な顔を見せず素早く実装してくれます。なので、依頼の仕方に迷わずどんどん依頼するのがよいと思います。一方で、考えたり判断したりするのは人間の仕事です。そこはしっかり時間を使わないといけないな、と改めて感じました。

その他

うんこゲームセンターの前に、「赤べこ3D」というサイトを作りました。私は3Dデータを使った開発をしたことがなく、「Claude でどのくらいのことができるんだろう？」と試しに作ってみたものです。思いのほか簡単に開発できたので、その経験を活かして、うんこゲームセンターにも3Dゲームを取り入れることができました。

こちらは私のポートフォリオサイトです。他にもいろいろゲームやツールを作っているので、よければご覧ください！