はじめに 🔍
Fluent UI 2 には、エンドユーザーが素早く情報へアクセスできるよう設計された Searchbox コンポーネントがあります。シンプルな検索フィールドながら、フォーカスアニメーション・クリアボタン・フィルタリング機能・アクセシビリティ対応など、細かな配慮が随所に盛り込まれたコンポーネントです。
本記事では、Fluent UI 2（React）の Searchbox コンポーネントを公式ガイダンスに沿って解説します。また、Fluent UI Blazor 5 には同名の Searchbox コンポーネントが存在しないため、代替として利用できる FluentAutocomplete および FluentTextInput（TextInputType.Search）との比較も行います。
参照 URL：
Fluent UI 2 とは 🎨
Fluent UI 2 は Microsoft が設計した新世代の UI デザインシステムです。Windows・Web・モバイルにまたがる一貫したビジュアル言語「Fluent Design System」の第二世代として、React ベースの Web コンポーネントライブラリを中心に展開されています。
アクセシビリティ・パフォーマンス・カスタマイズ性を重視した設計が特徴で、Microsoft 365 をはじめとした多くのプロダクトに採用されています。
📚 Fluent UI 2 シリーズ記事一覧
この記事は Fluent UI 2 コンポーネント解説シリーズの一部です。
Searchbox とは — ガイダンスと役割 🔎
Searchbox lets people access information with ease, providing flexibility and the ability to clear and filter the search.
— Fluent UI 2 Searchbox usage
Fluent UI 2 の Searchbox は、ユーザーが情報に素早くアクセスするための入力フィールドです。単純なテキスト入力にとどまらず、以下の特徴を備えています。
- 柔軟なレイアウト: フィルターアイコンやドロップダウンを追加できる
- クリア機能: 入力内容をワンタップで消去できる Close ボタン
- レスポンシブ対応: 画面幅やズームレベルに応じてレイアウトが変化
バリアントと利用シーン
Fluent UI 2 の Searchbox は、アプリの検索バーとして広く使われます。グローバルサーチ（アプリ全体の検索）から、リストやテーブルのインラインフィルタリングまで幅広い用途に対応しています。
動作（Behavior）⚡
フォーカスアニメーション
Searchbox は、通常状態（rest）からフォーカス状態（focus）への遷移アニメーションを持っています。このアニメーションは通常の Input フィールドと同じ挙動です。
The animation between the rest and focus state is the same as the input field animation. It appears once the searchbox receives focus.
フォーカスを受け取った瞬間に視覚的なフィードバックが生じることで、ユーザーは「今入力できる状態」であることを直感的に認識できます。
クリアボタン（Close ボタン）
入力フィールドに文字が入っている場合のみ、右端に Close ボタン（✕）が表示されます。コンテンツが空のときはボタンを表示しないという設計になっており、余計な要素を画面に出さないシンプルさが保たれています。
レイアウト（Layout）📐
Fluent UI 2 の Searchbox は、一貫したレイアウトを持つことで「学習済みのパターン」として機能します。
A consistent layout in the search form creates a learned pattern and brings ease to our users.
構成要素
| 要素 | 必須 / オプション | 説明 |
|---|---|---|
| 🔍 検索アイコン | 必須 | フィールド左端に配置されるマグニファイングラスアイコン |
| ✏️ テキスト入力 | 必須 | キーワードを入力するメインフィールド |
| ✕ Close ボタン | 条件付き | 入力がある場合のみ表示されるクリアボタン |
| 🗂️ フィルターアイコン | オプション | フィルタリング機能が必要な場合に追加 |
| ▼ フィルタードロップダウン | オプション | 検索スコープを絞り込む場合に追加 |
フィルターアイコン・ドロップダウンの扱い
フィルターアイコンとフィルタードロップダウンはオプション要素です。アプリのニーズと技術的な実装能力に応じて追加を判断してください。検索対象を「すべて」「ドキュメント」「メール」などで切り替えたいシナリオで特に有効です。
Fluent UI Blazor 5 との比較 🆚
Fluent UI Blazor 5 には、Fluent UI 2（React）の Searchbox に直接対応するコンポーネントは存在しません。しかし、用途に応じて以下の 2 つのコンポーネントが代替候補として使えます。
| 用途 | 推奨コンポーネント |
|---|---|
| 🔎 インクリメンタルサーチ＋サジェスト表示 | FluentAutocomplete |
| 🔍 シンプルな検索フィールド（Enter で実行） |
FluentTextInput（TextInputType.Search） |
FluentAutocomplete
FluentAutocomplete は、テキスト入力とオプションリストのフィルタリングを組み合わせた autocomplete コンポーネントです。単一選択・複数選択の両方に対応しています。
主要パラメーター
| パラメーター | 説明 |
|---|---|
TOption / TValue
|
ジェネリック型パラメーター |
Multiple |
true で複数選択（デフォルト true） |
OnOptionsSearch |
入力テキストに応じてオプションリストを返すイベント |
OptionText |
表示テキストを返す関数 |
ShowDismiss |
クリア（Dismiss）ボタンの表示 |
ShowProgressIndicator |
検索中のプログレスインジケーター表示 |
MaximumSelectedOptions |
最大選択数 |
Placeholder / Label / Width
|
UI 補助 |
HeaderContent / FooterContent
|
ポップアップのヘッダー / フッターカスタマイズ |
OptionTemplate |
選択肢のカスタムテンプレート |
SelectedOptionTemplate |
選択済みアイテムのカスタムテンプレート |
InputAppearance |
Outline / Underline / FilledLighter / FilledDarker |
キーボード操作
| キー | 動作 |
|---|---|
| 文字入力 |
OnOptionsSearch トリガー |
| ↓ / ↑ | サジェストリスト内を移動 |
| Enter | ハイライト中のアイテムを選択 |
| Backspace | 最後の選択アイテムを削除（複数選択時） |
| Escape | リストを閉じる |
基本的な使い方
<FluentAutocomplete TOption="Country"
TValue="string"
Label="国を選択"
Placeholder="国名を入力..."
OnOptionsSearch="@OnSearchAsync"
OptionText="@(item => item.Name)"
@bind-SelectedItems="@SelectedCountries" />
@code {
IEnumerable<Country> SelectedCountries { get; set; } = [];
Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
{
e.Items = Countries
.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
.OrderBy(i => i.Name);
return Task.CompletedTask;
}
}
FluentAutocomplete のアクセシビリティ要件（ARIA ロールなど）は 現時点でまだ実装が完了していません。アクセシビリティが重要な用途では、Fluent UI Blazor リポジトリの最新状況を確認した上でご利用ください。
FluentTextInput（TextInputType.Search）
シンプルな検索フィールドとして使いたい場合は、FluentTextInput に TextInputType.Search を指定し、StartTemplate に検索アイコンを配置する方法が便利です。
<FluentTextInput Placeholder="検索"
TextInputType="TextInputType.Search"
ChangeAfterKeyPress="@([KeyPress.For(KeyCode.Enter)])"
OnChangeAfterKeyPress="@StartSearch">
<StartTemplate>
<FluentIcon Value="@(new Icons.Regular.Size16.Search())"
Color="Color.Primary" />
</StartTemplate>
</FluentTextInput>
ChangeAfterKeyPress に KeyCode.Enter を渡すことで、Enter キーが押されたタイミングで OnChangeAfterKeyPress が発火します。Fluent UI 2 の Searchbox における「検索実行」の挙動に近い UX を実現できます。
React vs Blazor 機能比較
| 機能 | Fluent UI 2 Searchbox（React） | FluentAutocomplete（Blazor 5） | FluentTextInput + Search（Blazor 5） |
|---|---|---|---|
| 🔍 インライン検索 | ✅ | ✅ | ✅ |
| 📋 サジェスト表示 | ✅ | ✅ | ❌ |
| 🔢 複数選択 | ❌ | ✅ | ❌ |
| ✕ クリアボタン | ✅（自動表示） | ✅（ShowDismiss） | ❌（別途実装が必要） |
| 📊 プログレス表示 | ✅ | ✅（ShowProgressIndicator） | ❌ |
| 🎨 アピアランス切替 | ✅ | ✅（InputAppearance） | ✅ |
| ♿ アクセシビリティ対応 | ✅ | ⚠️ 未完成 | ✅（input[type=search]） |
| 🗂️ フィルタードロップダウン | ✅（オプション） | ❌ | ❌ |
アクセシビリティ ♿
ズームレベル 400% への対応
Fluent UI 2 の Searchbox はコンテナに対して完全にレスポンシブに設計されています。
While zoom levels and page sizes affect the space the searchbox holds, it keeps the same functionality.
WCAG 2.1 達成基準 1.4.4 テキストのサイズ変更（AA） では、テキストを 200% まで拡大しても機能・内容が損なわれないことが求められています。さらに 1.4.10 リフロー（AA） では、320 CSS ピクセル（一般的な 400% ズームに相当）の幅で水平スクロールが発生しないことが条件です。
Searchbox をページに配置する際は、400% ズーム時にどこに配置されるか、そしてどのくらいの頻度で使われるかを事前に検討することが重要です。
小ビューポートでの縮退
画面幅が小さくなると、Searchbox は虫眼鏡（マグニファイングラス）アイコンとして縮小表示できます。アイコンをクリックすると、フル幅の Searchbox が展開され、ユーザビリティを維持します。
小ビューポート時のフロー
[🔍 アイコン] → クリック → [ 検索フィールド（フル幅） ]
この縮退パターンは、モバイルファーストな UI 設計において特に重要です。ツールバーやナビゲーションと共存させる場合に、スペース効率と操作性を両立できます。
ARIA・キーボード操作の留意点
-
role="search"を持つ<form>要素または<search>要素で Searchbox を包むことで、スクリーンリーダーユーザーが検索ランドマークとして認識できます。 - クリアボタン（Close ボタン）にはフォーカス可能な状態を維持し、
aria-label="検索をクリア"を付与することが推奨されます。 - Enter キーによる検索実行は多くのユーザーが期待する動作です。フォーム送信との競合に注意してください。
Fluent UI 2 の Searchbox は React コンポーネントとして実装されており、内部で適切な ARIA 属性が付与されています。カスタマイズ時も既存の ARIA 属性を上書きしないよう注意してください。
コンテンツ設計 ✍️
Searchbox のコンテンツ設計は、ユーザーが検索結果に「信頼」を持てるかどうかを左右する重要な要素です。
They expect results to be precise, auto-complete, intelligent, and predictive. This is why setting ordering guidance will help build trust in the results.
結果の順序付けガイダンス
ユーザーは検索結果に対して、「正確で・オートコンプリートされ・インテリジェントで・予測的」であることを期待しています。この期待に応えるために、表示順序のガイダンスを設けることが信頼感の構築につながります。
推奨される表示順序
1. 直近の話題（Recent topics）
└─ フォーカスを受け取ると即座に表示
2. サジェスト結果（Suggested results）
└─ 文字入力が始まると、検索クエリに応じて更新
3. 関連トピック（Related topics）
└─ 結果の後続に表示されることが多い
最も関連性の高い結果を必ずリストの最上位に表示してください。ユーザーが「最初に見つかる」体験がそのまま信頼感につながります。
順序付けの柔軟性
検索コマンドによっては結果の取得に時間がかかる場合があります。そのようなケースに対応するため、順序付け戦略を柔軟に設計することが推奨されています。たとえば、高速な結果から先に表示し、重い検索結果は後から追記するような段階的表示パターンが有効です。
Do / Don't
| ✅ Do | ❌ Don't | |
|---|---|---|
| 📋 結果の順序 | 最も関連性の高いものを最上位に表示する | 時系列順・アルファベット順だけで並べる |
| 🕐 直近の話題 | フォーカス時に即座に最近の検索履歴を表示する | 空の入力欄だけ表示してユーザーを待たせる |
| 💡 サジェスト | 入力に応じてリアルタイムで候補を更新する | ページを離れないと結果が更新されない設計にする |
| ⏳ 遅延対応 | プログレスインジケーターで検索中であることを示す | 結果なしと誤認させるような空白状態を放置する |
| 🔗 関連トピック | 結果の後続に関連する話題を追加で提示する | 検索結果のみを表示し発見性を下げる |
「直近の話題 → サジェスト → 関連トピック」の流れ
このシーケンスは、ユーザーの認知負荷を段階的に下げる設計です。
- フォーカス時: まず馴染みのある「直近の話題」を表示し、即座にアクションできる選択肢を提示する
- 入力中: 入力内容に応じたサジェストでユーザーをガイドし、タイピングコストを減らす
- 結果後: 関連トピックで探索の幅を広げ、「もしかしてこれも？」という発見を促す
このフローを意識してコンテンツを設計することで、馴染みのあるトピックへの素早いアクセスと、未知のトピックへの自然な誘導を両立できます。
まとめ 🎯
Fluent UI 2 の Searchbox は、シンプルな外見の裏に多くの設計上の配慮が込められたコンポーネントです。本記事で取り上げたポイントをまとめます。
- フォーカスアニメーション: 標準の Input と同じ遷移アニメーションで一貫した UX を提供
- クリアボタン: 入力がある場合のみ表示されるシンプルな設計
- レイアウト: フィルターアイコン・ドロップダウンはオプションで柔軟に構成可能
- Blazor との比較:
FluentAutocomplete（サジェスト付き）またはFluentTextInput + TextInputType.Search（シンプル）が代替候補 - アクセシビリティ: 400% ズームへの対応と小ビューポートでの縮退パターンが重要
- コンテンツ設計: 「直近の話題 → サジェスト → 関連トピック」の順序で信頼性を高める
検索体験はアプリの使いやすさに直結します。Fluent UI 2 のガイダンスを参考に、ユーザーが「すぐに見つかる」体験を届けてみてください 🔍
過去のシリーズ記事もあわせてご覧ください。