はじめに 🌟
Divider は「線を引くだけ」のコンポーネントに見えますが、実際は情報のまとまりと優先順位を伝えるための部品です。特に業務 UI では、どこで文脈が切り替わるかを利用者が素早く把握できるかどうかに直結します。
本記事では、Fluent UI 2 の Divider ガイドを土台にしながら、Fluent UI Blazor 5 の FluentDivider と比較して、使い方と機能差が分かるように整理します。あわせて、スペース優先の考え方、使うべき場面、アンチパターン、レイアウト・アクセシビリティ・コンテンツの注意点までまとめます。
これまでの Fluent UI 2 シリーズ 📚
Fluent UI 2 シリーズは、コンポーネント単体の使い方だけでなく、情報設計やアクセシビリティの観点もあわせて整理してきました。Divider の理解を深める前に、関連する過去記事も必要に応じて参照してみてください。
- 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 の違いと使い分け
Fluent UI 2 とは
Fluent UI 2 は、Microsoft のデザインシステム Fluent 2 に沿って UI を設計・実装するための指針とコンポーネント群です。重要なのは、単なる見た目の統一ではなく、情報設計・操作の一貫性・アクセシビリティを同時に扱う点です。
Divider もこの文脈で扱われます。つまり「線を引きたいから使う」のではなく、情報の区切りをどう伝えるかという設計判断が先にあります。
Divider の前に「スペース」を検討する
Fluent UI 2 の Divider usage は、Divider を単体で押し出すのではなく、spacing や見出しと組み合わせて情報を整理する考え方を示しています。実務では、次の順で判断するとぶれにくいです。
- まず余白（spacing）だけで区切りが伝わるかを確認する
- 伝わりにくい場合だけ Divider を追加する
- さらに見出しでセクションの意味を補強する
「とりあえず線を足す」より、「余白で読めるか」を先に確認するほうが、画面のノイズを増やさずに済みます。
Fluent UI 2 Divider と Fluent UI Blazor 5 FluentDivider の比較（一次情報ベース）
| 観点 | Fluent UI 2 (React / Usage) | Fluent UI Blazor 5 (FluentDivider) |
|---|---|---|
| 🔎 位置づけ | 設計ガイド（いつ・なぜ使うか）を重視 | 実装 API（どう書くか）を重視 |
| 📐 種類・形状 | Usage では Block / Inset を明示 |
Inset と Vertical で見た目・方向を制御 |
| 🎨 見た目 | ガイド中心（用途ベース） |
Appearance (Default/Strong/Brand/Subtle) で指定 |
| 📏 レイアウト | margin はコンポーネントに内包されず、外側で調整（目安: 通常/テキスト付きは上下 12px、アイコン付きは上下 8px） |
Margin / Padding パラメータで明示指定可能 |
| 🧭 コンテンツ配置 | 見出しの上に置く、見出し下線として使わない、テキストは短くするなどの指針がある |
ChildContent と AlignContent (Start/Center/End) で内容を配置 |
| ♿ アクセシビリティ | 視覚的分離のみなら aria-hidden を使うよう明示 |
Divider ページは API・パラメータ中心。a11y の判断基準は Fluent UI 2 の Usage 指針を併読する前提 |
要するに、Fluent UI 2 は「判断基準」、Blazor は「実装手段」を提供しています。両者は競合ではなく、Fluent UI 2 の設計原則を Blazor API に落とし込む関係です。
一次情報:
Divider を使う具体例
- セクションが切り替わる設定画面（例: 「通知設定」→「詳細設定」）
- リスト内で近い項目群を束ねたいとき（Inset divider）
- 長い説明文で、見出し単位の文脈切替を視覚化したいとき
React 側の最小例
<Divider />
<h3>Advanced settings</h3>
Blazor 側の最小例
<FluentDivider Appearance="DividerAppearance.Subtle" Inset="true">
Advanced settings
</FluentDivider>
アンチパターン ❌
- 見出しの下線として Divider を使う（Fluent UI 2 は見出しの上配置を推奨）
- 要素ごとに Divider を連打して、余白より線が目立つレイアウトにする
- 情報上の区切りがないのに、装飾目的だけで入れる
- スクリーンリーダー上は意味がない区切りなのに、常に読み上げ対象にする
レイアウト・アクセシビリティ・コンテンツの要点
レイアウト
- Block は強い区切り、Inset は近い関係のグルーピングに向いています。
- Fluent UI 2 のガイドでは、margin は Divider 自体に内包されません。
- 推奨値の目安として、通常/テキスト付き Divider は上下 12px、アイコン付きは上下 8px が示されています。
アクセシビリティ
- 視覚的な区切りのみで意味上の区切りでない場合は
aria-hiddenを検討します。 - 逆に、セクション意味を持つ区切りなら、支援技術に伝わる構造を優先します。
コンテンツ
- Divider のテキストは「次のセクションが何か」を短く示します。
- 英語 UI では sentence style capitalization（先頭語のみ大文字）を使います。
まとめ 📝
Divider は「線を足すための部品」ではなく、「情報の切れ目を伝えるための部品」です。まずは spacing で整理し、それでも区切りが曖昧なときに Divider を使う、という順序を守ると UI が安定します。
Blazor では Appearance や AlignContent などの API が使えるぶん、見た目を作り込みやすいです。だからこそ、Fluent UI 2 の設計原則（何を区切るのか、なぜ区切るのか）を先に置いて実装すると、過剰装飾や誤用を防ぎやすくなります。