Claude Codeのエージェント組織の動きをリアルタイムで可視化するツールを作ってみた（作り方全部公開）

1. AIに任せた仕事は、見えない

Claude Code というAI開発ツールの中に、役割ごとに担当を分けた「小さな会社」を組んで、日々の作業を任せてます。
営業がいて、実務がいて、校正がいて、秘書がいる。ただしコンピュータの中なんですよね。

少しだけ自己紹介を。普段はPCに向かう仕事をしていて、本業は小規模事業者向けのITサポートやコンサルティングです。
あわせてFX自動売買のEA開発と、自分自身での運用もしています。
そして今年（2026年）に入ってからはAIを本格的に取り入れて、日々のPC作業の効率化を進めているところです。
今回作ったツールも、その延長線上にあるものです。

エージェントの働きを見えるようにしてみたい

「調べておいて」と投げると、AIは動き出します。ところが手元に流れてくるのは、誰のものとも分からない作業ログの奔流だけ。
今どこまで進んだのか、誰が何を触っているのか分かりません。

そこで、照明を点けることにしました。といっても私が作ったわけではありません。Claude Code に「見えるようにしてほしい」と頼んだだけです。実作業は1〜2時間。その話も含めて書きます。

真ん中に、金色の大きなロボットが1体います。これが私と直接会話している司令塔です。
その周りをぐるりと囲んでいる小ぶりなロボットたちが、それぞれの担当。
名前は日本語で「リサーチ」「デザイン」「ドキュメント」のように出ます。
面白いのは、ロボット同士をつないでいる線の上です。
球が流れます。中央から外へ飛んでいく金色の球が「指示」、外から中央へ戻ってくる緑の球が「報告」。誰に仕事が飛んで、誰から返ってきたのかが、球の動きだけで分かります。
ロボットは、仕事をしていないときは灰色でじっとしていて、ときどき「まばたき」をします。
仕事が始まると自分の色に染まって上下にふわふわ揺れ、頭のアンテナのランプが明滅する。終わると緑になって、目が「にっこり」の弧に変わる。
文字を読まなくても、視界の端で誰が動いているかが分かります。

画面の下には帯があって、担当ごとに横一本ずつ、着手から完了までがバーで伸びていきます。
3人が並列で動いていれば、バーが3本同時に伸びる。あとから「あのとき誰がいつ動いていたか」を辿れます。
右側の柱には、起きたことが上から下へ流れていきます。
オフィスの照明を点けたら、みんなが働いている様子が見えた。

感想としては、楽しいただそれだけです。

わざわざロボットの絵にしたかいがあって、可愛らしいではないですか。

3. 実際に出した指示は、これだけです

さて、ここがこの記事の本題です。私が Claude Code に何と頼んだのか。

実は、そのまま日本語で伝えただけです。だいたい、こんな調子です。

その後最初の完成をみて修正を指示しました

さらに細かい修正です

(ほぼ実際のやり取りです、この文をそのまま貼れば同じものが出てくる、という意味ではありません)

技術的な指定は、ほとんどしていません。というより、できませんでした。私は「Claude Code の中で起きていることを、どうやって外から拾うのか」を知りません。
知らないまま「見えるようにしてほしい」と言ったら、見えるようになった、というのが正直なところです。
ここが今回いちばん驚いたところでした。専門知識をこちらが持っていなくても、決めるべきことさえ決めれば後はお任せが出来てしまう

4. 難しいところは、全部AIがやってくれました

では、中では何が起きていたのか。私が「へえ」と声を出したものを並べてみます。仕組みの説明はしません。というより、私が全部は理解していないので、できません。

誰の動きなのかを、推測せずに見分けていた

3人が同時に動いているとき、「今ファイルが開かれた」という記録だけでは、それが誰の手なのか分かりません。普通に考えれば、時刻の前後から推測するしかない。ところが Claude Code は内部で、担当ごとの識別番号を一緒に渡してくれているのだそうです。
それを公式のドキュメントから自力で見つけてきて、「番号が付いていればその担当の動き、付いていなければ司令塔本人の動き」という形に整理していました。
(その公式ドキュメントはこちら → https://code.claude.com/docs/en/hooks )

本業の邪魔をしない安全策を、勝手に入れていた

これは頼んでいません。この画面のせいで本業の作業が遅くなったり止まったりしないよう、記録の仕組みは本体を待たせない形になっていて、記録のほうで何かに失敗しても本体の作業には影響が出ないようになっていました。
見える化のために本体が止まったら本末転倒だ、という判断を、私より先にしていたわけです。

細かい不具合を、自分で見つけて直した

たとえば「ブラウザのタブを裏に隠すと、画面の更新が止まる」。私は存在すら知りませんでした。テストの途中で自分で見つけて、直したうえで報告してきました。
正直に書きます。私はこのツールの仕組みを、全部は理解していません。それでも動いています。この状態を気持ち悪いと感じるか、面白いと感じるかで、AIとの付き合い方はずいぶん変わる気がします。私は、面白い側でした。

5. 修正は３回

1〜2時間でできた、と書きました。正確には「３回作り直したあとの、1〜2時間」です。
1回目は、まず作ってみる、絵にする。ここまでは順調です。
2回目は、ほぼ全面的な作り直し。できあがった画面を見た私が「丸が並んでいるだけで無機質なので、ロボットにしてください」と言い出したためです。ついでに「担当名、英語じゃなくて日本語で出せませんか」とも言いました。
3回目は、画面をクリアする機能の作り直し。「表示をリセットしたい」と頼んだら、稼働中の仕事まで消えてしまい、その担当が結果を返してきたときに完了が画面に出せなくなったのです。

並べてみて気づきました。3回のうち2回は、技術の問題ではありません。私が見た目の要望を後から出しただけです。
ロボットにするのも、日本語名にするのも、最初に言っていれば一度で通っていました。
なので、頼むときに決めておくとよいことを足しておきます。絵柄の好み(記号のままでいいのか、キャラクターにしたいのか)と、画面のイメージをこうするとか、ボタンを押したときにどうなってほしいか。

6. 見えるようにしたら、最初に映ったのは自分だった

設定を保存して、ブラウザを開きました。
さあ担当を動かしてみよう、と思うより先に、画面のログはもう流れ始めていました。
最初に映っていたのは、このダッシュボードを作っている、その作業そのものでした。中央の金色のロボット――つまり私と話している司令塔――が、ファイルを開き、書き換え、コマンドを叩いている。
見える化の道具が最初に映し出したのは、その道具を作っている本人だったわけです。

最後にもう少し遊んでみた、追加の指示でこう入れてみました

実際に作ってみた方は、どんなのが出来たか、どんなアレンジをしたか教えていただけると嬉しいです。

開発した環境（今回使用していないものも含まれます）
OS:Windows 11 Home
Microsoft Office 2021
AI:Claude Code デスクトップ版（モデル:Opus 5 中）
追加した機能
Python
メモ:ナレッジ保管:Obsidian
履歴管理:Git 
Bash は Git Bashを利用するように指示
動画:Remotion
Web公開:vercel
音声ナレーション:VOICEVOX
※Windows Homeの場合サンドボックスやBashが使えないので、代替方法を入れるか指示するとエラーが減りますよ

関連記事・リンク

· シリーズ前回：Claude Codeに「小さな会社」を作る 
· シリーズ：Obsidian×Claude Code×Codex連携
· GogoJungle 出品ページ