はじめに 🌟
Fluent UI 2 の Persona は、単なる「ユーザー表示」ではなく、人物を文脈付きで表現するためのコンポーネントです。Avatar、Presence、テキスト情報を一体として扱い、一覧・検索結果・共同編集 UI で「誰が、どんな状態か」を短時間で伝える役割を持ちます。
この記事では、まず Fluent UI 2 の位置づけを整理し、そのうえで Persona のガイダンスをレイアウト / アクセシビリティ / コンテンツの観点で確認します。さらに Fluent UI Blazor 5 側は類似コンポーネント（FluentAvatar + FluentPresenceBadge + テキスト要素）で比較し、使い分けを明確にします。
参照した一次情報は次のとおりです。
Fluent UI 2 とは
Fluent UI 2 は、Microsoft のデザインシステム Fluent 2 に沿って UI を設計・実装するためのガイダンスとコンポーネント体系です。重要なのは、見た目の統一だけでなく、情報の優先順位・操作の一貫性・アクセシビリティまで含めて規定している点です。
Persona もこの文脈で理解すると整理しやすくなります。Persona は「プロフィールの見た目」ではなく、人物情報を UI 上で短く、誤解なく、アクセシブルに伝えるための設計単位です。
これまでの Fluent UI 2 シリーズ記事
これまでの Fluent UI 2 シリーズは以下です（公開済み分をすべて掲載）。
- 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 の Divider を理解する — Fluent UI Blazor 5 との比較
- Fluent UI 2 の Dropdown を理解する — Fluent UI Blazor 5 の近縁コンポーネント比較とアクセシビリティ
- Fluent UI 2 の Field を理解する — Fluent UI Blazor 5 と比較する入力設計の基礎
- Fluent UI 2 の Icon を理解する — Fluent UI Blazor の FluentIcon 比較とアクセシビリティ
- Fluent UI 2 の Image を理解する — Fluent UI Blazor 5 と比較しながらレイアウトとアクセシビリティを整理する
- Fluent UI 2 の Label を理解する — Fluent UI Blazor 5 と比較するラベル設計の基礎
- Fluent UI 2 の Link を理解する — Fluent UI Blazor 5 と比較するリンク設計とアクセシビリティ
- Fluent UI 2 の Menu を理解する — Fluent UI Blazor 5 と比較するガイダンス・動作・アクセシビリティ
- Fluent UI 2 の MessageBar を理解する — Fluent UI Blazor 5 と比較する機能・使用方法・アクセシビリティ
- Fluent UI 2 の Nav を理解する — ガイダンス・動作・レイアウト・アクセシビリティと Fluent UI Blazor 5 比較
- Fluent UI 2 のアクセシビリティを色から読む ─ WCAG 2.1 と対比しながら整理する
Persona とは
Fluent UI 2 の Persona usage では、Persona は「追加のコンテキスト情報を含む person 表現」とされています。通常は次の構成です。
- Avatar
- Presence badge
- 最大 4 行のテキストスロット
要するに Persona は、一覧での識別だけでなく、役職・チーム・ステータスなどの文脈を一目で伝える情報ユニットです。
Fluent UI 2 Persona と Fluent UI Blazor 5 の比較
Fluent UI 2（React）には Persona というまとまった部品がありますが、Fluent UI Blazor 5 には同名の Persona コンポーネントは見当たりません。そのため Blazor では、FluentAvatar を中心に複数コンポーネントを組み合わせて Persona 相当を構成するのが基本になります。
| 観点 | Fluent UI 2 Persona (React) | Fluent UI Blazor 5（類似構成） | ユースケースの違い |
|---|---|---|---|
| 🧩 コンポーネント粒度 | Persona が 1 つの表現単位 |
FluentAvatar + FluentPresenceBadge + テキスト要素を合成 |
React は定型の人物表示を素早く作る用途に向く。Blazor は画面要件に合わせて構成を柔軟化しやすい |
| 🖼️ 視覚要素 | Avatar + Presence を Persona 内で扱う | Avatar の slot に PresenceBadge を重ねる | Blazor は「状態バッジを出す/出さない」を文脈ごとに調整しやすい |
| 📝 テキスト表現 | 最大 4 行スロットを前提に設計 | テキスト行数はレイアウト実装次第 | React は情報量の上限を守りやすい。Blazor は情報を盛り込みやすい反面、冗長化に注意が必要 |
| 📐 レイアウト密度 |
presenceOnly で密なレイアウトに対応 |
明示的に Avatar 非表示レイアウトを自作 | Blazor はテーブル/リストごとの最適化自由度が高い |
| ♿ インタラクション | 既定は静的。対話化時は状態・キーボード操作を作者が追加 |
FluentAvatar は OnClick を持つが、role/tabindex 自動付与はドキュメントで明示されていない |
Blazor でも操作意味、フォーカス順、キーボード到達性は実装者が明示的に設計する必要がある |
Persona のガイダンス
レイアウト
Fluent UI 2 Persona のレイアウト上のポイントは次の 2 つです。
- テキストスロットはコンテナが狭くなると折り返される設計
- 密な UI では
presenceOnlyで Avatar を外し、名前近傍に Presence を置ける
この方針は「人物情報を一覧の可読性の中でどう見せるか」に直結します。カードや詳細パネルではフル Persona、データグリッドの狭い列では presenceOnly 的な最小表現、という使い分けが現実的です。
アクセシビリティ（重要）
Persona は既定で静的要素です。クリックして詳細を開くなどの対話を持たせる場合は、作者側で状態とキーボード操作を実装する必要があります。Fluent UI 2 の guidance では、次の 2 点が明示されています。
- focus state を用意すること（
createFocusOutlineStyleの利用を推奨） - キーボード到達のために tab index を付与すること
加えて、対話を持つなら状態とキーボード操作をセットで設計することが求められます。
また Avatar 側の guidance と合わせると、Presence バッジの視認性にも注意が必要です。視力に課題があるユーザーにとって、32px 以下の Avatar ではバッジアイコンを認識しづらいケースがあるため、状態は視覚だけに依存せず、テキストや tooltip で補完する設計が推奨されます。
重要な業務状態（在席・応答可否・承認待ちなど）を、色付きバッジだけで伝える設計は避けるべきです。
スクリーンリーダー利用者や低視力ユーザーにとって、同等情報をテキストで取得できる構成を先に決めてください。
コンテンツ（重要）
Persona のテキストは「短く、一目で理解できること」が原則です。Fluent UI 2 の Content guidance では、各スロットに単語〜短句レベルを置き、必要なら詳細は popover などの別インタラクションに分離する方針が示されています。
さらに文体ルールとして、次が推奨されています。
- sentence-style capitalization（先頭語のみ大文字）
- 末尾ピリオドを付けない
Use sentence-style capitalization—only capitalize the first word—and skip the periods in persona text slots.
— Fluent UI 2 Persona usage
これは読みやすさだけでなく、複数 Persona が並ぶ一覧の視線移動コストを下げるためにも有効です。情報を増やしたい場合は、2 行目以降に詰め込むより、詳細表示を別導線に逃がすほうが認知負荷を抑えられます。
まとめ
Fluent UI 2 の Persona は、Avatar を含む人物表示コンポーネントであり、レイアウト密度への対応、アクセシブルな対話化、短く明快なコンテンツ設計が核になります。Fluent UI Blazor 5 では Persona 専用コンポーネントではなく、FluentAvatar と周辺要素の合成で同等体験を設計する、という理解が実装上の出発点です。