TOP デザイン・情報設計・UI AIエージェントの管理UIとダッシュボードの進化:親しみと革新のデザインパターン

AIエージェントの管理UIとダッシュボードの進化:親しみと革新のデザインパターン

この記事は元Yahoo!・元GoogleのリードデザイナーのLuke Wroblewski氏が、エージェントを管理するためのデザインパターンの研究についてまとめた記事です。UI&UXデザイナーにとって必須記事です。
Agent Management Interface Patterns, by Luke Wroblewski

AIアプリケーションが、人間の代わりに作業を遂行する「エージェント」へと進化するなかで、エージェントの管理体験はプロダクト設計の新たな焦点となっています。
ユーザーが複数のエージェント(サブエージェント)を起動し、指示を与え、停止し、その成果を把握できる――。そんな仕組みを、どのようにデザインすればよいのでしょうか。
ここでは、私たちが構築・検証してきた複数のUIアプローチを紹介します。

新しいUIは「親しみやすさ」と「革新性」のバランスから生まれる

新しい技術が登場するたびに、ユーザーインターフェースには親しみやすさ革新性のバランスが求められます。

あまりに斬新だと、ユーザーがスムーズに使い始めるための導入ルートを失ってしまいます。
一方で、既存のパターンにこだわりすぎると、新技術の可能性を古い枠組みの中に閉じ込めてしまう危険があります。

「模倣し、拡張し、最終的に新しい形を見出す。古いパラダイムを脱却するには時間がかかる」
— スコット・ジェンソン(Scott Jenson)

たとえば、AppleのVisionOSのインターフェースは、デスクトップやモバイルで慣れ親しんだ操作パターンを活かすことで、空間コンピューティングへの移行をスムーズにしています。
しかしその一方で、**ウィンドウ・アイコン・メニュー・ポインタ(WIMP)**という旧来の枠組みの中に、3Dインタラクションの無限の可能性を押し込めているとも言えます。

この「親しみ」と「革新」のあいだを行き来するプロセスこそ、新しいUIが形づくられる現場なのです。

エージェント管理のためのUIパターン

こうした背景を踏まえ、私たちは「ユーザーが直感的に操作でき、かつ高度なAIエージェントの管理を可能にするUIパターン」を模索してきました。
たとえば、ソフトウェア開発支援の 「Augment Code」 や、オフィス業務支援の 「Bench」 といったエージェント中心のAIアプリケーションでは、ユーザーが次のような操作を行う必要があります。

  • 指示や文脈(ファイルや接続など)をもとにエージェントを起動する
  • 特定の時間や条件でエージェントをスケジュールする
  • 進捗を確認し、成果を評価する
  • 方針のずれを修正し、新しい指示を与える
  • 必要に応じてエージェントを停止する
  • 成果やプロセスを閲覧・共有・保存する

これらをスムーズに行うために、私たちは次の5つようなインターフェースパターンを試験的に導入しています。

カンバンボード

カンバンボードは、カードを左から右へと進めることで、ワークフローの進行状況を視覚的に把握できる手法です。

エージェントの状態(予定済み・実行中・完了・レビュー済みなど)を列で整理し、進行度を一目で確認できる。営業やエンジニアリングなど、特定ドメインのワークフローにも応用可能です。

workflow Progression
ワークフロープログレス
multiple categories
複数のカテゴリー

このパターンは、複数のエージェントの状態を直感的に把握するうえで有効です。ただし、カンバンでは「カードを移動できること」が前提となるため、カードの移動がエージェントにどのような意味を持つのかを定義する必要があります。
たとえば、カードの移動が「新しいタスクとして再処理される」のか、それとも「既存エージェントのジョブが再ルーティングされる」のか──。
この設計次第で、UIが単なる表示パネルになるのか、それとも制御インターフェースになるのかが変わってきます。

ダッシュボード

ダッシュボードは、複数のデータソースをグラフやメトリクスとして統合し、1画面で全体をモニタリングできるUIです。
カンバンと異なり、ダッシュボードでは要素の配置自体にワークフローの意味がないため、エージェントの情報を柔軟に表現することができます。

Dashboard Patternダッシュボードパターン

「ミッションクリティカル(任務の遂行に不可欠で、停止が許されない、非常に重要なシステムや業務)な管制塔のようなUI」を求めるユーザーにとっては非常に魅力的な形式ですが、構成が複雑になりすぎると、全体像の把握や個別の詳細確認が難しくなるリスクもあります。

受信箱(インボックス)

インボックスパターンは、ユーザーが処理すべき項目を新着順に並べ、未読バッジなどを使って優先度を判断できるようにするUIです。メッセージアプリやメールクライアントなどでおなじみの形式であり、親しみやすさが特徴です。

inbox pattern = 受信箱のパターン
complete & unread = 完了・未読了
requires action = 行動が必要(赤)
comlete & read = 完了・読了(グレー)

一方で、処理すべきエージェントの数が増えすぎると、受信箱がすぐに手に負えなくなる恐れがあります。また、複数のエージェント間で連携が必要なケースにはあまり向いていません。

タスクリスト

タスクリストは、各項目を明確な「完了状態」を持つアクション単位としてリスト表示するUIです。
縦方向のスタック構造により、個々のタスクに集中しながらも全体の進行状況を把握しやすいという利点があります。

タスクを入れ子構造にすれば、サブタスク(つまりサブエージェント)やエージェント間の依存関係を視覚化することも可能です。
ただし、その分シンプルさが失われ、受信箱のような単一リストに比べて全体の把握が難しくなる場合もあります。

カレンダー

カレンダーインターフェースは、私たちが時間を理解する構造に対応したグリッドレイアウトを採用しています。行と列が日付と時刻を一貫して表すことで、人々は時間的な記憶と空間的な記憶の両方を活用し、項目を特定して文脈に位置づけることができます。

カレンダーUIは、時間軸に沿ってエージェントの動作やタスクを可視化したい場合に特に有効です。
「いつ」「どのエージェントが」「どんな行動をしているのか」を直感的に理解できる点が大きな強みです。

complete&unread : 完了と未読(緑)
scheduled: スケジュール済み(時刻アイコン付)
complete & read : 完了と既読(グレー)
calendar pattern : カレンダー型パターン

デザインパターンの特徴一覧表

パターン概要長所留意点
カンバンボードカードを左から右へ動かし、進行状況を可視化。状態(予定・実行中・完了など)を列で管理。直感的に複数エージェントの状態を把握できるカード操作がエージェントに与える影響(新タスク化、再ルーティングなど)を定義する必要がある
ダッシュボード複数のデータをチャートや指標として統合し、ひとつの画面で監視。全体を俯瞰でき、柔軟な表示が可能情報が増えると全体像の把握や詳細確認が難しくなるリスク
インボックス(受信箱)処理すべき項目を新着順に並べ、未読バッジなどで優先度を示す。メールやチャットに似ていて親しみやすいエージェント数が多いと手に負えなくなりやすく、連携作業には不向き
タスクリスト完了状態を明確にしたアクション単位でリスト化。縦方向の構造で集中しやすい。全体と個別の両方を把握しやすいサブタスクを入れ子にすると複雑化し、シンプルさが損なわれる
カレンダー日時を基軸にエージェントをスケジュール表示。時間と空間の記憶を活かせる。ミーティングやプロジェクトの文脈に結びつけやすいエージェントの実行時間が不定のため、表現が難しい。イベントトリガー型の扱いも課題。

カレンダー型UIの活用例

エージェントをスケジュールする際、カレンダーは非常に理にかなった方法です。
ミーティングを追加するのと同じ感覚で、エージェントを追加できます。
また、エージェントの作業を実際の会議や業務イベントと文脈的に結びつけるのにも役立ちます。

「これらのタスクは、このプロジェクトのブレスト会議の一環だった」
「このタスクは、1on1ミーティングの直後に実行された」

ただし、エージェントによって実行時間が数分で終わるものもあれば数時間かかるものもあり、その表現は容易ではありません。また、イベントトリガー型のエージェントをカレンダー上でどう扱うかも課題です。

次の進化は「リアルタイムストラテジーゲームUI」?

記事の冒頭で触れたスコット・ジェンソンの言葉に戻ると、新しいUIパターンを発見するには時間がかかります。既存のUIをエージェント管理に適応している現在、将来的にはまったく新しい形へと進化していく可能性もあるでしょう。

最近では、デビッド・ホアン(David Hoang)が提案するように、「リアルタイムストラテジーゲーム(RTS)のUIパターンから学ぶべきではないか?」という興味深い視点も登場しています。

ワークショップのご案内

2025年11月15日「AIと共創する次世代プロダクトデザイン」で学ぼう!

>>特設ページでお申し込みください。

UX DAYS TOKYO (代表) 見た目のデザインだけでなく、本質的な解決をするためにはコンサルティングが必要だと感じ、本格的なUXを学ぶため”NNG”に通い日本人としてニールセンノーマンの資格を取得。 業績が上がる実装をモットーにクライアントから喜ばれる仕事をしています。

まずは言葉を覚えよう

「UX用語」のカテゴリー

UXを取り入れるためのマインドセット

「UX格言」の新着

UX格言 一覧

現場の声をリアルで届ける

動画で学ぶUX 「You X Tubo(ゆーえっくすつぼ)」の新着

You X Tubo(ゆーえっくすつぼ) 一覧

PHP Code Snippets Powered By : XYZScripts.com