お客様の声のデザインは、レイアウトの「型」と、載せる「媒体」の2つで決まります。本記事では、実際にブラウザで描画した10パターンのレイアウト見本を並べています。あわせて、目的別の選び方と、ホームページ・チラシ・営業資料・SNS・動画それぞれの使い分けまでまとめました。
なお、声の文章そのものの書き方はお客様の声の書き方、依頼から回収までの手順はお客様の声の集め方、導入事例記事全体のデザインは導入事例のデザイン参考で扱っています。本記事は見せ方とレイアウトに絞ってご説明します。
代表的な10の型を、実際に描画したレイアウトで見比べられます。
以下はすべて画面に描画したデザインの見本です。掲載しているコメントは架空の内容で、実在する企業・個人の声ではありません。自社の媒体や声の内容に合わせて型を選ぶ参考にしてください。
複数の声を等しく並べ、量で信頼を伝える基本の型です。1枚あたりの情報量をそろえると、全体が整って見えます。
導入前は問い合わせ対応が属人化していましたが、運用が標準化され、新任担当者でも同じ品質で返せるようになりました。社内の引き継ぎも短くなっています。
検討時に一番不安だったのは定着でしたが、初期設定を一緒に進めてもらえたので、現場が自然に使い始めました。導入して正解だったと感じます。
見積もり段階から要望を丁寧に整理してもらえました。決裁者への説明資料も用意していただき、社内の合意形成がスムーズに進みました。
※見本用のダミー文です
向いている場面｜声の数を見せたいトップページ・お客様の声一覧。件数の多さがそのまま安心感になる場面。
作るときのポイント｜文字数を各カードでそろえ、属性（業種・部署）の粒度を統一します。3の倍数で並べると余白が整います。
大きな引用符で「これは生の言葉だ」という印象を強め、1件を主役として見せる型です。象徴的な一言があるときに効きます。
「入れて終わり」で放置されるツールは過去に何度も見てきました。今回は運用が回るところまで並走してもらえたので、現場に定着しました。
※見本用のダミー文です
向いている場面｜LPのファーストビュー付近や、章の区切りに置く「決め台詞」。印象に残る一言があるとき。
作るときのポイント｜引用符は装飾なので薄めの色で。本文は短く区切り、誰の言葉かを必ず添えて説得力を担保します。
話し手の存在を見せ、会話のように読ませる型です。実際は写真を使いますが、ここでは頭文字の丸アイコンで代替しています。
※見本用のダミー文です
向いている場面｜担当者インタビューを親しみやすく見せたいページ。人柄や現場感を伝えたいとき。
作るときのポイント｜写真は表情が見える明るいものを。写真を出せないときは頭文字アイコンやシルエットで代替し、無理に顔写真を使いません。
成果を大きな数字で見せ、一目で価値を伝える型です。声のコメントは数字を裏づける補足として添えます。
定型対応をまとめたことで、1件あたりの手間が大きく減りました。
初期設定を伴走してもらい、想定より短い期間で運用を開始できました。
現場の負担が軽くなり、来期も続けたいという声が大半でした。
※見本用のダミー文です（数値も架空です）
向いている場面｜削減・向上といった成果を出せる商材。写真素材が乏しいときの代替としても有効です。
作るときのポイント｜数字を最も大きく、単位と説明は小さく。実際に公開する際は必ず根拠のある実数値を使い、盛った数字は載せません。
検討者が気になる質問と回答をセットで見せる型です。読み手の疑問を先回りで解消できます。
導入の決め手は何でしたか？
機能の多さより、運用開始後も相談できる体制でした。使いこなせるか不安だったので、伴走してもらえる点が安心材料になりました。
導入して一番変わったことは？
担当者ごとにバラついていた対応がそろい、引き継ぎの負担が減りました。属人化していた業務が見える形になった点が大きいです。
※見本用のダミー文です
向いている場面｜検討段階で不安が多い商材。よくある懸念を質問の形で先に見せたいとき。
作るときのポイント｜質問は検討者が実際に抱く言葉で。回答は結論から書き、Q側とA側で背景色や記号を分けて視線を導きます。
回収したアンケート用紙を思わせる型です。作り込まれた広告らしさが薄れ、生の声という印象を与えます。
説明が押し売りにならず、こちらの状況を先に聞いてくれたのが良かったです。導入後も連絡が取りやすく、安心してお任せできました。
※見本用のダミー文です
向いている場面｜チラシや店頭、来店型サービス。親しみと生っぽさを出したいとき。
作るときのポイント｜作り込みすぎると逆に嘘っぽくなります。実物のアンケートを撮影・スキャンして使うのが最も誠実で、効果も高い方法です。
導入企業のロゴと短いコメントを並べ、取引実績の信頼を借りる型です。B2Bで有名企業の名が出せるときに強力です。
全国の拠点で運用を統一でき、報告のばらつきがなくなりました。
サンプル商事株式会社 様
現場からの反対が少なく、想定より早く定着したのが印象的でした。
見本製作所株式会社 様
※見本用のダミー文です（社名・ロゴは架空です）
向いている場面｜知名度のある導入企業がある場合。ロゴの一覧だけでも信頼を伝えられます。
作るときのポイント｜ロゴの掲載可否は必ず許可を取ります。コメントは1行に収め、ロゴの大きさとトーンをそろえて雑多に見せないようにします。
レビューサイトを思わせる型です。評価スコアと本文をセットで見せ、比較検討中の相手に判断材料を渡します。
運用まで任せられて助かった
機能はもちろんですが、設定から運用までサポートが手厚く、社内に専任がいなくても回せています。改善要望への反応も早いです。
説明が丁寧で決裁も通しやすかった
こちらの課題を整理したうえで提案してくれました。上申用の資料も用意してもらえたので、社内説明がスムーズでした。
※見本用のダミー文です（評価も架空です）
向いている場面｜比較検討されやすい商材。評価の高さと具体的な理由を同時に見せたいとき。
作るときのポイント｜満点ばかりだと不自然に見えます。実際の評価を正直に反映し、低めの声には改善への姿勢を添えると誠実さが伝わります。
導入前と導入後を左右に並べ、変化そのものを主役にする型です。感想ではなく「何が変わったか」を読ませたいときに使います。
月末の集計は担当者が手作業で、丸一日かかっていました。数字の食い違いを探すやり取りも毎月発生していました。
集計がそろった状態で出てくるので、確認だけで済むようになりました。空いた時間を数字の中身を読む作業に回せています。
※見本用のダミー文です
向いている場面｜業務の変わり方がはっきりしている商材。数値を出せなくても、作業の違いだけで変化を伝えられます。
作るときのポイント｜左右の文字数をそろえ、同じ観点で比べます。導入後だけを長く書くと宣伝色が強くなり、対比が効かなくなります。
集計結果の全体像と、代表的な一言をセットで見せる型です。個別の声だけでは伝わらない全体の傾向を補えます。
「集計そのものより、出てきた数字を見ながら話す時間が増えたことが一番の変化でした。」
卸売業・業務改善ご担当者様
※見本用のダミーデータです（数値・コメントとも架空です）
向いている場面｜アンケートを定期的に回収している場合。回答数が多いほど、全体の傾向そのものが判断材料になります。
作るときのポイント｜項目は4つ前後に絞り、実際の集計値と回答数をそのまま載せます。都合の良い項目だけを抜くと、根拠を尋ねられたときに答えられません。
型が10並ぶと、次に迷うのは「自分の場合どれを使うか」です。次の章で、伝えたい目的から逆に選ぶ方法をご説明します。
選ぶ基準は好みではなく、その場所で何を伝えたいかです。
10の型は、伝えたい目的で4つに分けられます。装飾から入らず、まず目的のほうを決めてください。1つの型が複数の目的で使えることもあります。
同じ形を繰り返し、1件を大きくしないのが基本です。カード型は文字数をそろえ、ロゴ型はコメントを1行に固定します。星評価型は高い評価だけを抜かず、分布をそのまま出すと、量と正直さが同時に伝わります。
周囲の余白を広く取り、視線の行き先を1か所に絞ります。引用符強調型は象徴的な一言があるとき、一問一答型は懸念が多い商材、手書きアンケート風は広告らしさを消したいときに向く型です。同じページで3件以上重ねると効き目が薄れます。
大事なのは、変化の幅が目で見えることです。数値を出せるなら数字強調型、出せないならビフォーアフター対比型で作業の違いを見せます。回答をまとめて持っている場合は、集計グラフと代表コメントを組み合わせると、1件の感想より広い根拠になります。
止まって読まれない前提です。目に入る要素は思い切って絞ってください。カード型は1枚2行程度まで、吹き出し型は顔と一言だけ、ロゴ型は社名の並びだけでも意味が伝わります。読ませる型と流し読みの型を同じ画面に混ぜないほうが、どちらも生きます。
同じお客様の声でも、載せる媒体で文字量も写真の扱いも変わります。
型が決まっても、全媒体に同じまま流用すると読めなくなります。5つの媒体について、推奨する型と文字量の目安を整理しました。
| 媒体 | 推奨する型 | 1件あたりの文字量の目安 | 写真・顔出しの扱い | つまずきやすい点 |
|---|---|---|---|---|
| ホームページ・LP | ①カード型／②引用符強調型／⑧星評価＋レビュー型 | 80〜150字程度が目安 | 小さめでも成立。頭文字アイコンで代替可 | スマートフォンで横並びが縦積みになり、見せたい順番が変わる |
| チラシ・紙媒体 | ⑥手書きアンケート風／④数字強調型 | 40〜80字程度が目安 | 実在感の要。顔写真かアンケートの実物 | 件数を詰め込み、本文が読めない文字サイズになる |
| 営業資料・提案書 | ⑦ロゴ＋ひとこと型／⑨ビフォーアフター対比型 | 30〜60字程度が目安 | ロゴを優先。顔写真は使わないことが多い | 投影したときに文字が小さく、後ろの席から読めない |
| SNS投稿（正方形・縦長） | ②引用符強調型／⑨ビフォーアフター対比型 | 20〜40字程度が目安 | 使うなら大きく1人。小さい顔は潰れる | 一覧表示で端が切れ、肝心の一言が隠れる |
| 動画・音声 | ⑤一問一答型／③顔写真＋吹き出し型 | 話し言葉で15〜30秒程度が目安 | 本人出演の可否と、字幕での代替を先に確認 | 音を出さずに見る人向けの字幕がない |
スクロールで読ませる前提なので件数を多めに置けますが、実際は大半がスマートフォンで読まれます。3列に並べたカードは1列に縦積みされるため、左上に置いた声が最初に、右下の声が最後になります。順番が変わっても意味が通るか、必ず実機の幅で確認してください。
紙は拡大できないため、文字サイズが読みやすさを決めます。A4片面なら声は2〜4件に絞り、下部3分の1にまとめる構成が扱いやすい形です。手元に残る媒体なので、誰の声かの明示が信頼を左右します。
話しながら見せる前提です。1スライドに1〜2件までとし、説明を口頭で足せる余白を残します。商談相手と近い業種の声を先頭に並べ替えられるよう、スライドは差し替えやすい単位で作っておくと運用が楽になります。
一覧に並んだ状態で判断されるため、1枚に入れる情報は一言だけに絞ります。正方形と縦長では上下の見え方が変わり、端に置いた文字は切れることがあります。文字は中央寄りに置き、周囲に余白を残す作りが安全です。
本人が話す映像は、文字の声より伝わる情報が多くなります。一方で撮影と本人の出演許可が必要になるため、まず可否の確認から入ってください。音を出さずに見る人が多いので、話し言葉をそのまま字幕にし、質問と回答が交互に見える構成にすると最後まで見られます。
ここで扱っているのは、短い声そのものの見せ方です。導入事例の記事ページ全体をどう組むか、写真や図をどこに置くかといったページ設計は範囲が別なので、導入事例のデザイン参考をご覧ください。
効くのは装飾ではなく、誰が言ったかと何が変わったかの解像度です。
同じレイアウトでも、信頼の伝わり方は2つの軸で決まります。どちらも段階があり、上に行くほど具体的になります。
読み手は「自分に近い人が言っているか」を見ています。実名と顔写真が最も強いのは確かですが、そこまで届かなくても、業種と部署が分かれば近さは伝わります。イニシャルだけの羅列は、件数を増やしても効き目が上がりません。
「便利になった」で止まると、読み手は自分に当てはめられません。実数値が出せない場合でも、「半日かかっていた作業が午前中に終わる」のように行動で書けば、相対的な変化として伝わります。数値を載せるときは、必ず算出の元になった条件も社内で押さえておきます。
B2Bでは、取引の事実そのものを出せないことがあります。その場合は名前を隠すことに気を取られず、名前以外の解像度を上げるのが定石です。粒度を1段変えるだけで、見え方は次のように変わります。
【弱い】A様／匿名希望
【中間】製造業（従業員300名規模）・情報システム部 ご担当者様
【強い】サンプル商事株式会社 情報システム部 部長 見本太郎様
※見本用のダミー文です（社名・氏名は架空です）
中間の粒度でも、業種・規模・部署がそろえば検討者は自分と重ねられます。社名を伏せる代わりに、変化の中身を1段具体的にすると釣り合いが取れます。
「Webは良いが紙は不可」「ロゴは可だが顔写真は不可」といった食い違いは、あとから起きます。実名・ロゴ・写真の可否、掲載する媒体、掲載期間の4点を、回答をもらう時点で分けて確認しておくと、使い回すときに迷いません。
あわせて、自社が依頼して掲載している声だと読み手に分かる形にしておきます。第三者が自発的に投稿したかのように見せる作りは、表示のルール上のリスクになります。謝礼や条件がある場合は、その旨を声の近くに書き添えてください。
依頼のタイミング、アンケートの設問設計、インタビューへの引き上げ方といった回収の手順は、お客様の声の集め方にまとめています。
載せているのに読まれないときは、見た目に原因があります。
いきなり長い本文が並ぶと、読むかどうかの判断ができません。1件ごとに短い見出しを付け、そこだけ拾えば内容が分かる状態にします。星評価型の見本のように、太字の1行を先頭に置くだけでも読了率は変わります。
2行の声と8行の声が隣り合うと、カードの高さがそろわず、短いほうが手抜きに見えます。並べる前に、いちばん短い声に合わせて全体を刈り込むのが早い解決です。どうしても長い声は、別枠で1件だけ大きく見せます。
提供された写真をそのまま並べると、明るさも背景も撮影距離もそろいません。トリミングの比率と明るさをそろえるだけで整います。素材が混在してどうにもならないときは、全件を頭文字アイコンに統一するほうがきれいに見えます。
枠線・背景色・装飾を重ねるほど、生の言葉から遠ざかります。声の周囲に余白を取り、装飾は引用符か罫線のどちらか一方に絞ってください。上下のセクションと同じ色で塗り分けると、押し出しが強すぎる印象を抑えられます。
星が5つばかり並ぶと、選んで載せていることが読み手に伝わります。評価が分かれた声や、導入時に苦労した点に触れた声を混ぜたほうが、全体の信頼は上がります。低い評価を載せる場合は、改善の状況を短く添えてください。
レイアウトを整えても読まれない場合、原因は文言のほうにあります。何をどの順番で語ってもらうか、依頼時にどう質問を渡すかは、お客様の声の書き方で業種別の文例とあわせてご説明しています。
短い声は量の信頼、深い事例は質の信頼。載せる場所も変わります。
お客様の声は、短いコメントを多く並べて「たくさんの人が満足している」という量の信頼をつくります。導入事例は1社の課題から成果までを追い、「自社と同じ状況でうまくいった」という質の信頼をつくります。声は読ませずに伝えるもの、事例は読ませて納得させるものだと考えると、見せ方の違いが整理しやすいはずです。
声は、判断が必要な場所に少しずつ置きます。料金表の手前、申し込みボタンの直前、サービス紹介の締めなどです。事例は独立したページを持たせ、一覧から選んで読んでもらいます。声を1ページにまとめて長い一覧にすると、判断の場に何も残らなくなります。
声で関心を持った人が、もっと知りたくなったときの受け皿として事例を置きます。声の並びの末尾に事例一覧への入口を1つ添えるだけで、読み進めたい人だけが深いほうへ移ります。実際の並べ方は、当社の導入事例の事例集もご参考ください。
短い声を集めたうえで、印象的なお客様には取材を打診し、課題から成果までを追う記事に育てると、質の信頼まで届きます。取材から記事化までは導入事例制作サービスでお引き受けしています。
決めることは2つです。1つは、伝えたい目的に合わせた型の選択。もう1つは、載せる媒体に合わせた文字量と写真の扱い。この2つが決まれば、配色や装飾は後から調整できます。迷ったときは、その画面で読み手が何を判断しようとしているかに戻ってください。声を集めるところから、事例記事に育てるところまで、必要な範囲でご相談いただけます。
お客様の声・導入事例の制作、無料でご相談ください
無料で相談する →