WEBデザインでの口コミ掲出においては、従来では独自システムによりお客様の声を収集・サイト上で表示したり、HTML要素で直接お客様の声を作成するケースが多く見られました。しかしこのような方法は口コミの出処が定かでなく、信憑性としてはあまり高くないのが実情です。
そこで注目されているのがWEBデザインへのSNSの口コミ活用です。SNS上に広く一般の方が投稿した口コミを収集し「お客様の声」としてサイト上で掲出することで、信憑性向上に貢献するだけでなく、バズりをサイト上で表現することもできるようになります。今回は口コミの連携に適したSNSを紹介するとともに、SNSを活用した実際の「お客様の声」デザイン事例をご紹介いたします。
※本記事で紹介するGoogleマップ（Googleマイビジネス）はSNSではありませんが、架空でないお客様のリアルな口コミを連携することができるプラットフォームとして合わせて紹介させていただきます。
口コミ連携においても最も人気が高いのは、Googleマップ（Googleマイビジネス）の口コミ連携です。
日本でも月間4,000万人以上が利用するGoogleマップは、もともと経路探索・地図アプリとして誕生したものでしたが、世界中のありとあらゆる観光スポット・公共施設・地域のお店までもが目的地として登録され、今では世界最大の「口コミプラットフォーム」としても活用されています。
数多くのユーザーによって利用されていることで、地域のお店であっても大手ポータルサイトと比較して手軽に口コミが集まりやすく、また多くの人が来店時にGoogleマップの口コミを見て判断していることから、近年その重要性が増してきています。
口コミ連携ツール『EmbedSocial』では、そんなGoogleマップの口コミをWEBサイトへと簡単に連携させることができるため、実際の口コミを反映させたお客様の声として幅広く活用いただいております。
ここからは実際に『EmbedSocial』を活用して収集したGoogleマップ（Googleマイビジネス）の口コミを本記事内に埋め込み、お客様の声としてサイト上で活用する上での代表的なデザイン例をご紹介いたします。
このレイアウトでは縦一列にGoogleマップより収集した口コミを表示させることができるため、口コミ本文をできるだけ多く表示させたい場合に最適です。
コンテンツ枠が大きいためサイトのメインコンテンツの一つとして組み込むことができ、また「レビューを書く」というボタンからはGoogleマップの口コミ記入先へと遷移させることも可能で、サイト上から口コミ記入への導線としても活用できます。
このレイアウトでは口コミを自動で入れ替えることができるため、目に付きやすいトップページなどで最新の口コミを表示させたい場合に最適です。口コミが入れ替わるスライダーのスピードや表示させる口コミの数についても管理画面より制御することができます。
このレイアウトでは、均等なサイズのボックスで口コミを表示させることができます。1ページに表示させる口コミの数は管理画面より制御することができ、それ以上の数については「もっと読み込む」などのボタンを設置して、クリックすることで下位表示の口コミを読み込むことができます。
2021年9月現在では、上記のほかにも7種類のレイアウトテンプレートが用意されており、サイトのデザインや用途に合わせて最適なレイアウトを選択することができます。
Googleマップ（Googleマイビジネス）の口コミ連携においては、『EmbedSocial』レビュー機能を活用することで実装することができます。ここでは、口コミの連携やデザインの観点から重要となるいくつかの機能を抜粋してご紹介いたします。
Googleマップ（Googleマイビジネス）より収集した口コミは、管理画面より個別に表示/非表示を設定することができます。デフォルトを非表示の状態へと変更し、管理画面から個別に選択した口コミだけを表示させる運用も可能です。
またサイト上に表示させる口コミを評価数（星の数）をもとに自動でフィルタリングすることもできるため、低評価の口コミについては自動で表示させない設定を行うこともできます。
自動での並び替えは、日付順またはランダムより選択することができますが、トップに表示させたい口コミにおいては「固定表示」または「優先度（1〜20の順位づけ）」を活用することで、重要度の高いクチコミを常に一番上に表示させることができます。
2ページ目以降の内容を表示させるページネーションは、数字（1, 2, 3,…）またはボタンより選択することが可能です。ボタンにおいては「Load More」がデフォルトのテキストですが、管理画面よりボタン名を「もっと読み込む」や「続きを見る」など日本語へと変更することもできます。
『EmbedSocial』へとGoogleマップの口コミを連携させると、自動生成される総合評価を表すバッジを活用することができます。口コミと同じくコードの埋め込みだけで簡単にホームページ上に表示させることが可能です。
EmbedSocialの機能を使って自動生成したバッジ
レイアウトテンプレートでは管理画面上に用意されているものの中から最適なものを選択しますが、細かな調整を希望する場合には管理画面内に用意されている「カスタムCSS」より調整を加えることが可能です。たとえば .es-username {display: none;} を入力すると、口コミ投稿者のユーザー名を非表示にさせることができます。
※CSSでの調整が不可能な範囲は、カスタムレイアウトとして専用のレイアウトを作成することも可能です。（別途お見積り）
「お客様の声」としてサイト上で簡単に活用できるSNSの口コミ2つ目は、ハッシュタグやメンションをもとに収集する一般ユーザーのInstagram投稿です。
Instagramは企業のマーケティングにも積極的に活用されていることから口コミ導入におけるハードルが低く、Googleのように評価数（星の数）を取得することはできませんが、テキストだけでなく画像も収集することも可能なため、お客様からの視点を集めた画像ギャラリーとしての活用が非常に効果的です。
『EmbedSocial』では、Instagramのハッシュタグ及びメンションを通して一般ユーザーの投稿を収集することができます。一般の方がInstagram上で投稿を行う際に「#富士山絶景スポット」など特定のハッシュタグをつけて投稿を行ったものが、管理画面より「#富士山絶景スポット」のハッシュタグを登録すると自動でシステムに収集される仕組みです。
※収集される投稿には一部制限があります。詳しくはこちらをご参照くださいませ。
ここからは実際に『EmbedSocial』を活用してInstagramから収集した口コミを本記事内に埋め込み、代表的な表示例をご紹介いたします。
下記は「#mtfujijapan」のハッシュタグより、富士山に関するInstagram投稿を実際に集めた例です。
Instagramは画像を中心としたプラットフォームであるため、観光や料理・ファッションなど視覚的な情報と関与の深い業界と相性が非常に良くなります。こちらのタイル型のレイアウトでは、画像にマウスオーバーをすると投稿文章の確認が可能です。
Googleマップの口コミと同様に、右から左へと自動で流れるスライダー形式での表示も可能です。画像のサイズによって表示枠が変形したり、スマートフォンから閲覧した際に表示枠が縦に間延びせず、常に一定の領域で表示できるメリットがあります。
画像下部にはテキストの一部が表示されることで画像が何を表すかを把握しやすく、スライダーの再生速度も管理画面より調整することができます。
「お客様の声」としてサイト上で簡単に活用できるSNSの口コミ3つ目は、ハッシュタグやメンションをもとに収集する一般ユーザーのTwitter投稿です。
Twitterは、投稿する際にInstagramとは異なり画像の添付を必要としないことから、気軽に意見や感想を投稿することができるプラットフォームとして高い人気を誇っています。画像との直接的な関係性が高くない通信・金融・教育の業界であったり、あるいは自社の採用現場やイベントの感想についての口コミなども簡単に集めることができます。
下記は「#miraitowa」のハッシュタグより、東京オリンピックのマスコットキャラクター「ミライトワ」に関する投稿を集めた例です。このようにTwitterのハッシュタグを通して自社製品の感想や体験談を簡単に収集することができ、『EmbedSocial』を活用することでWEBサイト上で「お客様の声」として埋め込み表示が可能となります。
先ほどとは異なりテキスト投稿のみの場合でも、下記のようにカード型のレイアウトを採用することで、自然な形でTwitterから集めた口コミを使って「お客様の声」を作成することができます。
管理画面から投稿タイプ（画像または動画を含むもの、含まないもの）を基準に、表示させる投稿に対して自動でフィルタリングをかけることができるため、画像とテキストが混ざり全体のバランスが崩れないよう調整することもできます。
InstagramやTwitterの口コミ連携においては、『EmbedSocial』フィード機能を活用することで実装することができます。ここでは、口コミの連携やデザインの観点から重要となるいくつかの機能を抜粋してご紹介いたします。
InstagramやTwitterから収集した口コミにおいても、管理画面より個別に表示/非表示を設定することができます。デフォルトを非表示の状態へと変更し、管理画面から個別に表示を選択した口コミだけを表示させる運用も可能です。
事前に除外キーワードを設定することで、不適切な投稿に対するフィルタリングを設定することもできます。
InstagramやTwitterから収集した口コミにおいては、日付順の他にもSNSのいいね数をもとにして人気の高い順に口コミを並び替えることができます。これにより、インフルエンサーの投稿や質の高いクリエイティブを最上位に集約することが可能となります。
トップに表示させたい口コミは「固定表示」または「優先度（1〜20の順位づけ）」を活用することで、重要度の高いクチコミを常に一番上に表示させることができます。
2ページ目以降の内容を表示させるページネーションは、数字（1, 2, 3,…）またはボタンより選択することが可能です。ボタンにおいては「Load More」がデフォルトのテキストですが、管理画面よりボタン名を「もっと読み込む」や「続きを見る」など日本語へと変更することもできます。
デフォルトの設定では、画像サムネイル・タイトル・投稿数・フォローボタン がヘッダーとして表示されていますが、管理画面からの設定を変更することでヘッダーの各項目に対して表示/非表示を選択することができます。全てのヘッダー要素を非表示にすることで、ヘッダーの表示を完全になくすことも可能です。
レイアウトテンプレートでは管理画面上に用意されているものの中から最適なものを選択しますが、細かな調整を希望する場合には管理画面内に用意されている「カスタムCSS」より調整を加えることが可能です。たとえば .es-username {display: none;} を入力すると、口コミ投稿者のユーザー名を非表示にさせることができます。
ここからは『EmbedSocial』を活用してSNSの口コミ連携を行い、実際にお客様の声として活用いただいている事例をご紹介いたします。
全国に25店舗を展開する大手エステサロン「ラ・パルレ」様では、テーブル型のレイアウトを使用して各店舗ページのGoogleマップ口コミを連携いただいております。Googleローカル検索からの流入を想定して、簡素的な内容になりがちな店舗ページのコンテンツ拡充に活用いただいております。
表示にあたっては基本テンプレートに加えてカスタムCSSを追加し、よりサイトのデザインに合った表示をいただいているのも特徴的です。
事例詳細はこちら：大手エステサロン ラ・パルレ様への導入事例
宮崎県のドライビングスクール「都城ドライビングスクール」様では、Googleマップに寄せられた卒業生の口コミをWEBサイトトップページで表示いただいております。
スライダーのレイアウトを活用することで、スクロールなく次々に口コミを表示させることができ、ユーザーフレンドリーなUI作成にお役立ていただけます。
事例詳細はこちら：都城ドライビングスクール様への導入事例
コーセー様のブランド「雪肌精」の特設ページに、画像の掲出に優れたタイル型デザインで Instagramの口コミを表示いただきました。『EmbedSocial』を活用し Instagramから「#チームつるすべ」という独自に設定されたハッシュタグを通して、一般の方の口コミを収集いただいております。
事例詳細はこちら：コーセー様「雪肌精 クリアウェルネス」への導入事例
くせ毛に悩む女性のためのスタイリングケア「ONCE」様では、レスポンシブでの表示枠制御が行いやすいスライダー型のデザインで掲出をいただきました。こちらは公式Instagramアカウントへのメンション（タグ付け）を活用して、スタイリストの方の口コミを収集いただいております。
事例詳細はこちら：スタイリングケア ONCE様への導入事例
酒造業界大手「沢の鶴」様では、商品のブランドページでTwitterから募集したお客様の感想を表示いただいております。カード型のレイアウトにより、全体のバランスを崩さず画像を含む投稿・テキストのみの投稿を混ぜ合わせて表示いただきました。
Twitter上でハッシュタグキャンペーンなどを定期的に実施され、より多くの投稿が集まる工夫を積極的にされているのも特徴的です。
事例詳細はこちら：沢の鶴様への導入事例
自然素材のドーナツを全国で販売する「フロレスタ」様の公式サイトトップページに導入をいただきました。「#フロレスタ」というブランド名のハッシュタグを通して Instagram・Twitterから自社製品に関する口コミを収集し、トップページで一つのウィジェットとして表示いただいております。
『EmbedSocial』では、複数のSNSから収集してきた投稿を一つの埋め込み用ウィジェットに混ぜ合わせて投稿を表示させることが可能です。
事例詳細はこちら：フロレスタ様への導入事例
SNSの口コミ掲出は、信ぴょう性・デザイン性ともに優れていることから近年多くのWEBサイトで導入が進んでいます。『EmbedSocial』は中小規模の企業でも運用可能な価格帯でありながら、数多くの大手企業でも活用されるほど機能面にも優れたツールとなっています。
2021年9月現在では、7日間の無料トライアルやWEB会議でのご案内も実施しておりますので、興味を持たれた方はお気軽にお問い合わせくださいませ！
【2023年6月更新】インスタグラム新機能・アップデート情報まとめ
WordPressウェブサイトにインスタグラムを埋め込む方法まとめ
インスタグラムをウェブサイトやブログに埋め込み表示する方法
FeedlinkがSNS運用＆ブログ作成ツールとして進化
UGCツール詳細比較！目的別おすすめ製品や選び方を解説
【弁護士監修】X（旧Twitter）投稿のWEBサイト掲載は違反になる？コンテンツの著作権について詳しく解説
