宣言型エージェントでの対話型 UI ウィジェットのユーザー エクスペリエンス ガイドライン

このガイドでは、Copilot で MCP ベースの UI エクスペリエンスを構築する開発者向けのユーザー エクスペリエンス (UX) ガイダンスを提供します。 これは、Copilot の会話フローにスムーズに統合する、ネイティブ、コヒーレント、タスクに焦点を当てた相互作用を作成するためのパターンについて説明します。

UX の原則

MCP ベースのリッチ UI を使用して優れた Copilot エージェントを構築することは、Copilot に固有の集中した会話エクスペリエンスを提供することを意味します。 Copilot エージェントは、Copilot 内で再構築された完全なアプリケーションではなく、適切なタイミングで適切なアクションを表示する会話の役に立つ拡張機能のように感じる必要があります。

チャット サーフェス

チャット サーフェスは、Copilot Apps SDK を使用して構築されたエージェントとユーザーが対話する主な方法であり、Copilot 会話内でのアプリの表示方法と動作を定義します。

Copilot 用に設計する場合は、次の基本原則に従ってください。

• 会話優先: チャットは引き続き主要な対話モデルです。
• 段階的な複雑さ: 軽量から始めます。 必要な場合にのみ展開します。
• コンテキストの保持: ユーザーは会話コンテキストを失うべきではありません。
• 重複に対するClarity: アプリ UI とモデル テキストは相互に補完する必要があります。コンテンツは繰り返しません。

Copilot では現在、2 つの主要なチャット サーフェスがサポートされています。 各サーフェスは個別の目的を果たし、相互作用の複雑さと深さに基づいて選択する必要があります。

• すべてのアプリは 、生成されたモデル応答の前にインライン ウィジェットが表示されるインライン モードをサポートする必要があります。
• サイド バイ サイド モード は、豊富な操作が必要な場合に使用できるオプションのサーフェスです。

インライン モード

インライン モードは、Copilot の既定の会話内チャット サーフェイスです。 インラインはミニアプリケーションではありません。 会話を強化し、置き換えることはありません。

インライン モードを使用する場合

インラインは、次の場合に推奨されます。

• プレビュー (ドキュメント、画像、下書き)
• 確認
• 単純なアクション
• 迅速な意思決定プロンプト

インライン エクスペリエンスは簡潔で、理想的には応答の 1 つのスクロール内に収まる必要があります。

インライン モード レイアウト

• エージェント ヘッダー: 応答エージェントを識別し、コンテキストを確立します。
• インライン ウィジェット: 構造化コンテンツ、プレビュー、またはアクション コントロールを表示するために使用されます。
• モデル応答: ウィジェットの後に、編集、次の手順、関連アクションを提案する短いモデル生成メッセージ。

インライン ウィジェット

インライン ウィジェットはチャット フロー内に直接表示され、ユーザーは会話を離れずに情報を表示し、アクションを実行できます。 迅速な確認、簡単なアクション、視覚補助機能を提供します。

相互作用のガイドライン

• 対話に焦点を当て続ける: 複数ステップ フロー、入れ子になったナビゲーション、またはディープ構成は避けてください。 タスクでイテレーション、比較、または広範な編集が必要な場合は、サイド バイ サイドに移動します。
• システムではなく、概要を表示します。 完全なアプリケーションではなくプレビューがインラインで表示されます。 内部スクロール、改ページ、タブ、フィルター、または複数レベルのグループ化は避けてください。
• 状態を明示的にする: インライン対話では、読み込み状態、無効状態、成功確認、エラー状態などの明確なシステム フィードバックを回復オプションで提供する必要があります。 システムの状態を伝えるためにモデル テキストだけに依存しないでください。
• 会話フローを保持する: ウィジェットは、1 つの応答スクロール内に快適に収まる必要があります。 ビューポートを支配しないようにする必要があります。 モデルの応答を補完し、競合しないようにする必要があります。

サイド バイ サイド モード (省略可能)

サイド バイ サイド モードでは、会話と共に表示される拡張されたイマーシブ ワークスペースが提供されます。 これは、インライン サーフェス内で効果的に配信できない、より豊富なワークフロー用に設計されています。 軽量な操作用に最適化されたインライン モードとは異なり、サイド バイ サイド モードでは、会話コンテキストを維持しながら、より深いエンゲージメントのための専用ワークスペースが作成されます。

サイド バイ サイド モードは省略可能であり、意図的に使用する必要があります。

サイド バイ サイド モードを使用する場合

エクスペリエンスで必要な場合は、サイド バイ サイド モードを使用します。

• 複数ステップの編集または構成
• 永続的な状態の反復ワークフロー
• 複雑なビジュアル レイアウト (テーブル、キャンバス、ダッシュボード)
• 拡張レビューまたは比較タスク
• 豊富なオーサリング (ドキュメントの製図、デザイン編集、構造化された入力)
• 1 つのスクロールを超えるワークスペース レベルの操作
• タスクを簡潔な 1 ターン操作で完了できる場合は、代わりにインライン モードを使用します。

横並びレイアウト

• 会話ウィンドウ: 意図と制御の主要なソースである Copilot チャット。
• Chiclet カード: サイド バイ サイド モードがアクティブな場合、元のインライン ウィジェットは会話内のコンパクトなカードに折りたたまれて、展開されたワークスペースでコンテキストを保持します。
• サイド バイ サイド パネル ヘッダー: エージェント ID (アイコンと名前) が表示され、アプリケーション全体へのハンドオフ オプションが含まれます。
• アプリ ワークスペース: 構造化コンテンツを編集、レビュー、または管理するための MCP レンダリングサーフェスのサイズが大きい。 これは Copilot 内のコンテキスト ワークスペースであり、スタンドアロン アプリケーション シェルではありません。
• コンテキスト コントロール: ワークスペース内のタスク固有のコントロール (編集ツール、書式設定、ズーム、エクスポートなど)。

相互作用のガイドライン

• ワークスペースのコンテキストを維持する: サイド バイ サイド モードでは、完全なアプリケーション シェルではなく、フォーカスされたタスク固有のワークスペースが提供されます。 グローバル ナビゲーション、マルチタブ システム、設定パネル、または無関係な機能は使用しないでください。 エクスペリエンスが SaaS 製品全体に似ている場合は、スコープを超えます。
• チャットをプライマリとして保持する: 会話は意図と制御のソースのままです。 ユーザーは、サイド バイ サイド モードが開いている間にチャットを続け、タスクの途中で明確な質問をし、ワークスペースと共に Copilot 推論を参照できる必要があります。
• アクティブ タスクのスコープ: サイド バイ サイド モードでは、単一のコヒーレント ワークフローをサポートする必要があります。 無関係なエンティティを切り替えたり、入れ子になったエクスペリエンスを起動したりしないでください。 複数のワークフローが必要な場合は、個別のサーフェスまたはアクションに分割します。
• 状態を明示的にする: インライン対話では、読み込み状態、無効状態、成功確認、エラー状態などの明確なシステム フィードバックを回復オプションで提供する必要があります。 システムの状態を伝えるためにモデル テキストだけに依存しないでください。
• プログレッシブ エスカレーションを維持する: サイド バイ サイド モードは意図的に入力する必要があります。 単純なプレビューやクイック確認では、既定では並べて表示しないでください。

ベスト プラクティス

ビジュアルデザインガイドライン

ビジュアルと対話の一貫性は、Copilot のユーザー エクスペリエンスにとって重要です。 アプリは Fluent 設計システムと連携し、ユーザーがアプリ間で予測可能な動作、使い慣れたコントロール、一貫性のあるエクスペリエンスを体験できるようにすることが期待されます。 この一貫性は、ユーザーが信頼を構築し、ワークフロー間で自信を持って移動し、Copilot 内の複数のアプリ間で安全にアクションを実行するのに役立ちます。

Fluent Copilot テーマ のガイドライン

Fluent 2 UI キットを使用して、美しくまとまりのある Microsoft エクスペリエンスを作成します。 Figma に組み込まれた Fluent 2 UI キットには、コード ライブラリにマップされるデザイン資産が含まれています。 これは、設計から開発へのシームレスな引き継ぎを意味します。

関連コンテンツ

• 宣言型エージェントに対話型 UI ウィジェットを追加する
• Fluent 2