.NETやAzure・Microsoft製品で学んだことや気づいたことを共有しよう

@tomokusaba(Tomomitsu Kusaba)Team Tea & Water

Fluent UI 2 の MessageBar を理解する — Fluent UI Blazor 5 と比較する機能・使用方法・アクセシビリティ

Posted at 2026-06-14

はじめに 🌟

Fluent UI 2 の MessageBar は、アプリやコンテナー全体の状態を、継続的に伝えるためのコンポーネントです。
単なる「通知」ではなく、いま何が起きていて、利用者が次に何をすべきかを示すための情報設計です。

本記事では、まず Fluent UI 2 とは何かを短く整理し、これまでの Fluent UI 2 シリーズをすべて紹介します。
そのうえで、Fluent UI 2（React）と Fluent UI Blazor 5 の MessageBar を、特に機能と使用方法に重点を置いて比較します。最後に、ガイダンス、種類、レイアウト、アクセシビリティ、コンテンツ設計、Do / Don't をまとめます。

参照した一次情報はこちらです。

Fluent UI 2 とは

Fluent UI 2 は、Microsoft Fluent 2 デザインシステムに沿って UI を設計・実装するための考え方とコンポーネント群です。
見た目を揃えるだけでなく、情報の優先順位、操作導線、アクセシビリティを一体で扱う点が特徴です。

MessageBar はその考え方が特に表れる部品です。
なぜなら、MessageBar は「表示するかどうか」より前に、何を誰にどの緊急度で伝えるかを決めないと設計できないからです。

Fluent UI 2 シリーズ紹介 📚

これまでの Fluent UI 2 シリーズ記事です。

今回のゴール ✅

✅ MessageBar を「通知の見た目」ではなく「状態伝達の設計」として理解する
✅ Fluent UI 2 と Fluent UI Blazor 5 の機能差・実装差を把握する
✅ 種類、レイアウト、アクセシビリティ、コンテンツ設計の要点を押さえる
✅ Do / Don't を実装判断に使える形で整理する

Fluent UI 2 と Fluent UI Blazor 5 の比較（機能・使用方法）

結論から言うと、Fluent UI 2 は MessageBar の設計ガイダンスが主で、Fluent UI Blazor 5 はその設計を実装する API が主です。

観点	Fluent UI 2（React ガイダンス）	Fluent UI Blazor 5（実装 API）
🎯 主眼	どんな状態をどの緊急度で伝えるか	どう描画し、どう操作させるか
🧭 種類	Info / Success / Warning / Error	`MessageBarIntent.Info/Success/Warning/Error/Custom`
♿ `aria-live`	Warning/Error は assertive、Info/Success は polite（選択時読み上げ）	Intent 既定 + `AriaLive` パラメーターで明示設定可能
🧩 アクション	Warning/Error はリンクかボタン（または両方）が必須	`ActionsTemplate` に `FluentButton`/`FluentLink` を配置
🗂 レイアウト	複数並ぶ場合は Error→Warning→Success→Info	`Layout`（SingleLine / MultiLine / Notification）で制御
❎ 閉じる挙動	Close で dismiss 可。未解決の Warning/Error は再表示設計が推奨	`AllowDismiss`、`Visible` で制御可能
⏱ 補助情報	メッセージは短く、必要ならリンクへ逃がす	`TimeStamp` を表示可能（アクションなし時）
🎨 外観	意味と緊急度優先	`Shape`、`Icon`、`Animation` などの UI 設定が可能

使用方法の違い（React と Blazor）

import {
  MessageBar,
  MessageBarBody,
  MessageBarTitle,
  MessageBarActions,
  Button,
  Link,
} from "@fluentui/react-components";

export function ErrorBar() {
  return (
    <MessageBar intent="error">
      <MessageBarBody>
        <MessageBarTitle>同期に失敗しました</MessageBarTitle>
        しばらくしてから再試行してください。
        <Link href="/docs/sync-errors">原因を確認する</Link>
      </MessageBarBody>
      <MessageBarActions>
        <Button>再試行</Button>
      </MessageBarActions>
    </MessageBar>
  );
}

<FluentMessageBar Intent="MessageBarIntent.Error"
                  Title="同期に失敗しました"
                  AriaLive="AriaLive.Assertive"
                  Layout="MessageBarLayout.MultiLine">
    <ChildContent>
        しばらくしてから再試行してください。
    </ChildContent>
    <ActionsTemplate>
        <FluentButton Size="ButtonSize.Small">再試行</FluentButton>
        <FluentLink Href="/docs/sync-errors">原因を確認する</FluentLink>
    </ActionsTemplate>
</FluentMessageBar>

Fluent UI 2 側は「何を伝えるべきか」の規律が中心で、Blazor 側は「その規律をどう Razor に落とすか」の選択肢が豊富です。
実務では、先に Fluent UI 2 の判断基準を決めてから、Blazor パラメーターで具体化する順番が安全です。

MessageBar のガイダンス

Fluent UI 2 の MessageBar ガイダンスで重要なのは、次の 3 点です。

MessageBar は、ページ・カード・ダイアログ・ドロワーなどその面全体の状態を伝えるために使う
破壊的操作を止める目的なら MessageBar ではなく Dialog を優先する
別コンテキストの時間依存通知なら MessageBar ではなく Toast を検討する

つまり MessageBar は「いつでも通知に使える箱」ではありません。
状態の説明を継続的に見せるべき場所で使うのが本筋です。

MessageBar / Dialog / Toast の使い分け

似た目的で迷いやすい 3 つですが、判断軸を揃えると選びやすくなります。

観点	MessageBar	Dialog	Toast
🧭 主な目的	面全体の状態を継続的に伝える	破壊的/重大な意思決定を止めて確認する	一時的な結果通知を軽く伝える
⏱ 表示の性質	ページやコンテナーに残る	モーダルに注意を集中させる	短時間で自動消去されることが多い
✋ 操作の強さ	作業は継続できる（Error は解決導線必須）	先に応答しないと先へ進めない	基本は作業を中断しない
📍 位置の文脈	そのページ/カード/フォームの中	画面中央などのオーバーレイ	画面端の通知領域
✅ 向いている例	接続不安定、入力エラー要約、保存状態の注意	削除確認、取り消し不能操作の承認	保存完了、送信完了、バックグラウンド処理完了

使い分けの実務ルール

破壊的操作を止めたいなら Dialog
「この操作は戻せない」を確実に確認したい場面は Dialog を優先します。
その面の状態を継続表示したいなら MessageBar
フォーム上部のエラー要約、コンテナー内の警告など、文脈に紐づく状態通知に向きます。
短い結果通知で十分なら Toast
完了報告など、画面文脈に居座る必要がない通知は Toast が適しています。

避けたい誤用

MessageBar で削除確認を代替する（確認漏れを誘発しやすい）
Dialog で軽微な成功通知を毎回出す（操作を過剰に中断する）
Toast で解決必須のエラーを流す（見逃しやすい）

MessageBar の種類（Type）

種類	役割	アクション要件
ℹ️ Info	体験を改善する補足情報	任意（リンク/ボタンは必要に応じて）
✅ Success	うまく完了したことの通知	任意（次アクションがある場合は追加）
⚠️ Warning	問題化しうる状態の警告	リンク/ボタンのいずれか必須
❌ Error	続行前に解決が必要な問題	リンク/ボタンのいずれか必須

Warning と Error は「見せるだけ」では不足です。
解決導線を同時に提供することが要件です。

レイアウト

Reflow の原則

MessageBar の本文は切り詰めず、折り返して表示する
2 行を超えるあたりで、アクションを本文下に回す構成が推奨される
ページ幅やコンテナー幅に追従して伸縮する

複数 MessageBar の並び順

同一エリアで複数表示するときは、重要度順で次の並びが推奨されます。

Error
Warning
Success
Informational

折りたたみ（アコーディオン）

複数の MessageBar がある場合は、アコーディオンでまとめて省スペース化するパターンもあります。
このときは、最重要メッセージを先頭に見せて見出し扱いにし、残り件数をバッジで示します。

配置の原則

ページレベル: コマンドバーの下、メイン領域内（サイドナビより上には置かない）
コンテナーレベル: タイトル/ヘッダー直下〜コンテンツ先頭
フォーム内: 送信エラー時は MessageBar へフォーカス移動し、各フィールドの inline error で補強
Drawer/Tab/Card: それぞれヘッダーやタブ直下の文脈が切れない位置に置く

Blazor ではさらに Layout を使って次の形を選べます。

SingleLine: 本文横にアクション
MultiLine: 本文下にアクション
Notification: タイトル・本文・アクションを段分け

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

MessageBar で最重要なのは、通知の強さ（割り込み度）を正しく選ぶことです。

1. `aria-live` を緊急度で使い分ける

Error / Warning: assertive（読み上げを割り込む）
Info / Success: polite（利用者が選択したときに読み上げる）

この設計は、重要な問題を見逃さないために有効です。
ただし assertive を多用すると、スクリーンリーダー利用者の操作フローを壊します。

2. フォームエラーは MessageBar だけで完結させない

フォーム送信失敗時は、上部 MessageBar で全体状態を伝えつつ、各入力項目の inline error で具体箇所を示します。
「全体の通知」と「局所の修正点」を分離することが重要です。

3. 閉じる挙動は「問題解決」と切り分ける

Close で一時的に非表示にできても、未解決の Warning/Error は再表示される設計が仕様として示されています。
これは「見えなくした」ことと「問題を解決した」ことを混同しないためです。

4. Blazor 実装で明示したいポイント

Intent だけに頼らず、必要なら AriaLive を明示する
ActionsTemplate で解決導線を必ず置く（特に Warning / Error）
Visible 切り替え時に、利用者が文脈を失わない表示位置にする

アクセシビリティで一番危険なのは、Error/Warning を「色付きの目立つ箱」としてだけ扱うことです。
MessageBar は視覚デザインより先に、読み上げ・フォーカス・行動導線の設計が必要です。

コンテンツの説明（重要）✍️

Fluent UI 2 の Content ガイダンスは、MessageBar の質を大きく左右します。

構成要素

Title（任意）: スキャンしやすくする
Body（必須）: 状態を短く明確に伝える
Dismiss（任意）: 邪魔なときに閉じられる
Link（任意）: 補足情報へ
Button（任意）: 次の具体アクションへ

書き方の原則

Title は短く具体的に（例: 「ストレージ残量が少なくなっています」）
Body は 1〜2 文で簡潔に、Title の繰り返しを避ける
Success で「成功しました」「successfully」を乱用しない
Link テキストは動詞で始め、遷移先が予測できる文言にする
Button は Title/Body への直接の応答にする（例: 「ライセンスを更新」）

良い例 / 避けたい例

観点	良い例	避けたい例
🧷 Title	`ライセンスの期限が近づいています`	`警告`
📝 Body	`5 日後に編集機能が無効になります。`	`ライセンスの期限が近づいています。ライセンスの期限が近づいています。`
🔗 Link	`更新手順を確認する`	`ここをクリック`
🔘 Button	`ライセンスを更新`	`実行`
✅ Success	`レポートを保存しました。共有リンクを作成できます。`	`保存に成功しました！`

Do / Don't（網羅）

区分	Do（すべきこと）	Don't（してはいけないこと）
🧭 用途選定	面全体の状態通知に使う	破壊的操作の阻止に使う（Dialog を使う）
🔔 通知選定	時間依存・別コンテキスト通知は Toast を検討	すべて MessageBar で済ませる
🧱 種類選定	緊急度に合わせて Info/Success/Warning/Error を使い分ける	色だけで種類を決める
🔧 解決導線	Warning/Error にはボタンかリンクを必ず置く	Warning/Error を説明だけで終わらせる
📐 レイアウト	複数時は Error→Warning→Success→Info の順に並べる	重要度と無関係な順番で並べる
✂️ 文章量	Title + 1〜2 文で簡潔に書く	長文を詰め込み、本文で同じ内容を反復する
♿ `aria-live`	Error/Warning は assertive、Info/Success は polite を基本にする	全部 assertive にして読み上げを乱す
🧪 フォームエラー	MessageBar + inline error で二段構えにする	MessageBar だけで修正箇所を特定させる
❎ Dismiss	閉じる操作と問題解決を分離して設計する	「閉じられた=解決済み」とみなす
🧩 Blazor 実装	`Intent` + `ActionsTemplate` + `Layout` を役割で選ぶ	パラメーターの既定値任せで意図を曖昧にする

まとめ ✅

Fluent UI 2 の MessageBar は、通知 UI というより状態説明と行動導線を設計するコンポーネントです。
Fluent UI Blazor 5 は、その設計を Intent、AriaLive、ActionsTemplate、Layout で具体化しやすくしてくれます。

特に重要なのは次の 2 点です。

アクセシビリティ: aria-live の強さと割り込み回数を制御する
コンテンツ: Title/Body/Action を短く具体的につなげる

この 2 点を守るだけで、MessageBar は「目立つ箱」から「使えるフィードバック」に変わります。

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