Fluent UI 2 の Nav を理解する — ガイダンス・動作・レイアウト・アクセシビリティと Fluent UI Blazor 5 比較

Posted at 2026-06-14

はじめに 🌟

Fluent UI 2 の Nav は、アプリやサイトの主要セクションへ移動するための「高レベルな道案内」です。
常にアクセスしやすく、必要なら最小化して領域を節約できるのが特徴です。

この記事では、まず Fluent UI 2 とは何かを短く整理し、これまでの Fluent UI 2 シリーズ記事（公開済み分）を一覧で紹介します。
そのうえで、Fluent UI 2（React）の Nav Usage と Fluent UI Blazor 5 の Nav ドキュメントを軸に、使用法と機能差を整理します。

さらに、類似コンポーネントである Tree との使い分けもまとめます。
特に重要なアクセシビリティとコンテンツ設計は、独立セクションで深掘りします。

参照した公式情報:

Fluent UI 2 とは

Fluent UI 2 は、Microsoft Fluent 2 デザインシステムに沿って UI を設計・実装するための指針とコンポーネント群です。
見た目の統一だけでなく、情報設計、操作導線、アクセシビリティ、文言設計を一体で扱うことを重視します。

Nav も同じで、単なるリンク一覧ではありません。
「最短で目的地にたどり着けるか」「どこにいるかが分かるか」「読み上げ環境でも迷わないか」を設計するコンポーネントです。

これまでの Fluent UI 2 シリーズ 📚

※ 2026-06-14 時点で公開済みのシリーズ記事をすべて掲載しています。

今回のゴール ✅

Nav のガイダンス、動作、レイアウトの要点を理解する
Fluent UI 2 と Fluent UI Blazor 5 の Nav の使用法・機能差を整理する
類似コンポーネント（Tree）との使い分けを明確にする
Nav のアクセシビリティとコンテンツ設計の注意点を押さえる

Fluent UI 2 Nav と Fluent UI Blazor 5 Nav の比較

結論から言うと、Fluent UI 2 側は「ナビゲーション情報設計のガイダンス」が中心で、Fluent UI Blazor 5 側は FluentNav を軸に「実装 API」が明確に提供されています。

観点	Fluent UI 2 (React / Usage)	Fluent UI Blazor 5 (`FluentNav`)
🧭 役割	アプリ主要セクションへの高レベル導線	同じ役割を Razor コンポーネントで実装
🪜 階層	最大 2 レベル（1 階層ネスト）	`FluentNavCategory` + `FluentNavItem` で 1 階層ネスト
🧩 構成	Nav / Category / Sub-item の情報設計ガイド	`FluentNav` / `FluentNavItem` / `FluentNavCategory` / `FluentNavSectionHeader`
🖱 項目の振る舞い	Category はリンクではなく開閉のための要素	`FluentNavItem` は `Href` or `OnClick`、Category はグループ
🎛 開閉制御	UX ガイド中心	`UseSingleExpanded`、`ExpandCategoryAsync`、`CollapseCategoryAsync`
🎨 アイコン	Category での利用を推奨、icon-only は非対応	`UseIcons` で制御。Category 内 Sub-item の icon は描画されない
♿ キーボード	ガイドライン中心（ナビゲーションとしての操作一貫性を重視）	Arrow/Home/End + Enter/Space、roving tabindex を明示
🧱 実装の重心	「どう設計するか」の判断基準が中心	「どう実装するか」の API とサンプルが中心

React 側の実装イメージ

import {
  Nav,
  NavCategory,
  NavCategoryItem,
  NavSubItem,
  NavItem,
} from "@fluentui/react-nav-preview";

export function AppNav() {
  return (
    <Nav selectedValue="orders">
      <NavItem value="home">Home</NavItem>
      <NavCategory value="sales">
        <NavCategoryItem>Sales</NavCategoryItem>
        <NavSubItem value="orders">Orders</NavSubItem>
        <NavSubItem value="invoices">Invoices</NavSubItem>
      </NavCategory>
    </Nav>
  );
}

Blazor 側の実装イメージ

<FluentNav Width="260px"
           UseIcons="true"
           UseSingleExpanded="true">
    <FluentNavItem Href="/dashboard">Dashboard</FluentNavItem>

    <FluentNavCategory Id="sales" Title="Sales">
        <FluentNavItem Href="/orders">Orders</FluentNavItem>
        <FluentNavItem Href="/invoices">Invoices</FluentNavItem>
    </FluentNavCategory>
</FluentNav>

類似コンポーネント: Nav と Tree の使い分け 🌲

Fluent UI 2 の Nav Usage では、Nav は 1 階層ネストまでと明記され、より深い階層には Tree を使うことが推奨されています。
つまり「画面遷移の主要導線」なら Nav、「深い階層データの探索」なら Tree が基本です。

観点	Nav	Tree
🧭 主目的	主要セクションへの移動	階層データの探索・展開
🪜 階層の深さ	2 レベルまで	多段階層に向く
🎯 選択体験	現在地を示す selection indicator	branch/leaf を展開しながら辿る
🔁 操作モード	ナビゲーション中心	展開中心（必要に応じてナビゲーションや複数選択を設計）
🧩 Blazor 実装	`FluentNav` ファミリー	`FluentTreeView` + `FluentTreeItem` / `Items`

特に Tree の使い分けは次の対応で押さえると混乱しにくいです。

Fluent UI 2 Tree の考え方	Blazor での捉え方
Expand-and-collapse only	展開・折りたたみ中心で、選択は最小限にする
Navigation	項目選択から画面遷移する Tree として構成する
Multiselect	複数選択を伴う操作対象ツリーとして構成する

逆に、Tree を Nav の代わりに使うと、画面の主要導線としては複雑になりやすいです。
まず Nav で「主要導線」を確定し、深い情報構造が必要な箇所だけ Tree を採用する流れが安全です。

Nav ガイダンス

Fluent UI 2 の Nav ガイダンスは、見た目よりもまず情報設計です。

短く保つ
平易な言葉を使う
スキャンしやすくする
ユーザーの目標に寄せる
各リンク先を明確にする

また、NavCategoryItem に secondary actions は付けられません。
NavItem / NavSubItem の secondary actions も、多くても 1 つを基本にし、複数必要なら overflow menu へ寄せる方針が示されています。

Nav の動作

選択中ページは selection indicator で明示される
Sub-item がアクティブで category が閉じていても、category に選択インジケーターが表示される
Category は accordion 的に開閉する（リンクではない）
Blazor 側では UseSingleExpanded で「同時展開 1 件」に制御できる

このあたりは「現在地を示すこと」と「表示密度を抑えること」のバランス設計です。

Nav のレイアウト

Fluent UI 2 Usage で特に重要なレイアウト要点は次のとおりです。

🍔 ハンバーガーアイコンで展開/折りたたみするパターンを維持する
🪜 階層は 2 レベルまで（simple nav / category + sub-item）
🎨 icon-only レイアウトは非対応
🔽 category chevron の位置は固定（移動しない）
📦 Nav は通常 260px 幅、狭い画面では overlay drawer に切り替わる
🧱 footer slot はコンテンツを隠しうるため慎重に使う

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

Nav のアクセシビリティで最優先なのは、見えている操作と、DOM 上で到達可能な操作を一致させることです。

Secondary actions は常に DOM に置く
hover/focus 時だけ DOM に出す実装は、スクリーンリーダー（特に仮想カーソルやタッチ読み上げ）で到達不能になりやすく、避けるべきです。
代替入力手段を確保する
hover で見せる操作は、context menu 等でもアクセス可能にして、音声操作・視線入力・スイッチ操作でも辿れるようにします。
キーボードナビゲーションを崩さない
Blazor 実装では roving tabindex パターンが前提です。Arrow/Home/End/Enter/Space の挙動を壊すカスタム要素の差し込みは慎重にします。
深すぎる階層を作らない
階層の深さは認知負荷と読み上げ負荷を増やします。深くなるなら Tree に切り替える判断が安全です。

Nav は「メニューが見えるか」ではなく「支援技術から正しく辿れるか」で品質が決まります。
特に secondary actions の DOM 常在は、実装時に最初から設計へ組み込むのが重要です。

コンテンツ設計 ✍️（重要）

Nav の文言は、情報設計そのものです。Fluent UI 2 Usage の要点を実務向けにまとめると次のとおりです。

観点	推奨	避けたい例
✂️ 長さ	短く、ひと目で意味が分かる	長文ラベル、説明文の埋め込み
🧱 形式	sentence case（先頭のみ大文字）	タイトルケースや語ごとの大文字化
🧭 分類	名詞系/動詞系の分類を揃える	同一階層で文法パターンが混在
📚 順序	重要なカテゴリを先頭へ、順序を継続	プラットフォームごとに順序が変わる
🛟 補助文言	展開ボタン tooltip は "Expand navigation" / "Collapse navigation"	曖昧な文言（"Open", "Do it" など）

加えて、「Navigation」という用語を一貫して使うこともガイドされています。
UI ラベルが短くても、プロダクト内ヘルプや説明文で語彙が揺れると、利用者は同じ機能として認識しづらくなります。

まとめ 📝

Nav はリンクを並べる部品ではなく、プロダクト全体の道案内を設計するコンポーネントです。
Fluent UI 2 で設計意図を固め、Fluent UI Blazor 5 で FluentNav の API に落とし込む、という順序が実務では安定します。

実装時は次の 4 点を最優先にすると破綻しにくいです。

階層は 2 レベルまで。深くなるなら Tree を選ぶ
selection indicator と category 開閉の整合を保つ
secondary actions を DOM 常在で設計する
ラベルを短く一貫させ、順序と分類を崩さない

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up