本日、レビューとお客様の声のウィジェットを全面的にリデザインしたことをお知らせできることを嬉しく思います。
以下の記事では、その過程をご紹介するとともに、今すぐお使いいただける新しいウィジェットをご覧いただきます。
インスピレーション：お客様のニーズがロードマップを動かす
EmbedSocialを構築し始めた当初から、私たちの最優先事項は、お客様のフィードバックやご要望に耳を傾け、その想いを開発ロードマップに反映させることでした。
私たちが共に開発してきた中核機能の1つが、コーディング不要で、どんなウェブサイトにもソーシャルレビューのウィジェットを簡単に表示できる仕組みです。これは、どなたでもご利用いただけます。
しかし、ウィジェットが新機能とともに進化し、新たなお客様層が私たちの製品を採用するにつれて、多様なウィジェットへのニーズが生まれてきました。
「プラットフォームの機能は素晴らしいのですが、レイアウトはもう少し改善の余地があります。もっと高度でありながら、同時にシンプルになることを願っています」と、アメリカのユーザーは語ります。
よくいただくご要望の1つが、UI体験を向上させることでレビューとお客様の声のウィジェットをよりシンプルにしてほしい、というものでした。
そこで本日、ここ数か月にわたって取り組んできた成果をご紹介できることを嬉しく思います。
5つの新しいレビューウィジェット！
私たちはレビューウィジェットのコード、デザイン、レイアウト、そして魅力を、すべて一新しました。
そこで、私たちがこのプロセス全体にどのように取り組んだかをご紹介します。
ウィジェットをよりシンプルでレスポンシブにしたことで、デフォルトであらゆるデザインやウェブサイトにフィットするようになりました。
一方で、調整が必要な場合でも、コードとCSSクラスはこれまで以上にシンプルになり、カスタムCSSオプションをとても簡単にご利用いただけます。
新しいレビューレイアウトの公開によって、技術的な部分は可能な限りシンプルに保ちながら、お客様がウェブサイトに表示する内容をより柔軟に選べるようにすることを目指しています。
初期のコメントはおおむね好意的です。
「デザインとフォーマットが大好きです。このようなレイアウトを見ると、レビューを書きたくなります。とても価値があります！」と、東京のユーザーは語ります。
このようなコメントは、私たちが正しい方向に進んでいることを確信させてくれます。
舞台裏がどのようなものだったか、いくつかのデザイン上の課題をどう解決したかを知り、ぜひ新しいウィジェットのデモもチェックしてみてください。
舞台裏：リデザインのプロセス
カスタマーレビューは、人々が製品を購入する際の主要な意思決定のきっかけの1つになりつつあります。
そして、消費者がより目が肥え、優れた製品やサービスを求め続ける中で、好意的なレビューを獲得することは本当に難しくなっています。
すでにご存じかもしれませんが（あるいはご存じないかもしれませんが）、EmbedSocialの主な目的は、あなたのソーシャルレビューやお客様の声を獲得し、それをウェブサイト上で生き生きと表現することです。
これを実現するために、私たちは主要なソーシャルネットワークと直接連携し、生成されたレビューを高度にインタラクティブなウィジェットでウェブサイト上にリアルタイムで同期させています。
私たちが解決しようとしている複雑なプロセスですよね。
さて、私たちは本物のソーシャルプルーフ（社会的信用）の力を信じています。だからこそ、それを最もシンプルでありながら際立つフォーマットで見せることが、ユーザーにとっての付加価値になると考えているのです。
そこで、私たちは超クリエイティブなプロダクトデザイナーのAngela Ristovskaとカスタマーサクセスチームに率いられて、この挑戦を受け入れました。
プロセス全体は次のような流れでした。
- カスタマーサポートチームとのブレインストーミングミーティング
- お客様のフィードバック、ニーズ、ご要望を分析
- プラットフォームに対する主要なご要望とニーズのリストを作成
- アトミックデザインのコンポーネントを定義
- 最初のドラフトを作成して提示
- ドラフトを（何度も）調整
- CSSとHTMLを組み込み
- テスト、テスト、テスト
- 公開
このプロセスの主な成果物を、以下でご覧ください。
新しいウィジェットのデザインコンポーネント
3か月以上にわたり、私たちはあなたのウェブサイトに埋め込みたくなるようなレビューウィジェットの再構築に力を注いできました。
主なリデザインの要素は次のとおりです。
- スターのリデザイン
- ウィジェットのアトミックコンポーネントデザイン
- ウィジェットのテーマ
これらのデザイン要素には、それぞれに物語があります。
その詳細は次のとおりです。
スターの……再発明！
なぜ最初にスター（星）に着目したのか、と思われるかもしれません。
実は、お客様の声の核となるコンセプトは5つ星のシンボルだと、私たちは考えています。
簡単に言えば、テキストだけなら単なる段落ですが、そこに星を添えると……（ジャジャーン！）それはお客様の声になるのです。
つまり、星こそがこのフォーマットを成り立たせているのです。それがなければ、ただの引用や段落にすぎません。
そして私たちは、どうしても自分たちだけのスターを生み出したいと考えました。
そこで、数時間にわたるブレインストーミングの末、私たちのチームはEmbedSocialのブランドを表現したスターデザインを作ることに決めました。
私たちは、この星に**EMBEDの象徴性**を込めたいと考えました。動詞としてのEMBEDは、（あるものを）周囲のものの中にしっかりと深く固定するという意味を持ちます。
これはまさに、私たちがあなたにお客様の声を使ってやってほしいこと、つまりそれをあなたのウェブサイトに欠かせない一部にすることなのです。
EmbedSocialのロゴと新しいスターデザインに何か似たところがあると気づかれたなら、それはあなただけではありません。
この類似は偶然ではありません。
私たちはこの新しいスターをすっかり気に入ってしまい、すべてのウィジェットに適用しました。
その結果：フレッシュな見た目と、お客様の声を際立たせるウィジェットが生まれました。
ミッション完了 :)
これほど素敵なスターデザインにたどり着くまでの道のりは、息をのむようなデザインを生み出すまでに、試行錯誤と失敗の連続でした。
私たちが検討したデザインの一部をご紹介します。
ウィジェットのデザインコンポーネント
現在のレイアウトのアップリフト（刷新）だけを行うと決めたものの、そのプロセスが決して簡単ではないことは分かっていました。
リデザインはクリエイティブな作業であり、アップリフトのつもりが新しいテスラの車を発明してしまう、というように脱線しがちです。常に目標を見失わないよう、私たちはこのプロジェクトで守るべきゴール、優先事項、基本方針のリストを作成しました。
- シンプルに保つ！
- アトミックデザインの原則に従う
- Figmaで、新しい（シンプルな）デザインのウィジェットごとにコンポーネントのシステムを作成する
- HTML、CSS、JSを使ってコンポーネントを実装する。クリーンなコード、クラスの新しい命名、適用しやすいカスタムCSS。
- 新しいウィジェットをテストする
こうして、旅が始まりました。
シンプルなコンポーネントのセットをデザインシステムとして定義することで、各ウィジェットの主要な要素が何かを明確に示すことができ、主要なCSSクラスをすべて定義する助けとなり、デザインとその実装がとても簡単になりました。
まとめとして、各ウィジェットで最もよく使われるコンポーネントは次のとおりです。
コンポーネントからウィジェットへ、長い長い作業の日々と苦労を経て、ついに……公開されました！
努力が報われました！私たちは、デフォルトであらゆるデザインやウェブサイトにフィットする、モダンでレスポンシブなウィジェットを作り上げました。
ウィジェットのテーマ
これまでのプロセスの結果として、新しいウィジェットを作成して埋め込めば、それ以上のカスタマイズは（おそらく）必要なくなり、時間と労力を節約して日々の業務にもっと集中していただけると私たちは考えています。
テーマを使えば、ワンクリックでダークレイアウトとホワイトレイアウトをすばやく切り替えられます。
一方で、調整が必要な場合でも、コードとCSSクラスはこれまで以上にシンプルになり、カスタムCSSオプションをとても簡単にご利用いただけます。
新しいウィジェットのショーケース
そして最後に、このデザインはEmbedSocialのブランディングを構成する2つの主要な要素をもとに作られています。
- ブランドの「埋め込まれた（embedded）」部分を表す、統一されたコードタグ
- ユーザーが自分の顧客と築きたいと願う、関係性のシンボル
この変更がウィジェットの見た目をリフレッシュし、ブランドを体現しながら、ユーザーフィードバックの揺るぎない力を表現してくれると私たちは信じています。
それでは最後に、新しいウィジェットをご紹介します。
グリッドウィジェット
グリッドウィジェットは、モダンなグリッドレイアウトを再現するレスポンシブなmasonryでソーシャルレビューを表示します。できるだけ多くのレビューを表示したいフルページにぴったりです。
カラムウィジェット
1ページに複数のレビューを表示する、フルスクリーンページに最適な2カラムのレイアウトです。
カルーセルウィジェット
スライダーは、ホームページに最適な自動再生フォーマットでレビューを表示します。ボックスをクリックすると、レビューがスライダーのライトボックスや縦型の固定スライダーでポップアップ表示され、レビューを閲覧できます。
スライダーウィジェット
カルーセルウィジェットによく似ていますが、デザインにわずかな違いがあり、ミニマルなウェブサイトデザイン向けのフラットな見た目になっています。
ページウィジェット
このレイアウトは、ボタンやフィルターを備え、ウェブページを完全な高機能化してユーザーレビューを表示する、まさにフルのレビューページのように機能することから「ページ」と名付けました。主に商品ページ向けに設計されており、ユーザーは追加のオプションを使って、表示されているレビューを検索・絞り込みできます。
テーブルウィジェット
最後に、ページレイアウトのよりシンプルなバージョンが必要で、フィルターや検索フィールドを含めたくない場合は、テーブルレイアウトをお使いいただけます。これは、Amazonのようなレビューセクションに似た、テーブル形式でレビューの全リストを表示します。
ポップアップウィジェット
ウェブサイトの左下または右下に固定ウィジェットとして表示される、シンプルなポップオーバーでソーシャルプルーフを見せましょう。
このウィジェットはページの読み込み時に表示され、クリックするとすべてのレビューを開くように設定できます。デモのリンクから、ライブで試してみてください。
新しいレビューウィジェットの活用法
私たちの目標は、お客様がウェブサイトに掲載したいと思える製品を作り、その先のお客様に革新的で魅力的な体験を提供することにあり続けます。
レビューウィジェットでウェブサイトをグレードアップする方法の例を、いくつかご紹介します。
ホームページ向けのレビュースライダーまたはカルーセル
スライダーやカルーセルを、ホームページにそのまま埋め込みましょう。ソーシャルプルーフは通常、ホームページのヒーロー画像やコールトゥアクションのすぐ下に配置されます。
同様に、ウェブサイトのコンバージョンファネルで使用するどのランディングページにも、同じ構成を取り入れることができます。
eコマースの商品ページ向けお客様の声ウィジェット
テーブルウィジェットとページウィジェットは、商品ページに最適です。これらのウィジェットの最大の利点は、その商品ページ上で直接レビューを集められるオプションがあることです。これにより、ソーシャルメディアアカウントから取得したレビューと、商品ページでレビューを残してくれた訪問者からのレビューを、ウィジェット内で組み合わせることができます。
新しいレビューウィジェットを使い始めるには？
上の画像でご覧いただいたとおり、新しいレイアウトはすぐにお使いいただけます！
新しいウィジェットは、レビューフィードセクションに移動し、編集したいフィードをクリックするだけで、今すぐご利用いただけます。
最後のステップは、レイアウトのオプションを変更して、グリッド、カラム、ページ、テーブル、スライダー、カルーセルのいずれかを選ぶだけです。
そして、まだEmbedSocialプラットフォームをご利用でない方は、ぜひ無料トライアルにご登録いただき、新しいレビューウィジェットをお試しください。
さらにサポートが必要な場合は、専任のカスタマーサクセスチームがいつでもお手伝いします（あなたの代わりに対応することもできます）。ご質問があれば、お気軽にお問い合わせください。
しかし、デザインが変わっても、私たちの主なミッションは変わりません。それは、お客様であるユーザーが自分のクライアントと信頼を築き、その結果としてコンバージョンを高めるお手伝いを、期待を超えて全力で行うことです。
