Fable 5 が再開されました。 7月1日から復活し、Pro / Max / Team プランなら 7月7日までは週の利用上限の50%まで Fable 5 が使えます。それ以降は、使った分だけ課金される方式（usage credits）になる予定です。
せっかく使えるようになったので、どのくらいの力があるのか試してみたくなり、制作を再開しました。今回は Three.js の実力も一緒に見ておきたかったので、SNSで見かけた「東京の地下」を題材にしてみます。
きっかけは SNS で見た東京メトロ3D
きっかけは、Fable で東京メトロの地下鉄3Dマップを作っている人を見かけたことです。東京の騒がしさが体感できる、というクオリティに驚きました。
実物はこちら。全9路線・180駅を実際の緯度経度と深度で立体再現していて、平日ダイヤの列車運行まで動きます。
これを見て、自分も Three.js を使ったらどこまでいけるのか試してみたくなりました。
作ったもの：シン・新宿 / シン・秋葉原
自分は、東京の主要駅の入り組んだ地下構造を「3Dダンジョン」として可視化するサイトをお願いしました。依頼したのはこんな内容です。
1. 【空間把握】「シン・新宿駅」3Dダンジョンエクスプローラー
複雑怪奇な東京の主要駅（新宿や渋谷、東京駅など）の地下・地上構造を、
3Dワイヤーフレームや半透明のグラスモーフィズムで可視化するサイトです。
インタラクション:
ドラッグ＆スクロール: 視点をグルグル回して、
地下何階にどの路線が通っているかを立体的に把握。
マウスホバー: 特定の路線（例：大江戸線や丸ノ内線）にカーソルを重ねると、
その路線の軌道だけがネオンのように発光し、
他の階層がすっと沈み込む（暗くなる）エフェクト。
出来上がったのがこちらです。シン・新宿、シン・秋葉原の2駅を作りました。
複数の路線が絡み合っている東京の駅の地下構造を、そのまま立体で表現してもらっています。
昔、新宿の近くに住んでいたこともあり、新宿駅にはよくお世話になっていました（正確には、地下で迷子になっていました 😅）。もう一つの秋葉原駅は、今の職場で使っている駅なのでモデリングしてみました。
こうして見ると、階層で見せる表現はおもしろく、線路がどうつながっているのかが見えるのが楽しいです。
使ってみた感想
実装時間はおよそ 1時間半。正直、そのほとんどが微調整でした。
デザインや3Dの使用感といったところは、一発でこのレベルまで一気に到達できたのが印象的です。デザインをもう少し具体に落とし込めば、いろいろなパターンを試せそうだと感じました。
ちなみに、こちらで指示しないと、だいたいダークモードっぽい表現で出てきます。これは見やすいので、個人的には好きな挙動です。
トークンを分散させる指示のコツ
指示の仕方として、以下がおすすめされていました。
実装にあたってはトークンを節約するために Opus/Sonnet を適切にサブエージェントとして切り出して実行し、このメインセッション（Fable 5）は設計と監査、レビューに専念してください。実装難易度が特に高いところはこのセッションでやってよいです
性能が低めのモデルをサブエージェントとして雑務にあて、Fable 5 を司令塔のように使うと、トークンを分散できました。結果として、作業を長く持続できたのがよかったです。
とはいえ、有効なクレジットが一瞬で溶けてしまいました……。今回の制作だけで手持ちのクレジットを一気に使い切ってしまい、結局その場で追い課金することに。7日までぶん回したい気持ちはありつつ、思っていた以上に消費が早く、財布との相談が悩ましいところです。
X で見かけた、賢く使うためのノウハウ
いくつか X を見ていて、面白かった投稿がありました。
このあたりには、AI を賢く使うためのノウハウが書かれています。読んでいて、個人的には溜まった Skill を大掃除したい気持ちが湧いてきました。
結局のところ、ドキュメントは腐ります。メンテナンスしなくなるので、定期的にお掃除していきたいと感じています。
Fable 5 の使いどころ
冒頭で触れたとおり、7日までは Pro / Max / Team プランで使える期間です。投稿を見ていて、Fable 5 の使いどころとして刺さったのは次のあたりです。
- 本当の強みは「賢い回答」ではなく、長時間の自律作業
- 溜まった Skill・プロンプトを大掃除させる
- 最初にやるのは自動化ではなく、棚卸し
- 制作物を「単体」ではなく「一本の流れ」で作り直す
- 過去に諦めた自動化に、もう一度挑戦する
まさに、今の自分の「Skill を大掃除したい」という気持ちと重なりました。7日までの期間で、まずは棚卸しから手をつけてみようと思います。
まとめ
- Fable 5 の再開で、Three.js の実力を試すために東京の駅の地下を3Dで可視化してみた
- 成果物は シン・新宿 / シン・秋葉原の3Dダンジョンエクスプローラー。実装は約1時間半で、大半は微調整
- サブエージェントに雑務を切り出すと、トークンを分散できて作業を持続しやすい
- ただしクレジットの消費は早く、今回は追い課金する羽目に。7日までの期間は、自動化より先に Skill の棚卸しから始めたい
一発でここまで作れると、作りたいもののハードルがぐっと下がります。デザインを具体化しながら、いろいろなパターンを試していきたいところです。