複数のAIを“ドット絵オフィス”で可視化する
― AIエージェントが「社員」として働く自作ツール
Macで動いている複数のAI（Claude Codeのセッション）を、ドット絵の“社員”が働くオフィスとして一目で見えるようにした自作ツールの紹介です。あわせて、AIへの指示だけでこうしたツールのプロトタイプを作る「考え方」と「指示の出し方」まで公開します。
- ① なぜ“複数AIは見えない”のか／可視化で何が変わるか
- ② AIオフィスが何をしているのか（仕組みの全体像）
- ③ 指示だけでプロトタイプを作る方法（考え方＋指示例）
① 同時に動かすほど「見えない」
AIに任せる時代、1つのAIに1タスクではなく、何個も同時に走らせる使い方が当たり前になってきました。でもターミナルは黒い文字の羅列。今どれが動いていて、どれが止まっていて、どれが質問待ちなのかが分かりません。放置すれば待たせ損、見張れば人間が張り付き ― これが地味に毎回のストレスでした。
ちょうど今、SNSでも「AIエージェントがピクセルの社員として働く」表現が話題です。「AIに思考を任せすぎでは？」という議論も出ています。任せるほど、“今どうなってる？”を一目で掴めることが価値になる ― その全体版を自分で作ってみた、というのが今回です。
② AIオフィスとは（仕組みの全体像）
やっていることはシンプルです。Macで動いている各AIの作業ログ（記録）の末尾だけを読み取り、「今何をしているか」を推定して、1枚の見下ろしオフィスに“社員”として並べる ― それだけ。読み取りのみで、外部にデータは送りません（ローカル完結）。
- 1セッション＝1社員／プロジェクト＝部署
- 状態を色と所作で表現：作業中／指示待ち／休憩中
- 社員をクリック→その場で指示／画面から新プロジェクト起動／スマホからも確認
③ プロトタイプの作り方 ― 考え方
完成版ではなくプロトタイプなら誰でも作れます。カギは「一気に完成を頼まない」こと。丸投げすると複雑になって壊れます。最小から段階的に育てるのがコツです。
- 何を画面に出したいかを先に言語化（何を・どこから読んで・どう表示するか）
- 一番小さい動くもの（1人だけ画面に立つ）から頼む
- 少しずつ機能を足して育てる（色分け→クリックで詳細→…）
そのまま使える「指示の型」3つ
【型①：ゴールと制約を先に固める】 〇〇を画面に出すツールを作りたい。 まず「何を・どこから読んで・どう表示するか」を先に整理してから、 一番小さい構成を提案して。いきなり作り込まないで。
【型②：最小の動くものを頼む】 まずダミーデータで「1人だけ」画面に立つところまで作って。 動いたら見せて。それから次に進もう。
【型③：段階的に足す】 次は状態で色を変えて。→ 次はクリックで詳細を出して。 → 次は…、と1機能ずつ。毎回「動いたら見せて」で確認しながら。
よくある失敗と直し方
| やりがちなNG | 直した指示 |
|---|---|
| 全部入りを丸投げ | 最小から段階的に |
| 「いい感じに」だけ | 何を・どこから・どう出すかを具体語で |
| 動作確認を後回し | 1機能ごとに「動いたら見せて」 |
効果 ― “見えない”が一目でわかる
黒いターミナルの羅列（見えない）から、誰が動いて・誰が待っていて・どこが止まっているかが“絵”で入ってくる状態へ。プロジェクト全体の動きが直感で掴めるので、判断が速くなり、放置も減る。任せきりでも安心して見ていられます。視認性を上げてプロジェクト全体の動きを把握しやすくする ― これが一番の狙いです。
まとめ
- 複数AIは“見えない”→ 可視化で全体把握
- ログを読んで“社員”として表示するのがAIオフィス
- プロトタイプは「最小から段階的に」指示すれば作れる