こんにちは、AaaS Tech Labの樋口です。

LLMの発展に伴い、コーディングから画像生成、動画生成に至るまであらゆる“制作”が一般の人でもできるようになってきました。しかし、こと体験という文脈で見てみると、html, React, Next.jsといったフロントエンドで構築されたものが、AIによる制作の主戦場となっているように見受けられます。そんななか、2024年12月にAnthropic社が公開したModel Context Protocol (MCP)によってLLMが外部システム / ツールと連携するのが簡単になりました。ここ1年でMCPサーバーは大量に開発され、Touch Designer、Unity、 Unreal Engineなど利用ハードルが高かったプロフェッショナルなツールの操作をLLMに肩代わりしてもらうことが可能な世界線になってきています。これによって、フロントエンドに閉じない体験制作が可能になります。とはいえ、ツールの知識が全くない状態でどこまで実用的に使えるのかなどのフィジビリティーは使ってみないことには見えてこない部分が大きいと思います。

そこで今回は、LLM × MCP × ツールを駆使した体験制作に取り組んでみました。テーマは「歌舞伎町でサッカーしたい」です。深い理由はありません。

今回使用するツールは以下です。
Game System
・Unity
Python Workflow
・ComfyUI
3D Scene
・Blender
・Reality Scan (PC)
筆者はこれらのツールは全て少し触れたことがある、もしくは触れたことがないという習熟度です。今回の制作を通じて、そもそもこの状態からアイディアだけで制作を完遂することができるのかということや、Vibe制作するなかで役に立ったTipsを共有したいと思います。

ゲームシステムの制作には今回Unityを採用しました。しかし、筆者はUnityで用いられる言語であるC#は全く触れたことがありません。そこで、Unity MCPを導入しコーディングはAIコーディングツールのClaude Codeに丸投げしました。
Unity MCPと調べると数多くのMCPサーバーがヒットしますが、大まかにできることは共通しており、コンソール読み込みやスクリプトの編集、ゲームオブジェクトの操作などができるものが大半です。今回は接続が安定したUnityNaturalMCPを主に利用しました。
Claude Codeで完全にゼロからプロジェクトを作成する際には、まずCLAUDE.mdを用意しました。作成の際には、LLMとチャットUIで対話したうえでまとめてもらいました。

# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

# 指示
以下の設計書を大筋に、unityでゲームを作ります。
mcpツールを使用してunityを操作してください。
既に作成済みのオブジェクトをいじるときはユーザに許可をもらってください。
unityの操作はmcpを利用するかコードを直接編集して行ってください。


## プロジェクト概要
**目的**: 人数カスタマイズ可能な3Dサッカーゲームの開発
**特徴**:
- プレイヤー人数をUI経由で動的変更
- 3Dフィールド上でのサッカーゲームプレイ
- リアルというよりポップなゲーム
- フィールドとプレイヤー・ボールの大きさのバランスがリアルとは違い、プレイヤー・ボールが大きめ
- ドリブルの概念は不要、プレイヤーにボールがあたると弾けるように

また、Claude CodeでのVibeCodingを進めるうえで以下の2つのやり方が便利でした。
・エージェントのコンテクストがいっぱいになったときは、NEXT.mdというファイルを作成して現状の実装状況や次のタスクをまとめさせ引継書を作成する。
・Claude-Code-Usage-Monitorを利用してトークン使用制限を確認する。

このようにして実装を進めていくと、以下のようなざっくりしたゲーム画面がUnity上に出来上がってきます。

指示を出すと、スクリプトのコーディングやゲームオブジェクトの編集をして一通り実装してくれますが、一発では思い通りに動作しないということは往々としてあります。そんなときの手直しはチャットで伝えて修正してもらうか、UI上での操作が早い場合は操作手順を教えてもらいながら進めました。最終的に、待機画面・ゲーム画面・セレブレーション・終了画面の計4つのシーンの構築をしました。

本体験では、プレイヤー本人の顔画像1枚をもとに生成するプレイヤーオリジナルのアバターを使用してプレイできることを目指しました。最終的には以下のような構成でシステムを構築しました。

プレイヤー登録時に体験者はスマホで顔写真を1枚送信します。Unity経由で遠隔のGPU搭載サーバーに送信し、Comfy UIで作成したImg-to-3Dのフローによってプレイヤーオリジナルのアバターを生成します。

Comfy UIのワークフローはベースアバター画像とプレイヤー顔画像の合成のステップとImg-to-3Dのステップとリグ入れの3ステップに分けることができます。まず、ベース画像はGoogleのWhiskという画像生成サービスを利用して以下のように生成しました。

続いて、このベースアバター画像にユーザの顔画像を合成します。今回はOpenCVを用いた顔認識とRMBGノードを用いて以下のようなワークフローを組み、顔部分のみの切り出しとベースアバター画像への配置の安定化を狙いました。

次に、Img-to-3Dはオープンソースの3D生成モデルであるHunyuan 3D 2.0を利用しました。以下のワークフローによって、メッシュとテクスチャが1枚の画像から生成できます。

最後にリギングを行います。リギングとは主に3Dアニメーションでモデルに動きをつけられるように骨組み（ボーン）を組み込む技術のことです。今回は、Make-It-AnimatableというOSSを用いて、3Dモデルをインプットして自動でリギングをこなすことができるカスタムノードを以下のように作成しました。

ComfyUIとMake-It-Animatableの要求環境要件が異なったため、今回はサブAPIという形でComfyUIからAPIを投げて処理をする設計にしました。

このようにして、顔画像1枚からプレイヤーオリジナルの3Dアバターを作成することができるAPIが準備できました。

ゲームのステージ制作には様々な3Dスキャン技術とそのメリット・デメリットを比較し、モデル化可能範囲とテクスチャ解像度を鑑みて最終的にはPC版のReality Scan（フォトグラメトリ）を使用することにしました。各手法の比較についてはこちらのコラムにてご紹介しています。

今回ステージとする歌舞伎町の街の写真を大量に撮影しReality Scanに処理させると、各画像間の共通点を見つけ出すことで、以下のように点群を生成し、最終的には3Dモデルを生成することができます。

歌舞伎町は人通りが多く写真ごとに映り込む人が違うことが起因して、道や建物1階部分は精度が荒くなったり、穴が空いていたりと使えない部分が多くありました。そこで、Blender上で使えそうかつ歌舞伎町っぽさが強い建物を個別に3Dモデルとしてクロップし、Unity上で再構築することでキメラ歌舞伎町をステージとして準備しました。

このようにしてゲームシステム、アバター生成、ゲームステージという3要素が揃い体験が完成しました。では早速、以下のデモプレイをご覧ください。

デモでは両チーム1人ずつ、かつ両方筆者がプレイヤーとしてプレイしたためシュールな感じになっていますが、複数対複数でのプレイも可能です。その場合、アバター生成に1人あたり3分程度かかりプレイ準備ができるまで長い待ち時間が発生するため、体験設計の工夫は必要です。
また、制作ステップでの説明を省きましたが、プレイヤーの各シーンでのアニメーションはmixamoからダウンロードしたものを使用しています。

クオリティーの面ではまだまだ改善の余地が多分に残りますが、まったく知識が無い状態からひとまず成立する体験を作るということまではできたのかなと思います。今回の制作経験を糧に、体験制作のクオリティーアップを目指して、引き続きチャレンジして行きたいと思います。

AaaS Tech Labでは、ビジネスの最適化などを目的としたデータサイエンス活用はもちろん、メディア・コンテンツ領域へのAI技術応用も進めております。
ご興味のある方がいらっしゃいましたら、ぜひcontactからお問い合わせくださいませ。

AaaS Tech Lab 樋口建