勝手にCTA徹底解剖: PUMA公式サイト/スポーツブランドEC

勝手にCTA徹底解剖、第3回目はスポーツブランド「PUMA」の公式サイトを題材とさせていただきます。

ネコ科動物のロゴマークでおなじみのPUMAはドイツで生まれた企業で、adidasとともにヨーロッパを代表するスポーツ用品メーカーです。(PUMAとadidasの創業者は兄弟、というのは有名です。)
最近では歌手のリアーナとのコラボレーションモデルが2016年のシューズオブザイヤーを受賞したことでも話題となりました。

そんな全世界にファンを抱えるPUMA。そのオンラインECサービスには、どういった工夫が隠されているのでしょうか。さっそく、「徹底解剖」していきたいと思います。

※本記事の内容は2017年5月30日時点のPUMAのサイトを分析した内容を記載しています。なお今回ご紹介したサイトには当社 f-tra 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改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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