勝手にweb接客徹底解剖、今回は株式会社大地を守る会様のECサイト「大地宅配お買い物サイト」を題材とさせていただきます。
「大地宅配お買い物サイト」は、大地を守る会様が運営する、有機野菜や自然食品など、国産の安心でおいしい食材や雑貨を購入できるサイトです。食の安全の重要性が叫ばれ、農薬に頼らずに育てられたオーガニック野菜を手に取る健康志向な人が増えてきている昨今、野菜やお惣菜を通販で手軽に購入できる大変便利なサービスです。
そんな「大地宅配お買い物サイト」には、どういったweb接客の工夫が隠されているのでしょうか。さっそく、「徹底解剖」していきたいと思います。
web接客の種類
まずはこのサイトにどのようなweb接客の仕組みが存在するのかを見ていきます。
筆者がサイトを回遊したところ、非常にたくさんのweb接客バナーを確認できました。パターンとしては大きく３種類あるようです。下記にご紹介させていただきます。
ページ下部ポップアップからモーダルウィンドウを展開
訪問直後、ページ下部にポップアップが表示されます。そのポップアップの案内に従い、特定のページに遷移もしくはモーダルウィンドウ型のバナーが展開されます。
モーダルウィンドウを表示した場合には、バナー内の「次へ」ボタンをクリックすることにより、次のバナーを表示することができ、連続性のあるweb接客が展開されます。
ページ下部にポップアップを表示し、クリックすることでバナーを展開する
ページ下部に出現するバナー
クリックすると、モーダルウィンドウでバナーが展開する。
バナー内の「次へ」ボタンを押下することで、さらに複数の異なるバナーが順次展開する
なお、一連のキャンペーンはPCのみならずスマートフォンでも同様に展開されていました。
こういったweb接客キャンペーンはPCでしか展開されないケースが多い中、スマートフォンでもしっかりとキャンペーンが実施されている。
スマートフォンでもPC版と同様のバナーが展開される。
ストーリーにあわせ、ページの各所に移動するチュートリアルバナー
画面の内容やサイトの使い方を一連の流れで解説するチュートリアルが展開されていました。モーダルウィンドウやポップアップウィンドウ等を用いて画面内のコンテンツの実際の箇所を示しています。
画面の実際の位置にあわせてバナーが展開されるため、非常に流れを理解しやすい。
モーダルウィンドウで画面内のコンテンツを説明する例
ポップアップで画面上のメニューを説明している例
右下に展開可能なバッジを表示
チュートリアルを途中で中断した場合には、ページ右下にバッジの形でポップアップを維持しておき、必要に応じて再開することができるようになっていました。
必要に応じて展開できる、ユーザーにとって優しいUI。
ページ右下に表示されるバッジ。
表示の頻度・効果
次にweb接客の表示対象ページや表示頻度について見ていきます。
いずれも表示されるのは一度きり
どのバナーも、基本的に１度ずつしか表示されることはないようです。
チュートリアルという内容の性質上、１度きり展開されるという設定で問題はなさそうです。
トップページ、商品ページで展開
サービス全体についての説明はトップページで、個別の画面に関する内容はその画面の訪問時に行われています。
チュートリアルの中で、画面が遷移したりスクロール位置が変化するという動作を含むものがありました。
デザイン・メッセージ
続いては、デザイン・クリエイティブとその訴求内容についてまとめて見ていきます。
なお、今回は３種類のクリエイティブを確認することができたので、最初に個別の訴求内容について見ていきましょう。
初回チュートリアル
このサイトに登場するポップアップは、この緑地にキャラクターとメッセージ、ボタンを配置した構成が基本となります。
メッセージは適度に黄色く強調が入れられており、ボリュームも長すぎず、ユーザーが目を通すのに苦労することはなさそうです。キャラクターも何パターンかポーズや表情があり、変化がつけられているのもポイントでしょう。
一貫したトンマナ。テキストは長すぎず、キャラクターも変化に富んでおりわかりやすいUI。
訪問直後、ページ下部に表示されるポップアップ。
上記の「おいしさ」をクリックした際に展開されるモーダルウィンドウが下記の３つです。サイトにマッチする緑とオレンジ色を使用し、おいしさのポイントを完結に伝えています。
クリックすると、モーダルウィンドウでバナーが展開する。
「おいしさ」の展開例。バナー内の「次へ」ボタンを押下することで、さらに複数の異なるバナーが順次展開する
「おいしさ」の展開を終えると、「お試しセット」への誘導と、もうひとつの「安全性」のストーリーについての展開もサジェストされます。
ボタンが並んでいますが、色で強弱をつけているのでユーザーが次のアクションを判断しやすくなっています。
ボタンの色がことなり、プライオリティが判断できる。
下記は「安全性」の展開例です。ここからさらに３枚のバナーが展開されます。すべてのおいしさ・安全性を展開するために、たくさんのバナーを遷移しなくてはならない点は少し気になるところです。ポイントを絞るか訴求点を完結にして、おいしさ・安全性それぞれ１枚ずつくらいにバナー枚数を絞ってしまっても良いのかもしれません。
すべて展開するために、ユーザーはボタンを９回クリックしなくてはならない。これを長いと感じるユーザーがいるかもしれない。
２回目チュートリアル
初回のチュートリアルを終えた状態でトップページを訪問すると、２回目訪問向けのバナー群が展開されます。
気になったのは、初回訪問においても、初回チュートリアルを終えると続いてこのバナーが展開されてしまう点。
続けて複数のチュートリアルが展開されると、かなり導入が長くなってしまいますので、別のセッションがどうかを判断して表示したほうが、ユーザーには優しいかもしれません。
「いつもご利用ありがとうございます」という、リピーター向けのメッセージになっていることからも、２度目のセッションで表示したい
このチュートリアルでは、ナビゲーションについて説明しています。
「商品一覧を開く」を選択すると、メニューが展開されます。
商品ページチュートリアル
商品詳細ページを訪問すると、購入に関する画面の使い方を説明する新たなチュートリアルが開始します。
購入ボタンをインラインで引用したり、画面の該当箇所にポップアップを移動したり、必要なメニューを展開するなど、チュートリアルをわかりやすくする工夫が随所に見られます。
ポップアップで画面上のメニューを説明している例
定期会員についてのチュートリアル
さらにトップページに遷移すると、定期会員についてのチュートリアルが開始します。
「いつもご利用ありがとうございます」という、リピーター向けのメッセージになっていることからも、２度目のセッションで表示したい。
定期会員についての詳しい紹介ページへと遷移し、遷移先の画面でポイントをピックアップして紹介しています。チュートリアルが終わった後に、ユーザー自身で詳しく内容を確認してもらうことができます。
モーダルウィンドウで画面内のコンテンツを説明する例
定期会員の「毎週お届け登録」についてのチュートリアル
最後に紹介するのは、「毎週お届け登録」についてのチュートリアル。「毎週お届け登録」は会員向けの定期購入サービスのようです。
メリットの紹介ののち、会員か非会員かどうかで別々の案内へと続きます。
会員ではない場合、まずは会員登録を行うよう促される。
最後に
本日は大地を守る会様のECサイト「大地宅配お買い物サイト」のweb接客について徹底解剖いたしました。
最後は記事全体のまとめとして、優れている点と課題に感じた点を挙げて終わりたいと思います。
優れている、取り入れたいポイント
- スマートフォンでもしっかりとキャンペーンが実施
- 画面の実際の位置にあわせて展開されるチュートリアル
- 必要に応じてチュートリアルを一時停止・再開できる
- 一貫したトンマナ。長すぎないテキスト、変化に富んだキャラクター
- ボタンの色に強弱が付いており、ユーザーが迷いにくい。
- 会員か否かで接客の流れを分岐している
課題と思われる点、その他論点など
- 初回訪問向けとリピート向けのチュートリアルがセッションで分離されていない
- チュートリアルを完了するためのクリック回数が多い
