お客様の声のページを作るときのデザイン事例15選

お客様の声を集めても、「どんなデザインで表示すればいいか分からない」と悩む方は多いです。テキストを並べるだけでは信頼感が伝わらず、せっかくの声がもったいない状態になってしまいます。

この記事では、信頼感が高まるデザインの原則と、業種別のデザイン事例15パターンを紹介します。

信頼感が高まるデザインの5原則

原則1: 顔写真またはアバターを入れる

テキストだけの声と、顔写真付きの声を比べると、後者の方が圧倒的に信頼感が高まります。顔写真が使えない場合は、お客様の名前の頭文字をアバターとして表示するだけでも効果があります。「実在する人が言っている」というビジュアルの証拠が大切です。

原則2: 名前と属性を明記する

「Aさん」よりも「田中さん（フリーランス・Webデザイナー）」の方が具体的で信頼できます。お客様の了解を得た上で、できるだけ具体的な属性（職業・業種・地域など）を明記しましょう。

原則3: 星評価は5つ星のみに絞らない

5つ星のみを並べると、「本当は操作されているのでは？」と疑われることがあります。4.5〜5つ星を混ぜる方が、むしろリアリティが増して信頼度が上がります。

原則4: 具体的な数字や成果を含む声を優先する

「よかったです」よりも「問い合わせが2倍になりました」の方がインパクトがあります。成果や変化が数字で表現された声は、見込み客に「自分もこうなれる」というイメージを持ってもらいやすくなります。

原則5: 見やすい余白と読みやすいフォント

声が詰め込みすぎていると読む気が失せます。一つひとつのカードに十分な余白を設け、本文は16px以上で行間を広めにとるのがコツです。

業種別デザイン事例15選

Webデザイン・制作系

事例1: Wall of Love（カード型グリッド） 複数のカードをグリッド状に並べるデザインです。「これだけ多くの方に使っていただいています」という量のインパクトを伝えるのに最適です。ポートフォリオサイトやサービスサイトの「お客様の声」専用セクションに向いています。

事例2: 大きな引用デザイン 一番インパクトのある声を大きく表示するシンプルなデザインです。「"このサービスのおかげで売上が3倍になりました"」のように引用符で囲み、フォントサイズを大きくして目立たせます。ファーストビュー直下に置くのが効果的です。

事例3: ビフォーアフターカード 「依頼前」と「依頼後」の変化を並べて表示するデザインです。お客様の声に「〜に悩んでいたが、〜が解決した」というストーリー性を持たせると、見込み客に刺さります。

コーチ・コンサル系

事例4: タイムライン型 継続的なサポートを提供している場合、「1ヶ月後」「3ヶ月後」「6ヶ月後」というタイムライン形式で複数の声を並べると、成果の変化が伝わります。長期間のプログラムや継続コーチングに特に効果的です。

事例5: 動画サムネイル付き お客様が動画で語っているサムネイルと、テキストの要約を組み合わせるデザインです。動画は信頼性が最も高い形式で、「本当にいる人が語っている」というリアリティが伝わります。

事例6: インタビュー記事カード 顔写真・名前・一言コメントとともに「詳しくはこちら」というリンクを設けるデザインです。クリックすると導入事例ページが開きます。BtoBサービスで詳しい事例を掲載したい場合に有効です。

EC・商品販売系

事例7: 商品画像付きレビューカード 購入した商品の画像と一緒にレビューを表示するデザインです。「この商品を使った人の声」というコンテキストが明確になります。

事例8: 星評価サマリー 「★4.8（口コミ127件）」という集計を大きく表示し、その下に個別の声を並べるデザインです。数字の信頼感と個別の声のリアリティを組み合わせた最強パターンです。

事例9: 写真投稿型（UGC風） お客様が実際に使っている写真とコメントを並べるデザインです。SNSの投稿をそのまま転載しているような雰囲気が出て、リアリティが高まります。

飲食・美容系

事例10: ポップアップ型 ページの端にポップアップとして声を1件ずつ表示するデザインです。「○○さんが先ほどご来店されました」という形式で、リアルタイム性の演出ができます。予約サイトや来店促進のLPに向いています。

事例11: SNS風カード Twitter/X風のデザインで声を表示するパターンです。「@〇〇より」という表示とともに、実際のSNS投稿のような見た目にします。若いターゲット層に親しみやすいデザインです。

事例12: マップ + 声の組み合わせ 地域のマップと「〇〇エリアから来ました！」というお客様の声を組み合わせるデザインです。来店エリアの広さを視覚的に伝えられます。

フリーランス・個人事業主系

事例13: プロジェクト実績カード 「プロジェクト名」「業種」「期間」と一緒に声を表示するデザインです。ポートフォリオサイトで実績と声をセットで見せると、信頼感が倍増します。

事例14: カルーセル（横スクロール） 声を横にスライドする形式で表示するデザインです。限られたスペースに多くの声を収められ、LPのワンセクションとして組み込みやすいです。

事例15: ミニアバター + 一言コメント ヘッダーやサイドバーに小さく「田中さん：対応が丁寧でした」のような形で表示するコンパクトなデザインです。ページのさまざまな場所に分散して配置することで、常に視野に入るようになります。

やってはいけないNGデザイン3選

NG1: 匿名の声のみを並べる

「30代女性」「○○業界のAさん」など、匿名性が高すぎる声だけを並べると、「作り話では？」と疑われます。少なくとも名字と職業は明記できるよう、事前にお客様に確認しておきましょう。

NG2: テキストが詰め込みすぎ

声を多く掲載しようとして、フォントを小さくしたり余白を詰めたりすると、逆に読む気が失せます。5〜6件の声を広々と表示する方が、10件以上を詰め込むより効果的です。

NG3: 声が古いまま放置

「2年前の声しかない」という状態は、「最近はどうなんだろう？」という不安を生みます。定期的に新しい声を追加し、古い声と新しい声をバランスよく表示しましょう。

こえポストのテンプレートで簡単に再現する方法

上で紹介したデザインの多くは、こえポストのウィジェット機能で実現できます。

こえポストでお客様の声を収集・承認する
ウィジェット作成画面からデザインを選択（Wall of Love、カルーセル等）
カラーやフォントをサービスのブランドに合わせてカスタマイズ
生成されたiframeコードをサイトのHTMLに貼り付ける

コーディングの知識は不要で、どんなウェブサイトにも対応しています。まずは無料プランで試してみてください。