GPT-6 Astraで3Dシミュレーターを作る｜京都・桶狭間・渋谷を再現

 

※記事内のTripoのリンクはアフィリエイトリンクです。

 

「僕が実際にGPT-6 Astraで3Dシミュレーターを作らせたら、京都の街を歩いて空まで飛べるものが1本30分前後で出てきました」

 

GPT-6 Astraの精度が高いことは知っていても、実際にどんなものが作れるのかはイメージしにくいと思います。そこで今回は3D空間に絞って、街並み・歴史・安全確認という3つの題材でシミュレーターを作ってみました。

 

こんにちは、ルーティンラボ（@rutinelabo）です。本記事では、GPT-6 Astraで作った3Dシミュレーター3本の中身と、その作り方をまとめます。3Dキャラを動かすために使ったTripoとMixamoの手順や、途中で出たエラーまで、実際に手を動かした範囲でお伝えします。

 

LINE友だち登録して情報Get

 

結論｜HTML1枚で「歩ける・時間が動く・答えが出る」3Dが作れた

 

 

先に結論からお伝えします。GPT-6 Astraに任せると、HTMLファイル1枚で動く3Dシミュレーターが作れました。街を歩いたり、時間を進めたり、条件を変えて結果を確かめたりと、ただ眺めるだけではない「触れる3D」になっています。

 

今回作ったのは次の3本です。

 

シミュレーター	できること	生成時間（実測）
京都の街並み	通行人が歩く街を散策・飛ぶモードで上空から一望	35分32秒
桶狭間の戦い	タイムラインで局面を進める・ナレーション・雨の切替	22分16秒
渋谷スクランブル交差点	人数と速度を変えて、安全に渡れるかを確かめる	24分03秒

 

生成時間は、僕の環境でCodex CLIから実行したときの記録です（2026年9月時点・実測）。ChatGPTのサブスク枠で動かしたので、APIの追加料金はかかっていません。前回はGPT-6 Astraで3Dが動くWebページを作りましたが、今回はそれを一歩進めて「シミュレーター」にしています。

 

前回の記事はGPT-6 Astraの使い方｜3Dを組み合わせて動くWebページを作るでまとめています。3D生成AIと組み合わせる基本の流れは同じなので、先に読んでおくと今回の話が入りやすいと思います。

 

GPT-6 Astraの使い方｜3Dを組み合わせて動くWebページを作る

続きを見る

 

京都の街並みシミュレーター｜実在の地図から街を建てる

 

1本目は京都の街並みです。読み込んでプレイを押すと、通行人が自然に歩いている京都の通りを、自分の足で散策できます。飛ぶモードに切り替えると上空へ上がれて、八坂神社のあたりまで一望できました。

GPT-6 Astra で京都の街をつくってみた

【HTML1枚で歩ける3Dシミュレーター】

・通行人が自然に歩く街並みを散策
・飛ぶモードで上空から八坂神社まで一望
・地図の高低差までそのまま再現

設計はFable 5.1、実装はAstraに任せました。
見た目のデザイン力はAstraが一枚上手です。

自分の住んでいる街で作ったら、どこを歩きたいですか？

#GPT6Astra #生成AI #3D

— せなお| AIとITを使った仕事術 (@rutinelabo) 投稿を見る

 

実は、最初に「京都の空間を作って」とだけ頼んだときは、あまり京都らしくなりませんでした。縦と横がきれいに整列した碁盤の目の上に、清水寺や金閣寺のような建物がポンと置かれているだけです。位置関係は合っているものの、忠実な再現にはほど遠い仕上がりでした。

 

そこで効いたのが、実在の地図データを渡すことです。AIに街の形を想像させるのではなく、建物の輪郭や土地の高さを実際のデータから読み込ませました。どちらも無料で取れるデータです。

 

使ったデータ	中身	出典
建物の輪郭	6,864棟	OpenStreetMap
街路	1,511本（産寧坂などの石段を含む）	OpenStreetMap
標高	鴨川沿い35m → 東山98m	国土地理院 標高タイル

 

範囲は祇園から清水にかけての約1.4km四方です（2026年9月時点・実測）。標高のデータを入れたことで、清水寺へ向かう登り坂の高低差までそのまま再現されました。なお、OpenStreetMapのデータを使うときは画面に出典を表示するのがライセンス上のルールなので、お題にも明記して守らせています。

 

 

もちろん限界もあります。正面に鴨川があって、その向こう側はまだ生成されていません。建物の上に登ろうとすると少し挙動がおかしくなる場面もありました。ここはマインクラフトのようなオープンワールド形式で広げていくと、もっと面白くなると思います。

 

自分の住んでいる街や、行ったことのない地域を再現してみるのも楽しい使い方です。小学生や中学生の夏休みの自由研究にもなりそうだと感じました。

 

桶狭間の戦いシミュレーター｜時間を動かせる4Dで歴史を見る

 

2本目は、織田信長で有名な桶狭間の戦いです。こちらは3Dの空間に時間の要素を加えて、画面下のタイムラインで局面を進められるようにしました。いわば「4Dのシミュレーター」です。

⚔️ GPT-6 Astra で桶狭間の戦いを3Dにしてみた

【時間を動かせる4D歴史シミュレーター】

・タイムラインで局面を進めるとナレーションが解説
・寄ると兵士1人ずつが谷筋を進軍
・豪雨のON/OFFで視界と戦況を比較

兵士の3Dモデルだけは3D生成AIで作って組み込みました。

歴史の授業でこれが出てきたら、覚えやすいと思いませんか？

#GPT6Astra #3D生成AI #AI活用

— せなお| AIとITを使った仕事術 (@rutinelabo) 投稿を見る

 

地図の中で黄色っぽく薄くなっている場所は、標高が高い丘陵です。今川義元の本陣がある高台に向かって、織田軍が谷筋を進んで攻め入る様子を再現しています。ナレーションも付けたので、再生すると局面ごとに何が起きたのかを解説してくれます。

 

局面	時刻	画面で起きること
第1局面 丘陵に布陣	正午	今川軍と織田軍の位置関係を俯瞰で表示
第2局面 谷筋を進む	12時20分	寄ると兵士が1人ずつ進軍している
第3局面 豪雨に紛れて	12時40分	雨のON/OFFで視界と戦況表示を比べられる
第4局面 本陣への接近	13時	丘陵を越えて本陣に迫る
第5局面 本陣を急襲	13時20分	今川本陣が混乱する

 

桶狭間の戦いは、兵の数や攻め方に諸説があります。そのため、ナレーションでも「通説に基づく模式的な再現」であることを最初に伝えるようにしました。断定を避ける言い回しをお題に入れておくと、AIもきちんとそれに沿った表現で作ってくれます。

 

 

画面の兵士は、1人1人を3D生成AIで作ったモデルです。歴史の出来事を3Dで動かせると、教科書の図よりずっとイメージしやすくなります。学校の先生が授業で使ったら、生徒の興味を引ける教材になると思いました。

 

渋谷スクランブル交差点シミュレーター｜何人まで安全に渡れるか

 

3本目は、安全確認を事前に試せるシミュレーターです。題材は渋谷のスクランブル交差点で、青信号の間に何人まで安全に渡れるかを確かめられるようにしました。

GPT-6 Astra で渋谷のスクランブル交差点をシミュレーション

【青信号の間に何人まで渡れるか】

・240人でも密集した場所は赤く表示
・1000人に増やしてスピードを上げると…
・横断歩道が詰まって渡りきれない

数字を変えて結果を見るだけで、仮説を試せる道具になりました。

あなたなら、何人まで安全に渡れると予想しますか？

#GPT6Astra #生成AI #シミュレーション

— せなお| AIとITを使った仕事術 (@rutinelabo) 投稿を見る

 

青信号は約30秒で、最初は240人に設定しています。人が密集している場所は赤く表示されるので、どこが危ないのかがひと目で分かります。240人でも残り5秒の時点でまだ渡りきれておらず、けっこう厳しそうでした。

 

そこで人数を1000人に増やし、スピードも上げてみました。すると横断歩道の途中で人が詰まり、渡るという行為そのものが成り立たなくなりました。数字を変えるだけで結果がはっきり変わるので、仮説を立てて試す道具として面白いと感じています。

 

このシミュレーターを作るときに意識したのが、お題の書き方です。「人の流れを再現して」と頼むと、再現された人の流れが返ってくるだけでした。そこで「この問いに答えを出す道具を作って」という形に書き直しています。

 

【お題】「何人までなら安全に渡れるのか」を確かめる交差点シミュレーターを作れ。

■ このシミュレーターが答える問い（これが主題。見た目より優先する）
  「人数と信号周期をこう設定したとき、この交差点は安全か、危険か」
  使う人は、イベント主催者・施設管理者・自治体の担当者を想定する。
  見て楽しいものではなく、答えが出るものにすること。

 

判定の基準には、群衆の混み具合を人/m²で分ける「FruinのLevel of Service」という考え方を渡しました。主役を人の豆粒ではなく密度のヒートマップにしたことで、危険な場所が一目で分かる画面になっています。目的・使う人・判定基準をお題に書くかどうかで、出てくるものが大きく変わりました。

 

作り方｜設計はFable 5.1、実装はGPT-6 Astraに分けた

 

ここからは作り方です。今回はGPT-6 Astraに一からコーディングしてもらいました。実行はCodexのCLIからです。普段から僕は、設計と実装を別のモデルに分けて動かしています。

 

役割	使ったモデル	任せたこと
設計	Claude Fable 5.1	全体の枠組み・指示文（お題）の組み立て
実装	GPT-6 Astra（Codex CLI）	HTMLファイルのコーディング

 

分けている理由は、得意なことが違うからです。僕の感覚では、見た目のデザインを作る力はGPT-6 Astraのほうが強いと感じています。おしゃれに仕上げたいアプリや、見た目を大事にしたいツールを作るなら、実装はGPT-6 Astraに任せるのがおすすめです。

 

設計と実装を分ける仕組みづくりは「ハーネス」と呼ばれる考え方で、Fable 5.1での設計の進め方はGPT-6 Astraの特徴5つでも触れています。指示の組み立て方の基本はこちらが参考になります。

 

GPT-6 Astraの特徴5つ｜公式ガイドと1週間の実測でわかったコツ

続きを見る

 

ライブラリ禁止で試した結果｜3Dの描画はthree.jsに任せた

 

最初は、どこまでシンプルに作れるかを試すために、ライブラリを一切使わないという縛りを付けました。3Dを描く定番ライブラリのthree.jsを使わず、ブラウザが標準で持っているWebGL2とCanvas2Dだけで書かせています。

 

結果として、3D自体は表示できました。ただ、クオリティはかなり低くなってしまったのが現実です。頑張って作ってみたものの、ライブラリなしで細かい建物や人物を表現するのには限界がありました。

 

そこで、京都の街並みや地形などの3Dの描画にはthree.jsを使うことにしました。軽くしたいからといって無理にライブラリを外すより、道具は適材適所で選ぶほうが結果的に早く、きれいに仕上がります。

 

 

3Dキャラの作り方｜Tripoで生成してMixamoで骨組みを付ける

 

桶狭間の兵士や京都の通行人のような小さなキャラクターは、GPT-6 Astraにコードで書かせてもなかなかきれいに作れませんでした。そこで、3D専用の生成AIで先にモデルを作っておくのがポイントになります。流れは3ステップです。

 

step
1Tripoで3Dモデルを生成する

 

Tripoの3Dワークスペースでプロンプトを入力すると、そのまま3Dモデルが作れます。最初に無料のクレジットが配られるので、まずはその範囲で試せます。TripoにはCLIも用意されていて、パソコンに入れておけばClaude Codeなどから直接3Dモデルを生成できます。

 

step
2Mixamoで人型の骨組み（リグ）を付ける

 

3Dモデルは、生成しただけでは動きません。手足に骨組みを割り当てるリギングという作業が必要です。今回はAdobeの無料ツールMixamoを使いました。モデルを読み込んで骨組みを割り当てると、歩く・走る・ジャンプするといった動きを付けられます。

 

step
3歩行アニメーションを付けてシミュレーターに組み込む

 

歩くアニメーションを付けたモデルを書き出し、GPT-6 Astraに「このモデルを読み込んで歩かせて」と渡します。ゲームのキャラクターも基本は同じ仕組みで作られています。なお、Tripoにもワンクリックでリギングできる機能があるので、そちらで済ませる方法もあります。

 

1体あたりにかかったクレジットと時間は次のとおりです（2026年9月時点・僕のアカウントで実測）。

 

工程	クレジット	時間
モデル生成	20	3〜4分
リギング	25	1〜2分
歩行アニメーション	15前後	1〜2分
1体あたり	約60	6〜8分

 

もう1つ知っておくと便利なのが、ファイルサイズです。生成したモデルは1体で56MBほどあり、そのままではブラウザで扱うには重すぎました。圧縮ツールで2.76MBまで軽くしても、骨組みと歩行アニメーションはそのまま残りました。3D生成AIの基本的な使い方はTripo 3.0完全ガイドでも解説しています。

 

 3D生成AI「Tripo 3.0」完全ガイド｜使い方から活用法まで徹底解説

続きを見る

 

つまずいたところ｜ムーンウォークするアバターとクレジットのロスト

 

生成時間は、スムーズにいけば30分から1時間ほどです。ただ、実際にはエラーの手戻りがあって、もう少し時間がかかりました。1体60クレジットという数字も、一発できれいに生成できた場合の話です。

 

いちばん困ったのが、アバターがムーンウォークしてしまうエラーです。前を向いたまま後ろへ滑るように歩く、不思議な動きになりました。Mixamoでリギングしたときに向きがうまく合わず、プログラム側でモデルを割り当てるときにずれてしまったのが原因です。

 

 

こうした失敗でクレジットをロストしながら作り直しました。3Dキャラを使うときは、最初から作り直しのぶんのクレジットも見込んでおくと安心です。今回の3D素材の作り方は、ゲーム素材を作ったときの工程ともよく似ています。

 

ゲーム素材づくりの全工程は3D生成AIでゲーム素材を全部作るにまとめています。次回は、今回のTripoと本格的な3Dゲーム制作を組み合わせる予定です。

 

【2026年最新】3D生成AIでゲーム素材を全部作る｜Unityで動くまでの全工程（Triverse AI）

続きを見る

 

まとめ

 

GPT-6 Astraで3Dシミュレーターを作るときの要点をまとめます。

 

 

今回キャラクター作りに使った3D生成AIのTripoは、最初に配られる無料クレジットの範囲で試せます。

 

今回使ったお題（プロンプト）は、そのまま使える形で資料にまとめました。公式LINEで配布しているので、同じようなシミュレーターを作りたい方は、Claude CodeやCodexに読み込ませて試してみてください。

 

自分の住んでいる街を再現したり、歴史の出来事を動かしてみたりと、題材次第で使い道はいくらでも広がります。まずは身近なテーマで1本、触れる3Dシミュレーターを作ってみてください。