はじめに
Web上で遊べる本格ピンボールゲームを開発しました。物理演算によるリアルな挙動はもちろん、盤面を自分で編集できるエディタ機能まで搭載しています。
本記事では、Claude Opus 4.7 と Compound Engineering を活用した開発フローと、Playwright MCP を使って AI 自身にデバッグさせた話、そしてつまづいたポイントとその解決方法について共有します
なお、Compound Engineering については弊社のエンジニアが書いたこちらの記事が非常に分かりやすく、本記事を書くにあたって参考にさせていただきました。 導入方法や各コマンドの詳細を知りたい方はぜひそちらもご覧ください。
https://qiita.com/y-okayama-tb/items/70d58b690c50dcc249ad
作成したアプリ
Web上で遊べる本格ピンボールゲーム
🔗 公開URL: https://pinball-game-oywg.vercel.app/
工夫したポイント
- 物理演算を用いたリアルな挙動 — フリッパーの跳ね返り、ボールの重力、衝突判定までしっかり再現
- 盤面エディタ機能 — バンパー・壁・スロープなどを自由に配置して、自分だけのオリジナル盤面が作れる
・ゲーム画面
・盤面編集画面
技術スタック
| 項目 | 内容 |
|---|---|
| フレームワーク | Next.js |
| AI | Claude Opus 4.7 |
| 開発手法 | Compound Engineering |
| デバッグ | Playwright MCP |
| ホスティング | Vercel |
開発フロー
今回のキモは Compound Engineering を使ったアプローチです。
AIと対話しながら「どんなアプリを作りたいか」を構成段階から一緒に詰めていく流れで、計画書をドキュメントとして残してくれるため、セッションが切れても安定した出力が得られます。
ざっくりした流れはこんな感じ:
- Claude と対話しながら仕様・設計を固める(Compound Engineering)
- 計画書ドキュメントを生成・保存
- 実装を Claude に依頼
- Playwright MCP でデバッグ・動作検証
- デフォルト盤面の細かい座標の調整は手動で対応
つまづいたところ
正直なところ、AIが最初に出力したものは全く使い物にならなかったです。
1. 発射台でボールが止まらない
ピンボールの基本中の基本である「発射台でボールを保持して、プランジャーで打ち出す」という挙動が機能していませんでした。ボールがそのまま転がってしまい、ゲームとして成立しない状態。
2. デフォルトの盤面が遊べる状態じゃない
AIが生成した初期盤面は、直線的な壁と適当な位置のバンパーくらいしかなく、まともにプレイできるレベルではありませんでした。
AIが最初の方に出力した盤面(これでも大分チューニングした後です。)
3. 理想の盤面をAIに伝えるのが難しい
参考にしたいピンボールの画像をプロンプトに添付しても、全く同じようには再現してくれません。「ここに配置している壁は不要」「この壁の角度を浅く」といった微調整を言葉で伝えるのは想像以上に大変でした。
どう解決したか
Playwright MCP でAIに遊ばせながらデバッグ
これが一番効きました。Playwright MCP を使うことで、Claude 自身に実際にゲームをプレイさせて挙動を確認・修正するループが作れました。
人間がブラウザを開いて「ここがおかしい」と毎回伝えるよりも、AIが直接挙動を観測して修正案を出してくれるので、デバッグ速度が一気に上がりました。
発想の転換: 細かい調整が無理なら、編集機能を作ればいい
プロンプトで盤面を細かく指定するのは限界がある。だったらユーザー(自分)が直接編集できるモードを実装してしまえばいい、という発想に切り替えました。
デフォルト盤面は手動調整
盤面機能を使って作った盤面をデフォルトの盤面に設定しようと考えていましたが、自分にデザインセンスがなく理想の盤面を作ることが出来ませんでした。
プロンプトでの指示も難しかったため、デフォルト盤面については割り切って手動でチューニングしました。パーツを配置しているコードが分かれば座標を修正するだけなので簡単に出来ました。
まとめ
今回の開発を通じて感じたことをいくつか:
- 複雑なアプリを一発で理想形に作るのは、まだ難しい。 特に物理演算やゲームバランスのような「触ってみないとわからない」領域は、反復が必須。
- Compound Engineering はかなり優秀。 最近何を作るにも使っています。計画書がドキュメントとして残るので、セッションが切れても安定した出力が継続できるのが大きい。
- AIに任せる範囲と人間が手を動かす範囲を分けるのが重要。 全部AIにやらせようとするとハマるし、全部手動だと時間がかかる。Playwright MCP のように「AIに動作確認させる」仕組みを組み込むと、両方のいいとこ取りができる。
ピンボール、ぜひ遊んでみてください 🎮
👉 https://pinball-game-oywg.vercel.app/