レビュー評価分布バー
平均★と、★5〜★1ごとの件数バーを表示。バーをタップするとその評価に絞り込み、対象レビューだけを表示する。商品ページの定番。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- レビュー件数が多い商品詳細
- 星の内訳でレビューを絞り込ませたい一覧
- 平均点だけでは偏りが伝わらない評価表示
- 避ける場面
- レビューが数件しかない商品（分布が意味を持たない）
- 絞り込み後の一覧を用意しない静的表示
- 構成要素
- 平均点
- 星表示
- 総件数
- 星別の行ボタン
- 件数バー
- 絞り込み表示
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab で ★5〜★1 の各行ボタンへ、Enter／Space で絞り込み。もう一度押すと解除
- 支援技術
各行は button＋aria-pressed で絞り込み中を伝え、aria-label に星と件数を持つ。星は aria-hidden で平均点と件数はテキスト。絞り込み文言は aria-live=polite。reduced-motion でバー伸長を止め即時表示
- 動き
読み込み時にバー幅が 800ms ease で伸びる。行背景 150ms
デザインの要点
- 平均点（40px）と分布を並べる。4.3 だけでは「★1 が 3% ある」偏りが見えず、分布だけでは総合が分からない
- バーは件数の割合で伸ばし、右端に実数も置く。割合だけだと 1,284 件と 12 件の信頼度の差が消える
- 行全体を button にして絞り込みに使う。バーだけを押させると当たり判定が 8px の細い線になる
- 読み込み時の 800ms 伸長は 2 段 rAF で発火させる。初期描画と同フレームだと遷移が起きない
実装メモ
平均評価と★別の件数バーを並べ、バーをタップすると擬似的にその評価で絞り込みます。Baymardの調査でも評価分布は必須要素とされる商品ページの定番UX。バー幅は読み込み後にwidthをアニメーションで伸ばしています。件数・レビューはダミーで、実運用では集計値と該当レビュー一覧を差し込みます。
コード（コピーして使えます）
<div class="rd-wrap">
<div class="rd-summary">
<div class="rd-avg" id="rd-avg">4.3</div>
<div>
<div class="rd-stars" id="rd-avg-stars" aria-hidden="true"></div>
<div class="rd-total">1,284件のレビュー</div>
</div>
</div>
<ul class="rd-bars" id="rd-bars"></ul>
<p class="rd-filter" id="rd-filter" aria-live="polite" hidden></p>
</div>