
- 2022年のツイートを元に、Claude Fable 5がブラウザ向け3Dゲームを1回の指示で生成
- Claude Code for webの進捗確認にGitHub Pagesを活用し、コミットのたびに更新
- テクスチャ生成にOpenAI APIを使用、AIが自律的に設計・テストも実施
実験の流れ
Simon Willison氏は2022年8月5日のツイートをきっかけに、当時のGPT-3とDALL-Eで生成したゲームコンセプト画像とテキストを保管していました。今回、そのツイートから4年後に、最新のClaude Fable 5をClaude Code for webで実行し、その内容から完全なゲームを構築できるか試しました。結果として、プレイ可能な3Dゲーム「Raccoon Heist」が完成し、GitHubリポジトリとデモ動画も公開されています。氏は「かなり良い仕事をした」と述べています。
今回のポイントは、ゲームの仕様を詳細に伝えるのではなく、過去の画像と「このゲームを作って」という大まかな指示だけを渡したことです。AIは技術スタックの選択から素材作成、機能追加までを自律的に行い、最終的には成功したと言えます。
進捗確認にGitHub Pages
Claude Code for webは作業中のアプリをすぐに確認しづらいという制約があります。Willison氏はその回避策として、GitHub Pagesを使う方法を紹介しています。まずプロジェクト用のリポジトリを作成し、Claude Code for webのセッションで「index.htmlを早くコミットして」と指示。するとClaudeは自動的にブランチを作成します。そのブランチをGitHub Pagesの公開対象に設定すると、コミットのたびに約30秒でWeb上に最新の動作が反映されます。
プライベートリポジトリでもこの方法は使えますが、リポジトリ名が推測できれば誰でもページを見られる点には注意が必要だと氏は述べています。今回はWillison氏のアカウントで「simonw/raccoon-heist」というリポジトリが使われました。
AIの自律的な開発
Willison氏が与えたプロンプトには、「独立して作業し、これ以上の設計判断を求めないでください」と書かれていました。また、OpenAIのAPIキーを渡し、テクスチャ生成にgpt-image-2を使うよう指示しました。AIはThree.jsを選択し、ジェネラティブなテクスチャを作成するPythonスクリプトを書き、タイトル画面も画像生成APIで作成しました。
さらに、夜3日目からは番犬が登場するという加工を独自に追加しています。番犬は嗅覚でプレイヤーを追跡し、一定距離で追跡を断念するといった仕様が実装されました。Willison氏はこのアイデアを「お気に入りの変更」と述べています。AIはPlaywrightを使った自動テストも行い、スクリーンショットで動作確認をしています。
意義と注意点
この実験は、AIが「アイデアを渡すだけで動くゲームが作れる」時代に入ったことを示しています。ただし、生成されたコードやアートの品質はあくまで一例であり、必ずしも商用レベルとは限りません。実際、タイトル画像はデスクトップでは上部3分の1に切り取られて表示されるという不具合も確認されています。そうした問題を見つけるには、人間による確認とテストが依然として重要です。
また、AIに外部APIキーを渡すことのリスクや、公開リポジトリでの運用など、セキュリティ面での考慮も必要です。今回のようにプライベートリポジトリでもページが公開される仕組みを理解した上で活用することが求められます。
Work independently - do not ask me to make any further design decisions. Make sure the game is fun, a little surprising, has good raccoon heist vibes, and is visually pleasing.
独立して作業し、それ以上の設計判断は求めないでください。ゲームが楽しく、少し意外性があり、ラクーンの強奪劇の雰囲気に合い、見た目にも美しいものにしてください。
日本の開発者・IT企業にとっての意味
日本のIT企業にとって、この事例はAIコーディング支援が試作段階で即戦力になることを示しています。企画のラフ案を画像と一言の指示で形にし、GitHub Pagesで関係者に共有しながらブラッシュアップする流れは、要件定義やプロトタイピングの工数を削減する可能性があります。また、AIが自らテストコードを生成する姿は、品質保証の働き方も変えるかもしれません。一方で、生成物のバグや表示崩れを検出するには、人間の手によるレビューが不可欠です。AIの生成能力を最大限に活かしつつ、リスクを管理する体制づくりが今後の競争力を左右するでしょう。
用語解説
- Claude Fable 5
- Anthropicが開発したAIモデル。自然言語でコードを生成し、アプリ開発を自律的に進められる。
- Claude Code for web
- ClaudeをWebブラウザやモバイルアプリで使える開発エージェント機能。リポジトリと連携してコードを生成・コミットする。
- GitHub Pages
- GitHubリポジトリの内容をそのまま静的なWebサイトとして公開できるホスティングサービス。
- gpt-image-2
- OpenAIが提供する画像生成AIモデル。テクスチャやアートの自動生成に使われた。
- Three.js
- JavaScriptで3Dグラフィックスを扱うためのライブラリ。Webブラウザ上で3Dゲームを描画するのに使われる。
出典
One-shotting a Raccoon Heist game using Claude Fable 5
AI導入も顧問も、お任せください
何から手をつけるか、どこまでAIに任せるか。自社の業務に合わせて整理し、導入から運用まで伴走します。相談だけでも構いません。
AI導入について相談する