信頼が伝わるお客様の声カードのデザイン
同じお客様の声でも、見せ方しだいで信頼感が大きく変わります。本文にベタ書きするのと、星評価・名前・写真をきれいに配置した“声カード”で見せるのとでは、伝わる説得力がまるで違います。この記事では、読まれて信頼される声カードのデザインのコツを、レイアウト・星評価・名前・写真の配置、フォントや余白、そして避けたいNGデザインまで、すぐ真似できる形で解説します。
声カードに入れたい4つの要素
信頼が伝わる声カードには、共通して入っている要素があります。次の4つをそろえるだけで、ぐっと“本物”に見えます。
- 本文：声の主役。読みやすい行間で、要点が一目で入る長さに。
- 星評価：★の数で評価がひと目で伝わり、視線を引きつけます。
- 名前・属性：「〇〇市・40代女性」など。書き手が実在する手がかりになります。
- 写真・アイコン：顔写真やイニシャルアイコン。あるだけで本物感が一段上がります。
1レイアウトは「星 → 本文 → 名前」の縦並びに
視線は上から下へ流れます。まず星評価を上に置いて目を引き、続いて本文、最後に名前や写真という縦の流れにすると、自然に読み進められます。本文は左揃えが基本。中央揃えは見出し1行なら良いですが、長文だと読みづらくなります。
2名前と写真は本文の「下」にセットで
名前と写真(またはイニシャルのアイコン)は、本文の下にまとめて置くのが王道です。写真は丸く小さめに、名前の横に添えると見やすくなります。顔出しが難しい場合はイニシャルや属性表示でも十分。大切なのは「誰の声か」が伝わることです。
3余白とフォントで「読みやすさ」を作る
詰め込みすぎは禁物です。カードの内側にしっかり余白(パディング)をとり、行間も広めにすると、それだけで上品に見えます。フォントは本文を14〜16px程度の読みやすいサイズに。装飾的な書体は避け、サイト全体と同じフォントでそろえると、自作感が消えて統一感が出ます。
4カードに統一感を持たせる
複数のカードを並べるときは、高さ・角の丸み・枠線・影をそろえるのがコツです。バラバラだと素人っぽく見え、声の信頼まで下がります。背景は白か淡いグレー、枠は薄い線か軽い影で囲うと、整って見えます。ブランドカラーは星やアイコンに少しだけ使う程度に留めると上品です。
避けたいNGデザイン
良かれと思った装飾が、かえって信頼を下げてしまうことがあります。次のパターンには注意しましょう。
埋め込みで「整ったカード」をそのまま使う
デザインを一からCSSで整えるのは手間がかかります。お客様の声を管理しているツールの埋め込みコードを使えば、星評価・名前・写真が整ったカードで自動表示され、上で紹介したコツがあらかじめ反映された見た目になります。新しい声を承認すれば中身も自動で増えていきます。
<!-- お客様の声カード --> <div id="koevita-testimonials" data-layout="cards"></div> <script src="https://koevita.com/embed/あなたのID.js" async></script>
よくある質問
Q. 顔写真がないと信頼されませんか？
Q. 星評価は必ず入れたほうがいいですか？
まとめ
信頼が伝わる声カードは「星 → 本文 → 名前・写真」の縦並びを基本に、余白をたっぷり、フォントはサイトと統一、色や飾りは控えめにするのが鉄則です。派手な装飾はかえって本物感を下げます。一から整えるのが大変なら、埋め込みコードを使えば、これらのコツが反映された整ったカードをそのまま並べられます。
関連記事: お客様の声の集め方｜依頼メールの文例つき5ステップ