はじめに 🌟
Fluent UI 2 の Button は、単なる見た目のきれいなボタンではありません。
「今この場で何を起こすのか」を伝えるための、情報設計とアクセシビリティを含んだ部品です。
今回の記事では、Fluent UI 2 の Button を入り口にして、まず Fluent UI 2 とは何か を短く整理します。
その上で、Fluent UI 2（React）と Fluent UI Blazor 5 の実装の違い、ボタンの種類、レイアウト、アクセシビリティ、文言の考え方をまとめます。
参考にした公式ページはこちらです。
Fluent UI 2 とは
Fluent UI 2 は、Microsoft のデザインシステム Fluent 2 に沿って UI を組み立てるための考え方とコンポーネント群です。
見た目をそろえるだけではなく、操作の優先順位、情報の出し方、支援技術への伝わり方まで含めて設計します。
Button はその中でも特に重要です。なぜなら、Button は「押せる」だけでなく、何が起きるかを短い文言で予告する役割を持つからです。
良いボタンは、見た瞬間に「何をするボタンか」が分かります。
今回のゴール ✅
- ✅ Fluent UI 2 の Button が担う役割を理解する
- ✅ Fluent UI 2 と Fluent UI Blazor 5 の実装差をつかむ
- ✅ Button の種類と使い分けを整理する
- ✅ レイアウトとアクセシビリティの注意点を押さえる
- ✅ ボタン文言の書き方を実務に落とし込めるようにする
Fluent UI 2 と Fluent UI Blazor 5 の違い
まず、両者は同じ Fluent 2 の設計思想を共有しています。
ただし、実装の単位とAPI の形が少し違います。
| 観点 | Fluent UI 2（React） | Fluent UI Blazor 5 |
|---|---|---|
| 📦 パッケージ | @fluentui/react-components |
Microsoft.FluentUI.AspNetCore.Components |
| 🧩 ボタンの表現 |
Button を中心に用途別のバリエーションを使う |
FluentButton / FluentMenuButton / FluentSplitButton / FluentToggleButton / FluentCompoundButton / FluentAnchorButton に分かれる |
| ✍️ 文言の持たせ方 | 子要素や aria-label を使うことが多い |
Label と ChildContent を使い分けられる |
| 🎨 見た目の指定 |
appearance などの props |
Appearance="ButtonAppearance.Primary" のような enum |
| 🔗 ナビゲーション | ボタンではなく link を使うのが基本 |
FluentAnchorButton が用意されている |
React 側は「ひとつの Button を基礎に、用途ごとの振る舞いを選ぶ」印象です。
Blazor 側は「用途ごとにコンポーネントを分けて、Razor らしく組み立てる」印象が強いです。
実装の比較
import { Button, ToggleButton } from "@fluentui/react-components";
export function Sample() {
return (
<>
<Button appearance="primary">Save</Button>
<ToggleButton checked>Bold</ToggleButton>
</>
);
}
<FluentButton Appearance="ButtonAppearance.Primary">Save</FluentButton>
<FluentToggleButton Pressed="true">Bold</FluentToggleButton>
React では appearance や checked のような prop で状態を表します。
Blazor では Appearance や Pressed のようなパラメーターで表します。
似ていますが、名前の付け方とコンポーネントの分割が違うので、移植時はそこを意識すると迷いません。
Button の種類
Fluent UI 2 の Button は、用途で考えると次のように整理できます。
| 種類 | 役割 | 使いどころ |
|---|---|---|
| 🔘 Button | 単一のアクションを起こす | 保存、送信、次へ |
| 🪓 Split button | 主動作 + 関連動作のメニュー | 既定操作と派生操作を分けたいとき |
| 📋 Menu button | メニューを開く | 新規作成、選択肢の提示 |
| 📝 Compound button | タイトル + 説明を持つ | 少し説明が必要な重要操作 |
| 🔁 Toggle button | 状態を切り替える | 太字、固定、ピン留めなど |
| 🔗 Anchor button | 画面遷移のリンク | 別ページへ移動するとき |
Blazor 5 では、これらがそれぞれ FluentButton 系の別コンポーネントとして用意されています。
React でも種類はありますが、公式ページでは Button の考え方としてまとめて説明されています。
Split button の考え方
Split button は、主動作を左側に、関連動作を右側のメニューに逃がす構成です。
ここで大事なのは、メニューに主動作を重複させないことです。
たとえば「New message」が主動作なら、メニュー側では「Event」だけにして、文脈が失われるなら支援技術向けに補完します。
Menu button の考え方
Menu button は、主動作を直接実行するのではなく、選択肢を開くためのボタンです。
「何かを実行する」より「何を実行するか選ばせる」場面で使います。
Compound button の考え方
Compound button は、見出しだけでは足りないときに使います。
タイトルの下に説明があるので、重要だが少し説明が必要な操作と相性が良いです。
Toggle button の考え方
Toggle button は「押したら終わり」ではなく、状態のオン / オフを扱います。
そのため、ラベルだけでなく 今の状態 も伝わる必要があります。
レイアウト
公式ガイドでは、ボタンの並べ方にもはっきりした考え方があります。
実務ではまず Primary を 1 つ置き、他は Default を基本にする のが分かりやすいです。
- 主ボタンは 1 つだけ にする
- それ以外は Default を基本 にする
- 重要でない操作が多いときは、
outline/subtle/transparentを使う - 主ボタンは 上 か 左 に置く
- RTL では主ボタンを右に置く
つまり、Button は「全部を同じ重さで並べる」ためのものではありません。
何を先に押してほしいか を、視覚的にも順番でも示します。
<FluentStack HorizontalGap="10">
<FluentButton Appearance="ButtonAppearance.Primary">Save</FluentButton>
<FluentButton Appearance="ButtonAppearance.Outline">Cancel</FluentButton>
<FluentButton Appearance="ButtonAppearance.Subtle">Maybe later</FluentButton>
</FluentStack>
このように、主ボタンだけを強くし、他は落ち着いた見た目にすると、画面が読みやすくなります。
アクセシビリティ ♿
ここは特に重要です。
Button は「クリックできる」だけでは不十分で、支援技術に意味が伝わること が必要です。
1. Toggle button は状態と動作を両方伝える
Toggle button は、現在の状態と、押した後にどう変わるかの両方を表します。
そのため、Pressed のような状態だけでなく、文言でも意味が分かるのが理想です。
たとえば Bold より Bold on / Bold off のように、状態を明示したほうが親切な場面があります。
2. ボタン文字列は短く、動詞で始める
公式ガイドでは、Button の文言は active language を使い、短く、sentence case で、末尾の句点を付けないのが基本です。
よくある良い例は次のとおりです。
New messageAdd peopleNextPreviousDoneFinishCloseSave
3. 文字とアイコンのコントラストを守る
ボタンの文字は 4.5:1、アイコンは 3:1 のコントラストが必要です。
disabled は非インタラクティブなので、この要件からは外れます。
4. disabled は理由を補う
無効なボタンをただ灰色にするだけでは、なぜ押せないのかが分かりません。
公式ガイドでは、disabled button には tooltip で理由を示すことが推奨されています。
5. Split button は省略した語を補う
Split button では、右側のメニュー項目から主ラベルの一部を省略することがあります。
その場合は aria-describedby などで補完し、スクリーンリーダーでも意味が分かるようにします。
アクセシビリティは「あとで付け足す属性」より、最初の文言設計とコンポーネントの選び方で決まることが多いです。
特に icon-only ボタンと split button は、見た目だけで意味が伝わりにくいので注意が必要です。
コンテンツの考え方
Button の文言は、何が起きるか をそのまま表します。
曖昧な名詞より、次の操作が分かる動詞のほうが向いています。
迷いやすい文言の例
| 場面 | よい文言 | 補足 |
|---|---|---|
| 🆕 新規作成 | New solution |
メニューなら主ボタンは New、メニュー項目は Solution のように省略できる |
| ➕ 既存項目を追加 | Add people |
何を追加するかを明示する |
| ➡️ 画面遷移 | Next |
ウィザードや段階的な流れで使う |
| ⬅️ 戻る | Previous |
Back より文脈が明確なことが多い |
| ✅ 完了 |
Done / Finish
|
ただ閉じるのか、確定するのかで使い分ける |
| ❌ 中止 | Cancel |
変更を破棄して戻る意味を持つ |
| ✖️ 閉じる | Close |
状態を変えずに閉じる |
| 💾 保存 | Save |
変更を確定する |
特に OK は、エラー通知や確認ダイアログでは避けたほうがよいです。
Close と Cancel も似ていますが、Cancel は作業を止めて元に戻る、Close は閉じるだけ と考えると整理しやすいです。
React と Blazor のラベル比較
<Button aria-label="Close dialog">Close</Button>
<Button>Save</Button>
<ToggleButton aria-pressed={isOn}>Bold</ToggleButton>
<FluentButton Title="Close dialog">Close</FluentButton>
<FluentButton Appearance="ButtonAppearance.Primary">Save</FluentButton>
<FluentToggleButton Pressed="@isOn" Label="Bold">Bold</FluentToggleButton>
React では aria-label を足す場面が多く、Blazor では Title や Label をどう使うかが判断ポイントになります。
特に icon-only ボタンでは、見えているアイコン名ではなく、利用者に伝わる操作名 を与えるのが大切です。
まとめ ✅
Fluent UI 2 の Button は、見た目の部品というより 操作の意味を短く伝える UI です。
React と Blazor では API の形は違いますが、考え方はかなり近く、どちらも「主ボタンを目立たせる」「文言を短くする」「支援技術に意味を伝える」という原則は共通しています。
個人的には、Button の設計でいちばん効くのは アクセシビリティ対応の後付け ではなく、最初にどういう動作名を付けるか だと感じます。
Save、Cancel、Next のような短い言葉ほど、実は丁寧に選ぶ価値があります。
参考: