担当 プロダクトデザイナー(UX・UI、プロダクトデザイン、デザインシステム)
ツール Sketch、JavaScript、HTML・CSS、VS Code、Claude Code
ステータス フェーズ1は開発が承認されました。概要・スケジュール・メトリクスの各画面はデザイン済みです。
注記 NDA対象のため、掲載しているビジュアルはすべてサンプルデータを使った概略図で、実際の画面ではありません。
一度に追えるエージェントは1つだけで、操作するにはシェルを開く必要がありました。バージョン1では、エージェントの作業をリストで表示していました。数件の実行なら問題ありませんでしたが、実行が数千件になると、リストから全体像をつかむことはできませんでした。
フェーズ1のレビューを通じて、バージョン2の要件が決まりました。システム全体をひとつの画面で見渡せること。実行がエージェント間をどう移動し、どこで差し戻され、どこで滞っているかがわかること。そして、どのエージェントにもワンクリックでアクセスできることです。
全体図は東京の地下鉄路線図をモデルにしました。エージェントが駅で、実行はその間の路線を移動します。左にソース、右に結果を配置しました。どちらも最もよく使われる絞り込み条件です。
最初にサンキー図を試しましたが、実際の規模ではエージェント間のループを追うのが難しすぎました。各エージェントの状態はラベルと枠線で示しているので、ステータスを色だけで判断することはありません。
画面を再設計する前に共通のデザインシステムを作り、すべてのエージェントツールでステータスの色が同じ意味を持つようにしました。
Figmaでは数千件の実行が同時に動く様子を表現できなかったため、Claude Codeを使ってコードで13個のプロトタイプを作り、うまくいった部分を組み合わせました。まずAIエージェントにユーザーテストを実行させて明らかなボトルネックを洗い出し、すべてのビルドがWCAG AAを満たしているかも確認させました。
コマンドセンターは概念実証の段階のため、利用状況の数値はまだありません。
お問い合わせ