はじめに 🌟
Fluent UI 2 の Slider は、範囲の中からおおよその値を選ぶためのコンポーネントです。
ただし、すべての数値入力を Slider に寄せるのは危険で、精密入力が必要な場面は Input 系を使うという判断が重要です。
この記事では、まず Fluent UI 2 そのものを短く整理し、これまでの Fluent UI 2 シリーズ記事をすべて紹介します。
そのうえで、Slider のガイダンス、種類、動作、レイアウト、アクセシビリティ、コンテンツを整理し、Fluent UI Blazor 5 の FluentSlider<TValue> との違いまで比較します。
参照した一次情報:
Fluent UI 2 とは
Fluent UI 2 は、Microsoft Fluent 2 デザインシステムに沿って UI を設計・実装するためのガイダンスとコンポーネント群です。
見た目の統一だけでなく、情報設計、操作一貫性、アクセシビリティ、コンテンツ設計までを一体で扱うことを重視しています。
つまり Slider も「値を動かせる UI」ではなく、
「どの程度の精度で値を選ばせるか」「ラベルや読み上げで何を伝えるか」まで含めて設計する部品です。
これまでの Fluent UI 2 シリーズ記事一覧 📚
※ 本記事執筆時点で公開済みのシリーズをすべて掲載しています。
| # | 記事 | 導入ポイント |
|---|---|---|
| 1 | Accordion | 情報の折りたたみと展開をどう設計するか |
| 2 | Breadcrumb | 現在地を迷わせない階層導線の作り方 |
| 3 | Card | 情報ブロックの意味づけと配置 |
| 4 | Checkbox | 複数選択と状態管理の基本 |
| 5 | Button | 操作を促す基本アクション設計 |
| 6 | Badge | 補助情報を過不足なく伝える方法 |
| 7 | Avatar | 人物表現の一貫性と代替表現 |
| 8 | Dialog | 中断を伴う UI の使い分け |
| 9 | Combobox | 選択と入力を両立する設計 |
| 10 | アクセシビリティ実装 | キーボード/支援技術前提の実装基礎 |
| 11 | 色と WCAG | 色に依存しない情報伝達の要点 |
| 12 | Label | 入力の意味を短く正確に伝える方法 |
| 13 | Popover | 軽量オーバーレイの適用境界 |
| 14 | Input | テキスト/数値入力の基本設計 |
| 15 | Divider | 視覚的グルーピングの作法 |
| 16 | Image | 画像の意味づけと代替テキスト |
| 17 | Menu | コマンド群の整理と操作導線 |
| 18 | Nav | 主要導線の情報設計 |
| 19 | Icon | 記号表現と意味伝達の整合 |
| 20 | Link | 遷移行動を予測しやすい文言設計 |
| 21 | MessageBar | 状態通知の優先度と読みやすさ |
| 22 | Drawer | 主画面文脈を保った補助操作 |
| 23 | Field | 入力群の説明責任を担う枠組み |
| 24 | Persona | ユーザー情報表現の粒度設計 |
| 25 | Progress Bar | 待ち時間を可視化して不安を減らす |
| 26 | Dropdown | 選択 UI の誤用を防ぐ判断基準 |
| 27 | Radio Group | 単一選択の明快な提示 |
| 28 | Rating | 評価表示と評価入力の使い分け |
| 29 | Searchbox | 検索体験の導線設計と補助機能 |
Slider のガイダンス（まず押さえるポイント）
Fluent UI 2 の Slider usage では、次が中心メッセージです。
- Slider は「範囲の中のおおよその値」を選ばせるために使う
- 範囲が極端に小さい/大きいケースには向かない
- 金額のような精密な数値には Slider ではなく Input を検討する
Use a slider for imprecise values.
For precise numerical inputs, like a dollar amount, try an input.
— Fluent UI 2 Slider usage
他の入力コンポーネントとの比較（特に数値入力）🔢
Slider と Input 系は競合ではなく、入力精度で役割分担すると整理しやすいです。
| 観点 | Slider | Input（text/number） | Spinbutton 相当 |
|---|---|---|---|
| 🎯 主目的 | 範囲内の概算値を素早く選ぶ | 値を正確に入力する | 増減ボタンで段階的に正確入力 |
| ✍️ 入力精度 | 低〜中（概算向き） | 高（厳密値向き） | 高（刻み値向き） |
| ⚡ 操作特性 | ドラッグ/トラッククリックで直感的 | キーボード入力中心 | キー + ボタンで微調整しやすい |
| 🧭 向くユースケース | 音量、明るさ、しきい値調整 | 価格、件数、ID、税率 | 在庫数、人数、優先度など step 入力 |
| ⚠️ 注意点 | 最小/最大や単位の説明不足で誤解されやすい | バリデーションと単位表示が必須 | 最小/最大/step の整合が重要 |
使い分けの実務ルール
- ユーザーが厳密値を指定する責務があるなら Input（number）を優先する
- まず感覚的に調整してから確定させたいなら Slider を使う
- 金額・重量・税率などは Slider 単独ではなく、Input 併設を検討する
Slider 単独を避けるべきケース
- 法令・契約・監査対象の値（税率、請求金額、閾値の根拠値）
- 1 単位未満の細かい調整が必要な値
- 入力履歴として「厳密値そのもの」を残す必要がある値
Slider の種類（Types）
Fluent UI 2 では、Slider を大きく 2 種類で説明しています。
| 種類 | 説明 | 例 |
|---|---|---|
| Default | 連続的な範囲でおおよその値を選ぶ | 明るさ、音量 |
| Step | 離散値へスナップして選ぶ | 解像度、品質プリセット |
Step Slider は「任意値ではなく決まった候補だけを選ばせる」設計に向きます。
Slider の動作（Behavior）
Slider は次の操作が前提です。
- サム（thumb）を移動して値を変更する
- トラック上を選択してサムをジャンプさせる
- マウス/キーボード/タッチの各入力で操作できる
特に実装時は、ポインター操作だけでなくキーボード操作でも同等に値を調整できるかを最初に確認するのが安全です。
Slider のレイアウト（Layout）📐
Fluent UI 2 のガイドでは、Slider は水平・垂直の両レイアウトを想定しています。
| レイアウト | 向く場面 |
|---|---|
| Horizontal | フォーム内に 1 項目として置く一般的なケース |
| Vertical | サイドパネルや狭い横幅で調整 UI を置くケース |
Fluent UI Blazor 5 でも Orientation で Horizontal / Vertical を指定できます。
垂直レイアウト時は高さ確保が必要で、ドキュメント上も最小高の注意が示されています。
Fluent UI 2 Slider と Fluent UI Blazor 5 Slider の違い 🔄
比較すると、Fluent UI 2 は「使い分けの設計ガイド」が中心で、Fluent UI Blazor 5 は FluentSlider<TValue> の API で実装を組み立てる形です。
| 観点 | Fluent UI 2（React / Usage） | Fluent UI Blazor 5（FluentSlider<TValue>） |
|---|---|---|
| 🧭 重点 | いつ Slider を使うべきか（Input との判断） |
Min/Max/Step/Orientation など実装 API |
| 🔢 値型 | Usage ガイド中心 | 数値型ジェネリック（int, double, decimal など） |
| 📏 初期値 | ガイドで定性的に説明 |
Min=0, Max=100, Step=1 が既定 |
| 🧱 レイアウト | 水平/垂直の方針 |
Orientation パラメーターで指定 |
| 🏷️ ラベル | ラベルの必要性を強調 |
Label / AriaLabel / LabelTemplate で実装 |
| ♿ a11y 配慮 | ラベル・読み上げ知覚を重視 | ARIA 属性やラベル API を明示して実装可能 |
| 🎛️ 追加機能 | Usage 設計中心 |
Disabled, Size, Tooltip, カスタム Thumb slot など |
| ⚠️ 実装上の注意 | ガイドで注意点を示す |
ReadOnly は実質サポートされず、操作禁止は Disabled を使う |
Blazor 側の実装例
<FluentSlider Min="0"
Max="100"
Step="5"
@bind-Value="@volume"
Label="@($"音量: {volume}")" />
@code {
int volume = 50;
}
アクセシビリティ ♿（重要）
Slider で最重要なのは、現在値と範囲の意味を非視覚でも把握できることです。
- 必ずラベルを付ける（非表示ラベルでも可）
- ツールチップで現在値を見せる場合、スクリーンリーダーにも同等情報が届くようにする
- 最小値/最大値/単位を明示して、値の意味を理解できるようにする
- キーボード操作で調整可能であることを前提にテストする
- 非数値レンジ（Low/High など）は、読み上げ用の値説明（
aria-valuetext相当）を別途設計する
見た目上「値が動く」だけではアクセシブルとは言えません。
「何の値か」「どこまで動くか」「今いくつか」を支援技術から取得できる状態が必須です。
コンテンツ（ラベル・補助文言）✍️（重要）
Fluent UI 2 Slider のコンテンツ設計では、次を揃えると誤解が減ります。
| 観点 | 推奨 | 例 |
|---|---|---|
| 🏷️ ラベル | 範囲が何を意味するかを短く明示 |
音量, しきい値, ズーム倍率
|
| ↔️ 境界値 | min/max の意味を示す |
0% 〜 100%, Low 〜 High
|
| 🔁 用語の平行性 | 非数値レンジは対になる語を使う |
min/max, low/high
|
| 🔢 単位 | 可能なら値表示に単位を付与 |
%, ms, px
|
悪い例 / 良い例
| 種類 | 例 | コメント |
|---|---|---|
| ❌ 悪い例 | Value |
何の値か分からない |
| ❌ 悪い例 | Adjust |
範囲や単位が伝わらない |
| ❌ 悪い例 |
Threshold（境界値表記なし） |
最小/最大や方向性が不明 |
| ✅ 良い例 | 音量（0%〜100%） |
範囲と単位が明確 |
| ✅ 良い例 | しきい値（Low〜High） |
非数値レンジでも意味が伝わる |
| ✅ 良い例 | 警告しきい値（10ms〜500ms） |
意味・範囲・単位を同時に提示 |
a11y 実装チェックリスト
- ラベルがあり、何の値かが単体で分かる
- 最小値/最大値/単位を UI 上で確認できる
- 現在値が視覚と読み上げの両方で取得できる
- キーボードのみで値変更できる
- Tooltip の有無に関係なく、必要情報が失われない
まとめ
Slider は「数値入力コンポーネント」ではなく、概算値を扱う調整 UIです。
精密入力が必要な値は Input（number）を優先し、Slider は感覚的調整が価値になる場面で使うのが Fluent UI 2 の設計意図に合います。
また、Fluent UI Blazor 5 では FluentSlider<TValue> によって実装自由度が高いため、ラベル・ARIA・境界値説明まで含めて最初から設計に組み込むことが、実務での品質を大きく左右します。