勝手にweb接客徹底解剖:メガネスーパー/メガネ・コンタクトレンズ販売

勝手にweb接客徹底解剖、第5回目は株式会社メガネスーパー様の公式サイト/ECサイトを題材とさせていただきます。

メガネスーパー様は、神奈川県小田原市に本社をおくメガネ、コンタクトレンズなどの販売を行う全国チェーン店の業界大手企業(wikipediaより)。全国の店舗やインターネット、出張サービスなどのメガネの販売にとどまらず、眼育セミナーの実施やサプリメントの開発、メガネ型ウェアラブル端末やアイケアスクールを手がけるなど、業界を超えた異業種との取り組みを活発に実施されているようです。

そんなメガネスーパー様のサイトには、どういったweb接客の工夫が隠されているのでしょうか。さっそく、「徹底解剖」していきたいと思います。

※本記事の内容は2017年6月30日時点のメガネスーパー様のサイトを分析した内容を記載しています。なお今回ご紹介したサイトには当社 f-tra CTAは導入されていません(2017年6月30日時点)。

web接客の種類

筆者がサイトを回遊したところ、PC・スマートフォンいずれについても、少なくとも下記のweb接客を表示していることが確認できました。

ページ右下のへのトグルバナー表示(PCのみ※)

ページ訪問直後からページの右下にポップアップが表示され、クリックすると、モーダルウィンドウでバナーがあらわれます。

なお筆者が何度かサイトを訪問した結果、コーポレートサイトには2種類、ECサイトには1種類のキャンペーンバナーを用意していることが確認できました。

○ ページ右下にポップアップを表示し、クリックすることで詳細を記載したバナーがあらわれる。

ページ右下に表示されているバナー

ポップアップをクリックすると、モーダルウィンドウで詳細を記載したバナーがあらわれる

サイドメニューの表示(PCのみ※)

ECサイトには、ページから離脱する際に、サイドメニュー型のモーダルウィンドウ(以下、「サイドメニュー」とします)が開くようになっていました。サイドメニュー内では、商品の閲覧や検索などが可能となっています。

※筆者のアクセスによって確認された範囲による推量。

○ ページの右側全体を覆う形でモーダルウィンドウが現れる。

サイドメニュー内は高機能で、メルマガ登録フォーム、商品情報などが並ぶ。

表示の頻度・効果

次にweb接客の表示対象ページや表示頻度について見ていきます。

トグル型バナーは全ページにつねに表示

確認するかぎりでは、トグル(表示・非表示を切り替えることができる)型のバナーは、特に表示対象のページを限定していないようで、どのページを見たときも、つねに画面右下にポップアップが表示されていました。
一見すると、ポップアップを全ページにつねに表示しておくのは頻度として多すぎるように思えます。しかし、あくまで表示されているのはシンプルなポップアップのみであるので、ユーザーは必要に応じてバナーを展開させることができます

さらに、ポップアップには、しばらくの時間経過すると、透明度が上がり目立たなくなるような仕掛けが。(マウスをあてると、透明度がもとに戻ります)このため、ビジュアル的にそこまで気になることはありません。

☓ボタンを押下するとポップアップが消滅しますが、別のページに遷移すると再び表示されます。ユーザーが一度消したポップアップを再び呼び出したくなった場合にも苦労することがなさそうです。

◎ 必要に応じて展開できるバナーはユーザーフレンドリーなweb接客の手法。

一定時間が経過すると、透明度が上がり目立たなくなる。ユーザーのサイト閲覧を妨げないための配慮が感じられます

サイドメニューは商品詳細ページでのみ表示

対してサイドメニューは、サイトへの表示頻度がかなり絞られていました。サイドメニューが表示されるのは商品の詳細ページから離脱したときにのみ。また、訪問に対して1度しか表示されないようでした。

離脱トリガーでのバナー表示は、ある意味ユーザーの行動を無理やり引き止める強引な方法です。ユーザーにストレスを与えかねないため、慎重な運用が必要であり、表示を1度だけに制限しているのは賢明な判断だと思います。
サイドメニューは個別商品をレコメンドする内容ですので、すでに具体的に商品を検討しているユーザーと親和性が高そうです。商品詳細ページは、1度きりしか表示できないバナーの使いどころとして非常に有効に思えます。

◎ 直前まで商品を見て離脱したユーザーに1度だけ表示。ユーザーストーリーを踏まえたキャンペーン設計です。

サイドメニュー内は高機能で、メルマガ登録フォーム、商品情報などが並ぶ。

デザイン・メッセージ

続いては、デザイン・クリエイティブとその訴求内容についてまとめて見ていきます。

なお、今回は4種類のクリエイティブを確認することができたので、最初に個別の訴求内容について、その後全体的な特徴について触れていきます。

1.ECサイトへの誘導オファー

ページ右下に表示されるポップアップ

上記を展開することで表示される、ECサイトへの誘導バナー

コーポレートサイト側で運用されており、後述するECサイトの「1時間限定クーポン」キャンペーンを中心に訴求し、ECサイトへの訪問を誘導する内容となっています。クリックすると、ECサイトのトップへ遷移します。

鮮やかなピンク色と黄色を用いた派手なデザインで、「1時間限定クーポン」のほかにも、「通販限定大特価」「カンタン決済」「店舗・コンビニ受取」などのECサイトの魅力を複数伝える内容となっています。

2.1時間限定クーポン

ECサイト側で「1時間限定クーポン」 を訴求するWeb接客バナーです。その名の通り、1時間以内に購入する場合に有効なクーポンコードが表示されるようになっています。

アプリアイコンなどでおなじみの通知マークをポップアップ右上に配置。ついクリックしたくなる

上記のポップアップをクリックすることで、1時間限定クーポンの詳細が展開される。

割引額が大きく強調され、その他キャンペーンの適用条件なども完結にまとまっています。
サイトに訪れただけでは1時間のカウントダウンは開始せず、右下のバナーをクリックするか、コーポレートページのオファから遷移してきた場合にタイムカウントが開始されるようでした。

バナーには割引金額やクーポンコード、クーポンの使用方法、残り時間のカウントダウンが表示されています。

3.LINE友達追加キャンペーン

ECサイトのトグル型バナーにはもう1種類、LINEの友だち追加を促すキャンペーンも存在しました。

LINEカラーの緑色をあしらったポップアップ。

ポップアップをクリックすると、キャンペーン詳細が展開。

「500円」という定量的なメリットが強調されているほか、配色もLINEのブランドカラーを使用し、キャンペーン概要もわかりやすく記載されておりバナーデザインの観点では特に問題はなさそうに思えます。
バナーの遷移先はLINE社の友達追加ページで、QRコードが大きく表示されます。

特筆すべきは、全体的にweb接客がPCでしか実施されていない点。とくにこのLINEのキャンペーンは、スマートフォン利用者のほうがより相性が良いはず。QRコードを読み取ってもらうよりは、スマートフォンからそのままLINEアプリを起動するほうがユーザーとしても負担が少ないでしょう。

①ポップアップをクリック、②バナーをクリック、③QRコードを読み取り、④友達追加と、意図するアクションに至るまでのステップが多すぎるようにも感じます。

注意 スマートフォンでキャンペーンを展開しない理由がありません。

バナーをクリックすると、LINE社のページに遷移。QRコードが表示される

4.商品をレコメンドするサイドメニュー

最後はECサイトで表示されるサイドメニューです。
右側から開くような動作でなめらかに出現し、離脱しようとするユーザーに対しメールマガジンの登録や関連商品などを訴求するものとなっています。サイドメニュー内で商品を検索することも可能です。

サイドメニュー内は高機能で、メルマガ登録フォーム、商品情報などが並ぶ。

サイドメニュー内の商品リンクをクリックすると、さらに商品の詳細を表示する。

検索や登録フォームなど高機能でいながら、情報量が多すぎることもなくクリエイティブとしては申し分ないのですが、少し気になったのはパフォーマンスについて。サイドバナーを何度が表示させてみたものの、画像が表示されないことがあるなど少し動作に不安を感じました。

注意 せっかくの魅力的なクリエイティブもパフォーマンスには少し不安が。高機能ゆえの悩みか

筆者の通信環境では、商品画像が一部、表示されない時があった

ユーザーの購買意欲をゆさぶる時間制限

「1時間のみ有効」というキャンペーンの効果を最大化するために、限定感を醸し出す工夫が随所に見られました。
バナーを展開した時にタイムカウントを表示するだけでなく、閉じた場合にもポップアップの上に小さく残り時間のカウントダウンを表示し、ユーザーの行動をもったいないと感じる感情から後押ししています。

◎ 時間内になにか購入しないと損するのではないか、という気分にさせられる。ユーザー心理を巧みに突いてくるクリエイティブ。

吹き出しで残り時間をカウントダウンし、ユーザーを焦らせ購買意欲を刺激する

「いくらお得なのか」「何をすればよいか」が明確

どのバナーも、ユーザーがどんな行動をすることでどういったメリットを享受できるのかといったキャンペーンの全容が完結かつ明確に記載されていました。
web接客で陥りがちなミスのひとつに、メリットを訴求するあまり、そのためにどういった行動を取ればよいかの提示が疎かになり、ユーザーを迷わせてしまうという点がありますが、このサイトのキャンペーンにはそのような心配がなさそうです。

◎ どこで何をすればよいかが常に明確で、ユーザーを迷わせない

キャンペーン間の横移動が可能

モーダルウィンドウを展開した際に、左右のカーソルから別のキャンペーンのバナーも確認できる機能が用意されています。
ランダムで2種類のキャンペーンが表示されるようですが、ユーザーは自身の興味に応じて、たまたま表示されていた内容とは別のキャンペーン内容にもアクセスできるようになっています。

◎ バナー左側のカーソルアイコンをクリックすると、別のバナーに表示を切り替えることができる。

最後に

本日はメガネスーパー様のweb接客について徹底解剖いたしました。
最後は記事全体のまとめとして、優れている点と課題に感じた点を挙げて終わりたいと思います。

優れている、取り入れたいポイント

  • バナーの表示頻度とクリエイティブのバランスが最適
  • ユーザーの購買意欲をゆさぶる時間制限
  • 「いくらお得なのか」「何をすればよいか」が明確
  • キャンペーン間の横移動が可能

課題と思われる点、その他論点など

  • スマートフォンでのキャンペーン展開
  • 表示のパフォーマンス

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

UI改善ブログを運営する株式会社エフ・コードでは
UI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。

エフトラEFOサイトへ エフトラCTAサイトへ

UI改善ブログ by f-tra の購読

当ブログの更新情報は以下の各種アカウントから購読できます。

メールマガジンを購読する

ブログの更新情報やセミナーのお知らせなど、
UI改善に関する情報を1~2週間に1回お届けします。

メールアドレスを入力

 購読解除はいつでも可能です