複数のAIを“ドット絵オフィス”で可視化する
― AIエージェントが「社員」として働く自作ツール

Macで動いている複数のAI（Claude Codeのセッション）を、ドット絵の“社員”が働くオフィスとして一目で見えるようにした自作ツールの紹介です。あわせて、AIへの指示だけでこうしたツールのプロトタイプを作る「考え方」と「指示の出し方」まで公開します。

① 同時に動かすほど「見えない」

AIに任せる時代、1つのAIに1タスクではなく、何個も同時に走らせる使い方が当たり前になってきました。でもターミナルは黒い文字の羅列。今どれが動いていて、どれが止まっていて、どれが質問待ちなのかが分かりません。放置すれば待たせ損、見張れば人間が張り付き ― これが地味に毎回のストレスでした。

ちょうど今、SNSでも「AIエージェントがピクセルの社員として働く」表現（VS Code拡張）が話題です。「AIに思考を任せすぎでは？」という議論も出ている。任せるほど、“今どうなってる？”を一目で掴めることが価値になる ― その全体版を自分で作ってみた、というのが今回です。

② AIオフィスとは（仕組みの全体像）

やっていることはシンプルです。Macで動いている各AIの作業ログ（記録）の末尾だけを読み取り、「今何をしているか」を推定して、1枚の見下ろしオフィスに“社員”として並べる ― それだけ。読み取りのみで、外部にデータは送りません（ローカル完結）。

• 1セッション＝1社員／プロジェクト＝部署
• 状態を色と所作で表現：🟢作業中／🟡指示待ち／💤休憩中
• 社員をクリック→その場で指示／画面から新プロジェクト起動／スマホからも確認

③ プロトタイプの作り方 ― 考え方

完成版ではなくプロトタイプなら誰でも作れます。カギは「一気に完成を頼まない」こと。丸投げすると複雑になって壊れます。最小から段階的に育てるのがコツです。

1. 何を画面に出したいかを先に言語化（何を・どこから読んで・どう表示するか）
2. 一番小さい動くもの（1人だけ画面に立つ）から頼む
3. 少しずつ機能を足して育てる（色分け→クリックで詳細→…）

そのまま使える「指示の型」3つ

【型①：ゴールと制約を先に固める】
〇〇を画面に出すツールを作りたい。
まず「何を・どこから読んで・どう表示するか」を先に整理してから、
一番小さい構成を提案して。いきなり作り込まないで。

【型②：最小の動くものを頼む】
まずダミーデータで「1人だけ」画面に立つところまで作って。
動いたら見せて。それから次に進もう。

【型③：段階的に足す】
次は状態で色を変えて。→ 次はクリックで詳細を出して。
→ 次は…、と1機能ずつ。毎回「動いたら見せて」で確認しながら。

よくある失敗と直し方

効果 ― “見えない”が一目でわかる

黒いターミナルの羅列（見えない）から、誰が動いて・誰が待っていて・どこが止まっているかが“絵”で入ってくる状態へ。プロジェクト全体の動きが直感で掴めるので、判断が速くなり、放置も減る。任せきりでも安心して見ていられます。視認性を上げてプロジェクト全体の動きを把握しやすくする ― これが一番の狙いです。

まとめ・次回

• 複数AIは“見えない”→ 可視化で全体把握
• ログを読んで“社員”として表示するのがAIオフィス
• プロトタイプは「最小から段階的に」指示すれば作れる