勝手にCTA徹底解剖 Hulu 無料トライアル

本日から新たなシリーズとして「勝手にCTA徹底解剖」をスタートしたいと思います。

EFOの「勝手に」シリーズ同様に、巷のウェブサイトを勝手に取り上げ、勝手に分析してみたいと思います。
第1回目となる今回は、Hulu(HJホールディングス様、http://www.hulu.jp/)をテーマにお届けしてまいります。
※以下、敬称は省略させていただきます。

Huluは米国発のオンライン動画配信サービスで、月額定額で自宅や外出先から豊富な動画コンテンツが見放題となる大変魅力的なサービスを提供しています。日本にサービスインしたのは2011年とのこと。この記事をご覧の人の中にもすでに利用したことのある人や現在利用している人も多くいらっしゃるのではないでしょうか。

そんな便利なHulu、そのCTAにはどのような工夫や秘密が隠されているのでしょうか。
それではさっそくCTAについて「徹底解剖」していきます。

※本記事の内容は2016年2月8日時点のHuluのサイトを分析した内容を記載しています。なお今回ご紹介したサイトには当社エフトラCTAは導入されていません(2016年2月8日時点)。

誘導するアクション

Huluでは新規ユーザーに対し2週間のトライアルサービスを用意しており、サイト内のCTAはすべてこのトライアルへの登録を促すものとなっています。

このようなトライアルフォームへ遷移します。今回はこのフォームに至るまでのCTAについての分析です!

このようなトライアルフォームへ遷移します。今回はこのフォームに至るまでのCTAについての分析です!

以下このトライアルへの行動喚起について分析していきたいと思います。

CTAの配置場所

まずは、サイト内のどの位置にCTAを配置しているかを見ていきます。

メインビジュアルに大きく設置

とりわけ目を引くのは、トップページに配置されたメインビジュアル内のCTAです。
トップページのファーストビュー、という訪れたユーザーがまず最初に目にする位置に、アクションの内容が端的に提示されています。

efo_double_ring トップページのファーストビュー、という誰もが目にする位置に大きく配置されています。

TOPのメインビジュアルに大きく配置されたCTAボタン

TOPのメインビジュアルに大きく配置されたCTAボタン

アクセスのしやすさも担保

サイトのグローバルナビゲーションにもCTAを配置していました。

グローバルナビゲーションはページをスクロールをしても画面上部に固定して表示されるようになっており、サイト内のどこにいてもすぐにアクションを取ることができます。アクセスのしやすさは抜群です。

ok_blue グロナビ内の配置でページのどこにいても思い立ったらすぐにアクションを起こすことができる

グローバルナビゲーション内のCTA(右端ボタン)

グローバルナビゲーション内のCTA(右端ボタン)

コンテンツ下のCTAは改善の余地あり?

一部のページ(Huluとは?ページのみ)には、コンテンツの下部にもCTAが用意されていました。

ok_blue コンテンツ下にCTAがある「Huluとは?」ページのCTA。緑色を大きく使い注目を集めるデザインとなっています

コンテンツ下CTAの例

コンテンツ下CTAの例

しかし、その他のページにはページ下部のCTAは用意されていないようでした。

コンテンツを読み終えた瞬間は、ユーザーがアクションを起こしやすいタイミングでもあります。ぜひコンテンツの内容に沿ったCTAを配置しておきたいところです。

注意 ぜひその他ページのコンテンツ下にもCTAを用意したい。

CTAがないページの下部。(トップページの例)

CTAがないページの下部。(トップページの例)

動画を試聴しようとしたユーザーにポップアップ表示

Huluでは、ユーザーのアクションに合わせて表示するCTAも用意されていました。

Huluでは、登録する前にも詳しい動画のラインナップを見ることができ、一部の動画は無料で提供されていることがあります。

無料提供されている動画の例。(最初の1話が無料、という場合がほとんど)

無料提供されている動画の例。(最初の1話が無料、という場合がほとんど)

一方で、無料で提供されていない動画についても、動画の詳細ページには再生ボタンが配置されています。

その再生ボタンを押下した場合に、トライアルへの登録を促すポップアップを表示する仕組みとなっています。

動画の詳しい内容や続きが気になった、ニーズが高まったユーザーに対してのみ、ポップアップのように注目度の高いタイプのCTAを表示させるようになっています。
ぜひマネしたいテクニックですね。

efo_double_ring もっと観たいというニーズが高まったユーザーに対し、即座に解決策のアクションを提示するという、非常に効果的な表示方法です

無料視聴できない動画にも再生ボタンがあり、

無料視聴できない動画にも再生ボタンがあり、(画面中央)


クリックするとモーダルポップアップのCTAが表示される

クリックするとモーダルポップアップのCTAが表示される

ボタン

続いて、ボタンに特に注目して分析していきます。

ボタン色には緑色を使用

ここまで見てきて既にお気づきかもしれませんが、すべてのCTAボタンには緑色が使用されていました。

サイト全体としてモノトーンを中心とした落ち着いた配色になっていますが、CTAなど引き立たせたい箇所にのみこの緑色が使われています

efo_double_ring 全体として落ち着いた配色にまとめ、重要なポイントに限定してビビットな色を用いることで、CTAを引き立たせることに成功している

ページ全体像

ページ全体像

ボタンらしいオーソドックスなデザイン

なお、ボタンはボタンらしく見えるよう、角丸で大きなサイズで矢印のアイコンを配置するなどの工夫が見られます。誰がみてもこれがボタンだと感じることができるのではないでしょうか。

ok_blue ボタンらしいオーソドックスなデザイン

CTAボタン

CTAボタン

文言・メッセージ

次は、CTAに使われている文言やメッセージについて見ていきましょう。

キャッチーで端的なメッセージに

基本的に「無料」「お試し」「トライアル」「今すぐ」など、ユーザーのアクションを促しやすいキャッチーな文言を使って構成されています。
メッセージも端的で、見た目もメリハリがあり申し分ないかと思います。

ok_blue 「2週間無料」を大きく表示し、メリハリのあるデザインでメリットが伝わりやすい。

TOPのメインビジュアルに大きく配置されたCTAボタン

TOPのメインビジュアルCTA

ページのコンテンツの内容をくんだ内容にも

モーダルポップアップのバナーでは、ユーザーが閲覧していたコンテンツの内容を汲んだCTAメッセージを表示するような工夫が見られました。

具体的には、ユーザーが見ようとした動画のタイトルを、CTAのメッセージ内に挿入して表示させています。
ユーザーが求める具体的なコンテンツとアクションを結びつけることで、ユーザーに、アクションが「自分に関係が深い、有益な内容である」と感じてもらえるはずです。

efo_double_ring 試聴しようとした動画のタイトル(例えば、この場合なら「HUNTER×HUNTER」という文言)を挿入した状態でメッセージを表示している

クリックするとモーダルポップアップのCTAが表示される

モーダルポップアップのCTA

バリエーションはやや少ないか

全体として、「無料」「トライアル」を謳った内容であり、アドアイスをするのであれば、もう少し別角度からのCTAがあるとなお良いのではと感じます。

例えば、動画のバリエーションの多さやオリジナルコンテンツの魅力、手続きの簡単さやサポート内容等、その他のメリットが刺さってアクションを起こすユーザーもいると考えられるためです。

注意 ぜひその他の訴求ポイントでもCTAの作成を!

コンテンツ下CTAの例

コンテンツ下CTAの例

最後に

いかがだったでしょうか。今回の勝手にCTA徹底解剖は以上となります。
最後にこれまでみてきたCTAの特徴をまとめて結びとさせていただきます。

優れている、取り入れたいポイント

  • メインビジュアルに大きく設置
  • アクセスのしやすさも担保
  • 動画を試聴しようとしたユーザーにポップアップ表示
  • ボタンの配色、デザイン
  • キャッチーで端的なメッセージ
  • ページのコンテンツの内容をくんだメッセージ

課題と思われる点、その他論点など

  • コンテンツ下のCTAは改善の余地あり?
  • 訴求内容のバリエーションはやや少ないか

この記事が気に入ったら
いいね!しよう

UI改善ブログの最新情報をお届けします

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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