横並び口コミカードセクション
これは、お客様の声を 3枚のカードで横並びに見せる口コミセクション です。各カードは article 要素で、星評価（インライン SVG のアイコン）・本文・氏名や会社名で構成します。土台は display:grid の repeat(3,1fr) で均等3列、カード内は flex-direction:column…
このパーツの使いどころと実装ポイント
これは、お客様の声を3枚のカードで横並びに見せる口コミセクションです。各カードは article 要素で、星評価（インライン SVG のアイコン）・本文・氏名や会社名で構成します。土台は display:grid の repeat(3,1fr) で均等3列、カード内は flex-direction:column で縦に積み、box-shadow でわずかに浮かせて分離感を出しています。セクション全体は薄い背景色（#fafafe）を敷き、白いカードとの対比で視認性を高めているのが特徴です。星は aria-label="5点満点" を付けて評価の意味を補助しています。
向いている場面
- 制作会社やコンサルの「導入企業の声」「お客様の声」
- サロン・クリニック・スクールの利用者レビュー
- ECサイトの商品レビューや、採用サイトの社員インタビュー抜粋
カスタマイズと注意点
カード枚数は grid-template-columns の列数で調整でき、4枚以上にする場合は repeat(auto-fit,minmax(...)) に変えると自動折り返しになります。モバイルでは1列の縦積みに切り替わります。アバター画像を使う場合は実在のストック人物写真を使い、AI 生成顔や架空のペルソナは避けてください。口コミ本文も実際にいただいた声をベースにし、捏造した証言は信頼を損なうので使わないことが重要です。星評価は SVG なので、評価の数だけアイコンを並べ、半端な点数は半分塗りのアイコンを別途用意して表現します。
よくある質問
口コミカードのアバターはどんな画像を使うべきですか？
実在のストック写真サービスの人物画像を使うのが基本です。AIで生成した顔や架空の人物を載せると、見る人が気づいたときに一気に信頼を失います。可能なら実際のお客様の許可を得た写真が最も望ましく、難しい場合はイニシャルやイラストアイコンで代替する方が誠実です。
星評価で4.5のような半端な点数は表現できますか？
できます。星はインラインSVGアイコンなので、満点分のアイコンを並べたうえで、半分だけ塗ったアイコンを用意すれば4.5などの中間評価を示せます。aria-labelに「4.5点満点中」のように具体的な数値を入れておくと、スクリーンリーダー利用者にも正確に伝わります。