星評価付き 顧客の声カード

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

このパーツは、星 5 段階の評価・コメント本文・顧客プロフィールをひとまとめにしたカードを横 3 列で並べる「お客様の声」セクションです。星はインライン SVG で描かれ、trc__s にオレンジ色（#f59e0b）を当てて満点表現にしています。カードは display:grid の repeat(3,1fr) で並び、下部にはイニシャルを入れた円形アバター・氏名・所属を border-top で区切って配置します。アバターは画像ではなくグラデーション背景＋イニシャル文字なので、写真がなくても体裁が整います。

向いている場面

EC サイトのレビュー、サービスの利用者の声、セミナーやスクールの受講者コメントなど、第三者の評価で信頼性を高めたい場面に向きます。星評価とプロフィールがそろうことで、コメントの説得力が増します。

カスタマイズの勘所

• 星の数を減らすには、SVG の星を必要な数だけ残し、残りを薄い色の星に差し替えます。半端な評価を表現したいときは half star 用の SVG を用意します。
• アバターを実際の顔写真にする場合は、円形に object-fit:cover でクロップして使います。架空の人物画像は避け、実在する許諾済みの素材を使ってください。

レスポンシブでは 760px 以下で 1 列縦積みになります。コメントは長すぎるとカードの高さがそろわなくなるため、文量をある程度そろえると見栄えが安定します。