勝手にCTA徹底解剖:Tower Recordオンライン/レコードショップEC

勝手にCTA徹底解剖、第4回目はレコードショップ「Tower Record(以下タワーレコード)」様の公式サイトを題材とさせていただきます。

アメリカで誕生したタワーレコード様。日本では箭内道彦氏が手がけたキャンペーン「NO MUSIC, NO LIFE」でおなじみの大手音楽ソフト販売チェーン店です。渋谷の旗艦店を筆頭に現在31都道府県に85店舗があるようで、黄色と赤のブランドロゴをよく目にする人も多いのではないでしょうか。

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

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

web接客の種類

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

ページ右下のポップアップバナー(PC)

ページを訪問した後に、しばらくの時間経過・もしくは一定量のスクロール1後ページ右下にバナーをポップアップ表示。ページ全体の読み込みと同時ではなく、時間経過やスクロールといった何らかのトリガーでバナー表示されるために、web接客としての注目度は十分です。
バナーをクリックすると、キャンペーン情報の詳細ページに遷移。「☓」マークをクリックすると、そのままバナーが閉じられるようになっています。なお筆者が何度かサイトを訪問した結果、各訪問に対して2種類ずつのバナーを表示しているようでした。

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

○ ページ右下にポップアップバナーを表示。ユーザー体験としては、ページを表示してからしばらく経過後に現れる。

PCサイトでのweb接客例。この位置へのバナー表示はweb接客の定番パターン。

ページ下部へのポップアップバナー(スマートフォンのみ)

スマートフォン向けのページでも、PCと同様のパターンでポップアップバナーを表示させているようです。スマートフォン向けには、ページ右下ではなく、ページ最下部エリア全体にバナーが表示されます。
○ ページの最下部を覆うようにバナーが表示される。こちらもスマートフォンのweb接客では定番のバナー表示領域。

スマートフォンでのweb接客ポップアップ表示例。

表示の頻度・効果

次にweb接客の対象ページや表示頻度について見ていきます。PCとスマートフォンで対象ページと表示頻度、そして以降の段落で言及するデザインや訴求内容についても共通となっているようでした。

表示対象ページについて

タワーレコード様のwebサイトは、大きく「オンラインショップ」「音楽情報」「店舗情報」という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改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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