f-traコンバージョンアップのためのUI改善情報をお届け。EFOやCTAのハウツーなど。勝手にCTA徹底解剖、第3回目はスポーツブランド「PUMA」の公式サイトを題材とさせていただきます。ネコ科動物のロゴマークでおなじみのPUMAはドイツで生まれた企業で、adidasとともにヨーロッパを代表するスポーツ用品メーカーです。(PUMAとadidasの創業者は兄弟、というのは有名です。)最近では歌手のリアーナとのコラボレーションモデルが2016年のシューズオブザイヤーを受賞したことでも話題となりました。そんな全世界にファンを抱えるPUMA。そのオンラインECサービスには、どういった工夫が隠されているのでしょうか。「徹底解剖」していきたいと思います。※本記事の内容は2017年5月30日時点のPUMAのサイトを分析した内容を記載しています。CTAは導入されていません(2017年5月30日時点)。web接客の種類サイトを回遊したところ、PC・スマートフォンいずれについても、少なくとも下記の2種類のweb接客を表示していることが確認できました。モーダルポップアップトップページを訪問したときに、モーダルウィンドウ形式でバナーを表示。モーダルウィンドウは、バナーを閉じるかクリックするかの動作以外を受け付けなくするため、必ずユーザーの目に止まることになります。バナーを閉じるかクリックするかの動作以外を受け付けなくするモーダルポップアップ。ユーザーが目にすることになるため、強い訴求を行いたい場合のCTAの定番の形です。PC向けサイトでのバナー表示例。スマートフォン向けサイトでの表示例。コンテンツ上さらに、全てのページの最上部に黒色の帯の形でもweb接客バナーを表示していました。この帯はクリックすると領域が拡大し、詳しい内容を確認することができる仕様となっています。ユーザーが必要に応じて展開できる形式は、ユーザーの行動を邪魔することがなく、こちらもweb接客では定番の形といえます。ページの最上部にクリックすると展開するweb接客を配置している。PC向けサイトでの表示例。クリックして展開した状態。スマートフォンでの表示例。次に、それぞれについてweb接客の対象ページや表示頻度について見ていきます。モーダルポップアップ表示対象ページはトップページのみ。表示対象ページはトップ1ページのみと限定的ではあるものの、ページを訪れるたびに毎回表示されていました。モーダルウィンドウのような強い訴求方法は、ユーザビリティを落とすことにもつながる諸刃の剣。表示は初回のみに留めるなどの工夫が必要かと思われます。トップページを訪れるたびに毎回バナーが表示されてしまう。確認した限りではすべてのページに設置されているようでした。モーダルウィンドウとは対照的に、ユーザーの行動を邪魔しない点は良いのですが、注目度が低いように感じます。ページを読み込んだ際に、少しバナーの表示を遅らせてからアニメーションを伴って登場させると、よりユーザーの注目を集めるweb接客になるかもしれません。すべてのページに設置、なおかつとくに動きがないので注目度は高いといえない可能性。つねに同じ位置に存在していると段々目に入らなくなってくる。デザイン次に、デザイン・クリエイティブについて見ていきます。モーダルポップアップスニーカーの写真を背景にしいた、サイトのトーンとマッチするデザインとなっています。サイトとかけ離れたトーンのバナーを表示すると、ユーザーは一瞬、サイトに関係ない広告が出てきた、と勘違いしてしまうことも予想されるため、特に背景が暗転するモーダル表示においては、デザインテイストをあわせておくのは大切なことです。全体的に落ち着いた色使いなので、ボタンのビビットなオレンジ色が引き立ちます。サイトのデザインテイストにマッチしたデザイン。コンテンツ上オレンジ色と白を基調としたデザインに、黒の帯状のバナーがかなり引き立って見えます。文字のみのシンプルな構成ですが、下向きの矢印アイコンがあることで、クリックすると展開することが直感的に理解できる、無駄のないデザインです。色使い・構成内容ともに申し分なし。PC向けサイトでの表示例。メッセージ続いて、訴求内容について見ていきましょう。モーダルポップアップサイトにログインしているかどうかで訴求内容が切り替わる仕組みのようです。未ログイン状態では新規会員登録のオファー、ログイン後は会員限定のセール情報のオファーが表示されます。ユーザーのステイタスにあわせて訴求内容を変更するというのはweb接客の基本。今回の場合、すでに会員登録済みのユーザーに「新規会員登録でクーポンプレゼント」というオファーを行っても意味がありませんので、このような表示の出し分けを行うのは当然のことかもしれませんが、対応できていないサイトもいまだに多いのではないでしょうか。ログインの有無以外にも、訪問回数やページ閲覧数、閲覧ページの種類など、さらに細かくユーザーをセグメントし、オファーの出しわけを検証できると、よりいっそう効果的です。ユーザーがログイン済みのときは、会員用のオファーを表示している。コンテンツ上ページ上部のバナーも、訴求内容の切り替え方やその内容はモーダルポップアップとほぼ同様のものでした。優れている点として「○月○日○時まで」といった日時のカウントダウンや「今だけ」という文言など、限定感を醸し出す文言が使われてる点が挙げられます。「10%OFF」といった具体的な割引率や、「クーポン」「プレゼント」といった文言も効果的で、理想的なCTA。最後に本日はPUMA様の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にて連載を執筆しています。