Fluent UI 2 の Spinner を理解する — Progress Bar / Skeleton との使い分けと Fluent UI Blazor 5 比較

はじめに 🌟

今回は Fluent UI 2 の Spinner をテーマに、まずは土台となる考え方を整理します。
特に、似た目的で検討しやすい Progress Bar と Skeleton との違い、そして Fluent UI Blazor 5 の FluentSpinner との違いを重点的にまとめます。

本記事は、ガイダンス・レイアウト・アクセシビリティ・コンテンツの順に整理します。中でもアクセシビリティと文言設計は実装品質に直結するため、厚めに扱います。

Fluent UI 2 とは ✨

Fluent UI 2 は、Microsoft の Fluent 2 デザインシステムに沿った UI コンポーネント群です。
単に見た目をそろえるためではなく、「いつ使うか」「どう配置するか」「支援技術でどう伝わるか」まで含めて設計されている点が特徴です。

Spinner も同様で、公式 usage では次の原則が示されています。

• 待機が 1 秒を超えるときに使う
• 処理の残り時間は示さない
• 進捗率を伝える必要があるなら determinate progress bar を使う

出典: Fluent UI 2 Spinner usage

これまでの Fluent UI 2 シリーズ（全件）📚

本記事執筆時点でのシリーズ記事をすべて掲載します。

• Fluent UI 2 の Accordion を理解する — 情報設計・アクセシビリティ・React 実装
• Fluent UI 2 の Breadcrumb を理解する — Fluent UI Blazor 5 との対応とアクセシビリティ
• Fluent UI 2 の Card を理解する — React と Fluent UI Blazor の違い
• Fluent UI 2 の Dropdown を理解する — Fluent UI Blazor 5 の近縁コンポーネント比較とアクセシビリティ
• Fluent UI 2 の Checkbox を理解する — React と Fluent UI Blazor v5 の違い
• Fluent UI 2 の Button を理解する — 種類・レイアウト・アクセシビリティ・Blazor 5 比較
• Fluent UI 2 の Searchbox を理解する — Fluent UI Blazor 5 との比較とアクセシビリティ・コンテンツ設計
• Fluent UI 2 の Label を理解する — Fluent UI Blazor 5 と比較するラベル設計の基礎
• Fluent UI 2 の Popover を理解する — Fluent UI Blazor 5 との比較と Tooltip / Dialog の使い分け
• Fluent UI 2 の Divider を理解する — Fluent UI Blazor 5 との比較
• Fluent UI 2 で始めるアクセシビリティ実装 — キーボード操作・支援技術・WCAG 2.1 の実践ガイド
• Fluent UI 2 の Image を理解する — Fluent UI Blazor 5 と比較しながらレイアウトとアクセシビリティを整理する
• Fluent UI 2 の Rating を理解する — Fluent UI Blazor 5 と比較する評価 UI の設計とアクセシビリティ
• Fluent UI 2 の Menu を理解する — Fluent UI Blazor 5 と比較するガイダンス・動作・アクセシビリティ
• Fluent UI 2 の Nav を理解する — ガイダンス・動作・レイアウト・アクセシビリティと Fluent UI Blazor 5 比較
• Fluent UI 2 の Spin button を理解する — Slider との違い、Fluent UI Blazor 5 の Number / StepButtons 比較とアクセシビリティ（公開準備中・ドラフト）
• Fluent UI 2 の Icon を理解する — Fluent UI Blazor の FluentIcon 比較とアクセシビリティ
• Fluent UI 2 の Radio Group を理解する — Fluent UI Blazor 5 との比較・使い分け・アクセシビリティ
• Fluent UI 2 の Link を理解する — Fluent UI Blazor 5 と比較するリンク設計とアクセシビリティ
• Fluent UI 2 の MessageBar を理解する — Fluent UI Blazor 5 と比較する機能・使用方法・アクセシビリティ
• Fluent UI 2 の Avatar を整理しつつ Fluent UI Blazor 5 でどう実装するか
• Fluent UI 2 の Badge を理解する — Fluent UI Blazor 5 との比較と実装ポイント
• Fluent UI 2 のアクセシビリティを色から読む ─ WCAG 2.1 と対比しながら整理する
• Fluent UI 2 の Combobox を理解する — Fluent UI Blazor 5 との比較と使い分け
• Fluent UI 2 の Field を理解する — Fluent UI Blazor 5 と比較する入力設計の基礎
• Fluent UI 2 の Persona を理解する — ガイダンス・レイアウト・アクセシビリティ・Fluent UI Blazor 5 比較
• Fluent UI 2 の Dialog を理解する — React と Fluent UI Blazor 5 の違いと使い分け

Spinner と Progress Bar / Skeleton の使い分け 🔄

似た役割に見えても、伝える情報が異なります。

コンポーネント	主なユースケース	伝える情報
🔄 Spinner	待機が 1 秒以上で、進捗率が出せない処理	「処理中です」
📊 Progress Bar（determinate）	完了までの進捗率を示せる処理	「どこまで進んだか」
🧱 Skeleton	コンテンツの骨組みを先に見せたい読み込み	「この形の情報が出る」

Spinner は状態通知に向いていますが、完了見込みまでは伝えません。
そのため、残り時間や進捗率が重要な場面では Progress Bar を選ぶのが自然です。

Skeleton は「読み込み中の見た目の期待値」を先に提示したいときに有効です。たとえばカード一覧やプロフィール画面のように、レイアウトを先に見せることで体感待ち時間を下げたい場面に向きます。

Fluent UI Blazor 5 と Fluent UI 2 の Spinner の違い

Fluent UI 2 側は usage で「どう使うべきか」が強く定義されています。
一方、Fluent UI Blazor 5 側は FluentSpinner の API と実装上の調整点が明確です。

観点	Fluent UI 2 Spinner (React usage)	Fluent UI Blazor 5 FluentSpinner
🎯 中心	ガイダンス（いつ使うか）	実装パラメータ（どう設定するか）
⏱️ 使う目安	1 秒以上の待機	即時タスクには使わない（Do/Don't）
♿ アクセシビリティ	3 秒以上ならラベル + aria-labelledby	単体配置時は tabIndex=\"0\" を検討、reduced-motion 時に説明を追加
🧭 表示数	一次情報上は明示的な「1個まで」規定は見当たらない	「同時に複数表示しない」推奨あり
⚙️ API	usage中心（コード API 細部は別ページ）	Size / AppearanceInverted / Visible を直接指定可能

Blazor の Visible が bool?（true/false/null）なのは実装面で実用的です。
false は非表示、null は非レンダーとして扱えるため、描画負荷や DOM 量を意識した制御がしやすくなります。

Spinner のガイダンス・レイアウト・アクセシビリティ・コンテンツ

ガイダンス

• 待機が短い（体感 1 秒未満）処理では Spinner を出しすぎない
• 進捗が数値で表現できるなら Progress Bar を優先する
• 「今何を待っているか」を利用者が判断できる文言を添える

レイアウト

Fluent UI 2 の usage では、Spinner は「ロード対象セクションの中央」に置く方針です。
画面の一部だけがロード中なら、他のセクションの操作を妨げない配置にします。

この原則を守ると、画面全体が止まったように見える誤解を避けやすくなります。

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

ここが最重要です。
Fluent UI 2 の usage では、3 秒以上かかる処理にはラベルを付け、aria-labelledby でスクリーンリーダーに伝えることが示されています。

実務では次を最低ラインにすると安全です。

• Spinner 単体表示を避け、必ず文言で状態を補う
• 文言と Spinner を確実に関連づける（aria-labelledby など）
• 長い処理では、必要に応じて別途ステータスメッセージも提供する

Blazor 側のガイダンス（tabIndex=\"0\" の検討、reduced-motion 時の説明追加）も、同じ方向性です。
「見えている」だけでなく「読める・伝わる」状態を作ることが重要です。

コンテンツの説明（重要）

Spinner のラベルは、短く具体的であるほど理解しやすくなります。Fluent UI 2 の usage では次が推奨されています。

• 具体的な動詞を使う
• -ing 形で短く書く
• 3 語以内を目安にする
• 末尾は " ..."（スペース + 三点リーダー）
• 曖昧語（loading、authenticating など）を避ける

例:

• ✅ Syncing profile ...
• ✅ Saving draft ...
• ⚠️ Loading ...（対象が不明）
• ⚠️ Working on it ...（行為が曖昧）

文言の品質は、待ち時間そのものは変えられなくても、利用者の不安を大きく減らします。

まとめ 📝

Spinner は「処理中を見せる部品」ですが、実際は 使う条件・置き場所・読み上げ・文言までセットで設計するコンポーネントです。
特にアクセシビリティとコンテンツ設計を丁寧に行うと、同じ待機時間でも体験品質が大きく変わります。

次は、React 実装と Fluent UI Blazor 5 実装のサンプルコードを並べて、同じ要件をどう書き分けるかを具体化していきます。