f-traコンバージョンアップのためのUI改善情報をお届け。EFOやCTAのハウツーなど。勝手にweb接客徹底解剖、第5回目は株式会社メガネスーパー様の公式サイト/ECサイトを題材とさせていただきます。本社をおくメガネ、コンタクトレンズなどの販売を行う全国チェーン店の業界大手企業(wikipediaより)。全国の店舗やインターネット、出張サービスなどのメガネの販売にとどまらず、眼育セミナーの実施やサプリメントの開発、メガネ型ウェアラブル端末やアイケアスクールを手がけるなど、業界を超えた異業種との取り組みを活発に実施されているようです。そんなメガネスーパー様のサイトには、どういったweb接客の工夫が隠されているのでしょうか。「徹底解剖」していきたいと思います。※本記事の内容は2017年6月30日時点のメガネスーパー様のサイトを分析した内容を記載しています。CTAは導入されていません(2017年6月30日時点)。筆者がサイトを回遊したところ、PC・スマートフォンいずれについても、少なくとも下記のweb接客を表示していることが確認できました。ページ右下のへのトグルバナー表示(PCのみ※)ページ訪問直後からページの右下にポップアップが表示され、クリックすると、モーダルウィンドウでバナーがあらわれます。筆者が何度かサイトを訪問した結果、コーポレートサイトには2種類、ECサイトには1種類のキャンペーンバナーを用意していることが確認できました。ページ右下にポップアップを表示し、クリックすることで詳細を記載したバナーがあらわれる。ページ右下に表示されているバナーポップアップをクリックすると、モーダルウィンドウで詳細を記載したバナーがあらわれるサイドメニューの表示(PCのみ※)ECサイトには、ページから離脱する際に、サイドメニュー型のモーダルウィンドウ(以下、「サイドメニュー」とします)が開くようになっていました。サイドメニュー内では、商品の閲覧や検索などが可能となっています。※筆者のアクセスによって確認された範囲による推量。ページの右側全体を覆う形でモーダルウィンドウが現れる。サイドメニュー内は高機能で、メルマガ登録フォーム、商品情報などが並ぶ。次にweb接客の表示対象ページや表示頻度について見ていきます。確認するかぎりでは、トグル(表示・非表示を切り替えることができる)型のバナーは、特に表示対象のページを限定していないようで、どのページを見たときも、つねに画面右下にポップアップが表示されていました。一見すると、ポップアップを全ページにつねに表示しておくのは頻度として多すぎるように思えます。表示されているのはシンプルなポップアップのみであるので、ユーザーは必要に応じてバナーを展開させることができます。ポップアップには、しばらくの時間経過すると、透明度が上がり目立たなくなるような仕掛けが。(マウスをあてると、透明度がもとに戻ります)このため、ビジュアル的にそこまで気になることはありません。☓ボタンを押下するとポップアップが消滅しますが、別のページに遷移すると再び表示されます。ユーザーが一度消したポップアップを再び呼び出したくなった場合にも苦労することがなさそうです。必要に応じて展開できるバナーはユーザーフレンドリーなweb接客の手法。一定時間が経過すると、透明度が上がり目立たなくなる。対してサイドメニューは、サイトへの表示頻度がかなり絞られていました。サイドメニューが表示されるのは商品の詳細ページから離脱したときにのみ。訪問に対して1度しか表示されないようでした。離脱トリガーでのバナー表示は、ある意味ユーザーの行動を無理やり引き止める強引な方法です。ユーザーにストレスを与えかねないため、慎重な運用が必要であり、表示を1度だけに制限しているのは賢明な判断だと思います。サイドメニューは個別商品をレコメンドする内容ですので、すでに具体的に商品を検討しているユーザーと親和性が高そうです。商品詳細ページは、1度きりしか表示できないバナーの使いどころとして非常に有効に思えます。直前まで商品を見て離脱したユーザーに1度だけ表示。ユーザーストーリーを踏まえたキャンペーン設計です。サイドメニュー内は高機能で、メルマガ登録フォーム、商品情報などが並ぶ。デザイン・メッセージ続いては、デザイン・クリエイティブとその訴求内容についてまとめて見ていきます。今回は4種類のクリエイティブを確認することができたので、最初に個別の訴求内容について、その後全体的な特徴について触れていきます。1.ECサイトへの誘導オファーページ右下に表示されるポップアップ上記を展開することで表示される、ECサイトへの誘導バナーコーポレートサイト側で運用されており、後述するECサイトの「1時間限定クーポン」キャンペーンを中心に訴求し、ECサイトへの訪問を誘導する内容となっています。クリックすると、ECサイトのトップへ遷移します。カンタン決済」「店舗・コンビニ受取」などのECサイトの魅力を複数伝える内容となっています。訴求するWeb接客バナーです。その名の通り、1時間以内に購入する場合に有効なクーポンコードが表示されるようになっています。アプリアイコンなどでおなじみの通知マークをポップアップ右上に配置。クリックしたくなる上記のポップアップをクリックすることで、1時間限定クーポンの詳細が展開される。割引額が大きく強調され、その他キャンペーンの適用条件なども完結にまとまっています。サイトに訪れただけでは1時間のカウントダウンは開始せず、右下のバナーをクリックするか、コーポレートページのオファから遷移してきた場合にタイムカウントが開始されるようでした。バナーには割引金額やクーポンコード、クーポンの使用方法、残り時間のカウントダウンが表示されています。3.LINE友達追加キャンペーンECサイトのトグル型バナーにはもう1種類、LINEの友だち追加を促すキャンペーンも存在しました。LINEカラーの緑色をあしらったポップアップ。ポップアップをクリックすると、キャンペーン詳細が展開。「500円」という定量的なメリットが強調されているほか、配色もLINEのブランドカラーを使用し、キャンペーン概要もわかりやすく記載されておりバナーデザインの観点では特に問題はなさそうに思えます。バナーの遷移先はLINE社の友達追加ページで、QRコードが大きく表示されます。特筆すべきは、全体的にweb接客がPCでしか実施されていない点。このLINEのキャンペーンは、スマートフォン利用者のほうがより相性が良いはず。QRコードを読み取ってもらうよりは、スマートフォンからそのままLINEアプリを起動するほうがユーザーとしても負担が少ないでしょう。1ポップアップをクリック、2バナーをクリック、3QRコードを読み取り、4友達追加と、意図するアクションに至るまでのステップが多すぎるようにも感じます。スマートフォンでキャンペーンを展開しない理由がありません。バナーをクリックすると、LINE社のページに遷移。最後はECサイトで表示されるサイドメニューです。右側から開くような動作でなめらかに出現し、離脱しようとするユーザーに対しメールマガジンの登録や関連商品などを訴求するものとなっています。サイドメニュー内で商品を検索することも可能です。サイドメニュー内は高機能で、メルマガ登録フォーム、商品情報などが並ぶ。サイドメニュー内の商品リンクをクリックすると、さらに商品の詳細を表示する。検索や登録フォームなど高機能でいながら、情報量が多すぎることもなくクリエイティブとしては申し分ないのですが、少し気になったのはパフォーマンスについて。サイドバナーを何度が表示させてみたものの、画像が表示されないことがあるなど少し動作に不安を感じました。魅力的なクリエイティブもパフォーマンスには少し不安が。「1時間のみ有効」というキャンペーンの効果を最大化するために、限定感を醸し出す工夫が随所に見られました。バナーを展開した時にタイムカウントを表示するだけでなく、閉じた場合にもポップアップの上に小さく残り時間のカウントダウンを表示し、ユーザーの行動をもったいないと感じる感情から後押ししています。時間内になにか購入しないと損するのではないか、という気分にさせられる。ユーザー心理を巧みに突いてくるクリエイティブ。吹き出しで残り時間をカウントダウンし、ユーザーを焦らせ購買意欲を刺激する「いくらお得なのか」「何をすればよいか」が明確どのバナーも、ユーザーがどんな行動をすることでどういったメリットを享受できるのかといったキャンペーンの全容が完結かつ明確に記載されていました。web接客で陥りがちなミスのひとつに、メリットを訴求するあまり、そのためにどういった行動を取ればよいかの提示が疎かになり、ユーザーを迷わせてしまうという点がありますが、このサイトのキャンペーンにはそのような心配がなさそうです。どこで何をすればよいかが常に明確で、ユーザーを迷わせないキャンペーン間の横移動が可能モーダルウィンドウを展開した際に、左右のカーソルから別のキャンペーンのバナーも確認できる機能が用意されています。ランダムで2種類のキャンペーンが表示されるようですが、ユーザーは自身の興味に応じて、たまたま表示されていた内容とは別のキャンペーン内容にもアクセスできるようになっています。バナー左側のカーソルアイコンをクリックすると、別のバナーに表示を切り替えることができる。最後に本日はメガネスーパー様のweb接客について徹底解剖いたしました。最後は記事全体のまとめとして、優れている点と課題に感じた点を挙げて終わりたいと思います。表示のパフォーマンスツイートこの記事が気に入ったらいいね!しようUI改善ブログの最新情報をお届けしますUI改善ブログを運営する株式会社エフ・コードではUI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。Push」をご導入いただきました。当ブログの更新情報は以下の各種アカウントから購読できます。Facebookを見るTwitterでフォローするFeedlyで購読するRSSを登録するメールマガジンを購読するブログの更新情報やセミナーのお知らせなど、UI改善に関する情報を1~2週間に1回お届けします。AM面白い記事だけど、もっとズバズバ斬ってたら面白いのになー。PRESSで執筆しましたEFOに関する特集記事を寄稿しています。Vol.89特集3:エントリーフォーム最適化入門2015年10月24日発売Web担当者Forumで連載中!公式Facebookページf-tra(エフトラ)について株式会社エフ・コードのマーケティングテクノロジーブランド「f-tra(エフトラ)」。現在は入力フォーム最適化(EFO)を簡単に実施できる「f-traEFO」と、ユーザーの行動喚起を促すためのUI検証する「f-traCTA」の2種類のUI改善ツールを提供しています。講演/取材/執筆についてEFOに関する講演、雑誌への寄稿、出版、取材などのご依頼は、弊社のお問合せフォームより承っております。お気軽にお問合せくださいませ。田中エフトラEFOサポートチームを統括する傍ら、EFOに関する講演、セミナー登壇、執筆などにも従事。Web担当者Forumにて連載を執筆しています。