はじめに 🌟
Fluent UI 2 の Image は、単に画像を表示するだけの部品ではありません。画像をどのくらい目立たせるのか、何を伝える画像なのか、その意味を支援技術にどう伝えるのかまで含めて考える必要があります。
特に Image は、Button や Checkbox のように振る舞いがはっきりした部品よりも、「見た目の要素」として雑に扱われやすいのが難しいところです。ですが、公式の usage ページを読むと、Fluent UI 2 はここでも レイアウト と アクセシビリティ をかなり明確に案内しています。
この記事では、まず Fluent UI 2 とは何か を短く整理し、そのあとでこれまでの Fluent UI 2 シリーズを振り返ります。その上で、Fluent UI 2 の Image ガイダンスと Fluent UI Blazor 5 の FluentImage を比較しながら、使用法、機能差、レイアウト、アクセシビリティ、コンテンツの説明を整理します。特に後半は、alt テキストと decorative image の扱いを重点的に見ていきます。
参照した一次情報はこちらです。
- Fluent UI 2 Image usage
- Fluent UI Blazor 5 Image
- W3C WAI Images Tutorial
- W3C WAI Decorative Images
- W3C WAI Informative Images
Fluent UI 2 とは
Fluent UI 2 は、Microsoft の Fluent 2 デザインシステムに沿って UI を組み立てるための考え方とコンポーネント群です。見た目をそろえるだけではなく、情報の優先順位、操作の一貫性、アクセシビリティ まで含めて設計する点が特徴です。
そのため Image も、「画像が表示できるか」だけで評価するものではありません。ページのメッセージを補強しているのか、単なる飾りなのか、機能を表しているのかによって、説明のしかたも実装のしかたも変わります。
Fluent UI 2 の usage ページは、まさにその判断基準を与えてくれます。一方で Fluent UI Blazor の FluentImage は、Blazor からその考え方をどう実装するかを支える API です。今回の比較は、この 2 つの役割の違いを押さえるところから始めると分かりやすいです。
これまでの Fluent UI 2 シリーズ 🧭
ここまで、私は Fluent UI 2 をコンポーネントごとに少しずつ整理してきました。今回は抜粋ではなく、これまで書いてきたシリーズ記事をまとめて置いておきます。Image は、その流れの中でも特に アクセシビリティ と 意味づけ が前面に出るテーマです。
| テーマ | 記事 |
|---|---|
| 🧩 Accordion | Fluent UI 2 の Accordion を理解する |
| 👤 Avatar | Fluent UI 2 の Avatar を整理しつつ Fluent UI Blazor 5 でどう実装するか |
| 🏷️ Badge | Fluent UI 2 の Badge を理解する |
| 🗂️ Breadcrumb | Fluent UI 2 の Breadcrumb を理解する |
| 🔘 Button | Fluent UI 2 の Button を理解する |
| 🪪 Card | Fluent UI 2 の Card を理解する |
| ☑️ Checkbox | Fluent UI 2 の Checkbox を理解する |
| ⌨️ Combobox | Fluent UI 2 の Combobox を理解する |
| 🗨️ Dialog | Fluent UI 2 の Dialog を理解する |
| ➗ Divider | Fluent UI 2 の Divider を理解する |
| ⬇️ Dropdown | Fluent UI 2 の Dropdown を理解する |
| 🧱 Field | Fluent UI 2 の Field を理解する |
| ♿ アクセシビリティ実装 | Fluent UI 2 で始めるアクセシビリティ実装 |
| 🎨 色と WCAG | Fluent UI 2 のアクセシビリティを色から読む |
| 🎛️ Tokens | Fluent UI / Fluent 2 で raw 値より alias token を使うべき理由 ─ アクセシビリティ運用を強くする設計 |
Button や Field のような入力・操作系の記事、Avatar や Icon のような意味づけが重要な記事、色や tokens のような設計寄りの記事を通して、Fluent UI 2 の見方を少しずつ広げてきました。その中でも Image はより直接的で、画像そのものがコンテンツになることも多いため、何を見せるか と どう説明するか がそのまま使いやすさに直結します。
今回のゴール ✅
- ✅ Fluent UI 2 における Image の役割を理解する
- ✅ Fluent UI Blazor 5 の
FluentImageとの違いを整理する - ✅ レイアウト ガイダンスを実装へ落とし込めるようにする
- ✅ alt テキストと decorative image の扱いを判断できるようにする
- ✅ コンテンツの説明を「画像の名前」ではなく「意味の説明」として書けるようにする
Image は何を担うのか
Fluent UI 2 の usage ページでは、Image は写真やイラストのような画像を通して、メッセージを補強し、プロダクトやアプリのスタイルを表現するもの と説明されています。
ここで大事なのは、Image が単なる背景ではなく、文脈の一部だということです。画像が補助情報なのか、主情報なのか、視覚的な強調なのかによって、求められる説明も変わります。
W3C WAI の Images Tutorial でも、画像は目的に応じて informative、decorative、functional などに分けて考えるべきだと整理されています。実務でも、この分類で考えるとかなり迷いにくくなります。
| 種類 | 役割 | 基本方針 |
|---|---|---|
| 📘 Informative image | 情報そのものを伝える | 短く正確な alt を付ける |
| 🎨 Decorative image | 見た目だけを補う | 読み上げ対象から外す |
| 🛠️ Functional image | 操作や機能を表す | 見た目ではなく機能を説明する |
Fluent UI 2 の Image は、まさにこの判断を促すタイプのガイダンスです。次に、Blazor 側の FluentImage と比較しながら見ていきます。
Fluent UI 2 Image と Fluent UI Blazor FluentImage の比較
ここは少し前提が必要です。Fluent UI 2 側の Image ページは usage ガイダンスが中心で、コンポーネント API を細かく列挙するページではありません。一方、Fluent UI Blazor 5 の FluentImage は、Blazor コンポーネントとしてのパラメーターがはっきり用意されています。
つまり今回の比較は、設計判断のガイド と 実装 API の比較です。1 対 1 で対応する API の比較ではない点を先に意識しておくと、読み違えにくくなります。
| 観点 | Fluent UI 2 Image | Fluent UI Blazor FluentImage
|
|---|---|---|
| 🎯 主眼 | 画像をどう使うかのガイダンス | 画像をどう表示するかの API |
| 📝 説明の基本 |
alt で短く正確に説明する |
AlternateText で代替テキストを渡す |
| 📐 レイアウト |
shadow で prominence を与えられるが多用しない |
Width、Height、Block、Fit でレイアウトを調整できる |
| 🎨 見た目 | ガイダンス中心 |
Bordered、Shadow、Shape を指定できる |
| 🧩 柔軟性 | 使用判断が中心 |
ChildContent で複数画像や独自 img を入れられる |
| ♿ アクセシビリティ |
alt、重複回避、decorative image の扱いを明示 |
API はあるが、説明の質は実装者が決める必要がある |
| 🔧 実装の性格 | React 側の設計基準 | Blazor ラッパーの実装手段 |
この 2 ページで確認できる範囲では、Fluent UI 2 側は「画像の意味をどう扱うか」が中心です。Blazor 側はそこに加えて、サイズ、形状、枠線、影、複数画像といったUI 実装上の便利さがかなり前に出ています。
使用法の違い
使用法の違いを一言でまとめると、次のようになります。
- Fluent UI 2: どう説明すべきか、どう置くべきかを考える
- Fluent UI Blazor: その考え方をどのパラメーターで書くかを考える
たとえば Blazor 側の Fit は、画像の見せ方を API で選びやすくしていますが、これは「Image の意味」を決める機能ではありません。Shape も同じで、Blazor ラッパーが CSS 的な調整をしやすくしている便利機能です。
そのため、FluentImage に機能が多いからといって、そのままアクセシブルになるわけではありません。意味づけは Fluent UI 2 側のガイダンスで考え、実装は Blazor 側の API で丁寧に書く、という役割分担で見るのが自然です。
レイアウト ガイダンス 📐
Fluent UI 2 の Image usage で、レイアウトに関して明示されているのは shadow です。画像をより目立たせたいときに shadow を使えますが、情報量の多いレイアウトになりやすいため、使いすぎないよう案内されています。
これはかなり実務的です。画像は目立たせればよいわけではなく、どこを見てほしいかを画面全体で調整する必要があります。すべての画像に影を付けると、情報の優先順位が崩れます。
Blazor 側では、この判断を実装に落とし込むためのパラメーターがそろっています。
-
Shadow: 影を付ける -
Block: コンテナー幅いっぱいに広げる -
Width/Height: サイズを明示する -
Fit: 収まり方を指定する -
Shape: 角丸や円形など形状を変える
特に Block は、コンテンツ画像を幅いっぱいに見せたいときに便利です。ただし、意味の弱い装飾画像まで大きく広げると、本文より先に視線を奪ってしまうことがあります。その画像を本当に強調したいのか を先に決めるのが大切です。
<div style="width: 320px;">
<FluentImage Source="/images/dashboard-summary.png"
AlternateText="新しいダッシュボードの概要を示すスクリーンショット"
Block="true"
Fit="ImageFit.Contain"
Shadow="true" />
</div>
この例では、影と幅いっぱいの表示で重要な画像として扱っています。逆に、本文の横に置く補助図版なら、ここまで強い見せ方をしないほうが自然です。
アクセシビリティ（最重要）♿
ここがこの記事でいちばん大事なところです。Fluent UI 2 の usage ページは、Image のアクセシビリティについてかなり短い文章で書いていますが、要点はとても強いです。
1. alt は短く正確に、文脈込みで書く
Fluent UI 2 では、alt は 短く正確に、1〜2 文で画像と文脈を説明するよう案内されています。単に「写真」「画像」と書くのではなく、その画像がその場で何を伝えているのかを書く必要があります。
また、その画像が機能を表しているなら、その機能も説明すべきだとされています。W3C WAI でも functional image は「見た目」ではなく「機能」を説明するよう整理されています。
たとえば、プリンターの絵柄を見せていても、利用者が知りたいのは「プリンターの画像がある」ことではなく、「印刷できる」ことです。
2. 画面上の文言を alt で繰り返さない
Fluent UI 2 の usage ページでは、ページ上に既にある情報を alt に繰り返し書かないよう明記されています。これはスクリーンリーダーが同じ内容を二度読む原因になるからです。
たとえば、見出しのすぐ下に説明済みの製品写真があるなら、alt はその文脈で補うべき情報だけに絞った方が自然です。すでに本文で十分に説明しているのに、alt でも同じ説明をすると、かえって冗長になります。
3. decorative image の扱いは、空 alt と role を混同しない
Fluent UI 2 の usage ページでは、装飾だけの画像は role="presentation" を使って支援技術から隠すよう案内されています。
一方で W3C WAI の Decorative Images チュートリアルでは、<img> 要素で純粋に decorative な画像を表す場合、空の alt (alt="") を付けることを推奨しています。alt を省略するのはよくありません。また、可能であれば decorative image 自体を CSS 背景画像で表現することも候補になります。
実装では、この 2 つを同じものとして雑に扱わない方が安全です。Fluent UI 2 のガイダンスは「decorative image を読ませない」という意図を示していて、W3C WAI は HTML の <img> としてどう表すかを具体化しています。<img> を自分で書くなら、まず alt="" を基準に考えると整理しやすいです。
つまり重要なのは、画像を読ませるべきか、読ませないべきかを最初に決めることです。ここが曖昧だと、本文に不要なノイズを増やしたり、逆に大事な情報を無音にしたりします。
4. ChildContent では AlternateText に頼れない
これは Fluent UI Blazor 側の重要な注意点です。FluentImage のドキュメントでは、ChildContent に独自の img を入れた場合、その画像にはコンポーネントのパラメーターが適用されますが、Style、Class、Width、Height、AlternateText は引き継がれません。
つまり、複数画像やカスタム画像を ChildContent で書く場合、各 img ごとに alt を自分で書く必要があります。
FluentImage を使っていても、ChildContent の中に入れた画像まで自動でアクセシブルになるわけではありません。ここは見落としやすいので要注意です。
<FluentImage Shape="ImageShape.Rounded">
<img src="/images/report-summary.png"
alt="6 月の売上が 5 月より増えている折れ線グラフ" />
<img src="/images/report-detail.png"
alt="売上の内訳を示す棒グラフ" />
</FluentImage>
このケースでは、AlternateText を親に書いても子の img には伝わりません。画像ごとの意味を個別に説明する必要があります。
コンテンツの説明は「何が写っているか」だけで終わらせない ✍️
alt や説明文で迷ったときは、画像の見た目をそのまま言い換えるのではなく、その画像がこの文脈で何を伝えるのか を書くとぶれにくいです。
W3C WAI の Informative Images でも、画像の種類によっては「写っている物体の説明」より、「その画像が補っている情報」や「伝えたい印象」を書く方が適切だと説明されています。
| 場面 | 避けたい書き方 | 書きたい内容 |
|---|---|---|
| 👤 プロフィール写真 | 人物の画像 |
山田太郎のプロフィール写真 |
| 📈 記事内の図版 | グラフ |
売上が 1 月から 3 月にかけて増加していることを示す簡単な折れ線グラフ |
| 🎨 装飾バナー | 背景画像 |
alt="" を使って読ませない |
| 🛠️ 機能を表す画像 | プリンターの画像 |
印刷 |
特に informative image では、「何が写っているか」だけだと不十分なことがあります。たとえば簡単な傾向を示す折れ線グラフなら、線があることよりも、何の変化を読ませたいのか が大事です。一方で、詳細なグラフや複雑な図表は、alt だけで完結させず、本文や近接テキストでより完全な説明を補う方が安全です。
逆に decorative image に説明を書きすぎると、本文の理解に不要な読み上げが増えます。ここでもやはり、画像の目的を先に決めることが大事です。
Fluent UI Blazor での実装例 💻
基本的な画像
まずは、意味のある画像に AlternateText を付ける基本形です。
<FluentImage Source="/images/team-photo.jpg"
AlternateText="開発チームの集合写真"
Width="320px"
Height="200px" />
AlternateText は「画像がある」ことを伝えるためではなく、その画像が何を補足しているか を伝えるために使います。
レイアウトを調整する例
<div style="width: 360px;">
<FluentImage Source="/images/product-overview.png"
AlternateText="製品の主要な構成を示す図"
Block="true"
Fit="ImageFit.Contain"
Bordered="true"
Shadow="true" />
</div>
ここでは Block、Fit、Bordered、Shadow を組み合わせています。Blazor 側はこうした見せ方を API で書きやすいのが利点です。
カスタム content を使う例
<FluentImage Shape="ImageShape.Circular">
<img src="/images/user-a.jpg" alt="田中花子のプロフィール写真" />
<img src="/images/user-b.jpg" alt="鈴木健太のプロフィール写真" />
</FluentImage>
このように ChildContent を使うと柔軟ですが、その分、説明責任も実装者に戻ります。AlternateText を 1 回書けば済むわけではない点が、通常の Source 利用との大きな違いです。
まとめ ✅
Fluent UI 2 の Image は、画像をどう見せるか以上に、画像をどう意味づけるか を考えさせるガイダンスでした。レイアウト面では shadow を使った強調が示されつつも、多用しないように制御されています。
一方、Fluent UI Blazor 5 の FluentImage は、Width、Height、Block、Fit、Bordered、Shadow、Shape、ChildContent などを通して、その考え方を Blazor から実装しやすくしています。ただし、便利な API があることと、意味のある alt を書けていることは別問題です。
特に重要なのは次の 3 点です。
- informative image には、短く正確で文脈に合った説明を書く
- decorative image は読ませない方針を明確にする
-
ChildContentを使うときは各imgのaltを自分で書く
Image は地味な部品に見えますが、読みやすさとアクセシビリティに与える影響はかなり大きいです。ここを丁寧に扱うと、UI 全体の質が一段上がります。