1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

.NETやAzure・Microsoft製品で学んだことや気づいたことを共有しよう
Qiita Tech Festa20262026年7月13日まで開催中！
@tomokusaba(Tomomitsu Kusaba)Team Tea & Water

Fluent UI 2 の Dropdown を理解する — Fluent UI Blazor 5 の近縁コンポーネント比較とアクセシビリティ

1
Posted at

はじめに 🌟

Fluent UI 2 の Dropdown は、候補から 1 つまたは複数を選ぶためのコンポーネントです。
一見すると「どのUIフレームワークにもある普通のドロップダウン」に見えますが、実際はアクセシビリティとコンテンツ設計まで含めて考えると、設計判断の差がはっきり出る領域です。

この記事では、まず Fluent UI 2 の考え方を短く整理したうえで、これまでの Fluent UI 2 シリーズの流れを振り返ります。
その後、Fluent UI 2 の Dropdown を基準に、Fluent UI Blazor 5 の Autocomplete / Combobox / Listbox / Select を比較します。

特に、アクセシビリティと**コンテンツ（ラベル・選択肢文言）**を重視して整理します。

今回のゴール ✅

  • ✅ Fluent UI 2 と Dropdown の役割を短時間で把握する
  • ✅ これまでの Fluent UI 2 シリーズの位置づけを掴む
  • ✅ Fluent UI Blazor 5 の近縁コンポーネントを用途別に比較する
  • ✅ Dropdown 実装で重要なアクセシビリティ要点を押さえる
  • ✅ ラベル/選択肢文言の書き方を実務に落とし込む

Fluent UI 2 とは

Fluent UI 2 は、Microsoft の Fluent 2 デザインシステムを実装に落とし込むための UI コンポーネント群です。
ポイントは、見た目の統一だけでなく、操作性・意味づけ・支援技術での理解しやすさまで一体で設計することです。

Dropdown はこの中でも「選択体験」を担当する部品です。
ただし公式ガイドでは、用途によって Select や Combobox の方が適切な場面があることも明確に示されています。

これまでの Fluent UI 2 シリーズ一覧 🧭

本記事までのシリーズは次のとおりです。

テーマ 記事
🔘 Button Fluent UI 2 の Button を理解する
🧩 Accordion Fluent UI 2 の Accordion を理解する
🗂️ Breadcrumb Fluent UI 2 の Breadcrumb を理解する
🪪 Card Fluent UI 2 の Card を理解する
☑️ Checkbox Fluent UI 2 の Checkbox を理解する
🏷️ Badge Fluent UI 2 の Badge を理解する
👤 Avatar Fluent UI 2 の Avatar を整理しつつ Fluent UI Blazor 5 でどう実装するか
🗨️ Dialog Fluent UI 2 の Dialog を理解する
⌨️ Combobox Fluent UI 2 の Combobox を理解する
♿ アクセシビリティ実装 Fluent UI 2 で始めるアクセシビリティ実装
🎨 色とWCAG Fluent UI 2 のアクセシビリティを色から読む

今回の Dropdown は、Button / Checkbox / Combobox / Dialog あたりの知識がつながるテーマです。
つまり「押す」「選ぶ」「入力する」「モーダルを開く」の境界にある、実務で誤用しやすいコンポーネントです。

Fluent UI 2 Dropdown の基本

公式の要点を先にまとめます。

項目 内容
🧭 役割 1つまたは複数の選択肢から選ぶ
📝 想定用途 フィルタ/並び替え、カスタム表示を伴う選択UI
🔀 代替検討 フォーム（特にモバイル）なら Select を検討
⌨️ 入力併用 文字入力で絞り込みたい/自由入力したいなら Combobox を検討
✅ 複数選択 multiselect で有効化。各項目にチェックボックス表示

Dropdown は「選ぶ」ことが中心です。
入力して検索する体験を主軸にしたいなら、最初から Combobox を選ぶ方が自然です。

アクセシビリティ（最重要）♿

Fluent UI 2 の Dropdown で特に重要なのは次の 2 点です。

1. text prop を使って、意味上の文字列を明示する

選択肢の見た目が JSX で複雑になる場合、text prop を設定しておくことで次が安定します。

  • タイプアヘッド（文字入力による候補移動）
  • 選択後、閉じた状態で表示される値
<Option text="Japan">
  <div>
    <strong>JP</strong> Japan
  </div>
</Option>

見た目と検索対象文字列を分離して定義する、という設計です。

2. inlinePopup を可能な限り有効化する

公式ガイドでは、iOS VoiceOver を意識して inlinePopup が推奨されています。
背景として、Safari は aria-owns のサポート制約があり、DOM 上でトリガーと listbox が離れているとスワイプ移動が不自然になりやすいためです。

<Dropdown inlinePopup />

inlinePopup と text は「見た目調整」ではなく、支援技術での操作性に直結する設定です。
デザイン確認だけで終わらせず、キーボードとスクリーンリーダーで必ず確認する前提で扱うのが安全です。

コンテンツ（ラベルと選択肢文言）✍️

Fluent UI 2 の Dropdown では、コンテンツ面にも明確なガイドがあります。

  1. ラベルは「何を選ぶ場か」がすぐ分かる説明的な文言にする
  2. 選択肢は短い語句で、平行構文（名詞なら名詞、動詞なら動詞）を保つ
  3. 先頭語の重複を避ける（同じ語を連打しない）
  4. 「none（なし）」が必要な文脈なら明示する
  5. sentence-style capitalization（先頭語中心の大文字化）で統一する

悪い例 / 良い例

種類 例 コメント
❌ 悪い例 Sort by date / Sort by name / Sort by priority 先頭語が重複して読みにくい
✅ 良い例 Date / Name / Priority 平行構文で一覧性が高い
✅ 良い例 None / Open / In progress / Done 解除状態を含めて選択肢が完結する

Fluent UI Blazor 5 との比較（Dropdown 相当）

前提として、Fluent UI Blazor 5 には React の Dropdown と同名・同等の単一コンポーネントはありません。
用途に応じて Autocomplete / Combobox / Listbox / Select を選び分けます。

参照:

比較表（アクセシビリティとコンテンツ重視）

観点 Fluent UI 2 Dropdown Blazor Autocomplete Blazor Combobox Blazor Listbox Blazor Select
🧭 主用途 候補選択（単一/複数） 入力+候補検索 入力+候補選択（自由入力可） 候補選択（一覧） フォーム選択
⌨️ タイピング タイプアヘッド中心 検索入力が主軸 入力/絞り込み可 なし なし
✅ 複数選択 あり あり あり あり あり
📚 大量候補 中 高（検索イベント） 中〜高 中（全件描画） 中（全件描画）
♿ a11y上の注意 text, inlinePopup が重要 公式注記: a11y要件未実装 AriaLabel などで補強 AriaLabel、ReadOnly可 AriaLabel、ReadOnly非対応（Disabled運用）
📝 コンテンツ設計 説明的ラベル、平行構文、None明示 同じ原則を適用 同じ原則を適用 同じ原則を適用 同じ原則を適用

使い分けの実務目線

  • Autocomplete: 検索体験が主目的で、候補が多いとき
  • Combobox: 入力と選択を両立したいとき（必要なら自由入力）
  • Listbox: 入力不要で、一覧から選ばせたいとき
  • Select: 典型的なフォーム選択。モバイルや標準操作との親和性を優先したいとき

Blazor 側の Autocomplete は便利ですが、公式ドキュメントに「Accessibility requirements are not yet implemented」とあるため、アクセシビリティ要件が厳しい画面では評価を慎重に行う前提が必要です。

実装イメージ（React / Blazor）

React（Fluent UI 2 Dropdown）

import { Dropdown, Option } from "@fluentui/react-components";

export function PriorityDropdown() {
  return (
    <Dropdown
      placeholder="Select priority"
      multiselect
      inlinePopup
    >
      <Option text="None">None</Option>
      <Option text="Low">Low</Option>
      <Option text="Medium">Medium</Option>
      <Option text="High">High</Option>
    </Dropdown>
  );
}

Blazor（FluentSelect でフォーム選択を表現）

<FluentSelect TOption="string"
              TValue="string"
              Label="Priority"
              Placeholder="Select priority"
              Items="@Priorities"
              @bind-Value="@Value" />

@code {
    static readonly string[] Priorities = ["None", "Low", "Medium", "High"];
    string? Value;
}

「選択のみ」なら Select / Listbox、入力併用なら Combobox / Autocomplete という切り分けが実務では分かりやすいです。

まとめ

Fluent UI 2 の Dropdown を理解するうえでの要点は次の 3 つです。

  1. Dropdown は「選択中心」、Combobox は「入力+選択中心」と役割を分ける
  2. アクセシビリティでは text と inlinePopup が重要な設計ポイントになる
  3. Blazor 5 では Dropdown を 1:1 で置き換えるのではなく、Autocomplete / Combobox / Listbox / Select を要件で選ぶ

特に本番実装では、見た目だけで判断せず、ラベル設計・選択肢文言・キーボード操作・スクリーンリーダー挙動まで含めて確認するのが、結果的に最短です。🚀

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?