2021-10-25

SNSの口コミを活用した お客様の声デザイン例 7選 + 事例集!

WEBデザインでの口コミ掲出においては、従来では独自システムによりお客様の声を収集・サイト上で表示したり、HTML要素で直接お客様の声を作成するケースが多く見られました。しかしこのような方法は口コミの出処が定かでなく、信憑性としてはあまり高くないのが実情です。

そこで注目されているのがWEBデザインへのSNSの口コミ活用です。SNS上に広く一般の方が投稿した口コミを収集し「お客様の声」としてサイト上で掲出することで、信憑性向上に貢献するだけでなく、バズりをサイト上で表現することもできるようになります。今回は口コミの連携に適したSNSを紹介するとともに、SNSを活用した実際の「お客様の声」デザイン事例をご紹介いたします。

※本記事で紹介するGoogleマップ(Googleマイビジネス)はSNSではありませんが、架空でないお客様のリアルな口コミを連携することができるプラットフォームとして合わせて紹介させていただきます。

目次

  1. SNSの口コミ連携①:Googleマップ(Googleマイビジネス)
  2. Googleマップの口コミを活用した お客様の声デザイン例
  3. Googleマップから収集した口コミの選別・デザイン設定方法
  4. SNSの口コミ連携②:Instagram ハッシュタグ・メンション
  5. Instagramの口コミを活用した お客様の声デザイン例
  6. SNSの口コミ連携③:Twitter ハッシュタグ・メンション
  7. Twitterの口コミを活用した お客様の声デザイン例
  8. Instagram・Twitterから収集した口コミの選別・デザイン設定方法
  9. 『EmbedSocial』を活用した お客様の声WEBデザイン事例集

SNSの口コミの連携①:Googleマップ(Googleマイビジネス)

口コミ連携においても最も人気が高いのは、Googleマップ(Googleマイビジネス)の口コミ連携です。

日本でも月間4,000万人以上が利用するGoogleマップは、もともと経路探索・地図アプリとして誕生したものでしたが、世界中のありとあらゆる観光スポット・公共施設・地域のお店までもが目的地として登録され、今では世界最大の「口コミプラットフォーム」としても活用されています。

数多くのユーザーによって利用されていることで、地域のお店であっても大手ポータルサイトと比較して手軽に口コミが集まりやすく、また多くの人が来店時にGoogleマップの口コミを見て判断していることから、近年その重要性が増してきています。

口コミ連携ツール『EmbedSocial』では、そんなGoogleマップの口コミをWEBサイトへと簡単に連携させることができるため、実際の口コミを反映させたお客様の声として幅広く活用いただいております。

Googleマップの口コミを活用した お客様の声デザイン例

ここからは実際に『EmbedSocial』を活用して収集したGoogleマップ(Googleマイビジネス)の口コミを本記事内に埋め込み、お客様の声としてサイト上で活用する上での代表的なデザイン例をご紹介いたします。

テーブル型デザイン – Pageレイアウト

このレイアウトでは縦一列にGoogleマップより収集した口コミを表示させることができるため、口コミ本文をできるだけ多く表示させたい場合に最適です。

コンテンツ枠が大きいためサイトのメインコンテンツの一つとして組み込むことができ、また「レビューを書く」というボタンからはGoogleマップの口コミ記入先へと遷移させることも可能で、サイト上から口コミ記入への導線としても活用できます。

スライダー型デザイン – カルーセルレイアウト

このレイアウトでは口コミを自動で入れ替えることができるため、目に付きやすいトップページなどで最新の口コミを表示させたい場合に最適です。口コミが入れ替わるスライダーのスピードや表示させる口コミの数についても管理画面より制御することができます。

ボックス型デザイン – Columnレイアウト

このレイアウトでは、均等なサイズのボックスで口コミを表示させることができます。1ページに表示させる口コミの数は管理画面より制御することができ、それ以上の数については「もっと読み込む」などのボタンを設置して、クリックすることで下位表示の口コミを読み込むことができます。

2021年9月現在では、上記のほかにも7種類のレイアウトテンプレートが用意されており、サイトのデザインや用途に合わせて最適なレイアウトを選択することができます。

Googleマップからの収集した口コミの選別・デザイン設定方法

Googleマップ(Googleマイビジネス)の口コミ連携においては、『EmbedSocial』レビュー機能を活用することで実装することができます。ここでは、口コミの連携やデザインの観点から重要となるいくつかの機能を抜粋してご紹介いたします。

表示させる口コミの選別

Googleマップ(Googleマイビジネス)より収集した口コミは、管理画面より個別に表示/非表示を設定することができます。デフォルトを非表示の状態へと変更し、管理画面から個別に選択した口コミだけを表示させる運用も可能です。

またサイト上に表示させる口コミを評価数(星の数)をもとに自動でフィルタリングすることもできるため、低評価の口コミについては自動で表示させない設定を行うこともできます。

並び替えを設定

自動での並び替えは、日付順またはランダムより選択することができますが、トップに表示させたい口コミにおいては「固定表示」または「優先度(1〜20の順位づけ)」を活用することで、重要度の高いクチコミを常に一番上に表示させることができます。

ページネーションの設定

2ページ目以降の内容を表示させるページネーションは、数字(1, 2, 3,…)またはボタンより選択することが可能です。ボタンにおいては「Load More」がデフォルトのテキストですが、管理画面よりボタン名を「もっと読み込む」や「続きを見る」など日本語へと変更することもできます。

バッジの作成と設置

『EmbedSocial』へとGoogleマップの口コミを連携させると、自動生成される総合評価を表すバッジを活用することができます。口コミと同じくコードの埋め込みだけで簡単にホームページ上に表示させることが可能です。

EmbedSocialの機能を使って自動生成したバッジ

カスタムCSSの追加

レイアウトテンプレートでは管理画面上に用意されているものの中から最適なものを選択しますが、細かな調整を希望する場合には管理画面内に用意されている「カスタムCSS」より調整を加えることが可能です。たとえば .es-username {display: none;} を入力すると、口コミ投稿者のユーザー名を非表示にさせることができます。

※CSSでの調整が不可能な範囲は、カスタムレイアウトとして専用のレイアウトを作成することも可能です。(別途お見積り)

SNSの口コミの連携②:Instagram ハッシュタグ・メンション

「お客様の声」としてサイト上で簡単に活用できるSNSの口コミ2つ目は、ハッシュタグやメンションをもとに収集する一般ユーザーのInstagram投稿です。

Instagramは企業のマーケティングにも積極的に活用されていることから口コミ導入におけるハードルが低く、Googleのように評価数(星の数)を取得することはできませんが、テキストだけでなく画像も収集することも可能なため、お客様からの視点を集めた画像ギャラリーとしての活用が非常に効果的です。

『EmbedSocial』では、Instagramのハッシュタグ及びメンションを通して一般ユーザーの投稿を収集することができます。一般の方がInstagram上で投稿を行う際に「#富士山絶景スポット」など特定のハッシュタグをつけて投稿を行ったものが、管理画面より「#富士山絶景スポット」のハッシュタグを登録すると自動でシステムに収集される仕組みです。

※収集される投稿には一部制限があります。詳しくはこちらをご参照くださいませ。

Instagramの口コミを活用した お客様の声デザイン例

ここからは実際に『EmbedSocial』を活用してInstagramから収集した口コミを本記事内に埋め込み、代表的な表示例をご紹介いたします。

タイル型デザイン – Gridレイアウト

下記は「#mtfujijapan」のハッシュタグより、富士山に関するInstagram投稿を実際に集めた例です。

Instagramは画像を中心としたプラットフォームであるため、観光や料理・ファッションなど視覚的な情報と関与の深い業界と相性が非常に良くなります。こちらのタイル型のレイアウトでは、画像にマウスオーバーをすると投稿文章の確認が可能です。

スライダー型デザイン – カルーセルレイアウト

Googleマップの口コミと同様に、右から左へと自動で流れるスライダー形式での表示も可能です。画像のサイズによって表示枠が変形したり、スマートフォンから閲覧した際に表示枠が縦に間延びせず、常に一定の領域で表示できるメリットがあります。

画像下部にはテキストの一部が表示されることで画像が何を表すかを把握しやすく、スライダーの再生速度も管理画面より調整することができます。

SNSの口コミの連携③:Twitter ハッシュタグ・メンション

「お客様の声」としてサイト上で簡単に活用できるSNSの口コミ3つ目は、ハッシュタグやメンションをもとに収集する一般ユーザーのTwitter投稿です。

Twitterは、投稿する際にInstagramとは異なり画像の添付を必要としないことから、気軽に意見や感想を投稿することができるプラットフォームとして高い人気を誇っています。画像との直接的な関係性が高くない通信・金融・教育の業界であったり、あるいは自社の採用現場やイベントの感想についての口コミなども簡単に集めることができます。

Twitterの口コミを活用した お客様の声デザイン例

カード型デザイン – Masonryレイアウト

下記は「#miraitowa」のハッシュタグより、東京オリンピックのマスコットキャラクター「ミライトワ」に関する投稿を集めた例です。このようにTwitterのハッシュタグを通して自社製品の感想や体験談を簡単に収集することができ、『EmbedSocial』を活用することでWEBサイト上で「お客様の声」として埋め込み表示が可能となります。

カード型デザイン – フィードレイアウト

先ほどとは異なりテキスト投稿のみの場合でも、下記のようにカード型のレイアウトを採用することで、自然な形でTwitterから集めた口コミを使って「お客様の声」を作成することができます。

管理画面から投稿タイプ(画像または動画を含むもの、含まないもの)を基準に、表示させる投稿に対して自動でフィルタリングをかけることができるため、画像とテキストが混ざり全体のバランスが崩れないよう調整することもできます。

Instagram・Twitterから収集した口コミの選別・デザイン設定方法

InstagramやTwitterの口コミ連携においては、『EmbedSocial』フィード機能を活用することで実装することができます。ここでは、口コミの連携やデザインの観点から重要となるいくつかの機能を抜粋してご紹介いたします。

表示させる口コミの選別

InstagramやTwitterから収集した口コミにおいても、管理画面より個別に表示/非表示を設定することができます。デフォルトを非表示の状態へと変更し、管理画面から個別に表示を選択した口コミだけを表示させる運用も可能です。

事前に除外キーワードを設定することで、不適切な投稿に対するフィルタリングを設定することもできます。

並び替えを設定

InstagramやTwitterから収集した口コミにおいては、日付順の他にもSNSのいいね数をもとにして人気の高い順に口コミを並び替えることができます。これにより、インフルエンサーの投稿や質の高いクリエイティブを最上位に集約することが可能となります。

トップに表示させたい口コミは「固定表示」または「優先度(1〜20の順位づけ)」を活用することで、重要度の高いクチコミを常に一番上に表示させることができます。

ページネーションの設定

2ページ目以降の内容を表示させるページネーションは、数字(1, 2, 3,…)またはボタンより選択することが可能です。ボタンにおいては「Load More」がデフォルトのテキストですが、管理画面よりボタン名を「もっと読み込む」や「続きを見る」など日本語へと変更することもできます。

ヘッダーの表示内容調整

デフォルトの設定では、画像サムネイル・タイトル・投稿数・フォローボタン がヘッダーとして表示されていますが、管理画面からの設定を変更することでヘッダーの各項目に対して表示/非表示を選択することができます。全てのヘッダー要素を非表示にすることで、ヘッダーの表示を完全になくすことも可能です。

カスタムCSSの追加

レイアウトテンプレートでは管理画面上に用意されているものの中から最適なものを選択しますが、細かな調整を希望する場合には管理画面内に用意されている「カスタムCSS」より調整を加えることが可能です。たとえば .es-username {display: none;} を入力すると、口コミ投稿者のユーザー名を非表示にさせることができます。

『EmbedSocial』を活用した お客様の声WEBデザイン事例集

ここからは『EmbedSocial』を活用してSNSの口コミ連携を行い、実際にお客様の声として活用いただいている事例をご紹介いたします。

Googleマップ口コミ ✕ テーブル型デザイン

全国に25店舗を展開する大手エステサロン「ラ・パルレ」様では、テーブル型のレイアウトを使用して各店舗ページのGoogleマップ口コミを連携いただいております。Googleローカル検索からの流入を想定して、簡素的な内容になりがちな店舗ページのコンテンツ拡充に活用いただいております。

表示にあたっては基本テンプレートに加えてカスタムCSSを追加し、よりサイトのデザインに合った表示をいただいているのも特徴的です。


事例詳細はこちら:大手エステサロン ラ・パルレ様への導入事例

Googleマップ口コミ ✕ スライダー型デザイン

宮崎県のドライビングスクール「都城ドライビングスクール」様では、Googleマップに寄せられた卒業生の口コミをWEBサイトトップページで表示いただいております。

スライダーのレイアウトを活用することで、スクロールなく次々に口コミを表示させることができ、ユーザーフレンドリーなUI作成にお役立ていただけます。


事例詳細はこちら:都城ドライビングスクール様への導入事例

Instagram口コミ ✕ タイル型デザイン

コーセー様のブランド「雪肌精」の特設ページに、画像の掲出に優れたタイル型デザインで Instagramの口コミを表示いただきました。『EmbedSocial』を活用し Instagramから「#チームつるすべ」という独自に設定されたハッシュタグを通して、一般の方の口コミを収集いただいております。


事例詳細はこちら:コーセー様「雪肌精 クリアウェルネス」への導入事例

Instagram口コミ ✕ スライダー型デザイン

くせ毛に悩む女性のためのスタイリングケア「ONCE」様では、レスポンシブでの表示枠制御が行いやすいスライダー型のデザインで掲出をいただきました。こちらは公式Instagramアカウントへのメンション(タグ付け)を活用して、スタイリストの方の口コミを収集いただいております。


事例詳細はこちら:スタイリングケア ONCE様への導入事例

Twitter口コミ ✕ カード型デザイン

酒造業界大手「沢の鶴」様では、商品のブランドページでTwitterから募集したお客様の感想を表示いただいております。カード型のレイアウトにより、全体のバランスを崩さず画像を含む投稿・テキストのみの投稿を混ぜ合わせて表示いただきました。

Twitter上でハッシュタグキャンペーンなどを定期的に実施され、より多くの投稿が集まる工夫を積極的にされているのも特徴的です。


事例詳細はこちら:沢の鶴様への導入事例

Twitter・Instagram口コミ ✕ タイル型デザイン

自然素材のドーナツを全国で販売する「フロレスタ」様の公式サイトトップページに導入をいただきました。「#フロレスタ」というブランド名のハッシュタグを通して Instagram・Twitterから自社製品に関する口コミを収集し、トップページで一つのウィジェットとして表示いただいております。

『EmbedSocial』では、複数のSNSから収集してきた投稿を一つの埋め込み用ウィジェットに混ぜ合わせて投稿を表示させることが可能です。

事例詳細はこちら:フロレスタ様への導入事例

SNSの口コミ掲出は、信ぴょう性・デザイン性ともに優れていることから近年多くのWEBサイトで導入が進んでいます。『EmbedSocial』は中小規模の企業でも運用可能な価格帯でありながら、数多くの大手企業でも活用されるほど機能面にも優れたツールとなっています。

2021年9月現在では、7日間の無料トライアルやWEB会議でのご案内も実施しておりますので、興味を持たれた方はお気軽にお問い合わせくださいませ!

embedsocial

SNS投稿埋め込みツール
- エンベッドソーシャル -

簡単な操作でSNSの投稿をWEBサイトに埋め込み。キャンペーンや口コミ・更新のいらないメディアとして活用できます。

お問い合わせ

関連記事

ipad-pro-on-white-table
9月 29, 2020

インスタグラムをブログやウェブサイトへ埋…

インスタグラムに魅力的な写真を投稿したら、ウェブサイトやブログに埋め込んでみてはどうでしょうか。イン…

embed-tiktok-to-website
7月 23, 2020

TikTokをブログやウェブサイトに埋め…

動画共有アプリとして急速に存在感を増しているTikTok。若い世代を強力に引きつける力を持つTikT…

Featured image social media aggregator
6月 22, 2020

Twitterの各パーツをブログやウェブ…

ツイッターを利用する魅力の一つは情報拡散力ですが、この拡散力を加速させるために取り組みたいのが、ツイ…

11月 27, 2019

グーグルマップなどの口コミをまとめてUG…

目次 口コミは重要な購買意思決定要因に 口コミの種類 口コミのUGCとしての側面 注目されるGoog…