AIに作らせた、ではなく、AIと作った
MultiPlayAvalon は、正体隠匿ゲーム『レジスタンス：アヴァロン』の対面プレイを支援するために作ったWebアプリです。
役職確認、チーム選出、投票、ミッション結果、アサシンフェーズ、再戦、中断など、対面で遊ぶときに発生する進行の面倒ごとを、スマホやPCから整理できるようにしています。
技術構成は、React、TypeScript、Vite、Firebase Authentication、Firestore、Firebase Hosting です。
公開URLは、https://avalon.kobalab.works/ です。
このアプリは、AIを使って作りました。
ただし、正確に言うと「AIに作らせた」という感覚ではありません。
仕様を考え、判断し、違和感を拾い、何を直すかを決めたのは人間です。
AIには、実装、調査、修正案の整理、検証手順の作成、デプロイ確認などをかなり手伝ってもらいました。
つまり、MultiPlayAvalon は、AIに丸投げしてできたものではなく、AIと一緒に作ったものです。
最初にやったのは、仕様を小さくすること
最初から、完成形を作ろうとはしませんでした。
まず考えたのは、アヴァロンを遊ぶときに何が面倒なのか、どこをシステム化すれば遊びやすくなるのか、ということです。
対面プレイでは、役職の確認、チーム選出、投票、ミッション結果の管理、履歴の確認などが発生します。
ゲームとして面白いのは、人の発言や推理です。
一方で、進行管理や集計は、面白さというよりも作業に近い部分です。
そこで、まずは「ゲームそのものを置き換える」のではなく、「対面プレイの進行を支援する」アプリとして考えました。
この方針は重要でした。
AIを使うと、つい機能を増やしたくなります。
しかし、機能を増やすほど、仕様の整合性や例外処理が難しくなります。
だから、最初に目的を絞りました。
アヴァロンの面白さは残す。
面倒な進行だけを支援する。
まず動く形にする。
この整理があったから、AIに実装を依頼するときも、何を作りたいのかがぶれにくくなりました。
ChatGPTとClaude Codeの役割を分けた
開発では、ChatGPTとClaude Codeを使い分けました。
大まかには、次のような役割分担です。
ChatGPT — 仕様整理・設計方針・実装指示文の作成・考え方の整理
Claude Code — 実装・ファイル修正・ビルド・ブラウザ確認・デプロイ作業
人間 — 最終判断・違和感の検出・仕様の優先順位づけ
ChatGPTには、いきなりコードを書かせるというより、まず「何をどう作るべきか」を整理してもらいました。
たとえば、追加機能を入れるときは、先に仕様を整理します。
そのうえで、Claude Codeに渡すための実装指示文に落とします。
Claude Codeには、リポジトリを直接触ってもらい、実装、ビルド、表示確認まで進めてもらいました。
この分担は、かなり相性が良かったです。
ChatGPTは、考え方を整理するのに向いています。
Claude Codeは、実際のコードベースを読み、変更し、動作確認するのに向いています。
AIを1つの万能ツールとして使うのではなく、役割ごとに使い分けたことが、公開まで進められた理由の1つです。
仕様は、会話しながら固めていった
AI開発で大事だと感じたのは、最初から完璧な仕様書を作ることではありません。
むしろ、動かしながら違和感を見つけ、そのたびに仕様を固めていくことが重要でした。
たとえば、MultiPlayAvalon では、次のような機能や仕様を段階的に追加・修正しました。
- ルーム作成
- ルーム参加
- 待機室
- 役職配布
- 役職確認
- チーム選出
- 全員投票
- ミッション結果入力
- ゲーム履歴表示
- アサシンフェーズ
- 最終結果表示
- 再戦
- 中断提案
- Firestore Security Rules
- 本番デプロイ
- カスタムドメイン設定
一度で全部を作ったわけではありません。
作る。
試す。
違和感を見る。
仕様を直す。
また試す。
この繰り返しでした。
特に、マルチプレイのように複数人の操作が絡むものは、画面だけ作っても不十分です。
誰が操作できるのか。
同時に押されたらどうなるのか。
ホストだけが進行できるのか。
参加者の権限はどこまでか。
途中で中断したいときはどうするのか。
こうした細かい仕様は、実際に触りながら見えてきました。
AIは、違和感を見つけてくれるわけではない
AIは、コードを書くのは得意です。
既存のコードを読んで、修正案を作るのも得意です。
ビルドエラーを直したり、型の不整合を見つけたりするのも得意です。
一方で、「この操作感は気持ち悪い」「この画面は遊んでいる人に伝わりにくい」「この仕様だと実際のプレイで混乱しそうだ」という違和感は、人間が見つける必要があります。
たとえば、ゲームボードの下の余白、ヘッダー文字サイズ、投票結果の見え方、待機室の表示、中断提案ボタンの見え方などは、実際に画面を見て違和感を拾いながら調整しました。
AIは、指示された修正はかなり正確に進めてくれます。
しかし、何を違和感と感じるか。
どこまで直せば自然か。
このプロダクトらしい見え方は何か。
そこは、人間が判断する領域です。
AI開発では、コードを書く力よりも、違和感を見つける力が重要になると感じました。
マルチプレイでは、同時操作の問題が出た
MultiPlayAvalon で印象的だったのは、同時押しの問題です。
チーム投票で複数人が同じタイミングで操作したとき、結果が正しく反映されないまま次ラウンドに進んでしまう問題がありました。
これは、見た目のバグというより、リアルタイム同期アプリとしての設計の問題です。
Firestoreを使う場合、複数人が同時にデータを更新する可能性があります。
そのため、単純に画面側で状態を見て処理するだけでは不十分です。
この問題に対しては、投票結果を確定させる処理を整理し、ホストだけが次の進行を確定できるようにし、結果表示や待機状態も見直しました。
また、5人同時投票のようなテストスクリプトも作り、手作業では確認しづらいケースを検証しました。
ここでもAIは有効でした。
人間が「同時押しが怪しい」と気づく。
ChatGPTで原因や修正方針を整理する。
Claude Codeで実装と検証を行う。
結果を見て、さらに調整する。
この流れで、単なる思いつきの修正ではなく、仕様と実装を合わせて改善できました。
Firestore Security Rulesも重要だった
公開するうえで重要だったのが、Firestore Security Rulesです。
MultiPlayAvalonでは、役職情報のように、本人だけが見られるべき情報があります。
また、ホストだけが操作できるべき処理、参加者なら更新できる処理、誰でも触れてはいけないデータがあります。
最初はアプリの機能が動くことに意識が向きがちです。
しかし、公開するなら、データの読み書き権限を整理する必要があります。
たとえば、役職情報は本人だけが読めるようにする。
参加者一覧は正しく管理する。
中断提案は参加者だけが更新できるようにする。
ホスト操作と参加者操作を分ける。
こうしたルールは、画面上の操作だけでなく、Firestore側でも守る必要があります。
AIに実装を手伝ってもらう場合でも、セキュリティの考え方は人間が確認する必要があります。
「動く」だけでは足りません。
「公開してよい状態か」まで見る必要があります。
公開までの道のりもAIと進めた
開発だけでなく、公開作業にもAIを使いました。
Firebase Hostingへのデプロイ、カスタムドメイン設定、Git管理、ビルド確認、本番表示確認などです。
MultiPlayAvalonは、最終的に https://avalon.kobalab.works/ で公開しました。
公開までには、次のような作業がありました。
- Firebaseプロジェクトの設定
- Hostingへのデプロイ
- Firestoreの設定
- 匿名認証の利用
- カスタムドメイン設定
- GitHubリポジトリ管理
.envなど機密情報の除外確認- 本番URLでの表示確認
- PC・スマホ表示確認
こうした作業は、手順を間違えると詰まりやすい部分です。
AIに手順を整理してもらい、Claude Codeに確認しながら進めてもらうことで、かなりスムーズに進められました。
特に、Git管理を始めたことは大きかったです。
公開後に修正を続けるなら、どの状態が本番なのか、どの変更を入れたのかを追える必要があります。
AIを使って高速に開発するほど、Git管理は重要になります。
AIを使うほど、人間の判断が重要になる
今回の開発で感じたのは、AIを使うほど、人間の判断が不要になるわけではないということです。
むしろ、人間の判断がより重要になります。
AIは、かなり速く実装してくれます。
だからこそ、何を作るのか、何を作らないのか、どこで止めるのかを決める必要があります。
たとえば、機能追加のアイデアはいくらでも出せます。
広告を入れる。
追加ルールを入れる。
UIを改善する。
テストを増やす。
記事化する。
サイトに掲載する。
AIを使えば、それぞれを進めること自体は簡単になります。
しかし、全部を一気に進めると、プロダクトの軸がぶれます。
だから、AIを使う開発では、実装力よりも、優先順位を決める力が重要になります。
今やること。
あとでやること。
まだ仕様を固めるべきこと。
実装してよいこと。
一度止めて考えること。
この判断は、AI任せにしない方がよいと感じました。
Kobayashi Lab.としての学び
MultiPlayAvalonは、Kobayashi Lab. にとって、良い実験になりました。
日常の中にある面倒ごとを見つける。
それを小さなWebアプリとして形にする。
AIを使って実装速度を上げる。
実際に触りながら、違和感を直す。
公開して、使える形にする。
これは、Kobayashi Lab. がやりたいことに近い流れです。
AIは、人間の代わりに全部を考えてくれるものではありません。
しかし、人間が考えたことを形にする速度は、大きく上げてくれます。
今回の開発では、ChatGPTが思考と仕様整理を支え、Claude Codeが実装と確認を支えました。
その結果、個人でも、マルチプレイ対応のWebアプリを公開まで進めることができました。
まとめ
MultiPlayAvalonは、AIを使って作ったアプリです。
ただし、それはAIに丸投げしたという意味ではありません。
人間が違和感を見つける。
仕様を考える。
優先順位を決める。
AIに実装を手伝ってもらう。
動かして確認する。
また直す。
公開する。
この繰り返しで、少しずつ形になりました。
AI開発で大事なのは、AIに何でも任せることではなく、AIが得意なことを見極めて使うことです。
ChatGPTには、考え方や仕様を整理してもらう。
Claude Codeには、実装や確認を進めてもらう。
人間は、目的と判断を持ち続ける。
この分担ができれば、個人でもかなりのところまで作れます。
MultiPlayAvalonは、その実験の1つです。
そして、Kobayashi Lab. にとって、AIを使って「考えたことを使われる形にする」ための、最初の大きな実例になりました。