Fable 5.2 3Dのサイトの動画は何を見せたのか、作例とプロンプトと完成の順に読む

出典: Claude Fable 5.2 Builds INSANE Websites in Minutes!（Zubair Trabzada | AI Workshop）

動画は英語です。訳は私によるものです

動画は、説明より先に、完成した3Dのサイトのダイジェストから始まります。色の爆発、飛んでいく鳥、お茶を注げる操作。それを見せながら、話し手が「sick」と声を上げます。

本題に入ると、話し手はまずモデルの話から入ります。Claude Fable 5.2 は3Dアニメ付きのサイトを作るのが得意だ、と切り出し、その理由に「視覚の推論」を挙げます。

動画の中で（0:25〜）

“it’s absolutely incredible at building 3D animation websites because of the fact that the visual reasoning for this model is on another level.”

訳: （Claude Fable 5.2 は）3Dアニメ付きのウェブサイトを作るのが驚くほど得意です。このモデルの視覚推論が別次元だからです。

話し手はさらに、Opus 系も含めていろいろなモデルを試してきた、と自分の経験を持ち出します。そのうえで、1回のプロンプトで仕上げる場面なら Fable 5.2 が多くを上回る、という立場です。比べたデータは、動画には出てきません。

動画の中で（1:08〜）

“I’ve been testing different AI models, including the opuses of the world, but this is on another level because in visual reasoning, Fable 5.2 exceeds most models, especially when it comes to oneshot prompting.”

訳: いろいろなAIモデルを、Opus 系も含めて試してきましたが、これは別次元です。視覚推論では、特に1回のプロンプトで仕上げる場面で、Fable 5.2 が多くのモデルを上回ります。

そして予告に移ります。このあと作例のサイトを3つ見せ、作り方も順に見せていく、と話し手は告げます。見せる作例はどれも、Claude に1つのプロンプトで作らせた物だ、と添えて。

私なら、「1つのプロンプトで」という言葉は、まず話し手の主張として受け取ります。自分のサイトで確かめるまでは、事実の箱には入れません。

ここで1つ考えてみたいんです。数分で出来たと聞いた時、何をもって「出来た」と呼ぶのでしょうか？

動画の主張は、速さの話です。私が見たいのは、最初の形が出たあとに、人の手で何をするか。画面の中で動くことと、自分のお客さんに届くことは、別の確かめが要ります。

たとえばお店のサイトなら、注文まで迷わず進めるか。そこまで見て、やっと出来たと呼べます。AIは魔法じゃないので、自分のサイトに合わせて縦に掘る時間は、やっぱり要るんです！

モデルそのものの話は、Claude Fable 5.2とは。ギズモードの実例とHighで使う説から、使う前に決めることを整理した2026年11月11日の私の記事にまとめました。

動画が最初に見せるのは、作例のサイト3件です。どれも、スクロールやドラッグに合わせて画面そのものが動きます。読むサイトというより、触るサイト。話し手がマウスを動かしながら、1つずつ見せていきます。

1つ目は Blip（画面表記は BLIP）というゲーム機のサイト。スクロールすると本体が7つの部品にばらけ、ドラッグで3Dの本体を回せます。色を選ぶとボタンの色まで変わり、音のオン・オフもある。画面には「Seven parts. Four screws.」の文字が出ます。

2つ目はティーショップのサイト（画面表記は SUNBIRD）。鳥がスクロールに付いてきて、茶葉が舞い落ちます。「Hold to pour」を押し続けるとお茶が注がれ、カップが満ちていく。お茶は First Light、Slow Noon、Ember Dusk の3種類です。この作例の途中で、話し手は作る側の話に寄り道し、少しあとで、こうした操作のあるサイトが以前は作れなかったことにも触れます。

動画の中で（3:13〜）

“these are the type of websites that you can actually build and sell to businesses, right? So like for tea shops or whatever it may be.”

訳: こういうサイトは、実際に作って企業に売ることができます。ティーショップでも、何でも。

動画の中で（4:13〜）

“not possible before but now it is. And again these are all done with one prop which is even more impressive.”

訳: （こうしたインタラクティブなサイトは）以前はできませんでしたが、今はできます。しかも、どれも1つのプロンプトで作ったもので、そこがさらにすごいところです。

3つ目は、ジェラート店の Nuvola（画面表記は NUVOLA）。ストロベリー、ピスタチオ、マンゴー、ブルーベリーと味が移るたびに、色の爆発と背景色が切り替わります。カーソルを動かすとスプリンクルが散り、話し手は、注文を受け取れる点にも触れます。

どれも、触れば画面が応えてくるサイトです。だから私は、3Dが入ったサイトを見たら、まず「これを誰の何に使うのか」を先に決めます。その3D、誰のどんな場面で動くんでしょう？

3Dでいうと、私が記事に書いたのは、もっと手前の話です。Three.jsとは？初心者向けにAIでの導入と活用を解説した2026年10月27日の私の記事で、Three.js のURLだけ渡して、AIに回る立方体をブラウザに出してもらった話を書きました。

出てきたのは、回る立方体が1個です。途中の確認で道を1つ選んでいて、その場面を記事にこう書いています。

私の10月27日付の記事より（Three.jsとは？初心者向けにAIでの導入と活用を解説）

確認のあと、「制作環境を用意する」を選びました。一言で全部が自動で終わるわけではありません。結果として、npmとViteという経路で、回転する立方体がブラウザに表示されました。

動画の作例のサイトは、3Dの部品がいくつも組み合わさった1つのサイトです。私が見た立方体は、3Dが画面に出る最初の1歩。同じ「3D」でも、見せている物の大きさがまるで違います。

私は、使う物は全部自分で味見してから決めたい。動画の作例がどれだけ動いても、自分のお客さんの前に出すかどうかは、自分で触って確かめてから決めます！

ここから話し手は、3つ目の作例の Nuvola を、画面の前で一から作り始めます。さっきの完成品が、どんな頼み方から出てくるのか。いちばん気になる所です。

準備はシンプルです。話し手は Claude のデスクトップアプリで、Code のセッションを新しく作ります。Claude でも Claude Code でも同じ手順で進む、と添えて、用意してあるプロンプトをコピーして貼り付けます。

画面のプロンプトを読むと、架空のジェラート店 NUVOLA の、スクロールに連動するシネマ風のサイトを作る依頼です。静止画は Higgsfield の画像モデルで4K・16:9、映像は Kling で10秒・16:9・無音、配信先は localhost:8119。話し手は、なぜ画像と映像の両方が要るのかを語ります。

動画の中で（8:23〜）

“we need to be able to use an image model and a video model, right? And then divide that into frames.”

訳: 画像のモデルと動画のモデルを使えるようにして、それをフレームに分ける必要があります。

画面の下にも目を向けておきます。実演中の Claude の画面には「Opus 5.5 High」と表示されています。一方、動画の題名は Fable 5.2。実演で動いていたモデルがどちらなのかは、画面からは言い切れません。

私なら、プロンプトを貼る前に、何が書いてあって、何が書いてないかを自分の目で読みます。貼ってから驚くより、読んでから頼むほうが、あとで迷いません。

頼み方の違いは、私も記事に残しています。Claude Opus 5.5でモーション動画を頼む方法。6つ試した2026年10月16日の私の記事で、モーション動画をAIに頼んだ時のことを書きました。頼み直しに使った7つの指定は紹介元の人の方法で、私の発明ではありません。

記事の該当箇所は、こうです。

私の10月16日付の記事より（Claude Opus 5.5でモーション動画を頼む方法。テツメモさんが紹介したSkillryとMotion Video Kitで6つ試した）

一行で頼むと、黒と金の画面に揺れと閃光が入りました。尺、最初の1秒、色と字、使わない表現まで書いて頼み直すと、揺れと閃光は出なくなりました。

動画のプロンプトは、静止画、映像、配信先まで書き込んだ長い指定です。私の頼み直しでは、尺や使わない表現まで書き足すと、揺れと閃光は出なくなりました。

「1つのプロンプト」も、中身を開くと、細かい指定の束なんです！

ここからは、AIに画像や動画を作らせる道具をつなぐ場面です。MCPは、AIが外の道具を呼ぶための接続口のこと。動画の後半は、この接続口の話が中心になります。

プロンプトでは、静止画も映像も Higgsfield の MCP で作る指定でした。Claude 自体は、画像も動画も作りません。話し手は、プロンプトを読み終えたところで、Higgsfield を使う理由を、こう挙げます。

動画の中で（9:00〜）

“the reason why I’m using Hicksfield is because obviously we need claw doesn’t do its own image and video. So that’s why we need something like Hicksfield.”

訳: Higgsfield を使う理由は、Claude 自身は画像も動画も作らないからです。だから Higgsfield のようなものが要ります。

プロンプトを送ると、Claude は、同じ日のうちに同じプロンプトで作ってあると返してきます。画面には前回の内訳が並びました。4Kの静止画6枚、Kling 3.0 の映像6本、各映像を180フレームに分割、60fps。話し手は、画面の「Rebuild from scratch」で、最初から作り直す方を選びます。その理由を、こう続けます。

動画の中で（9:24〜）

“I’m just going to rebuild it from scratch because the point is to show you guys like how cloud code uh using the uh Higfield MCP generates the entire website and everything else.”

訳: 最初から作り直します。目的は、Claude Code が Higgsfield の MCP を使って、サイト全体をどう作るかをお見せすることだからです。

作り直しを待つ間、画面は Higgsfield の MCP の入れ方に移ります。Higgsfield のサイトの MCP のページでリンクをコピーし、Claude のデスクトップで Customize、Connectors、Add custom connector と進む。名前を付けて続行し、接続を押すとブラウザで認証、という流れです。話し手の環境は登録済みなので、警告が出ていました。

この動画は、概要欄に Higgsfield のスポンサー付きと書かれています。話し手が Higgsfield を使うのは、画像と動画を作らせるためでした。手順の画面と、勧められている道具が、同じ動画の中にあります。

私なら、スポンサー付きの動画は、動画の中身と、勧められている物を、分けて読みます。

動画の手順は、ひとつずつ画面で確かめられます。リンクをコピーする場所も、押すボタンも映っている。ここは、めちゃありがたいです！

ただ、手順が見えることと、自分の仕事に合うことは別です。凄そうな雰囲気より、何が出来て、何がまだ出来ていないかを見たい。

例えばこの実演なら、静止画と映像を外の道具で作る所と、Claude がサイトに組み立てる所は、分けて見られます。勧めと中身は、別の話。

だから私は、勧めを受けて決める前に、足さない案も横に並べます。その道具が無くても出来ることを先に見てから、足すかどうかを選びます。

生成には数分かかりました。待った先で、Claude が「Nuvola は localhost の8119で動いている」と返してきます。ここが、この動画の山場です。

話し手がそのアドレスを開くと、画面に読み込みの表示が出て、サイトが現れます。localhost は、手元のパソコンの中だけで動く確認用の住所。公開されたサイトではありません。

動画の締めくくりで、話し手は全体を振り返ります。プロンプトを Claude か Claude Code に貼るだけ。そのまとめを、こう締めくくります。

動画の中で（12:20〜）

“So that’s how simple it is for you to build 3D animated websites. And like I said, you can just copy and paste any of these um prompts.”

訳: 3Dアニメ付きのサイトを作るのは、これだけ簡単です。先ほど言ったとおり、このプロンプトのどれでも、コピーして貼り付けるだけです。

手元のパソコンで開けたことと、人に見せられる公開は、別の線です。

ショート動画作りをClaude Opus 5.5に任せたら、ワンプロンプトで公開まで進んだ2026年9月28日の私の記事に書いたのは、AGICockpit のタスクにワンプロンプトを送った話です。翌朝には、縦動画が YouTube ショートと TikTok に公開されていました。作ったのは動画で、3Dのサイトではありません。

その記事では、こう書いています。

私の9月28日付の記事より（ショート動画作りをClaude Opus 5.5に任せたら、ワンプロンプトで公開まで進んだ）

私が送ったのは「リール動画にして」のひと言と、3回の返事でした。

同じ9月28日付の記事の末尾より（ショート動画作りをClaude Opus 5.5に任せたら、ワンプロンプトで公開まで進んだ）

最後のボタンを押すのは私です。

動画の完成サイトは、手元のパソコンで開いて見せた物です。私の動画は、公開まで進みました。

行き先が違えば、最後に要る手も変わります！

違いは、作る速さより、最後に誰が押すか。

手元で動いた画面を、そのまま人に見せていいと思えるのは、どんな時でしょうか？

自分が腑に落ちた所にAIとの共創を重ねるから、意味が出る。私はそう考えています。

動画は、AIに頼むと最初の形が速く出る、という話でした。ここからは私の章です。頼む前に人の側で持っておく物を、3本に絞って書きます。

私なら、AIに頼む前に、3本の線を先に決めます。何を誰に作るかとお手本、合格線、そして最後の公開ボタンは自分で押すこと。

1つ目は、何を誰に向けて作るか。お手本はどれか。頼む前に、これを1行で書いておきます。

RPG職業診断を寝る前に頼んだら、Claude Codeが診断カードの投稿サイトを作った2026年10月12日の朝LIVEの記事で、2026年10月12日の朝LIVEのことを書きました。前の晩に Claude Code に頼んで仕込んだ、共創の酒場というサイトを見せた回です。3Dやアニメは入っていません。

記事には、こう残っています。

私の10月12日付の朝LIVE記事より（RPG職業診断、寝る前に頼んだらClaude Codeが診断カードの投稿サイトを作った）

出てきたサイトは完成していませんが、一応動きます。

2つ目は、合格線。どこまで似たら、どこまで直ったら合格なのかを、数字で決めておきます。

お手本サイトをAIにまねさせるCraft Anythingを自分のサイトで試した2026年11月12日の私の記事では、2026年11月9日に、お手本のサイトの模写を自分のサイトで試しました。かかったのは1時間45分、トークンは約5,347万です。

道具が決めている合格の線は90%。私がやったのは、AIに頼むことだけでした。記事の言葉を引きます。

私の11月12日付の記事より（お手本サイトをAIにまねさせる「Craft Anything」を自分のサイトで試したら、似ている度合いは71.2%で止まった）

似ている度合いは、作られた5ページの平均で71.2%で止まっています。

合格の線を先に持っていると、どこで止まったかが数字で見えます。線が無ければ、出来たのかどうかも決められません。

3つ目は、最後の公開ボタン。公開する、送る、払う。この最後の操作は、第5章で書いたとおり、人が押します。

自分のサイトを頼むとして、3本の線のうち、いまいちばん決まっていないのはどれでしょうか？

動画は、Fable 5.2 が3Dのサイト作りを得意とする、という話し手の主張から始まりました。作例はゲーム機の Blip、ティーショップ、ジェラートの Nuvola の3つ。プロンプトは Higgsfield の MCP で静止画と映像を作る指定で、作り直しを経て、完成サイトが localhost で開きました。

動画の「数分で作った」の隣に、私の公開済みの記録を並べてみます。公開まで進んだ動画、回る立方体、一行から7つの指定への頼み直し、未完成でも動いたサイト、71.2%で止まった模写。最初の形が出るのは速い。仕上げと確かめは別の話です。

頼む前に決めるのは、何を誰に作るかとお手本、合格線、最後の公開ボタン。この3本です。AIは魔法じゃありません。使いこなすには、自分の側で縦に掘る手間が要ると、私は考えています。

本編の動画では、Nuvola のサイトがスクロールのたびにフレーバーごとに色を変える所や、Claude の画面にプロンプトを貼り、Higgsfield の画面と行き来する所、完成したアドレスを開く所が見られます。英語の動画ですが、画面を追うだけでも流れはつかめますよ。