AIエージェントの作業を見守る画面を設計してみました

 ・ 4分

photo by Mickey O'neil(https://unsplash.com/@mickeyoneil?utm_source=templater_proxy&utm_medium=referral) on Unsplash

前回の記事で、Markdownノートを作業依頼書として使う自動化を作ってみた話をしました。そのとき、バックエンドの流れと同じくらい長く悩んだことがもう一つあります。エージェントが自分の代わりに働いている間、自分はどんな画面を見ているべきかという問題です。

結局そのプロジェクトはたたみ、この画面は設計メモとしてだけ残りました。メモを消す前に、核心だけ記事にまとめておこうと思います。人がエージェントに仕事を任せるとき知りたいことは、結局三つの質問に絞られるんですよね。

ドキュメント一枚がカード一枚です#

ダッシュボードの基本単位はチケットではなくドキュメントです。Obsidianで書いたMarkdownドキュメントが、そのままカンバンボードのカードとして上がってきます。企画書、QAレポート、デプロイ文書を別途チケットに書き写す必要がありません。

カードの属性はドキュメントのfrontmatterから取ります。typeがカードの種類を、statusがボード上の位置を決めます。

type 扱う仕事 割り当てられるエージェントグループ
Task 機能開発 開発エージェント
QA テストとバグレポート テスターエージェント
Deploy デプロイパイプラインと文書 DevOpsエージェント

タイプによってカードの色とアイコンが変わり、どのエージェントグループが付くかも決まります。ステータスはBacklog、Ready、In Progress、Review、Doneの五つの列を流れていきます。人がドキュメントのstatusを変えるとカードが列を移り、エージェントが作業を終えるとまたカードが動く、という具合です。

前回の記事で話したfrontmatterの実行条件が、ここではそのままカードのステータスになります。バックエンドと画面が同じメタデータを見ているわけです。

カードを開くと三つの質問に答えます#

カードをクリックすると右側のパネルかモーダルが開き、タブが三つ見えます。このタブ構成が設計メモの核心でした。タブ一つが質問一つに対応しているんです。

自分は何を任せたのか — Documentタブ#

一つ目のタブは、ユーザーが書いた元のMarkdownです。企画書でも要件でも、Obsidianで書いたとおりに表示されます。

ここに承認(Approve)ボタンがあります。ドキュメントを読み直して、この内容で進めてよさそうだと思ったときに押すと、その瞬間にエージェントが投入されます。任せる前にもう一度確認する場所というわけです。

今何をしているのか — Agent Terminalタブ#

二つ目のタブは、このカードを担当しているエージェントのターミナルのストリーミングログです。CodexやClaude Codeのようなエージェントがどのファイルを直していて、どんなコマンドを打っているかがリアルタイムで中継されます。

この部分はVibe Kanbanの作業画面を参考にしました。エージェントに仕事を任せると、結果が出るまで何も見えないことが多いですよね。過程が見えていれば、途中で方向がずれたときにすぐ気づけます。

結果を信じていいのか — Diff & Previewタブ#

三つ目のタブはレビューの場所です。エージェントがコードを書き終えると、Git Diffがここに上がってきます。

Diffだけでは足りない場合があるので、作業したブランチのプレビュー画面も一緒に表示します。これもVibe Kanbanの内蔵ブラウザから持ってきたアイデアです。PMが画面を直接触ってみて、気に入らない部分にはインラインでフィードバックを残せます。問題なければ、ここでそのままマージを承認します。

カード一枚の一生#

三つのタブが実際にどうつながるか、シナリオで見るとこうなります。

  1. 作成 — Obsidianで[Feature] ログイン画面リニューアル.mdを書き、type: Task、status: Readyで保存します
  2. 登場 — カンバンボードのReady列にカードが現れます
  3. 実行 — カードを開いてDocumentタブで内容を確認し、実行(Dispatch)ボタンを押します。カードがIn Progressに移動します
  4. 割り当て — システムが隔離された作業環境にコーディングエージェントを割り当てます
  5. 観察 — Agent Terminalタブで、エージェントがコードを書く過程を見守ります
  6. レビュー — 作業が終わるとDiff & Previewタブに通知が来ます。コードとプレビューを確認してマージを承認すれば完了です

ドキュメントを書く1番を除けば、ダッシュボードの中で人が手を入れるのは3番と6番だけです。前回の記事で「人は最初と最後にだけ介入する」と言った原則が、画面でもそのまま守られています。

メモを記事として残す理由#

この設計は、Vibe Kanbanが得意とすること、つまり作業の隔離、プレビュー、きめ細かいフィードバックを取り入れながら、「ドキュメントこそがシステムの中心」という考えを画面に移そうとする試みでした。ダッシュボードは完成させられませんでしたが、三つの質問で画面を分ける枠組みは今でも有効だと思っています。

エージェントツールを選ぶとき、一度当てはめてみてください。自分が何を任せたのか、今何をしているのか、結果を信じていいのか。この三つが一つの画面の中で見えるかを確認するだけでも、かなり多くのものがふるい落とせます。


Kind words do not cost much. Yet they accomplish much.

— Blaise Pascal


他の投稿
MarkdownでAIエージェントの作業を自動化するときに押さえること 커버 이미지
 ・ 6分

MarkdownでAIエージェントの作業を自動化するときに押さえること

テスト文書1つで自動化のエンドツーエンドを検証する 커버 이미지
 ・ 4分

テスト文書1つで自動化のエンドツーエンドを検証する

ObsidianのノートをAIエージェントの作業指示書として使う 커버 이미지
 ・ 4分

ObsidianのノートをAIエージェントの作業指示書として使う