お客様の声カード（吹き出し風）
大きなクォーテーション記号を添えた引用文に、お客様の写真・名前・肩書きを組み合わせた お客様の声カード です。導入実績や口コミセクションに置くことで、第三者の言葉として信頼感を伝える部品です。 これは CSS のみ で作られており、JavaScript は不要です。
解説
大きなクォーテーション記号を添えた引用文に、お客様の写真・名前・肩書きを組み合わせたお客様の声カードです。導入実績や口コミセクションに置くことで、第三者の言葉として信頼感を伝える部品です。
これは CSS のみで作られており、JavaScript は不要です。左上に浮く大きな引用符は position:absolute で配置し、セリフ体の Georgia で雑誌のような格を出しています。本文は line-height:1.85 と広めの行間で、長めの感想でも読みやすくしています。下部の発言者エリアは上に区切り線を引き、丸いアバターと名前・肩書きを横並びにして、誰の声かをはっきり示しています。
使う場面とカスタマイズ
- サービスサイトの導入事例・利用者の感想セクション
- LPの信頼補強や、ECの購入者レビュー
- 引用符の色
#f5576c、本文の行間、アバターの中身を調整
複数並べるときは grid でカードの高さをそろえると整います。引用は実在の許諾を得た声を使い、写真には人物名を含む alt を添えてください。なお偽の証言や架空の人物・合成顔は信頼を損なうため使わず、必ず本物のお客様の声を掲載することが大切です。意味的には blockquote で囲むと引用であることが機械にも伝わります。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
引用符の色やフォントを変えられますか
はい。引用符はts-card__quoteのCSSで色とフォントを指定しています。colorをブランドカラーに、font-familyを別のセリフ体やサンセリフに変えるだけで雰囲気が変わります。サイズもfont-sizeで自由に調整できます。
アバターを文字でなく写真にしたい
アバター部分のイニシャル文字を、img要素や背景画像に置き換えます。丸く切り抜くにはborder-radius:50%とoverflow:hiddenを使い、写真にはobject-fit:coverを当てると縦横比を保ったまま円形に収まります。