引用スタイルお客様の声
大きな引用デザインに、アバター写真・氏名・会社名を添えたお客様の声セクションです。各証言は blockquote 要素で囲み、本文を p 、発言者情報を footer 内の cite に収めるという、引用の意味づけに沿った構造になっています。
このパーツの使いどころと実装ポイント
大きな引用デザインに、アバター写真・氏名・会社名を添えたお客様の声セクションです。各証言は blockquote 要素で囲み、本文を p、発言者情報を footer 内の cite に収めるという、引用の意味づけに沿った構造になっています。カードは display:flex の横スクロール領域に並び、scroll-snap-type:x mandatory で1枚ずつ気持ちよく停止します。アバターは Unsplash の人物写真です。
向いている場面
サービスサイトの信頼性アピール、BtoBの導入事例、店舗やサロンの利用者の声など、第三者の評価で背中を押したい場面に向きます。横スクロールなので、証言を3件以上ためても縦の領域を圧迫しません。
カスタマイズと注意点
- カードは
flex:0 0 280pxで固定幅のため、複製すれば自然に横へ連なります。証言文・氏名・会社名・写真を差し替えて使います。 - お客様の声は実在の許諾済みの内容を使い、アバターも実在のストック人物写真を用います。AI生成顔や架空のペルソナは避けてください。
blockquoteとciteを使うことで「誰の発言か」が意味的に伝わります。写真のaltには人物の役割が分かる説明を入れておくとアクセシブルです。
よくある質問
お客様の声は何件まで載せられますか？
件数に上限はありません。カードは固定幅で横スクロール領域に並ぶため、3件以上ためても縦方向の高さは変わりません。スクロールスナップが効いているので、増やしても1枚ずつ気持ちよく閲覧できます。
アバター写真はどんな画像を使うべきですか？
実在のストック人物写真や、許諾を得たお客様本人の写真を使ってください。AIで生成した顔や架空のペルソナは信頼性を損なうため避けます。alt属性には人物の役割が伝わる説明を入れておくと、読み上げ環境でも理解しやすくなります。