星評価付きレビューカード

このパーツの使いどころと実装ポイント

このパーツは、5 段階の星評価・投稿者のアバター・日付・コメントをひとまとめにしたレビューカードです。星は SVG アイコンを横並びにして表現し、display:grid の 2 カラムでカードを並べます。各カードは border-radius と淡い box-shadow で浮かせ、アバターはグラデーションの円で代用しているので、実写の人物写真に差し替えると一気に説得力が増します。

向いている場面

• EC サイトの商品ページで購入者レビューを見せたいとき
• 飲食店・サロン・クリニックなど店舗サイトの来店者の声
• BtoB サービスで導入企業の評価を点数とコメントで示したいとき

カスタマイズの勘所

星の数は SVG アイコンを増減させて表現します。半分の星を出したい場合は、塗りつぶした星と枠線だけの星を組み合わせるか、横幅をクリップする方法が定番です。アバターのグラデーション円は実在の顔写真かイニシャル表示へ置き換えると信頼感が上がります。レイアウトは 600px 以下で 1 カラムへ折り返す設計です。

注意点として、星だけでは評価値がスクリーンリーダーに伝わりません。aria-label="5段階中4" のような補助テキストを添えると、目で見えない利用者にも点数が届きます。架空のペルソナや生成した顔写真は信頼を損なうため、実在のレビューを使うのが基本です。