先行案内を受け取る

「お客様の声」をホームページに載せる方法——コピペで使えるHTML例つき

コエカベ編集部 ・ 2026年7月

「お客様からうれしい感想をもらったのに、ホームページに載せる方法がわからない」。個人事業や小さなお店のサイトで、とてもよくある悩みです。

この記事では、お客様の声をサイトに載せる方法をかんたんな順に3つ紹介します。コピペでそのまま使えるHTMLの例と、載せるときに気をつけたい注意点(許可の取り方・ステマ規制)もまとめました。

なぜ「お客様の声」を載せると良いのか

初めてサイトに来た人は、「ここに頼んで大丈夫かな」という不安を持っています。その不安に一番よく効くのが、自分と似た立場のお客様の感想です。売り手の宣伝文句より、第三者の体験談のほうが信じてもらいやすい——これは「社会的証明」と呼ばれる、昔からよく知られた心理です。

載せる場所は、料金表の近くやお申し込みボタンの手前など、訪問者が「どうしようかな」と迷うところが効果的です。

方法1: HTMLを直接書いて載せる(無料・いちばん簡単)

まずは一番シンプルな方法から。以下をコピーして、文章を差し替えるだけで使えます。

<div style="border:1px solid #e0e0e0; border-radius:12px;
     padding:20px; margin:16px 0; background:#fafafa">
  <p style="margin:0 0 10px">
    ここにお客様の感想を入れます。「丁寧に対応いただき、
    仕上がりにも大満足でした。また利用したいです」
  </p>
  <p style="margin:0; font-size:13px; color:#777">
    —— 東京都・30代・ネイルサロンご利用
  </p>
</div>

これを載せたい数だけ並べれば、「お客様の声」コーナーの完成です。WordPressなら「カスタムHTML」ブロックに貼り付けます。

ポイント: 名前は「東京都・30代」のようにぼかした表記でOKです。実名を載せる場合は必ず本人の許可を取りましょう。

方法2: WordPressのブロックやテーマ機能を使う

WordPressを使っているなら、テーマによっては「お客様の声(Testimonial)」用のブロックやウィジェットが最初から入っています。「引用」ブロックで代用してもきれいに見えます。

ただし、テーマ標準の機能はデザインの自由度が低かったり、テーマを変えると崩れたりすることがあります。数が増えてきたら、次の方法3も検討してみてください。

方法3: 専用ツールを使う(集める→選ぶ→貼るまで一気に)

お客様の声が増えてくると、「集める・選ぶ・並べ替える・きれいに表示する」を手作業でやるのは大変になってきます。そこで使われるのが、お客様の声の専用ツールです。

海外には有名なツールがいくつもありますが、画面が英語だったり、サイトの訪問者数に応じて料金が上がる従量課金だったりと、小さな事業には少し重いのが実情です。

コエカベは「日本語×定額」のお客様の声ツールです

集める・選ぶ・コピペ1行で貼る、を日本語の画面で。アクセスが増えても料金が上がらない定額制で準備中です。

先行リリースの案内を受け取る(無料)

載せるときの注意点(ここだけは守る)

1. 本人の許可を取る

いただいた感想をサイトに載せるときは、必ず本人に「サイトに掲載してもいいですか」と確認しましょう。メールやLINEで一言もらっておけば十分です。

2. 捏造・改変はしない

存在しないお客様の声を作ったり、否定的な部分を勝手に削って印象を変えたりするのはNGです。2023年10月からは、いわゆるステマ規制(景品表示法)も始まっており、やらせレビューは法律違反になり得ます。誤字の修正程度にとどめ、内容はそのまま載せましょう。

3. 特典と引き換えのときは書き方に注意

「感想を書いてくれたら割引」のような特典つきで集めた声は、その旨がわかる形にしておくと誠実です。

まとめ

関連記事: お客様の声の集め方——お願いのタイミングと例文 / 口コミ・レビューをサイトに埋め込む方法まとめ