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

「僕が実際に3D生成AIを足してみたら、150円ぶんのモデルでページの見え方が変わりました」

GPT-6 Astraが出てから、Xでは動くWebページの作例が次々に流れてきます。ただ、同じように頼んでみても、なんとなく平面的なページしか出てこない。その差がどこにあるのかを確かめたくて、3D生成AIと組み合わせてサイトを3本作ってみました。

こんにちは、ルーティンラボ（@rutinelabo）です。本記事では、GPT-6 Astraと3D生成AI「Tripo」を組み合わせて、スクロールに合わせて3Dが動くWebページを作る手順をまとめます。APIキーの取り方から、実際にかかったクレジット、うまくいかなかった指示まで、実際に手を動かした範囲でお伝えします。

LINE友だち登録して情報Get

結論｜差はAIの性能ではなく、渡す素材のほうにあった

先に結論からお伝えします。GPT-6 Astra単体でも、以前の生成AIとは比べものにならないくらいきれいなページは出てきます。ただ、それだけだとどうしても平面的な仕上がりになりました。

そこに3Dモデルを用意して渡したところ、スクロールに合わせてオブジェクトが現れる、奥行きのあるページになりました。変えたのはAIではなく、AIに渡す素材のほうです。しかもこの構成は、HTMLファイル1枚のまま動いています。

やっていることを整理すると、工程は2つだけです。まず3D生成AIでモデルを作り、次にそのモデルを読み込むページをGPT-6 Astraに書かせます。特別な開発環境は要りませんし、3Dの知識も要りません。

Astra自体の性格や、指示を出すときの基本的なコツについては、GPT-6 Astraの特徴5つで先にまとめています。あわせて読んでいただくと、今回の指示の組み立て方が分かりやすいと思います。

Astra単体だとペタッとする｜同じAIでも仕上がりが分かれた

⚡️ GPT-6 Astra だけだと、実は物足りない

【同じAIでも"素材"で化けました】

・Astra単体…きれいだけどペタッと平面
・3D素材を足す…スクロールで奥行きが出る

差はAIの性能ではなく、渡す素材のほうでした。
しかもワンショットでここまで動きます。

素材を足して作る発想、試したことありますか？

#GPT6Astra #バイブコーディング #3D

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

まず、GPT-6 Astraだけでページを作らせてみました。出てきたものは、配色も余白も整っていて、文章の運びも自然です。ここまでは十分に実用的でした。

ただ、見ていくうちに物足りなさが出てきます。奥行きやおしゃれ感があまり感じられないのです。フィットネスジムのページも作らせてみましたが、素材感のある落ち着いた作りで、静的なページとしては十分なものの、見ている人を引き込む力までは出ていませんでした。

この「あと一歩」を埋めるために使ったのが、3D生成AIです。

3Dが動くWebページを3本つくった｜旅館・ジム・デスク周り

GPT-6 Astra × 3D生成AI

【スクロールで3Dが動くサイトを3本つくりました】

・温泉旅館…行灯や桶が奥から現れる
・フィットネスジム…ダンベルが次々に出てくる
・デスク周り…キーボードやランプが並ぶ

どれもHTML1枚で動いています。
3Dモデルだけ別のAIで作って組み込みました。

こういう動くサイト、作ってみたいと思いますか？

#GPT6Astra #生成AI #Webデザイン

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

実際に作ったのは3本です。どれもスクロールに合わせて3Dモデルが現れる構成にしました。

ジムのサイトは、ダンベルが出てきたあとにケトルベル、ランニングシューズ、水分補給のボトルとタオルが続いて表示されます。これで15分程度の作業です。もう少し作り込めば、さらに見栄えはよくなると思います。

3本目は僕自身が運営しているルーティンラボのページです。キーボードやヘッドホン、ランプといったデスク周りのアイテムが並びます。これがワンショットで出てくるのは、かなり魅力的でした。

3本とも共通しているのは、スクロールの位置と3Dの動きが結びついていることです。ページを下に送るとオブジェクトが回りながら現れ、戻すと巻き戻ります。時間で勝手に動くアニメーションとは見え方が違っていて、こちらのほうが「触っている感じ」が出ます。

ここまで来ると、あとはアニメーションを滑らかにしたり、写真を差し込んだりする調整の話になります。土台は1回の指示で出てくるので、作り込みに時間を使えるのがこのやり方の利点だと思います。

なぜthree.jsを指定すると変わるのか

指示を出すときに効いたのがthree.jsというライブラリ名を明示することでした。3Dの奥行きを扱うときの定番で、これを使う前提で書いてもらうと、ページの構成そのものが変わります。

three.jsは3Dのゲームを作るときにも使われる技術です。つまり3Dモデルを読み込んで動かすことが前提の仕組みなので、Tripoで作ったモデルとの相性がそもそもいい、ということになります。

逆に、このライブラリ名を出さずに「おしゃれなサイトを作って」とだけ伝えると、CSSだけで表現しようとして平面的な仕上がりに戻ってしまいました。使ってよい道具を先に渡しておく、というのが指示のコツです。

TripoのAPIキーを取る3ステップ

3Dモデルの生成に使ったのはTripoです。僕のチャンネルでも何度か紹介していますが、最近スーパーメッシュ2.0という機能が追加され、細部まで表現できるようになりました。

APIキーを取得すると、ブラウザだけでなくCodexやClaude Codeからも3Dモデルを生成できるようになります。手順は3つです。

step
1Tripoのホーム画面を開く

ログインした状態でホーム画面を表示します。

step
2右上の「API」をクリックする

画面の右上にAPIという項目があるので、そこを開きます。

step
3アカウント項目からキーを発行する

アカウントの項目からAPIキーを発行します。キーは発行時に一度しか表示されないので、その場で控えておいてください。導入自体は、AIエージェントと相談しながら進めれば問題なく通せます。

3D生成の得意と不得意｜桶は得意、食べ物は苦手だった

3D生成AIには、はっきり"向き不向き"がありました

【実際に作って分かったこと】

・桶や行灯…輪郭が出て可愛く仕上がる
・魚料理…どうしても平面的でイマイチ

食べ物は3Dにせず画像で見せたほうが成立しました。
道具類は得意、料理は苦手。ここは割り切りです。

3D生成、どんなものを作っていますか？

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

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

旅館のサイト用に、料理・桶・明かりの3種類を作らせてみて気づいたことがあります。3D生成には、はっきりと向き不向きがあります。

形がはっきりしているものは得意です。一方で食べ物はうまくいきませんでした。料理だけは3Dにこだわらず、画像で表示したほうが自然にまとまります。道具類と料理で扱いを分ける、という割り切りが要ります。

この向き不向きは、Webページに限った話ではありません。ゲーム素材として3Dを量産したときにも同じ傾向が出ていました。素材づくりの工程をまとめて知りたい方は、3D生成AIでゲーム素材を全部作るも参考になると思います。

実測コスト｜3Dモデル5個で約150円

気になるコストです。僕のアカウントで実際にチャージして確かめました。

チャージは最低1ドルから可能で、10ドル・50ドル・100ドルといった単位が用意されています。5個で150円ほどなら、試しながら作るぶんには十分に現実的な水準だと思います。

ここで一点、つまずきやすいところがあります。ブラウザ版で使えるクレジットと、API用のクレジットは別枠です。ブラウザ側に残高があっても、APIから叩くときには使えません。API側にあらためてチャージする必要があります。

僕も最初はここを取り違えて、残高があるのにリクエストが通らずに止まりました。CodexやClaude Codeから使う予定なら、API側の残高を先に確認しておくと余計な手戻りがなくなります。

うまくいかなかった指示と、必ず入れる4項目

ここが今回いちばんお伝えしたいところです。同じAIでも、指示の出し方で仕上がりが大きく変わりました。

まずうまくいかなかった指示から挙げます。

ざっくりした指示や、3Dをその場で書かせるやり方だと、安っぽい仕上がりになりました。だからこそ、モデルの生成は別のAIに任せています。音についても付けられはしますが、うるさくなりがちだったのでおすすめしません。

逆に、毎回入れておいたほうがいい項目は次の4つです。

とくに効いたのはthree.jsを指定することです。奥行きのある表現を入れたいときは、これを明示するだけで構成の質が変わりました。three.jsは3Dのゲームなども作れる技術なので、3Dモデルとの相性がそもそもいいのだと思います。

最後の「自己チェック」も効きます。作ったあとに自分で確認していない項目には印を付けさせるようにしておくと、どこが未検証のまま出てきたのかが分かります。全部に合格印が並ぶより、正直に×が付いてくるほうが直しやすいです。

この4項目は、毎回コピーして先頭に貼るだけで使えます。題材が旅館でもジムでも中身は変えていません。変えるのはテーマの説明だけで、共通条件は固定したままにしています。

まとめ

GPT-6 Astraで動くWebページを作るときの要点をまとめます。

作り方さえ分かっていれば、そこまで難しい工程はありません。3Dモデルを別で用意するというひと手間だけで、出てくるページの質が変わります。

僕自身もこのページをもう少し作り込んで、ルーティンラボの本格的なサイトにしていく予定です。まずは手持ちのテーマで1本、スクロールで動くページを作ってみてください。150円ぶんの3Dモデルがあれば、雰囲気はつかめると思います。