引用カード型お客様の声3列
このパーツは、お客様の声を3枚のカードで横並びに見せる導入実績セクションです。各カードは引用符アイコン・星評価・コメント本文・人物アバターで構成され、 grid-template-columns:repeat(3,1fr) で3列に整列します。
このパーツの使いどころと実装ポイント
このパーツは、お客様の声を3枚のカードで横並びに見せる導入実績セクションです。各カードは引用符アイコン・星評価・コメント本文・人物アバターで構成され、grid-template-columns:repeat(3,1fr) で3列に整列します。カードは display:flex の縦並びでコメント量が違っても下端がそろい、ホバーで浮き上がる軽い動きが付いています。星とアイコンはインラインSVGなので、フォント読み込みを待たずに表示されます。
向いている場面
- 制作会社やコンサルが、利用者の率直な感想で信頼を補強したいとき
- 店舗やサロンのサイトで来店客の評価を見せたいとき
- BtoBサービスで導入企業の担当者コメントを並べたいとき
差し替えどころは、コメント本文・氏名・肩書き・星の数、そしてアバター画像です。アバターは実在のストック人物写真を使い、AI生成顔や架空の人物は避けると信頼性が保てます。星評価は満点を装わず、実際の評価に合わせて数を調整してください。
実装上の注意
アバターの alt には誰のコメントかが伝わる説明を入れ、装飾の引用符アイコンには aria-hidden を付けて読み上げの邪魔をしないようにします。3列はタブレットで窮屈になりやすいので、中間幅で2列、スマートフォンで1列へ折り返すと読みやすくなります。コメントは要点を絞り、長すぎる場合はカードの高さがそろわなくなる点に注意してください。
よくある質問
お客様の声に使う人物写真はどう用意すればいいですか？
実在のストックフォトサービスの人物写真を使うのが安全です。AIで生成した顔や、実在しない架空のペルソナ写真は信頼性を損なうため避けてください。可能であれば本人の許諾を得た実際の写真が最も望ましく、難しい場合はイニシャルのアバターに切り替える方法もあります。
カードを3枚より増やしたい場合は？
HTMLの tc__card ブロックを必要な数だけ複製します。4枚以上にする場合は1行3列のままだと半端な行ができるため、グリッドを2列や4列に調整するか、横スクロールのカルーセルにする構成も検討してください。コメントが集まったら定期的に入れ替えると鮮度を保てます。