AIエージェントが増えると、次の課題は「見えないこと」になる
Claude Codeのようなコーディングエージェントを日常的に使い始めると、作業は1セッションでは収まらなくなります。複数のプロジェクトで並列にセッションを走らせ、バックグラウンドタスクを投げ、サブエージェントに監査やレビューを任せる。ここまで来ると、開発のボトルネックはコードを書くことではなく、「いま何がどこで動いているのかを把握すること」に移ります。
最終更新日: 2026-09-02
- どのプロジェクトのセッションがいま生きているのか
- 投げたタスクは終わったのか、止まっているのか
- エージェントが方針を誤ったとき、どこで軌道修正するのか
ターミナルのウィンドウを行き来して確認する運用は、セッションが3つを超えたあたりで破綻します。この記事では、この問題に対して弊社代表が実際に自作・運用している可視化ダッシュボード「8-BIT Task Board」の設計を紹介します。
何を作ったか: レトロゲーム風「ピクセルオフィス」ダッシュボード
作ったものは、ローカルで動く小さなNode.jsサーバーと数枚のHTMLです。ブラウザを開くと、RPG風のタイルマップで描かれた「オフィス」が表示されます。
- 稼働中のClaude Codeセッション1つ = デスク1台。キャラクターが座ってタイピングしています
- 登録済みのAIエージェント(レビュー担当、SEO担当、審査対応担当など) = 部屋を歩き回るスタッフ。経路探索で家具を避けながら移動します
- ヘッドレス起動用のClaude = 左端の「司令デスク」に常駐。指令実行中はタイピングアニメーションに切り替わります
見た目は遊びですが、目的は真面目です。「AIに仕事を任せている状態」を、数字の羅列ではなく一目で状況が分かる空間として表現すると、異常(止まっているセッション、溜まったタスク)に気づく速度が上がります。人間のオフィスで「あの席、今日ずっと空いてるな」と気づくのと同じ原理です。
仕組み: Claude Codeのローカルデータを読むだけ
重要な設計判断は、Claude Code本体に一切手を入れていないことです。
Claude Codeは ~/.claude ディレクトリ配下に、プロジェクトごとのセッション履歴(JSONL)やタスクの状態をローカル保存しています。ダッシュボードのサーバーはこれを数秒間隔で読み取り、スナップショットをJSONで返すだけです。
構成の要点:
- 依存ゼロのNode.jsサーバー: npmパッケージを使わず、標準モジュールのみ。ポート1つで静的UIとAPIを配信
- 読み取り中心の設計: 基本は
~/.claudeとgitログの読み取りのみ。表示のために既存環境を汚さない - hooksで双方向化: Claude Codeのhooks機能(UserPromptSubmit / Stop)を使い、ダッシュボードから出した「指令」をセッションに注入し、セッション終了時に最終回答をボードへ報告させる
- 複数PC対応: 各マシンで同じサーバーを起動し、URLを登録すると1画面に複数台の「部屋」が並ぶ
つまり「監視ツール」ではなく、Claude Codeが元々ローカルに書いているデータを人間が読みやすい形に翻訳する層です。
「発令」: ダッシュボードからAI社員に仕事を出す
可視化だけでなく、ボード側から指示も出せるようにしています。
- ボードの入力欄にプロジェクト宛の指示を書く(例: 「◯◯のテストを直して」)
- サーバーが指示をキューに保存
- ヘッドレスのClaude Codeを固定プロンプトで起動。「司令塔からの指令を確認して順番に処理せよ」とだけ伝える
- セッション側のhookがキューから指示を取り込み、実行
- 終了時にStop hookが最終回答をボードへ送り返す
ここで守っているセキュリティ上の原則が2つあります。
- ユーザー入力をシェル引数に混ぜない: ヘッドレス起動時に渡すのは固定文言のみ。指示本文はファイル経由で受け渡し、任意コマンド実行の余地を作らない
- 権限バイパスを使わない: 危険な権限スキップ系フラグは使わず、通常の権限モデルの中で動かす
「AIに自律的に働いてもらう」仕組みほど、この種の境界設計を最初に固める必要があります。
運用して分かった効果
導入前後で変わったのは、概ね次の点です(いずれも自社運用での定性的な観察です)。
- 放置事故が減った: 止まったセッション・詰まったタスクが視覚的に「空席」「滞留」として見えるため、気づくまでの時間が短くなった
- 並列数を増やせた: 把握コストが下がった分、同時に走らせるプロジェクト数を増やしても管理が破綻しなくなった
- 家族や非エンジニアにも説明できる: 「AIの社員がここで働いている」という画面は、技術を知らない人にも状況が伝わる。社内でAI活用を広げるときの説明装置としても機能する
自社で作る場合の要点
同種のものを作る場合、最小構成は次の3ステップです。
~/.claude/projects/配下のJSONLを読み、「最終更新が数分以内のセッション」を稼働中と判定する- それをJSONで返すローカルサーバーを立てる(依存ゼロで書ける規模です)
- まずは表だけのHTMLで表示する。ピクセル表示などの装飾は後から乗せる
凝った見た目より先に、「何を稼働中とみなすか」「何を異常とみなすか」の判定を固めることをおすすめします。ダッシュボードの価値は絵ではなく判定ロジックにあります。
まとめ
- コーディングエージェントの並列運用では、実行能力より先に可観測性が課題になる
- Claude Codeはローカルにデータを残すため、本体無改造で可視化層を後付けできる
- hooksを使えば「指示を出す→結果が返る」双方向の運用まで拡張できる
- 遊び心のあるUIは、組織内へのAI浸透という副次効果も持つ
Burning Tribeでは、こうしたAIエージェントの業務組み込み・内製化支援を行っています。「自社の業務でどこまでできるのか」を確認したい方は、無料相談をご利用ください。
なお、この8-BIT Task Boardの構築手順・設計ノウハウの詳細版(コード断片と構築用プロンプト集を含む)は、有料コンテンツとして別途公開しています。個人で同じ環境を作りたい方はそちらをご覧ください。
よくある質問
8-BIT Task Boardは既製のツールですか？
いいえ、弊社代表が自作しているローカル運用の小さなダッシュボードです。Claude Code本体には手を加えず、~/.claude配下のデータを読み取って表示する仕組みなので、既存の環境を汚さずに導入できます。
複数のClaude Codeセッションをまとめて見られますか？
はい。稼働中のセッションはデスク、登録済みのAIエージェントは部屋を歩き回るスタッフとして表示されるため、複数プロジェクトを並列で走らせているときの状況を一画面で把握できます。複数PCで動かしている場合も、URLを登録すれば1画面に部屋が並びます。
Claude CodeでAIを活用する他の事例はありますか？
弊社ではClaude CodeにChatGPTの画像生成を操作させる運用や、AIを使ったスマホアプリの個人開発についても紹介しています。Codex・Claude Codeの学び方を比較検討したい方はホリエモンAI学校とBurning Tribeの比較もご参照ください。データ活用の事例としては18サイトのDRを毎日監視する仕組みやSearch Consoleの全クエリをサブエージェントで監査する手順も公開しています。
