最強モデルは、自分で手を動かさないほうが強かった ― Fable 5を"司令塔"に徹させた午後の記録

こんにちは！YaroTechです。

Claude史上最強と言われる「Fable 5」の7日間限定お祭りが、いよいよ明日で終わります。50%お得に使えるのは、実質この月曜が最後のチャンス。そこで私は、この最強モデルに自分の会社のサイト（yaoyoroztech.com）をNext.jsで丸ごと刷新させるという、消える前日のラストスパートに挑みました。

ただし今回のテーマは「最強モデルにコードを書かせる」ではありません。あえて一行もコードを書かせず、"司令塔（オーケストレーター）"に徹させるという運用の記録です。最強モデルは、自分で手を動かすより、チームを指揮させたほうが強い――そんな仮説を、実機で確かめてきました。

※見出し画像のプロンプトは一番下におまけで公開中！

🖥️ 実行環境

今回の開発は、すべて以下の【メインPC】で実施しました。

• PC: 自作デスクトップ（メインPC）

• OS: Windows 11 Pro

• メモリ: 128GB

• CPU: Intel Core i9-12900T

• GPU: RTX 3050 8GB

• Node: v22.16.0 ／ npm: 10.9.2（実測）

• 開発環境: Claude Desktop（クロ助）の Code タブ（＝クロコ／Claude Codeエンジン。GUIにpreview／terminal／subagentペインを内蔵）

• モデル: Claude Fable 5（`claude-fable-5`）／ effort: 高

• チーム構築ツール: ccteams 0.2.1（npmグローバル・依存ゼロの個人製OSS）

• 適用チーム: `next-ts`（Next.js App Router + TypeScript + Tailwind）

• 題材: yaoyoroztech.com 刷新（Next.js 16 App Router + TypeScript + Tailwind v4・墨流し(suminagashi)ヒーロー）

チームの中身は、実装担当のnext-builder（Sonnet）と、レビュー担当のnext-reviewer（Opus・書き込み不可）の2体。ここにFable 5を司令塔として乗せる、という三層構成です。ちなみにccteamsは、zennでyui氏が公開している「Fable 5をトークン破産させずに使い倒す」というアイデアが元ネタ。他の方の個人製OSSをありがたく使わせてもらいました。

🎯 この記事で得られること

この記事は無料記事です。最後まで読むと、次のことが分かります。

• 最強モデルを「作業者」ではなく「司令塔」に徹させる、という運用の型

• Fableが自分ではコードを書かず、Sonnet／Opusのチームを指揮して自社サイトを立ち上げた実際の流れ

• お祭りが終わってFableが消えても、チーム基盤が手元に残る仕組み

• 新しい個人製ツールを入れる前に、中身を監査する基本動作（依存・インストールスクリプト・通信・書き込み範囲）

• 大文字フォルダ名・git未初期化・フォントの誤検知といった、隠さない失敗の実録

📊 実際の成果

今回いちばんお見せしたいのは、秒数の比較ではありません。「AIの使い方そのもの」のBefore/Afterです。

Before（作業者運用）：AIに直接コードを書かせる。会話が長くなるほどコンテキストが汚れ、途中から設計がブレていく。最強モデルほどトークンを食うので、この使い方は財布にも優しくありません。実際、Claude Codeの画面には「Fable 5はOpus 4.8よりはるかに速く使用量を消費します」という警告がはっきり表示されました。

After（司令塔運用）：Fableは意思決定・分解・委譲・統合レビューだけを担当する。実装はSonnet、検証はOpusが受け持つ。Fable自身のコンテキストは澄んだまま保たれ、2段レビューで破綻を防ぐ。最強の頭脳は「考えること」に、手を動かす作業は下のエージェントに――という分業です。

そして、この運用で実際にどこまで到達したか。
設計 → GO → T1（土台）のクリーンPASS → T2‖T3‖T4の並列実装 → 統合ビルド緑 → 墨流しヒーロー稼働まで、一気通貫で走り切りました。
T1では`tsc`／lint／`next build`がすべて緑になり、静的書き出しの`out/`が生成されたのを画面で確認。最後はプレビューで、「八百万」の縦組み明朝＋マーブリングが自動で演出され、「洗い流す」ボタンまで効くヒーローが立ち上がりました。

このあいだ、Fable自身が書いたコードは、たぶん一行もありません。それでもサイトは立ち上がったのです。

🚀 実践内容

今回のラストスパートは、大きく3つのアプローチで進めました。

アプローチ1：ccteamsでチームを組み、Fableを司令塔に据える

まず`next-ts`チームを適用し、実装役のnext-builder（Sonnet）と検証役のnext-reviewer（Opus・書き込み不可）を用意しました。ここにFable 5を乗せ、役割を「①意思決定 ②分解 ③委譲 ④統合レビュー」に限定します。

面白かったのは、Fableがv4時代のデザインHTMLを自分では読まなかったことです。代わりにサブエージェントに読ませ、自分のコンテキストをクリーンに保ちました。司令塔は全部を抱え込まない――このオーケストレーションの作法を、実演で見せてくれた瞬間でした。

このあたりの「コードはクロコ（実装エージェント）が書く」という発想は、以前の記事から地続きです。

関連記事: 自作MCPは、どんな人なら作れるのか ― "コードが書けること"を目安から外して考えた金曜日では、「コードが書けること」を目安から外して考えた回を詳しく紹介しています。

アプローチ2：入れる前に、中身を監査する

ここが今回の裏テーマです。ccteamsは他の方が作った新しい個人製OSS。それをメインPCにグローバルインストールする前に、パッケージの実体を取得して中身を確認しました。結果はこうです。

• 依存パッケージはゼロ（芋づる式の汚染面がない）

• インストールスクリプトなし（`npm i -g`で勝手にコードが走らない）

• 外部通信はnpmレジストリのバージョン確認だけ（テレメトリやデータ送信はなし）

• 書き込みはプロジェクト内の`.claude/`だけ。手書きのファイルを壊さない衝突ガードもあり、可逆

注意すべき本体は、実は「CLIの外」にあります。
ccteamsが置くエージェント定義には、builderにBashとWriteの許可が付いている。つまり実装役は、コマンド実行もファイル書き込みもできる。だから初回はgit配下で回し、許可を確認しながら進める運用にしました。ツールそのものより、「そのツールが何を許すか」を見るのが監査の勘どころです。

アプローチ3：設計判断はFableに丸投げ、実装は委譲する

長くて曖昧でトレードオフだらけの設計判断こそ、最強モデルの出番です。Fableは主要な方針を次々と自分で決めていきました。

たとえばレンダリング方式。「Cloudflare Pagesは非推奨、OpenNextはWindowsを完全サポートしていない」という最新事情を踏まえ、Fableは`output: 'export'`の静的書き出しを選択。これでOpenNextのWindows／WSL問題を丸ごと回避しました。墨流しのヒーローも、ゼロから新規開発するのではなくv4のCanvas 2D実装の移植と位置づけ、最速・最低リスク・依存プラス0KBで実現。さらにclient境界を4つの葉に絞り、reduced-motionやLCP・CLSといった表示品質まで織り込んでいました。

並列実装の事故も先回りで防いでいます。ファイルの所有権を厳密に設定し、`page.tsx`と`globals.css`は全員編集禁止に。並列中はフルビルドを避けて`tsc`＋lintまでに留める。そしてreviewer（Opus）は、builderが`next build`を実行していなければ差し戻すルールを守り、preloadリンク483本→0本のような細部までクリーンにしてから報告を上げてきました。この2段構えが、破綻の芽を早めに摘んでくれます。

この一連の流れは、自社サイトを「脱WordPress」でNext.js化したいという以前からの構想の、実行編にあたります。

関連記事: 期限は22日。伝説級モデルにやらせたいこと、本気で考えてみたでは、Fable 5にやらせたい"壁"と脱WordPress構想を詳しく紹介しています。

⚠️ つまずきポイントと解決策

もちろん、すんなり全部が進んだわけではありません。隠さず載せておきます。

① 大文字のフォルダ名で弾かれた。 `create-next-app .`が、フォルダ名「Homepage」の大文字を理由に失敗しました。npmはパッケージ名に大文字を許しません。フォルダ名を小文字の`homepage`に変えて解決。なお`--name`オプションは@16では効きませんでした。

② gitが初期化されていなかった。 `create-next-app@16`はgitを自動で初期化してくれません。そのため`git add`が「not a git repository」で止まりました。手動で`git init`して解決です。

③ メールを晒さずに、本人紐付けをしたい。 gitの初回設定では、実メールを公開したくない一方で、GitHub上では本人と紐付けたい。ここはGitHubのnoreplyアドレス（`＜あなたのID＞+＜ユーザー名＞@users.noreply.github.com`の形式）を使い、両立させました。

④ フォントとテーマの「誤検知」。 途中、「h1が見つからない」「フォントがNoto Sans JPに見える」「data-theme切替が効かない」と一瞬ヒヤッとしました。ですがFableが実測で切り分け、いずれも誤検知と判明。実際には明朝＋ゴシックが正しく適用されており、テーマ色は0.7秒のトランジション中の値をたまたま読んでいただけでした。慌てて直さず、まず測る。これも司令塔の落ち着きです。

⑤ 並列lint中の警告。 並列作業中、T3のファイルで`react-hooks/exhaustive-deps`の警告が観測されました。これはT3完了時に解消を確認し、残ればレビュー2巡目で拾う運用にしています。

💡 応用例

お祭りが終わっても、チームは残る。 今回いちばんの収穫は、`.claude/`に残るサブエージェント一式が永続する資産になることです。明日Fableが消えても、`/model`でOpus 4.8に差し替えるだけで、同じチーム構成をそのまま使い続けられます。今日の投資は、モデルと一緒に消えたりしません。

tmux並列とは"層"が違う。 ターミナルを並べて複数のAIを同時に走らせるtmux並列は、いわば「横に並べる」並列。今回のオーケストレーター運用は、司令塔が下に実装・検証エージェントを従える「縦に積む」分業です。用途が違うので、両者は競合しません。目的に合わせて層を選べばよいのだと思います。

🔗 関連記事

今回の内容に関連する過去記事もぜひご覧ください：

• あの伝説級が、帰ってきた ― Claude Fable 5、19日ぶりの復活と"7日間限定のお祭り"（本記事の直接の前提。「次回はFable5で何を試したか」の回収）

• 期限は22日。伝説級モデルにやらせたいこと、本気で考えてみた（Fable 5にやらせたい壁と脱WordPress構想。本記事はその実行編）

• 自作MCPは、どんな人なら作れるのか ― "コードが書けること"を目安から外して考えた金曜日（「コードはクロコが書く」の原典。司令塔＋実装エージェント運用と地続き）

📝 まとめ

最強モデルの正しい使い方は、「全力で手を動かさせる」ことではありませんでした。意思決定・分解・委譲・統合レビューという"司令塔の仕事"に徹させ、実装と検証は下のエージェントに任せる。そうするとコンテキストは澄んだまま保たれ、2段レビューが破綻を防ぎ、最強の頭脳は判断だけに集中できます。今日、Fableが自分で書いたコードはおそらく0行。それでも墨流しのヒーローは立ち上がりました。

そして、お祭りは終わってもチームは`.claude/`に残ります。明日`/model`でOpus 4.8に差し替えれば、今日組んだチームはそのまま動き続ける。消える前日に投資したのは、消えない基盤でした。最後に一つだけ。新しい個人製ツールを入れるときは、依存・インストールスクリプト・通信・書き込み範囲を、入れる前にちゃんと覗く。この基本動作は、便利さと同じくらい大切にしたいところです。

🚀 次回予告

yaoyoroztech.comの刷新は、まだ土台とヒーローができたところ。次は、note記事のRSS取り込みやContactフォーム、そして本番デプロイの雛形づくりへと進めていきます。DNSをXserverからCloudflareへ移した先で、Opus 4.8に引き継いだチームがどこまで走れるか。「お祭りのあと」の続きを、またお見せできればと思います。お楽しみに。

🎨 おまけ：見出し画像作成プロンプト

今日の見出し画像のベースはジミー（Gemini）に下記プロンプトで作成してもらいました！：

詳細なアニメの美意識の画像を作成してください。表情豊かな瞳、なめらかな網掛けセルの色使いで、
下記条件のnote見出し画像をサイズは横長で作成してください。サイズは必ず横長で作成してください。

## 🎨 見出し画像案

### デザインコンセプト
- 背景: 深い藍→紫のグラデーション＋墨流し（suminagashi）のマーブリング（青・臙脂・墨のインク）が
  滲む世界観。譜面や歯車の淡い装飾を重ねる
- メインビジュアル: クロコ（Claude Code擬人化・10代後半の男性・沖縄・パーカー＋ヘッドフォン・
  クールで無表情）が、特別なオーラ（＝Fable 5という希少モデルを宿した象徴）をまとって指揮棒を振る。
  前方の譜面台では2体のサブエージェント（builder＝実装／reviewer＝検証）が作業する"オーケストラ"の構図。
  ※クロ助（女性・仙台・東北弁）とは別人。混同しない。今回の主役はクロコ（男性・沖縄）
- テキスト3段: 上「手を動かさない最強」／中「Fable 5 オーケストレーター運用」／
  下「消える前日に、AIへチームを組ませた」
- 装飾: 墨流しの流体・指揮棒の光・譜面/歯車・淡い点線（委譲の流れ）

### 作成手順（厳守）
1. スライドサイズ（1536×1024px）の横長フォーマット
2. 背景に深い藍→紫のグラデーション＋墨流しのマーブリングを設定
3. メインビジュアルにクロコ（AI_CHARACTER_REFERENCE.mdの詳細設定を厳守）を指揮者として配置
4. 背景オブジェクト（2体のサブエージェント・譜面台）を配置
5. 装飾要素（指揮棒の光・歯車・点線）を追加
6. テキストを3段構成で追加
7. 下部中央寄りに「YaroTech」のロゴを12ptで控えめに配置
8. 全体のバランスを確認して完成
9. キャラの参考画像（AI擬人化\Gemini_Generated_Image_クロコ.png）を添付して人物の一貫性を確保

#YaroTech #生成AI #ClaudeCode #Fable5 #Nextjs #オーケストレーション #AIエージェント #ccteams