白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計

2025年4月24日に実施した、白金鉱業 Meetup Vol.18@六本木/オンライン（AIエージェント）
でのブレインパッド志知の登壇スライドです。

イベントURL
https://brainpad-meetup.connpass.com/event/348153/

Transcript

1. AIエージェント時代のUI/UX設計 志知 晃広 株式会社ブレインパッド
2. 自己紹介 名前: 志知 晃広 所属: 株式会社ブレインパッド データサイ エンティスト 経歴: 学生時代は応用物理を専攻。2023年 にブレインパッドに新卒入社。データサ イエンスとエンジニアリングの両面からAI エージェントアプリケーションの開発に 取り組む。
3. 本日の伝えたいこと この発表で得られること: 生成AIの出力コンテンツの「効率的な承認」をどう実現するか、設計のヒントを持ち帰る。 想定オーディエンス: AIエージェントを開発するデータサイエンティストやアプリケーションエンジニア。
4. アジェンダ 1. AIエージェントとは？ 2. 「承認」から見たAIエージェントのUI/UX設計 3. BrainPadの実践事例 4. まとめ
5. AIエージェントとは？
6. AIエージェントの構成要素 AIエージェントの基本定義 単なるチャットボットを超え、人間と協力し、ま たは人間のために自律的に働く存在。 人間が利用するが、内部の動きは「ほとんど見え ない存在」として機能。 主要構成要素 入力: ユーザークエリ、文脈情報 処理: 言語モデル、システムプロンプト 補助機能: メモリ、ツール 出力: コンテンツ生成、自動化 出典: Microsoft Design - UX design for agents
7. AIエージェント利用の日常化 Anthropicのレポートによると専門家だけで なく、あらゆる職種・業務でAIツールが利 用され始めている。 特にプログラミングタスクにおける利用は 顕著である。 AIエージェントにラベリングできるツ ールも登場してきている。 AIが生み出すアウトプット（生成物）の量 が爆発的に増加し、評価・判断する機会が 人間のタスクになってきている。 参考: The Anthropic Economic Index
8. AI活用のスケーリングには『効率的な承認』が必要 承認の必要性: AIは完璧ではないため、その生成物に対して人間による内容の正確性、妥当性、安全性の確認（＝承認） が不可欠である。 増大する承認コスト: AIが生み出すアウトプットは大規模化・複雑化する傾向にあり、それに比例して承認プロセスにかかる時 間と認知負荷（＝承認コスト） も増加する。 効率化の重要性: この承認コストの増大は、AIエージェント活用のボトルネックとなり得る。 AIを真にスケールさせるためには、『効率的な承認』を実現する仕組みが不可欠な要素となる。
9. 『効率的な承認』を実現するUI/UX設計
10. チャットインターフェースの限界 チャットUIでは、ユーザーがAIに自然言語 で指示（プロンプト）を与えAIが応答する のみであり、会話履歴が蓄積されていく。 コンテキストが失われ、全体構造や影響の 把握が困難。 細かな修正指示は煩雑で、意図しない変更 リスクも生じる。 承認プロセスの進捗管理（状態管理）が困 難。
11. オブジェクト指向UI(OOUI) オブジェクト指向UI(OOUI)は「オブジェクトの操作」をUI設計の中心に置く考え方である。 タスク指向UIとの対比で登場する考え方。 OOUIの利点 一貫性のある操作感を提供する。学習が容易で、操作パターンの再利用が可能。 AIエージェントと人間のインタラクションをUI実装する場合にも、OOUIの考え方は役立つ。 タスクベース指向UI オブジェクト指向UI 参考: オブジェクト指向UIデザイン――使いやすいソフトウェアの原理
12. CursorにおけるOOUIな『承認』インターフェース Cursorでは、チャットUIとOOUIを組み合わせるこ とで、直感的なコードの「承認体験」を実現す る。 CursorのOOUIアプローチ (Inline Diff): コードの生成指示は、チャットUIで指示する。 AIによるコード変更提案を、既存コードとの差 分 (Diff)としてインライン表示する。 各差分（オブジェクト）に対し、「Accept」 「Reject」ボタンを提供する。 開発者はコンテキストを維持したまま、オブジェク ト単位で効率的にAIの提案を承認・管理できる。 Cursor: インラインでの差分表示と承認/編集ボタン
13. コーディング支援における「承認」の大規模化 コーディング支援プロダクトが次々に登場することによって生成されるコードが大規模化している。 この方向性でAIが進化するだけなら、最終成果物の承認は人間の責務で行う必要がある。 プロダクト 機能 オブジェクト（承認単位） ChatGPT 会話の生成 - Claude Artifacts, v0 会話からオブジェクトを分離 - Cursor (Inline Diff) コード行単位のオブジェクト化 コード行（差分） Cursor Composer ファイルオブジェクトの生成 ファイル単位 Devin プルリクエストの生成 プルリクエスト Firebase Studio プロジェクト全体の生成 コード全体
14. 『承認』UIの今後の方向性 生成されるコードが増大する中、コードの差分だ けでは、システム全体への影響やアーキテクチャ レベルでの妥当性の判断が困難になる。 人間にとって意味のある単位で構造化し、その関 係性や全体像を可視化するUIが求められる。 例 (GitDiagram): リポジトリ全体のファイル/ディ レクトリ構造や依存関係をグラフとして可視化し ている。 GitDiagram: コード構造の可視化 アーキテクチャレベルでの理解をサポート 出典: GitDiagram - streamlit/streamlit
15. BrainPadにおける実践事例
16. BrainPadにおけるAIエージェントのUI/UX設計 BrainPadにおいても、「OOUI」 「承認対象の明確化」を意識したUI/UX設計に取り組んでいる。 AIと人間のインタラクションにおいては、Human-in-the-Loop (HITL) の要素も設計に取り入れている。 人間の「オブジェクト」操作（フィードバック）をAIに速やかに送信する。 AIの「オブジェクト」生成を分かりやすくUIに反映し、人間の承認を得る。 チャットUIに閉じない、AIエージェントのふるまいの効率的な承認の実現を目指している。
17. 事例紹介1: アノテーションエージェント 目的と機能 目的/背景: 大量データのアノテーション作業を効 率化したい。 機能概要: LLMが画像やテキストに対し、タグ説 明文を解釈して適切なタグ候補を選 択。 LLMのタグ選択結果に対して人間がフ ィードバックを行い、継続的に精度を 改善する。
18. アノテーションエージェント：設計のポイント オブジェクトの可視化: LLMの付与したタグ でグルーピングし、アイテムを表示する。 ワンクリック操作: UIによるワンクリック操 作で、結果に対して効率的な承認とエージ ェントへのフィードバックを実施する。 AI精度向上ループの実現: フィードバックに 基づきLLMがタグ説明文の改善案を生成す る。 差分表示: プロンプトの変化をユーザーに提 示する。
19. 事例紹介2: ヒアリングエージェント 目的と機能 目的/背景: 人事評価など、網羅性が求められるヒ アリングの質向上と効率化。 機能概要: AIが評価観点に基づきヒアリングを実 行し、情報を収集。 収集した情報に対して評価を下し、情 報の質をユーザーにフィードバックす る。
20. ヒアリングエージェント：設計のポイント テキストor音声対話: 対話AIがユーザーと対 話し、必要事項のヒアリングを実施する。 対話内容の要約構造化: 対話内容を決められ た観点に基づいて分類し、ヒアリングの進 行状況を可視化する。 独立した要約実行: AI起点（質問生成）と人 間起点（ボタン操作による情報提供）の両 方を可能にし、AIエージェントの一部機能 をコントロール可能にする。
21. まとめ
22. まとめ AIエージェントのスケールのためには『効率的な承認』を目指すUI/UXが不可欠と考える。 しかし、その最適解はまだ模索段階であり、さまざまなプロダクトが生まれている状況。 BrainPadではOOUI原則に基づき、「ロジックと体験の一貫性」と「効率的な承認」の両立を目指している。 可視性: AIの提案や状態を明確に表示する。 直接操作: ユーザーが対象に直接アクションする。 フィードバック: ユーザーのアクションがAIに変化を与える。