星評価（スターレーティング）とは、製品・サービス・施設・コンテンツの品質や満足度を、1〜5つ（またはそれ以上）の星マークで視覚的に表す指標です。

評価 3.6

一般的に、星の数が多いほど高評価を意味します。
現在ではオンラインショッピング、店舗検索、レビューサイトなどにおいて、ユーザーの意思決定に大きな影響を与える重要なUI要素のひとつになっています。

WEBサイトを制作していると、

• 商品レビューを表示したい
• 店舗の評価を分かりやすく見せたい
• ユーザーに直感的な満足度を伝えたい

といった場面で、星評価を導入したくなることがあります。

では、実際にどう実装するのがよいのでしょうか？

ここでは代表的な2つの方法を紹介します。

---

1. CSSのみで作る方法（シンプルで軽量）

もっとも簡単なのは、CSSだけで星評価を表現する方法です。

特徴

• 画像不要
• JavaScript不要
• 軽量で高速
• 実装が簡単

例えば：

• ★★★★★ の文字を使う
• 擬似要素で星を描画する
• linear-gradient で「3.6星」などの部分塗りを表現する

といった方法があります。

向いているケース

• 固定表示の評価（投稿済みレビューなど）
• 軽量なサイト
• パフォーマンスを重視する場合

「表示するだけ」なら、CSSで十分なことが多いです。

制作例

ここで紹介するのは擬似要素で★★★★★を使う方法です。

---

2. オリジナルの星画像を使う場合（JavaScriptで制御）

ブランドイメージに合わせたオリジナルデザインの星を使いたい場合は、JavaScriptで制御する方法が適しています。

特徴

• 自由なデザインが可能
• アニメーションも実装できる
• マウス操作による入力UIにも対応できる

例えば：

• マウスオーバーで星が光る
• クリックで評価を送信する
• 小数点評価（3.6など）を動的に描画する

といった実装が可能です。

向いているケース

• ユーザーが評価を入力するフォーム
• ブランドに合わせた独自デザイン
• 動きのあるインタラクションを作りたい場合

制作例

ここで紹介するのは、3.6なら、3つのフル描画の星＋1つの60%塗りの星を描く方法です。

---

星評価は、小さなUIパーツでありながら、ユーザーの意思決定に大きく影響する重要な要素です。

実装方法は大きく分けて、

• CSSのみでシンプルに作る
• JavaScriptで柔軟に制御する

の2パターン。

目的とサイトの設計思想に合わせて、最適な方法を選びましょう。