AI全任せで作る！某スイカゲームのパロディ制作秘話

真夏の自由研究〜AIを使って雑にアプリを作ろう！〜 6日目はmassuが担当します。

こんにちは、2025年4月に新卒で入社しました、massuです！ 6月末まで行っていた新卒研修を無事に終え、AI エージェントの使い方にも慣れたところで個人でClaude Maxに課金してみました。

今回は、「AIに全部任せたらどこまでできるのか？」という素朴な疑問から始まった、ちょっと変わったゲーム開発の話をお届けします。コーディング標準もアーキテクチャ設計も一切なし、人間は指示を出すだけ。そんなシンプルなルールで作ったブラウザゲームの制作過程と、その過程で見えてきたAIの強みと課題について共有します。

今回作ったもの

高専時代の同級生であり、freeeの同僚でもあるe-mohaさんの顔が登場する、スイカゲームのパロディゲームを作りました。

ktpi-game.ktpi2000.dev

ゲーム一覧からカタピゲーム（スイカゲームのパロディ）を選択し、ゲームをプレイしているGif動画 — ゲームのプレイ動画

フルーツの代わりにe-mohaさんの顔が落ちてきて、同じサイズの顔を合体させると大きくなっていくという、シンプルながら中毒性のあるゲームです。実際、家族、友人などの身内から会社の同僚まで多くの人が中毒になり、私の母親も毎日遊んでいるそうです（笑）

e-mohaさんについて気になる方は、以下の記事を覗いてみてください。 developers.freee.co.jp

開発のきっかけ

ある日、友人とスイカゲームで遊んでいたときのことです。

「これ、暇つぶしにいいよね〜」
「そういえば、フルーツをe-mohaの顔にしたら面白くない？」
「それ絶対面白いじゃん！」

こんな軽いノリで盛り上がり、帰宅後すぐに開発に着手しました。

開発ルール

今回は以下のルールを設定してClaude Codeによる開発を行いました。

言語・フレームワークは一切指定しない
人間はコードに触れない（指示出しのみ）
CLAUDE.mdにコーディング標準を記載しない

業務では実践できない『AIに全面的に任せた開発』を意図的に試み、AIエージェントの可能性と限界を探ることにしました。

AIが選んだ技術スタック

何も指定せず、ゲームの仕様のみをプロンプトに記述してClaudeにコード生成させたところ、以下の技術スタックが採用されていました。

HTML5 Canvas - ゲーム描画
JavaScript (ES6+) - ゲームロジック
Matter.js - 物理エンジン（重力・衝突判定）
poly-decomp - 凹形状サポート（顔の形状に対応）
ローカルストレージ - ハイスコア保存

Unityは触ったことがありましたが、JavaScriptでゲーム開発はしたことがなかったので、Matter.jsやpoly-decompといったライブラリは初めて耳にするものでした。

こだわりポイント

顔画像の切り抜きと当たり判定

ゲームの核となるe-mohaさんの顔は、人間の手によって写真から丁寧に切り抜いたものがすでに手元にありました。しかし、スイカゲームのようなゲームでは物理演算が関わるため、顔に当たり判定を付ける必要があります。そこで、顔の形状に合わせた当たり判定をAIに自動生成させ、頂点を定数定義させてパフォーマンスの向上を試みました。

実装のアプローチ

Canvas APIで画像のピクセルデータを取得
アルファ値を基に透明/不透明領域を判定
Marching Squaresアルゴリズムで輪郭抽出
Douglas-Peuckerアルゴリズムで頂点数を最適化
Matter.jsのBodies.fromVertices()でポリゴン物理ボディを作成

// 頂点データの定義
export const FACE_VERTICES: Record<number, Vertex[]> = {
  // 顔ID: 0
  0: [
    { x: -11.4, y: -2.8 },
    { x: -11.4, y: -5.3 },
    { x: -9.7, y: -5.3 },
    { x: -11.4, y: -6.1 },
    { x: -8.9, y: -6.1 },
    { x: -8.9, y: -10.9 },
    { x: -7.3, y: -10.9 },
    { x: -6.5, y: -14.2 },
    { x: 2.4, y: -15.0 },
    { x: 4.1, y: -12.6 },
    { x: 5.7, y: -13.4 },
    { x: 10.5, y: -6.9 },
    { x: 10.5, y: 2.8 },
    { x: 6.1, y: 13.8 },
    { x: -5.7, y: 14.2 },
    { x: -10.9, y: -2.4 }
  ],
  ...
}

サウンドエフェクトの工夫

普段のfreeeのプロダクトの開発では滅多にないと思いますが、ゲームにおいてはBGMや効果音などの音楽も重要な要素の一つです。今回開発したゲームのBGMは、すべてAIに作らせました。

開発最初期にはなんとClaude Code自身が作曲を行いました。 ○○のジャンルのBGMを作ってほしい、とお願いしたところ、AudioContextとOscillatorNodeを使い、低音域、中音域を組み合わせた、ファミコン時代の雰囲気を感じさせるBGMをコードに定義して出力してきて、驚きを隠せませんでした。気になる方は、ぜひClaude Codeに作曲をお願いしてみてください（笑）

しかし、BGMのさらなるクオリティ向上のため、現在はAIによる楽曲生成サービスSuno AIで生成したものに置き換えました。初回のゲームとリトライ時でジャンルの違うBGMを使いたいと思ったので、1曲目は無難にファンタジー系のものを、2曲目は打って変わってハード系なものを生成させました。ちなみにe-mohaさんは鉄道が好きなので、電車の車内放送を歌詞にした曲を作ってもらいました。

Suno AIの楽曲生成のプロンプト画面。歌詞入力欄に電車の車内アナウンスのテキストが入力されており、スタイルタグにUK hardcore, electronic, female vocalといった音楽ジャンルが設定されている状態 — Suno AIの楽曲生成のプロンプト

また、顔が消えた時やゲームオーバー時の効果音には、e-mohaさんが映る動画から実際の音声を切り抜いて使用しました。こちらは人間の手によって丁寧な作業を行いました。

これらの工夫により、e-mohaさんを知る人にはウケること間違いなしです。ゲームに独特の個性と親近感が生まれました。

開発中に気づいたこと

ゲーム開発をしていると、エラーは発生しないものの、ユーザーの意図とは異なる挙動をするケースに多々遭遇します。このようなとき、Claude Codeはどのように問題を解決するのでしょうか。

例えば、Claudeに対して「顔が浮いたまま落ちてこないのを直してほしい」と単純な指示します。すると、Claudeは、問題が発生しているコードの箇所の特定と修正をするために、コードのあらゆる場所にログ出力 console.log() を仕込み始めました。ブラウザの開発者ツールのコンソール画面には、ゲームの進行状態や顔の座標など、大量のデバック情報で埋め尽くされていました。 Claudeはこの出力を利用して、問題を解決へと導きました。

また、問題解決後にこれらのログを掃除するようにClaudeにお願いしましたが、それなりに時間がかかって一苦労しました。

反省点・カオスなコードベースから学んだこと

コード生成を完全にAI任せにした結果、以下の問題が発生しました。

ファイル構成の混乱

コーディングのルールを設けなかった結果、初期のリポジトリの中は以下のように無法地帯と化してしまいました。

トップディレクトリ直下に全ファイルが配置
1モジュールに1000行以上のコードが集中
人間には解読困難な構造

  ktpi-game/
  ├── assets/
  │   ├── audios/
  │   └── images/
  ├── audio.js
  ├── CLAUDE.md
  ├── game.js  # 1600行超え
  ├── index.html
  ├── README.md
  └── styles.css

リファクタリングの困難さ

スイカゲームのパロディ以外のゲームも追加したかったので、ファイル構造の見直し、ついでにTypeScript化も行ったのですが、ここでとんでもない目に遭いました。なんと、リファクタリングの時間がゲーム本体の開発時間の約3倍かかってしまったのです。

ゲームロジックの実装：約4時間
TypeScript化への移行：約12時間
ViteやTypeScriptの導入で予期しない依存関係の問題が多発

教訓

この経験から、業務開発におけるコーディング標準やアーキテクチャ設計の重要性を改めて認識しました。 AIエージェントは強力なツールですが、適切な制約とガイドラインがあってこそ、その力を最大限に発揮できます。

リリース後の反響と対応

ユーザーフィードバックの嵐

身内の暇つぶし用に作ったつもりが、e-mohaさん自身がドメインを取得して公開したところ、予想以上の反響がありました。

友人や家族から好評
身内を超えて社内Slackでも話題に
大量のバグ報告とフィードバック

Slackでゲームを公開したときの画像。「ワロタ」などのemojiで反応がされている — 社内でゲームを公開したところ、続々とプレイ報告が上がってきた

「時間がとけるのでほんまやめてほしいw」というコメントともに、ゲームのプレイ報告がされた — 社内でゲームを公開したところ、続々とプレイ報告が上がってきた

緊急対応の連続

まず初期版の開発が完了して友人間に共有したのですが、

スマートフォン非対応
顔をフィールドの左側に落とせない
物理演算の不自然な挙動

といった問題の報告が次々と上がってきて、私はこれらの対応に追われ、リリース後数日は睡眠不足になりました。しかし、ユーザーからの生の声を聞きながら改善していく過程は、とても充実した経験でした。

友人から、ゲームのスクリーンショットとともに、ゲーム内の真ん中の赤いラインより左に落ちないというバグ報告がきた — 友人からバグがあるとクレームが来た

おわりに

「こんなの作りたいな」と思っても、忙しくて後回しにしてしまった経験はありませんか？ AIエージェントを使えば、アイデアを言語化するだけである程度形にできます。完璧を求めず、まずは動くものを作ってみる。そんな気軽な個人開発の楽しさを、ぜひ体験してみてください。

今回の開発で学んだことは、AIはアイデアをすぐに具現化はできるものの、ルールなしでAIを走らせるとコードの肥大化などで人間による保守に苦労するため、初めから見通しのよいコード構造や設計をさせておくと良さそうだということです。雑な開発用のルールを複数のアプリで使いまわせると、AIにとっても人間にとっても嬉しいですね。

また、今回は人間が言語・フレームワークを指定せずにAIに実装をさせましたが、C++やPythonではなく、Web技術が選択されました。情報量・学習量の多さもあり、AIが最も得意とする・自然と提案する分野はやはりWebなのでしょうか。こんなに手軽にWeb上で動くゲームを作れることは予想外でしたし、新しい技術を知ることもできて、とてもいい経験になりました。

明日の担当はyag13sさんです！お楽しみに！