Fluent UI 2 の Avatar を整理しつつ Fluent UI Blazor 5 でどう実装するか

はじめに 🌟

Fluent UI 2 は、Microsoft のデザイン言語とコンポーネントガイダンスをまとめたデザインシステムです。Web 向けの React コンポーネントを中心に、各 UI パーツの使い方やアクセシビリティの考え方が整理されています。Avatar もその 1 つで、人物やグループをどう表現するかを設計レベルで示してくれるコンポーネントです。✨

一方で、Blazor では Fluent UI 2 の考え方をどこまでそのまま扱えるのかが気になります。今回、最初の下調べでは現行安定版 4 系にある FluentPersona の実装も一部見てしまっていましたが、Fluent UI Blazor 5 の Avatar を語るなら参照すべき一次情報は v5.0.0-RC-3 の FluentAvatar でした。ここははっきり分けておいた方がよいポイントです。👀

以前、Fluent UI Blazor を使ったデザイン原則 という記事も書きましたが、今回はその中でも Avatar に絞って掘り下げます。Fluent UI 2 の Avatar usage を読み解きつつ、Fluent UI Blazor 5 ではどの API でどう表現するのかを整理していきます。🚀

今回のゴール 🎯

本記事では、次の 3 点が分かるように整理します。

• ✅ Fluent UI 2 における Avatar の役割
• ✅ Fluent UI 2 と Fluent UI Blazor の関係
• ✅ Fluent UI Blazor 5 で Avatar をどう実装するか

なお、この記事で触れる Fluent UI Blazor 5 は 2026-06-02 時点で v5.0.0-RC-3 を参照しています。安定版 4 系とは実装名や API が異なる部分があるため、その点もあわせて見ていきます。📘

Fluent UI 2 とは

Fluent UI 2 は、Microsoft 製品群で共有されるデザインシステムです。コンポーネントの見た目だけではなく、「その UI をどう使うべきか」「どんな意味を持たせるべきか」まで含めてガイドしてくれるのが特徴です。🎨

今回参照する Avatar の公式 usage ページも、単なる API リファレンスではなく、Avatar が何を表現するコンポーネントなのか、どんな種類があり、どんなアクセシビリティ配慮が必要かを整理しています。

• Fluent UI 2 Avatar usage

つまり Fluent UI 2 は、まず「設計の基準」を与えてくれる存在だと捉えると分かりやすいです。次に、その基準が Blazor 側でどう実装されているかを見ていきます。🧭

Fluent UI 2 と Fluent UI Blazor の関係

結論からいうと、Fluent UI 2 はデザインガイダンス / Web Components・React 側の設計基準であり、Fluent UI Blazor はそれを Blazor 向けにラップした実装ライブラリです。✨

そのため、コンポーネント名・API 名・機能カバレッジはバージョンごとに差が出ます。今回の Avatar でいうと、現行安定版 4 系で見かける FluentPersona と、v5 RC 系の FluentAvatar は別物です。v5 の公式ドキュメントでは Avatar ページに対して FluentAvatar が案内されており、説明文も "The Avatar component is used to represent a user or entity. It can display an image, initials, or an icon." となっています。👤

項目	Fluent UI 2 Avatar	Fluent UI Blazor 5
🧭 位置づけ	デザインガイド	Blazor 実装
🏷️ 関連コンポーネント名	Avatar	FluentAvatar
🧱 実装のベース	Fluent 2 の設計	<fluentui-avatar /> web component のラッパー
🔷 形状	Standard は円形、Group は四角形	AvatarShape.Circle / AvatarShape.Square
🟢 状態表示	presence badge	FluentPresenceBadge を slot で重ねる
🟠 活動表示	activity ring	Active + ActiveAppearance で表現
📏 サイズ指定	Fluent 2 のサイズ体系	AvatarSize.Size16 ～ AvatarSize.Size128
⌨️ インタラクション	interactive なら状態・キーボード操作が必要	OnClick 時に role="button" と tabindex="0" を自動付与

この違いを先に理解しておくと、「Fluent UI 2 の設計意図」と「Blazor 側で実際に使う API」の対応が見やすくなります。🔍

Avatar の基本: 何を表現するコンポーネントか

Fluent UI 2 の Avatar usage では、Avatar は person または group を表現するための画像またはテキストであり、さらに status や activity のような追加情報も伝えられると説明されています。これは Avatar を単なるプロフィール画像ではなく、識別と状態提示のコンポーネントとして扱っていることを意味します。📌

たとえば、次のような使い分けが自然です。

• 個人の顔写真やイニシャルを表示する
• チームや組織を 1 つのまとまりとして表現する
• 在席状態を presence badge で示す
• 活動中かどうかを ring や shadow で示す

つまり Avatar は「誰か」を見せるだけでなく、「今どんな状態か」まで補助的に伝える UI です。🧩

種類

Fluent UI 2 の Avatar usage では、種類は大きく 2 つです。✨

Standard

Standard は円形コンテナで、一般的には個人を表現します。プロフィール写真やイニシャル表示の文脈で最もよく使うのはこのタイプです。👤

Group

Group は四角形コンテナで、チーム・組織・会社のように「複数人のまとまり」を表現します。個人ではなく集団を表すため、Standard と形状を変えて区別しています。🏢

Fluent UI Blazor 5 では、この形状差を AvatarShape.Circle と AvatarShape.Square で表現できます。ここは v4 系の FluentPersona と比べると、Fluent UI 2 の Avatar 概念にかなり近づいた部分です。👍

アバターのスタイル

Fluent UI 2 の usage で押さえておきたいスタイル上のポイントは、画像 / テキストによる表現、presence badge による状態表現、activity state の見せ方です。🔵

画像とテキスト

Avatar は画像でもテキストでも表現できます。画像があれば写真、なければイニシャルなどのテキストで代替する、という考え方は非常に実務的です。Fluent UI Blazor 5 の FluentAvatar も同じで、Image、Initials、Name、Icon の優先順位で表示内容が決まります。公式ドキュメントでも Image, Initials, Name, Icon の順で内容が選ばれると説明されています。🧠

形状とサイズ

Fluent UI Blazor 5 の FluentAvatar は、形状を AvatarShape.Circle / AvatarShape.Square で切り替えられます。また、サイズは 16px から 128px までの定義済みサイズを AvatarSize 列挙型で指定できます。📏

これは Fluent UI 2 の「標準化されたサイズ体系」に寄せた API で、v4 系のように生の CSS 文字列を渡す形よりも、意図が読み取りやすいです。

Presence badge

Fluent UI 2 では、Avatar に presence badges を付けてステータスを示せます。Fluent UI Blazor 5 では FluentAvatar 単体の引数ではなく、FluentPresenceBadge を slot="@FluentSlot.Badge" で重ねる形です。つまり、状態表示は内包ではなくコンポジションです。🟢

FluentPresenceBadge は Available / Away / Busy / DoNotDisturb / Offline / OutOfOffice / Unknown / Blocked などを扱えます。

Activity state

Fluent UI 2 では activity ring によって活動状態を示せます。Fluent UI Blazor 5 の FluentAvatar では、この考え方に対応する API として Active と ActiveAppearance が用意されています。ActiveAppearance は Ring、Shadow、RingShadow を選べます。⚡

ここは v5 で大きく変わった点で、先に見ていた v4 系 FluentPersona にはこの API はありませんでした。

Fluent UI Blazor 5 ではどう実装するか

Fluent UI Blazor 5 で Avatar を扱う場合、実装の中心は FluentAvatar です。確認できた主なパラメーターは次のとおりです。📋

• Active
• ActiveAppearance
• Color
• Icon
• Image
• Initials
• Name
• Shape
• Size
• OnClick
• Tooltip

さらに、ドキュメントには "The component is a wrapper for the <fluentui-avatar/> web component." と明記されています。Blazor コンポーネントとして使えますが、実装上は Fluent 2 系の web component をラップしている、という理解でよさそうです。✨

基本的な Avatar

<FluentAvatar Name="Tomo Kusaba"
              Size="AvatarSize.Size48"
              Shape="AvatarShape.Circle" />

Name を渡すと、Initials を明示しない場合はそこからイニシャルが生成されます。Fluent UI 2 の Avatar らしい最小構成です。👤

画像付き Avatar

<FluentAvatar Image="https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/KatriAthokas.jpg"
              Name="Katri Athokas"
              Size="AvatarSize.Size48"
              Shape="AvatarShape.Circle" />

画像を使う場合も Name を合わせて渡しておくと、Avatar が表す対象をコード上で明示しやすくなります。v5 のドキュメントでは画像利用時に Name を設定できると説明されていますが、ソース実装を見る限り Name は主に Avatar の名前情報やイニシャル生成の文脈で使われます。画像の代替テキスト設計は、これだけに頼らず画面全体の文脈で考えた方が安全です。🖼️

Presence badge を重ねる

<FluentAvatar Color="AvatarColor.Colorful"
              Name="Denis Voituron"
              Shape="AvatarShape.Circle">
    <FluentPresenceBadge Status="PresenceStatus.Available"
                         slot="@FluentSlot.Badge" />
</FluentAvatar>

presence は FluentAvatar の引数ではなく、子要素として FluentPresenceBadge を差し込む形です。slot="@FluentSlot.Badge" がポイントです。🟢

Active state を使う

<FluentStack HorizontalGap="12px"
             Style="margin-bottom:15px;"
             VerticalAlignment="VerticalAlignment.Bottom"
             Orientation="Orientation.Horizontal"
             Wrap="true">

    <FluentSelect Label="Active"
                  Items="@activeModes"
                  @bind-Value="@active" />

    <FluentSelect Label="Active appearance"
                  Items="@(Enum.GetValues<AvatarActiveAppearance>())"
                  @bind-Value="@activeAppearance" />
</FluentStack>

<FluentAvatar Active="@active"
              ActiveAppearance="@activeAppearance" />

@code
{
    List<bool?> activeModes = new List<bool?> { null, true, false };
    bool? active;
    AvatarActiveAppearance activeAppearance = AvatarActiveAppearance.Ring;
}

公式デモではこのように bool? の Active と AvatarActiveAppearance をバインドして切り替えています。ActiveAppearance では Ring / Shadow / RingShadow を選べるため、Fluent UI 2 の activity 表現に寄せたい場合はこの API を確認しておくとよいです。⚡

アクセシビリティ

Fluent UI 2 の Avatar usage では、アクセシビリティについて 2 つの重要な注意があります。どちらも実装で抜けやすいので要注意です。⚠️

小さい Avatar の presence badge は見えにくい

公式では、32px 以下の Avatar では presence badge のアイコンが視認しづらいことがあるとされています。そのため、可能であれば tooltip のようなテキスト表現を併用することが推奨されています。👀

Fluent UI Blazor 5 でも、この考え方はそのまま当てはまります。FluentPresenceBadge は視覚的な状態表示として便利ですが、重要な状態をそれだけに頼らず、周辺テキストやラベルと組み合わせて設計したいところです。📝

interactive な Avatar

Fluent UI 2 の usage では、Avatar はデフォルトでは静的要素であり、追加のインタラクションを持たせるなら状態・キーボード操作・tabindex を作者側で考慮するよう求めています。⌨️

Fluent UI Blazor 5 の FluentAvatar は、この点でかなり親切です。OnClick が設定されると、role="button" と tabindex="0" を自動で付与し、さらに Enter / Space キーでもクリック処理に入るよう @onkeydown が実装されています。つまり、v5 の FluentAvatar は interactive な Avatar の基本的なキーボード操作を内包しています。✅

ただし、どの操作を意味するのか、どんな文脈で押せるのかまでは別問題です。周辺ラベルや tooltip、画面全体の導線は引き続き設計が必要です。

まとめ 🎉

Fluent UI 2 の Avatar は、人やグループを表現し、必要に応じて status や activity も伝えるコンポーネントとして設計されています。Standard と Group の区別、presence badge、activity 表現、アクセシビリティ配慮まで含めて理解するのがポイントです。✨

そして、Fluent UI Blazor 5 では、これに対応する実装は FluentAvatar です。最初に見ていた v4 系の FluentPersona ではなく、v5.0.0-RC-3 の FluentAvatar を見ることで、Fluent UI 2 により近い API が見えてきます。🔍

整理すると、次のように考えると分かりやすいです。

• ✅ 円形 / 四角形は Shape で切り替える
• ✅ 画像 / イニシャル / 名前 / アイコンの優先順位で内容を表現する
• ✅ presence は FluentPresenceBadge を slot で重ねる
• ✅ active state は Active と ActiveAppearance で表現する
• ✅ interactive な Avatar は OnClick 時に基本的なキーボード対応が入る

Fluent UI 2 の設計ガイドを見ながら Blazor 側へ落とし込むときは、「今見ているのが v4 なのか v5 なのか」を最初に確認するのが大切だと改めて感じました。私自身もここは一度混同したので、同じポイントで悩む方の助けになればうれしいです。🚀

参考リンク

• Fluent UI 2 Avatar usage
• Fluent UI Blazor v5 Avatar demo
• Fluent UI Blazor releases
• FluentAvatar.md (v5.0.0-RC-3)
• FluentAvatar.razor.cs (v5.0.0-RC-3)
• FluentAvatar.razor (v5.0.0-RC-3)
• PresenceBadgeOnAvatar.razor (v5.0.0-RC-3)