マガジン型お客様の声
「お客様の声」を雑誌の特集ページのように見せるレイアウトです。上段に大きな引用ブロックを1件だけ大きく置き、下段に3件のカードを grid-template-columns:repeat(3,1fr) で並べる二段構成にしています。
このパーツの使いどころと実装ポイント
「お客様の声」を雑誌の特集ページのように見せるレイアウトです。上段に大きな引用ブロックを1件だけ大きく置き、下段に3件のカードを grid-template-columns:repeat(3,1fr) で並べる二段構成にしています。最も訴求したい声を主役にし、補強する声を脇に添えることで、ただ証言を羅列するよりも説得の流れが生まれます。
構造の特徴
主役の引用は <blockquote> と <footer> で意味付けされ、背景には ::before で大きな引用符を装飾として重ねています。各証言には顔写真・氏名・肩書きがセットになっており、誰の発言かが一目で伝わります。
向いている場面と注意
- BtoB サービス・制作会社の導入事例
- 飲食・店舗ビジネスの利用者レビュー
- スクールやサロンの受講者の声
カスタマイズは、主役の引用文を一番強い一言に差し替えるのが効果的です。証言・氏名・肩書きは必ず実在の許諾済みデータを使い、写真も本人のものを使ってください。架空の声や生成顔は信頼を損ないます。レスポンシブでは3列カードが横に詰まりやすいので、狭い画面では1列に折り返す指定を加えると読みやすくなります。引用符の装飾は aria-hidden 相当の飾りなので、読み上げの邪魔にならないよう本文と分けています。
よくある質問
証言は架空のものを入れても問題ないですか。
おすすめしません。お客様の声は信頼を担保する要素なので、実在し許諾を得た声・氏名・肩書きを使ってください。写真も本人のものを使い、生成した顔は避けるのが安全です。
下段のカードを3件以外にしたいです。
可能です。グリッドはrepeat(3,1fr)で3列に固定していますが、列数の数字を変えれば2列や4列にできます。件数が多い場合は1列ずつ折り返す指定を足すと崩れません。