Fluent UI 2 の Drawer を理解する — Tooltip / Popover / Dialog との使い分けと Fluent UI Blazor 5 比較

はじめに 🌟

Fluent UI 2 の Drawer は、画面の端から現れる二次サーフェスです。
主画面の文脈を残したまま、補助情報や短い操作を扱えるのが価値です。

今回の記事は、次の思想で全体を整理します。

• Fluent UI 2: いつ使うべきかを決める「設計ガイド」
• Fluent UI Blazor 5: メンバー（オプション/プロパティ）で挙動を組み立てる「実装 API」

この違いを前提に、Drawer の使い分け、比較、実装の読み方をまとめます。

Fluent UI 2 とは

Fluent UI 2 は、Microsoft Fluent 2 のデザインシステムに沿って UI を設計するための指針とコンポーネント群です。
見た目の統一だけでなく、情報の優先順位、操作の一貫性、アクセシビリティを同時に扱います。

つまり Drawer も、単なる「横から出る UI」ではありません。
どの程度ユーザーを中断させるか、どこまで主画面を残すかを決めるための設計要素です。

これまでの Fluent UI 2 シリーズ 📚

これまでのシリーズも同じ方針で書いています。必要に応じて前提として参照してください。

• Fluent UI 2 のアクセシビリティを色から読む ─ WCAG 2.1 と対比しながら整理する
• Fluent UI 2 で始めるアクセシビリティ実装 — キーボード操作・支援技術・WCAG 2.1 の実践ガイド
• Fluent UI 2 の Accordion を理解する — 情報設計・アクセシビリティ・React 実装
• Fluent UI 2 の Avatar を整理しつつ Fluent UI Blazor 5 でどう実装するか
• Fluent UI 2 の Badge を理解する — Fluent UI Blazor 5 との比較と実装ポイント
• Fluent UI 2 の Breadcrumb を理解する — Fluent UI Blazor 5 との対応とアクセシビリティ
• Fluent UI 2 の Button を理解する — 種類・レイアウト・アクセシビリティ・Blazor 5 比較
• Fluent UI 2 の Card を理解する — React と Fluent UI Blazor の違い
• Fluent UI 2 の Checkbox を理解する — React と Fluent UI Blazor v5 の違い
• Fluent UI 2 の Combobox を理解する — Fluent UI Blazor 5 との比較と使い分け
• Fluent UI 2 の Dialog を理解する — React と Fluent UI Blazor 5 の違いと使い分け

今回のゴール ✅

• Drawer を Tooltip / Popover / Dialog とどう切り分けるか分かる
• Fluent UI 2 と Fluent UI Blazor 5 の「役割の違い」を一次情報で理解する
• Blazor で Drawer を実装するときに、どのメンバーを明示すべきか分かる

Drawer と類似コンポーネントの使い分け

コンポーネント	役割	使う場面
🏷️ Tooltip	非必須の短い補足（プレーンテキスト）	hover/focus 補助
🪟 Popover	非必須の文脈情報（構造化情報や軽い操作）	追加説明や補助 UI
🚨 Dialog	重要な確認や中断	削除確認、未保存警告など
📚 Drawer	主画面に関連する補助面	詳細表示、短いタスク

Fluent UI 2 Drawer Usage でも、短い補足は Tooltip/Popover、確認は Dialog を推奨しています。
Drawer は「中間」ではなく、主画面の文脈を残した補助面として選ぶのが基本です。

Fluent UI 2 の Drawer 設計（判断の軸）

Types

• Inline: 主画面と並べて同時参照する
• Overlay: 主画面に重ねて注意を集める

Overlay は modal が既定とされ、必要に応じて非モーダル化します。
また、長いタスクは 2〜3 ステップまでを目安にし、複数 overlay の同時表示は避けるべきと明記されています。

レイアウト

Drawer の基本構成は Header / Body / Footer です。
Body が長い場合は DrawerBody でスクロールを有効化し、Header/Footer の可視性を保つのが推奨です。

コンテンツ

• タイトルは短く具体的に
• 本文は要点先出しでスキャンしやすく
• フッターのボタンはタイトルへの返答になる文言にする

Fluent UI 2 と Fluent UI Blazor 5 Drawer（Panel）の比較

ここが本題です。
Blazor 側のドキュメントが API 重視に見える理由は、実装がメンバー指定で組み立てるスタイルだからです。

観点	Fluent UI 2（React / Usage）	Fluent UI Blazor 5（Drawer / Panel）
🧭 ドキュメントの主眼	いつ使うか（設計判断）	どう使うか（API/メンバー指定）
🧱 モデル	Inline / Overlay を定義	Drawer は Dialog カテゴリとして説明
⚙️ 呼び出し	コンポーネント構造中心	DialogService.ShowDrawerAsync<T>(options => ...)
↔️ 位置制御	体験設計として左右配置を検討	options.Alignment（既定 DialogAlignment.End）
🔒 モーダル制御	Overlay は modal 既定、非モーダル化可能	options.Modal で指定（既定 true の説明あり）
🧾 終了結果	Usage では主題外	戻り値として DialogResult を受け取る
🧩 実装差分の明示	UX 観点中心	ShowDialogAsync と同等で、既定 Alignment や fluent-drawer など差分を明記

要するに、Fluent UI 2 は「判断の辞書」、Blazor は「実装の組み立てキット」です。
Blazor は API が中心ですが、それは設計を軽視しているのではなく、設計判断を呼び出し側で行う前提だからです。

したがって、「Blazor はコンテンツの中身が重要ではない」という意味にはなりません。
むしろ、Drawer のタイトル・本文・アクション文言の品質はそのまま UX に直結するため、コンテンツ設計は Fluent UI 2 側のガイドラインを参照して決め、Blazor ではそれをメンバー指定とコンポーネント構成に落とし込む、という順序で進めるのが実務的です。

Blazor 側はメンバー既定値に依存しても動きますが、設計意図を明確にするなら Alignment と Modal は明示する方が安全です。

実装イメージ

React（Fluent UI 2）

<Drawer type="overlay" position="end">
  <DrawerHeader>
    <DrawerHeaderTitle>Order details</DrawerHeaderTitle>
  </DrawerHeader>
  <DrawerBody>{/* body */}</DrawerBody>
  <DrawerFooter>{/* actions */}</DrawerFooter>
</Drawer>

Blazor（Fluent UI Blazor 5）

@inject IDialogService DialogService

@code {
    private async Task OpenDrawerAsync()
    {
        var result = await DialogService.ShowDrawerAsync<SimpleDialog>(options =>
        {
            options.Alignment = DialogAlignment.End;
            options.Modal = true;
        });
    }
}

Blazor では、Drawer 体験を options メンバーで宣言していく感覚です。
そのため「API重視」に見えますが、実際には Fluent UI 2 側の設計指針をどう反映するかが本体です。

まとめ 📝

Drawer を正しく使うコツは、まず Fluent UI 2 の Usage で使う理由を決め、その後 Blazor でメンバー指定として実装に落とすことです。
この順序を守ると、API の細かい差分に引っ張られず、UI の意味と実装が一致しやすくなります。

出典

• Fluent UI 2 Drawer Usage
• Fluent UI 2 Tooltip Usage
• Fluent UI 2 Popover Usage
• Fluent UI 2 Dialog Usage
• Fluent UI Blazor 5 Drawer (Panel)