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

@tomokusaba(Tomomitsu Kusaba)Team Tea & Water

Fluent UI 2 の Rating を理解する — Fluent UI Blazor 5 と比較する評価 UI の設計とアクセシビリティ

Posted at 2026-06-16

はじめに 🌟

Fluent UI 2 の Rating は、ユーザーの感情（user sentiment）を星のアイコンで伝えるためのコンポーネントです。
商品レビューや満足度調査など、評価を「見せる」場面と「入力させる」場面の両方に対応しています。

本記事では、まず Fluent UI 2 とは何かを短く整理し、これまでの Fluent UI 2 シリーズをすべて紹介します。
そのうえで、Fluent UI 2（React）と Fluent UI Blazor 5 の Rating を比較しながら、種類・動作・レイアウト・アクセシビリティ・コンテンツ設計まで丁寧に解説します。

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

Fluent UI 2 とは

Fluent UI 2 は、Microsoft が提供するオープンソースのデザインシステムおよびコンポーネントライブラリです。
Windows・Microsoft 365・Azure などの Microsoft 製品群に一貫した UI/UX を提供することを目的として設計されています。

React / Web Components / iOS / Android / Windows（WinUI）など複数のプラットフォーム向けに実装が提供されており、アクセシビリティ（WCAG 2.1 / ARIA）への対応が設計の根幹に組み込まれています。

公式サイト: https://fluent2.microsoft.design/

Fluent UI 2 シリーズ記事一覧

これまでに公開した Fluent UI 2 シリーズの記事を以下にまとめます 📚

Rating の種類 🌟

Fluent UI 2 の Rating には、用途に応じて 3 種類のバリアントが用意されています。

1. Rating display（標準）

フルアイコンセット（デフォルト 5 星）と評価値、レビュー件数を横並びで表示するタイプです。
スペースに余裕がある場面、たとえば商品詳細ページの評価欄や、レビュー一覧の集計欄などで使われます。

import { RatingDisplay } from "@fluentui/react-components";

export function ProductRating() {
  return (
    <RatingDisplay value={3.5} count={1200} />
  );
}

2. Rating（インタラクティブ）

ユーザーが星をクリック・タップして評価を入力するタイプです。
outlined スタイル（アウトライン型）のアイコンが使われ、ホバー・フォーカス・プレスの各状態に対応しています。
デフォルトサイズは XLarge で、タッチターゲットを十分に確保しながら操作しやすくなっています。

import { Rating } from "@fluentui/react-components";

export function UserRating() {
  return (
    <Rating defaultValue={0} />
  );
}

3. Rating display, compact（コンパクト）

アイコン 1 つ＋数値評価＋レビュー件数を最小限のスペースで表示するタイプです。
リスト型の商品一覧やカードの中など、横幅が限られる場面に適しています。

import { RatingDisplay } from "@fluentui/react-components";

export function CompactRating() {
  return (
    <RatingDisplay value={4.2} count={500} compact />
  );
}

動作（Behavior）⚙️

インタラクティブな Rating の状態

Rating（インタラクティブ）コンポーネントは、ユーザーの操作に応じて以下の状態を持ちます。

状態	説明
`hover`	マウスカーソルをアイコン上に移動したとき。ホバー中の星が強調表示される
`focus`	キーボードのタブキーでフォーカスが当たったとき
`pressed`	クリック・タップ中の瞬間状態

アイコンの塗り方

星アイコンは評価値に応じて 3 段階の外観で表示されます。

外観	意味
`empty`（空）	評価されていない星
`partially filled`（半分）	0.5 刻みの中間値（例: 3.5 の「3」番目の星は filled、「4」番目は empty）
`filled`（塗りつぶし）	評価済みの星

Rating display は非インタラクティブ

RatingDisplay は提出済みの評価を閲覧専用で表示するコンポーネントです。
ユーザーが値を変更することはできません。インタラクティブな入力が必要な場合は Rating を使います。

レイアウト（Layout）📐

アイコンサイズ

Fluent UI 2 の Rating アイコンは Fluent アイコンスケールに準拠しており、サイズバリエーションが定義されています。

サイズ	アイコン px	用途の目安
Small	16 px（default）	コンパクト表示、テキストとの混在
Medium	16 px	標準的なリスト・カード内
Large	20 px	詳細ページ、強調表示
XLarge	20 px（largest）	ユーザー入力時に推奨

XLarge はタッチターゲットを十分に確保でき、誤タップを防ぐため、インタラクティブな Rating のデフォルトサイズとして指定されています。

Fluent UI Blazor 5 との比較 🔄

FluentRatingDisplay のみ提供

Fluent UI Blazor 5 には FluentRatingDisplay（表示専用）のみが実装されています。インタラクティブなユーザー入力用の Rating コンポーネントは現時点では提供されていません。

React では Rating（入力）と RatingDisplay（表示）の 2 コンポーネントが使い分けられますが、Blazor を使う場合はユーザー入力フォームに Rating を組み込む際には別途カスタム実装が必要になります。

FluentRatingDisplay のパラメーター

パラメーター	型	説明
`Value`	`double?`	現在の評価値（例: `3.5`）。半星単位に丸められる
`Count`	`double?`	評価件数。ロケールに従い千区切りで表示
`Compact`	`bool?`	コンパクト表示モード（アイコン 1 つ＋数値）
`Max`	`byte?`	最大評価数（デフォルト `5`）
`Shape`	`Icon?`	カスタムアイコン（デフォルトは星）
`Color`	`RatingDisplayColor?`	`Marigold` / `Neutral` / `Brand`
`Size`	`RatingSize?`	`Small` / `Medium` / `Large`

Blazor のコード例

{{!-- 基本的な表示 --}}
<FluentRatingDisplay Value="3.5" />

{{!-- 評価件数を表示 --}}
<FluentRatingDisplay Value="3.5" Count="125644" />

{{!-- コンパクト表示 --}}
<FluentRatingDisplay Value="3.5" Compact="true" />

{{!-- 最大評価数を変更 --}}
<FluentRatingDisplay Value="3.5" Max="10" />

{{!-- カスタムアイコン（円形） --}}
<FluentRatingDisplay Value="3.5" Shape="@(new Icons.Filled.Size16.Circle())" />

{{!-- サイズ・カラー指定 --}}
<FluentRatingDisplay Size="RatingSize.Medium" Color="RatingDisplayColor.Marigold" Value="3.7" />

React と Blazor の機能比較

機能	Fluent UI 2（React）	Fluent UI Blazor 5
表示専用（RatingDisplay）	✅ `RatingDisplay`	✅ `FluentRatingDisplay`
ユーザー入力（Rating）	✅ `Rating`	❌ なし（現時点）
コンパクト表示	✅ `compact` prop	✅ `Compact` パラメーター
カスタムアイコン	✅	✅ `Shape` パラメーター
色カスタマイズ	✅	✅ `Color` パラメーター（3 種類）
サイズバリエーション	✅ Small〜XLarge	✅ Small〜Large

アクセシビリティ ♿

Rating コンポーネントのアクセシビリティ対応は、視覚的な情報と非視覚的な情報の両面から設計する必要があります。

WCAG 1.4.11 Non-text Contrast（3:1 コントラスト比）

星のアイコンはテキストではなく「非テキストコンテンツ」に分類されます。
WCAG 2.1 の Success Criterion 1.4.11 Non-text Contrast では、UI コンポーネントの視覚的な表示に 3:1 以上のコントラスト比を要求しています。

Fluent UI 2 のガイドラインでは、星評価に対して以下の 2 軸でのコントラスト確保を求めています。

軸	意味
Foreground to Background	星のアイコン色と背景色の比率
Selected to Unselected	塗りつぶし（filled）と空（empty）の星の区別

どちらも 3:1 以上の比率を維持することで、低視力ユーザーやコントラスト感度が低い環境での視認性を確保します。

visually-hidden クラスによる例外

ガイドラインには重要な例外が設けられています。

評価値が数値で明示（例: 3.5）されており、かつ visually-hidden クラスが適用されている場合、評価グラフィックは情報的な意味を持たなくなるため、コントラスト要件を回避できる。

visually-hidden（またはそれに相当するクラス）は、スクリーンリーダーには読み上げられるが画面には表示されないテキストを埋め込む技術です。
評価値（例: "評価: 3.5 / 5"）を visually-hidden テキストとして提供することで、スクリーンリーダーユーザーは数値情報を得られます。
このとき、視覚的な星グラフィックはあくまで「装飾」の扱いになるため、WCAG 1.4.11 の適用対象外となります。

つまり、数値テキストを視覚的に表示する（または visually-hidden で提供する）設計にすることで、アイコンのコントラスト要件を回避しつつアクセシビリティを担保するという設計が可能です。

インタラクティブな Rating での色の使い方

インタラクティブな Rating では、Marigold のような明るい色を rating value slot（選択済みのアイコンエリア）に使うことが推奨されています。
これはグラフィックだけに頼らず、色でもコンテキスト（「この星が選ばれている」）を伝えるための工夫です。

ただし、色だけで状態を伝えることは WCAG Success Criterion 1.4.1 Use of Color（色のみに依存した情報伝達の禁止）に抵触するため、形状・位置・テキストと組み合わせて伝える設計が大切です。

スクリーンリーダー対応のポイント

RatingDisplay や Rating のコンポーネントは、評価値を ARIA でアナウンスする仕組みを内部で持っています
インタラクティブな Rating では、フォーカス時に「現在の評価値 / 最大値」が読み上げられるように実装することが重要です
カスタムアイコン（Shape パラメーター）を使う場合は、アイコンに意味のある aria-label を付与することを検討してください

コンテンツ設計 ✍️

コンテンツ設計（Content design）は、Rating コンポーネントをどう使うかの「言葉と数字の設計」です。
数値や件数の見せ方が、ユーザーの信頼感と理解度に直結します。

Do ✅

数値評価は小数点 1 桁まで表示する

✅ 3.5 / 5
✅ 4.2

小数点以下を 1 桁に絞ることで、精度の高い情報を伝えつつ、数字が読みやすくなります。

レビュー件数を表示して信頼性を補完する

✅ ★★★★☆  3.5 (1,200)

件数がないと「1 人が 5 を付けた」のか「10 万人の平均が 5 だ」のか区別できません。
件数は評価の信頼性を示す重要な文脈情報です。

スペースが狭い場所ではコンパクト表示を使う

カードリストや検索結果などレイアウトが密な場所では Compact モードを使い、アイコン 1 つ＋数値に絞ります。

<RatingDisplay value={4.2} count={500} compact />

ユーザー入力には XLarge サイズを使う

タッチデバイスでの誤タップを防ぐため、インタラクティブな Rating には XLarge（デフォルト）を使います。

Don't ❌

精度を偽った数値を表示しない

❌ 3.547826...（多すぎる桁数）
❌ 4（整数のみ — 正確さが失われる）

過剰な桁数はノイズになり、逆に整数のみでは情報が欠落します。

件数なしで高評価を表示しない

❌ ★★★★★  5.0

件数が示されていない最高評価は、ユーザーに「サクラでは？」という疑念を抱かせることがあります。
必ず件数と組み合わせて表示します。

スペースが狭い場所でフル表示を無理やり詰め込まない

限られた幅にフルの星 5 つ＋数値＋件数を詰めると、文字が潰れて読めなくなります。
Compact モードへの切り替えを検討してください。

色だけで評価の高低を伝えない

色（例: 緑 = 高評価、赤 = 低評価）に頼った設計は、色覚異常を持つユーザーに伝わりません。
数値・アイコン・ラベルテキストで情報を補完します。

おわりに 🎉

Fluent UI 2 の Rating コンポーネントは、「見せる」と「入力させる」の 2 つの役割を明確に分けた設計が特徴的です。
RatingDisplay は提出済みの評価を表示するためのコンポーネント、Rating はユーザーが値を選択するためのコンポーネントと、責務が明確に分離されています。

アクセシビリティの観点では、WCAG 1.4.11 Non-text Contrast（3:1 コントラスト比）が重要なポイントです。
visually-hidden テキストを活用することで、評価グラフィックを装飾として扱い、コントラスト要件をクリアしながらスクリーンリーダーにも対応できる柔軟な設計が可能です。

Fluent UI Blazor 5 では現時点で FluentRatingDisplay（表示専用）のみが実装されており、インタラクティブな Rating はまだ提供されていません。
Blazor でユーザー入力用の Rating が必要な場合は、将来のアップデートを注視しつつ、カスタム実装で対応することになります。

次回も引き続き Fluent UI 2 のコンポーネントを深掘りしていきます 🚀

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