作業の様子が見えないAIエージェントのチームを、どうすれば信頼できるでしょうか? 現在はAIエージェントが失敗したテスト実行を分析して原因を提案しており、チームにはその作業を見守り、承認し、方向づけるための場所が必要でした。

担当 プロダクトデザイナー(UX・UI、プロダクトデザイン、デザインシステム)

ツール Sketch、JavaScript、HTML・CSS、VS Code、Claude Code

ステータス フェーズ1は開発が承認されました。概要・スケジュール・メトリクスの各画面はデザイン済みです。

注記 NDA対象のため、掲載しているビジュアルはすべてサンプルデータを使った概略図で、実際の画面ではありません。

command-center-overview-v2

全体図:実行は4つのソースからエージェントを経由し、それぞれの結果へと流れます

テストのトリアージは、AIエージェントのチームが担っています。各エージェントは独立したツールで、単独で、または順番に動きます。コマンドセンターは、その作業を見守る場所であり、アクセス権を持つ人なら誰でも特定のエージェントを開いて操作できる場所です。

一度に追えるエージェントは1つだけで、操作するにはシェルを開く必要がありました。バージョン1では、エージェントの作業をリストで表示していました。数件の実行なら問題ありませんでしたが、実行が数千件になると、リストから全体像をつかむことはできませんでした。

フェーズ1のレビューを通じて、バージョン2の要件が決まりました。システム全体をひとつの画面で見渡せること。実行がエージェント間をどう移動し、どこで差し戻され、どこで滞っているかがわかること。そして、どのエージェントにもワンクリックでアクセスできることです。

全体図は東京の地下鉄路線図をモデルにしました。エージェントが駅で、実行はその間の路線を移動します。左にソース、右に結果を配置しました。どちらも最もよく使われる絞り込み条件です。

最初にサンキー図を試しましたが、実際の規模ではエージェント間のループを追うのが難しすぎました。各エージェントの状態はラベルと枠線で示しているので、ステータスを色だけで判断することはありません。

多くの場合、利用は完了しなかったテストの確認から始まります。

command-center-filter-source-outcome-v2

Incompleteで終わったスケジュール実行:96件中71件がExecuteで停止

ソース、結果、またはその両方を選びます。マップがそれらの実行がたどった経路をハイライトし、エージェントの状態から、原因がエージェントとテストのどちらにあるかがわかります。サイドパネルには、再実行が必要なテストがすべて表示されます。

command-center-filter-outcome-v2

Incompleteの実行190件すべて。ソースごとに色とラベルで区別しています

各実行では、たどった経路、各エージェントの処理内容とコスト、生成されたアーティファクトを確認できます。

command-center-run-detail

実行の詳細:エージェント間の経路、各ステップの結果、実行のアーティファクト

実行中のエージェントは、一時停止、指示、停止ができます。指示は修正として保存されるので、チームはそこから学べます。

実行のアーティファクトには、エージェントごとの詳細な結果をまとめたダッシュボードが含まれます。

command-center-triage-review

実行のアーティファクトから開いたReviewエージェントのダッシュボード

このダッシュボードでは、エージェントの判定とテスターのラベルを比較し、人の判断が必要なケースを根拠とともにまとめて表示します。

マップ上のエージェントをクリックすると、そのコンソールが開きます。

command-center-agent-console-v2

性能が低下しているExecuteエージェントのコンソール。提案された修正が承認待ちになっています

エージェントに何をしているのか、なぜそうしているのかを尋ねたり、一時停止したり、実行を別のエージェントに移したりできます。エージェントは変更を提案するだけで、承認はすべて人が行います。

QAとQEは自分たちの成果を確認できます。マネジメントは、エージェントによるトリアージがどれだけの価値を生んでいるかを確認できます。

command-center-metrics-v2

メトリクス画面(サンプルデータ)

チームの成果:トリアージした実行数、トリアージにかかった時間、各エージェントが人に修正された頻度。

価値:人によるトリアージと比べた、実行あたりのコスト、削減できた時間、書き直しのために差し戻されたチケット数。

画面を再設計する前に共通のデザインシステムを作り、すべてのエージェントツールでステータスの色が同じ意味を持つようにしました。

Figmaでは数千件の実行が同時に動く様子を表現できなかったため、Claude Codeを使ってコードで13個のプロトタイプを作り、うまくいった部分を組み合わせました。まずAIエージェントにユーザーテストを実行させて明らかなボトルネックを洗い出し、すべてのビルドがWCAG AAを満たしているかも確認させました。

コマンドセンターは概念実証の段階のため、利用状況の数値はまだありません。

お問い合わせ

つながりましょう