f-traコンバージョンアップのためのUI改善情報をお届け。EFOやCTAのハウツーなど。Record(以下タワーレコード)」様の公式サイトを題材とさせていただきます。アメリカで誕生したタワーレコード様。LIFE」でおなじみの大手音楽ソフト販売チェーン店です。渋谷の旗艦店を筆頭に現在31都道府県に85店舗があるようで、黄色と赤のブランドロゴをよく目にする人も多いのではないでしょうか。そんなタワーレコードのサイトには、どういったweb接客の工夫が隠されているのでしょうか。「徹底解剖」していきたいと思います。※本記事の内容は2017年6月11日時点のタワーレコードのサイトを分析した内容を記載しています。CTAは導入されていません(2017年6月11日時点)。筆者がサイトを回遊したところ、PC・スマートフォンいずれについても、少なくとも下記のweb接客を表示していることが確認できました。ページ右下のポップアップバナー(PC)ページを訪問した後に、しばらくの時間経過・もしくは一定量のスクロール※1後ページ右下にバナーをポップアップ表示。ページ全体の読み込みと同時ではなく、時間経過やスクロールといった何らかのトリガーでバナー表示されるために、web接客としての注目度は十分です。バナーをクリックすると、キャンペーン情報の詳細ページに遷移。「☓」マークをクリックすると、そのままバナーが閉じられるようになっています。筆者が何度かサイトを訪問した結果、各訪問に対して2種類ずつのバナーを表示しているようでした。※筆者のアクセスによって確認された範囲による推量。ページ右下にポップアップバナーを表示。ユーザー体験としては、ページを表示してからしばらく経過後に現れる。PCサイトでのweb接客例。この位置へのバナー表示はweb接客の定番パターン。ページ下部へのポップアップバナー(スマートフォンのみ)スマートフォン向けのページでも、PCと同様のパターンでポップアップバナーを表示させているようです。スマートフォン向けには、ページ右下ではなく、ページ最下部エリア全体にバナーが表示されます。ページの最下部を覆うようにバナーが表示される。こちらもスマートフォンのweb接客では定番のバナー表示領域。スマートフォンでのweb接客ポップアップ表示例。次にweb接客の対象ページや表示頻度について見ていきます。PCとスマートフォンで対象ページと表示頻度、そして以降の段落で言及するデザインや訴求内容についても共通となっているようでした。いう3つのカテゴリに分かれています。「オンラインショップ」はその名の通り、CDなどの音源やグッズや書籍などの音楽関連商品などのEC、「音楽情報」はアーティストのインタビューや新譜情報などの音楽関連ニュース、「店舗情報」は全国の店舗に関する情報がメインとなります。PC向けサイトでは、ページ上部にタブ形式のUIがあり、それぞれのカテゴリのコンテンツを閲覧しているかどうかが把握できるようになっている。web接客のバナーは、このカテゴリのうち少なくとも「オンラインショップ」についてのページにおいてのみ表示されているようでした。バナーのオファーはオンラインECに関するものであるため、直接関係のないページでの表示を除外していることはweb接客として正しい。閲覧しているときにクーポンのバナーが表示されるのはユーザー心理に親和的。表示頻度について冒頭でも紹介したとおり、どちらのデバイスも2種類のバナーを表示しています。バナー表示対象ページに対して2PVと3PV目の時に表示されているようです。4PV目以降は、たとえ同じページを更新したとしてもバナーは現れないようになっています。web接客でよくある、何度も同じバナーが表示されユーザー体験を損なってしまうNGパターンは防げているといえます。いっぽうで、一度バナーを閉じてしまうと二度と現れないため、ユーザーがバナーの内容に興味を持ったとしても、その場でページ遷移しない限りは(少なくともweb接客からは)そのページにたどり着くことができません。バナーを反射的に閉じてしまったものの、やはりキャンペーン内容が気になって戻って確認する、という行動をとるユーザーは少なくないかと思いますので、少々勿体無いキャンペーン設計のように感じます。一度閉じてしまったら、ユーザーは自力でサイトを回遊し、同じページを発見するしかない。キャンペーンをもう一度見たくなったユーザーもスムーズに該当ページに誘導するために有効なのは、小さなバナーでトグル表示(表示する/隠すを切り替えられるUI)させるという方法。することで、ユーザーは必要に応じていつでもバナーを展開させることができます。当社クライアントのECサイトで実際に効果のあったキャンペーンバナーの一例(実際のバナーをもとにした構成要素)。画面右下にポップアップを表示(左)/クリックすることでひとまわり大きなバナーを展開。デザイン・メッセージ続いては、デザイン・クリエイティブとその訴求内容についてまとめて見ていきます。ログイン状況に応じてバナーの内容が変化サイトにログインしているかどうかで訴求内容が切り替わる仕組みで、未ログイン状態では新規会員登録のオファー、ログイン後はセール情報のオファーが表示されます。(厳密には、2つ表示されるバナーのうちの片方がログイン状態に応じて切り替わっているようでした。)ユーザーのステイタスにあわせて訴求内容を変更するというweb接客最適化の基本をしっかりおさえていますね。ユーザーがログイン済みのときは、会員用のオファーを表示している。バナーがセール情報をあつかう内容に置き換わる。あわせて今回は3種類のバナーを確認することができたので、個別の訴求内容について見てみましょう。新規会員登録オファーの例。「500円」「クーポン」「(無料)」などのCTAに効果的とされる文言が詰まった内容となっています。デザインもサイトに合ったトーンで、タイポグラフィもメリハリがあり、特に問題点はないと思います。特筆したいのは、右上にブランドロゴを表示している点。この表示によって、ユーザーはサイトに関係ない広告かそうでないかを瞬時に判断することができます。セール情報オファーセール情報オファーの例。楳図かずおのイラスト素材と真っ赤なカラーリングでひときわ注目を集めるデザインですが、ブランドカラーの黄色・赤・黒の3色でまとめてあり、サイトのトンマナにマッチしています。インパクト重視のバナーであり、一見しただけでは何のバナーなのかわかりにくいという側面もあります。唯一内容を表す「原価割れセール」という文言は、フォントを可読性の高いものに変更するなどの工夫があっても良いかもしれません。dポイント5倍オファーdポイント5倍オファーの例。ドコモ社の決済サービスである「dケータイ払いプラス」を利用することで得られるポイントに関するオファーのようです。「dポイント」といった固有名詞を理解していることが前提となるオファーであり、すべてのユーザーが一瞬でキャンペーン内容を理解することは難しいと思われます。表示するページを限定するか、たとえば「ドコモユーザーならさらにお得!」と言った風に、誰に向けたメッセージなのかが明確になっていると良いのではないでしょうか。バナーと着地ページのアイキャッチがマッチしている3種類のバナーいずれも、着地ページには同じデザインのアイキャッチ画像を用意していました。バナーとランディングページの見た目のギャップが大きいと、ユーザーがそのページから興味を抱いたコンテンツを探し出す行動への負担が大きく、直帰につながりやすくなってしまいます。同じデザインのアイキャッチが用意されていることで、スムーズにコンテンツを読み進めることができますね。着地ページの内容を効果的にユーザーに届けるためには、バナーとの見た目のギャップを小さくしておくことが大切です。最後に本日はタワーレコード様のweb接客について徹底解剖いたしました。最後は記事全体のまとめとして、優れている点と課題に感じた点を挙げて終わりたいと思います。優れている、取り入れたいポイントバナーと着地ページのデザインがマッチしているユーザーの状態に応じてのオファーの出し分けバナーの表示頻度が多すぎないバナーが少し遅れて表示され、十分に注目を集めている課題と思われる点、その他論点など一度閉じたバナーが二度と表示されない表示箇所や表示方法が一定で変化がない割引率や期限を表示しての訴求ツイートこの記事が気に入ったらいいね!しようUI改善ブログの最新情報をお届けしますUI改善ブログを運営する株式会社エフ・コードではUI改善の基本施策を簡単に実施できる「エフトラEFO」「エフトラCTA」を開発しています。当ブログの更新情報は以下の各種アカウントから購読できます。Facebookを見るTwitterでフォローするFeedlyで購読するRSSを登録するメールマガジンを購読するブログの更新情報やセミナーのお知らせなど、UI改善に関する情報を1~2週間に1回お届けします。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にて連載を執筆しています。