EC・商品
レビュー評価分布バー
平均★と、★5〜★1ごとの件数バーを表示。バーをタップするとその評価に絞り込み、対象レビューだけを表示する。商品ページの定番。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
平均評価と★別の件数バーを並べ、バーをタップすると擬似的にその評価で絞り込みます。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" hidden></p>
</div>