お客様の声ウィジェットの選び方と設置ガイド【デザイン比較付き】

「お客様の声をサイトに載せたいけど、どんなデザインで表示すればいいの？」

お客様の声の表示方法（ウィジェット）には、Wall of Love、カルーセル、カード型、ポップアップなど、さまざまな種類があります。どれを選ぶかでコンバージョン率が大きく変わるため、サイトの目的や構成に合った選択が重要です。

この記事では、主要なウィジェットタイプを比較し、あなたのサイトに最適な表示方法を見つけるための完全ガイドをお届けします。

ウィジェットとは

ウィジェットとは、Webサイトに埋め込む小さな表示パーツのことです。お客様の声ウィジェットは、HTMLコードをサイトに貼り付けるだけで、収集した声を自動で表示してくれます。

ウィジェットのメリット:

• コーディング知識なしで設置できる
• デザインが統一される
• 新しい声が自動で反映される
• レスポンシブ対応（スマホ・タブレット）

5つの主要ウィジェットタイプを比較

タイプ1: Wall of Love（壁面型）

お客様の声をMasonryレイアウト（ピンタレスト風）で壁面いっぱいに表示するデザインです。

特徴:

• 大量の声を一度に表示できる
• 視覚的なインパクトが大きい
• スクロールで次々と声が現れる

向いているケース:

• お客様の声の専用ページ
• 声の数が20件以上ある場合
• 信頼感を圧倒的に見せたい場合

注意点:

• ページの読み込み速度に影響する場合がある
• スマホでは縦に長くなりすぎることがある

---

タイプ2: カルーセル（スライダー型）

声をスライドショーのように横に切り替えて表示するデザインです。

特徴:

• 限られたスペースに多くの声を表示できる
• 自動再生で目を引く
• モダンでスタイリッシュな印象

向いているケース:

• LPやトップページの一部セクション
• 3〜10件程度の声を表示したい場合
• スペースが限られている場合

注意点:

• 自動再生の速度が速すぎると読めない
• スライドの存在に気づかないユーザーもいる

---

タイプ3: カード型（グリッド）

各声を独立したカードとして、2〜3列のグリッドで表示するデザインです。

特徴:

• 一覧性が高い
• 各カードに顔写真・星評価・日付を表示しやすい
• レスポンシブ対応がしやすい

向いているケース:

• サービスページの信頼セクション
• 5〜12件程度の声を表示したい場合
• 統一感のあるデザインにしたい場合

注意点:

• 声の長さが不揃いだとデザインが崩れることがある
• 件数が多いとページが長くなる

---

タイプ4: シングルカード（1件表示）

1件の声を大きく目立たせて表示するデザインです。

特徴:

• 最も強い声をフォーカスできる
• シンプルで邪魔にならない
• どんなセクションにもフィットする

向いているケース:

• CTAボタンの直前
• ヒーローセクション内
• 特に印象的な1件を強調したい場合

注意点:

• 1件だけだと「他にはないの？」と思われる可能性がある
• 定期的に表示する声を入れ替えると効果的

---

タイプ5: SNS埋め込み風

X（旧Twitter）やInstagramの投稿をそのまま埋め込んだようなデザインです。

特徴:

• SNSの投稿がそのまま表示されるため、リアル感が高い
• 「実際にSNSで評判になっている」印象を与える
• シェアボタンとの相性が良い

向いているケース:

• SNSでの評判を強調したい場合
• カジュアルな印象のサイト
• ターゲットがSNSユーザーの場合

注意点:

• SNSプラットフォームの仕様変更に影響される
• 読み込み速度が遅くなることがある

ウィジェットタイプ比較表

| タイプ | インパクト | 省スペース | 読み込み速度 | 向いているページ | |--------|---------|----------|-----------|--------------| | Wall of Love | ◎ | × | △ | お客様の声専用ページ | | カルーセル | ○ | ◎ | ○ | LP・トップページ | | カード型 | ○ | ○ | ◎ | サービスページ | | シングルカード | △ | ◎ | ◎ | CTA付近 | | SNS埋め込み風 | ○ | ○ | △ | カジュアルなサイト |

サイトの目的別おすすめウィジェット

コーポレートサイト

おすすめ: カード型（3列グリッド）

理由：統一感があり、フォーマルな印象を保てます。6〜9件の声を業種やサービス別に分類して表示すると効果的です。

ランディングページ（LP）

おすすめ: カルーセル＋シングルカード

理由：ファーストビュー付近にカルーセル、CTAボタン直前にシングルカードの2段構えが最も効果的です。

ECサイト

おすすめ: カード型（商品ページ）＋Wall of Love（レビュー専用ページ）

理由：商品ページでは関連するレビューをカード型で表示し、全レビューはWall of Loveで一覧表示するのが理想的です。

ポートフォリオサイト

おすすめ: シングルカード（各実績の直下）

理由：制作実績の直下に、そのクライアントからの声を1件ずつ表示すると、実績と声がセットで伝わります。

ウィジェット設置の基本手順

ステップ1: お客様の声を収集する

まずは声を集めましょう。最低5件あれば、ウィジェットとして見栄え良く表示できます。

ステップ2: 表示するデザインを選ぶ

サイトの目的とセクションに合ったウィジェットタイプを選びます。迷ったらカード型（3列グリッド）が万能です。

ステップ3: 表示する声を選定する

集めた全ての声を表示する必要はありません。以下の基準で選定しましょう。

• 具体的な成果（数字）が含まれている声
• ターゲット層と同じ属性のお客様の声
• 直近6ヶ月以内の新しい声
• バリエーション（業種・利用シーン）が出る組み合わせ

ステップ4: コードを埋め込む

ウィジェットのHTMLコードをサイトの表示したい場所に貼り付けます。WordPressの場合はカスタムHTMLブロック、Wixの場合はHTML埋め込み要素を使います。

ステップ5: 表示を確認する

PC・スマホ・タブレットの各デバイスで表示を確認しましょう。特にスマホでの見え方は必ずチェックしてください。

デザインのベストプラクティス

カラーはサイトに合わせる

ウィジェットの背景色やアクセントカラーは、サイトのブランドカラーに合わせましょう。浮いたデザインは信頼性を損ないます。

余白を十分に取る

声のカード同士、テキスト周りに十分な余白を確保しましょう。詰まった表示は読みにくく、安っぽい印象を与えます。

フォントサイズは読みやすく

声のテキストは最低14px以上、スマホでも16px以上が推奨です。小さすぎるテキストは読まれません。

アニメーションは控えめに

カルーセルの自動再生やフェードイン効果は控えめにしましょう。過度なアニメーションはユーザーの集中を妨げます。

こえポストのウィジェット機能

こえポストでは、以下のウィジェットを簡単に設置できます。

• Wall of Love: 圧倒的な声の量で信頼感を演出
• カルーセル: 限られたスペースに効果的に表示
• カード型: 統一感のある見やすいデザイン

HTMLコードをコピーして貼り付けるだけで設置完了。デザインのカスタマイズも管理画面から直感的に操作できます。

まとめ

お客様の声ウィジェットは、サイトの目的とセクションに合わせて選ぶことが大切です。LPならカルーセル＋シングルカード、コーポレートサイトならカード型、大量の声があるならWall of Loveが最適です。まずは5件の声を集めて、カード型ウィジェットから始めてみましょう。