@tomokusaba(Tomomitsu Kusaba)Team Tea & Water

Fluent UI 2 の Tablist を理解する — Link / Button との違い、Fluent UI Blazor Tabs 比較、アクセシビリティとコンテンツ設計

Last updated at 2026-06-28Posted at 2026-06-28

はじめに 🌟

Fluent UI 2 の Tablist は、主に関連する情報カテゴリを切り替えるためのコンポーネントです。密接に関連し、頻繁に行き来する少数のページ間ナビゲーションにも利用できます。
見た目はシンプルですが、実務では Link や Button と役割が近く見えるため、使い分けを誤ると操作の意味が崩れやすい部品でもあります。

この記事では、まず Fluent UI 2 の位置づけとシリーズ全体を整理し、そのうえで次を扱います。

Tablist と Link / Button のユースケースの違い
Fluent UI 2 Tablist と Fluent UI Blazor FluentTabs の使用法・機能差
Tablist のガイダンス、レイアウト、動作、アクセシビリティ、コンテンツ

参照した一次情報:

Fluent UI 2 とは

Fluent UI 2 は、Microsoft の Fluent 2 デザインシステムに沿って UI を設計・実装するためのガイダンスとコンポーネント群です。
単に見た目をそろえるためのライブラリではなく、情報の優先順位、操作の意味、アクセシビリティ、コンテンツ設計まで含めて一貫した体験を作るための基盤です。

Tablist も同じで、単なる「見出し付き切り替え UI」ではありません。
「何をカテゴリとして並べるか」「何をタブラベルにするか」「キーボード・支援技術でどう認識されるか」を先に設計することが重要です。

これまでの Fluent UI 2 シリーズ記事一覧 📚

※ 本記事執筆時点で、既存シリーズ記事をすべて掲載しています。

Tablist と Link / Button の違い（ユースケースと使用法）

Tablist、Link、Button はどれもクリック可能ですが、意味は明確に異なります。

コンポーネント	主目的	典型ユースケース	使うべきでない場面
🗂️ Tablist	関連カテゴリ間の表示切り替え	同一ページ内の「概要 / 詳細 / 履歴」切り替え、密接に関連する少数ページ間の移動	関連性が低い広域ナビゲーション（サイト全体・別アプリ・離れた情報領域）
🔗 Link	ナビゲーション	別ページ遷移、外部サイト移動	保存・削除・送信などのアクション実行
🔘 Button	単一アクション実行	保存、送信、追加、削除	コンテンツカテゴリの切り替え

Fluent UI 2 の Tablist usage でも、次が明示されています。

近い関係のカテゴリ切り替えには Tablist
関係が離れたナビゲーションには Link
処理を実行するなら Button

つまり「見た目」ではなく「利用者が何を期待する操作か」で選ぶのが正解です。

Fluent UI 2 Tablist と Fluent UI Blazor `FluentTabs` の違い

同じ Fluent 2 系でも、Fluent UI 2 は usage ガイダンス中心、Fluent UI Blazor は実装 API 中心です。

観点	Fluent UI 2 Tablist	Fluent UI Blazor `FluentTabs`
🎯 中心	使いどころ・情報設計の指針	パラメーターによる実装制御
↔️ 向き	水平が既定、垂直も可	`Orientation` で Horizontal / Vertical
📦 表示上限	水平は折り返し/スクロールしない。必要なら overflow メニュー	現時点で「多数タブのスクロール機能なし」の注記あり
✅ 初期選択	初期表示時に 1 タブを選択（通常は先頭）	`ActiveTabId` / `ActiveTab` で初期選択とバインド
♿ icon-only 対応	`aria-label` 必須、視覚ユーザー向け tooltip 推奨	`HeaderTemplate` で任意構成可能。icon-only なら同様に名称付与が必要
🚫 無効化	タブ単位で無効化可能	`FluentTab Disabled="true"` が利用可能
⚡ 追加機能	usage 上の一般方針	`FluentTab` の遅延読み込み（サンプルでは `DeferredLoading`、本文には `Deferred` 表記あり）、`LoadingTemplate`、動的追加/削除など実装機能がある

Tablist のガイダンス

Fluent UI 2 Tablist usage を実務に落とすと、次の方針になります。

1. レイアウト

既定は水平、必要なら垂直
水平は折り返しもスクロールもしない前提で設計
タブが多い場合は overflow を用意
画面が狭く overflow だらけになるなら、Accordion や Dropdown も検討
タブの表現は「テキストのみ / テキスト+アイコン / アイコンのみ」を混在させず統一

2. 動作

初期表示時に必ず 1 つを選択状態にする（通常は先頭）
選択変更は「カテゴリ切替」であり、アクション実行ではない
タブ順は利用頻度と意味のまとまりで決める

import { Tab, TabList } from "@fluentui/react-components";

export const OverviewTabs = () => (
  <TabList defaultSelectedValue="overview">
    <Tab value="overview">Overview</Tab>
    <Tab value="activity">Activity</Tab>
    <Tab value="settings">Settings</Tab>
  </TabList>
);

<FluentTabs ActiveTabId="overview">
    <FluentTab Id="overview" Header="Overview">
        概要コンテンツ
    </FluentTab>
    <FluentTab Id="activity" Header="Activity">
        アクティビティ
    </FluentTab>
    <FluentTab Id="settings" Header="Settings">
        設定
    </FluentTab>
</FluentTabs>

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

ここは最優先です。Tablist は「見た目で分かる」だけでは不十分で、支援技術でも同じ意味で理解できる必要があります。

Fluent UI 2 usage で特に重要なポイント:

icon-only タブには aria-label を必ず付ける
icon-only タブには視覚ユーザー向け tooltip も付ける
custom overflow ボタンを作る場合、role="tab" を付ける
現在選択は aria-current で識別できるようにする（特にカスタム実装時）

Tablist の a11y 事故は、ほとんどが「ラベル不足」と「状態伝達不足」です。
特に icon-only タブは、aria-label なしだとスクリーンリーダー上で意味が失われます。

4. コンテンツ（重要）

タブラベルは UI の操作説明そのものです。Fluent UI 2 usage では次が推奨されています。

短く、名詞または短い句にする
並列性を保つ（文法・概念をそろえる）
sentence case（先頭のみ大文字）を使う
末尾の句点を付けない

良い例:

Overview / Activity / Settings
Files / Members / Permissions

避けたい例:

Overview / Update your profile now / Settings.
Data / Search / Click here

「このタブを押すと何が見えるか」をラベルだけで予測できる状態を目指すと、操作負荷が大きく下がります。

まとめ ✅

Tablist は「近い関係の情報を切り替える」ための UI で、Link は移動、Button はアクション実行です。
この意味づけを守るだけで、画面の理解しやすさとアクセシビリティは大きく改善します。

また、Fluent UI 2 はガイダンス、Fluent UI Blazor は実装 API が強みです。
設計段階では Fluent UI 2 の原則を使い、実装段階では FluentTabs の ActiveTabId、Orientation、遅延読み込み（DeferredLoading / Deferred の表記差異に注意）などを、利用中バージョンの API に合わせて使うと安全です。

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