勝手にCTA徹底解剖:Wantedly 無料登録/トライアル

勝手にCTA徹底解剖、第2回目はビジネスSNS「Wantedy」をテーマにお届けします。

Wantedly様運営の「Wantedly(ウォンテッドリー)」は自サービスを「シゴトでココロオドルためのビジネスSNS」と謳う、IT/Web業界最大級のソーシャル・リクルーティング・ツールです。2012年にオープンし、2015年9月時点で、月間60万人、11,000社が活用しているとのこと(公式サイトより)。多くの会員を抱えるサービスのその背景には、どういった工夫が隠されているのでしょうか。さっそく、「徹底解剖」していきたいと思います。

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

誘導するアクション

Wantedlyのサイトには就活ユーザー向けと、企業(採用担当)向けの2種類のサービスページが存在します。
それぞれ、「無料会員登録」と「トライアル(資料請求)」を主だったゴールとしているようです。

今回はこの2つそれぞれのアクションを促すCTAについて分析していきたいと思います。

CTAの配置場所

まずはCTAの配置場所についてみていきます。

メインビジュアル

いずれも、サイトのトップページのファーストビュー内にアクションを配置しています。
サイトに訪れたユーザー誰もがこのサイトで取りうるアクションを理解することができます。

○ アクションがわかりやすく提示されている。余計な情報もなく、アクションが際立つ

就活者向けページのメインビジュアル

就活者向けページのメインビジュアル

企業向けサービスページのメインビジュアル

企業向けサービスページのメインビジュアル

グローバルナビゲーション

いずれも、ページ上部に固定表示するタイプのグローバルナビゲーションを用意し、目立つ色でCTAボタンを表示していました。

○ ページ内のどこにいてもアクションをスムーズに開始することができます。

就活者向けページのグローバルナビ

就活者向けページのグローバルナビ

企業向けページのグローバルナビ

企業向けページのグローバルナビ

コンテンツ下

コンテンツの下にもしっかりCTAを配置していました。

ページを読み終えた後はユーザーが次のアクションを起こす重要な瞬間。その場でしっかりとCTAをアピールしています。

○ ほぼすべてのページでコンテンツ下にCTAを用意。

就活者向けコンテンツ下CTA

就活者向けコンテンツ下CTA

企業向けコンテンツ下CTA

企業向けコンテンツ下CTA

なお今回の分析では、サービスページの内にアニメーション等の動きを伴って表示されるCTAは見つけることができませんでした。

ボタンのデザイン

次にボタンについて注目していきます。

色は統一

就活者向けのサービスページは、Facebookで無料登録することがサイトのゴール。Facebookブランドカラーであるブルーがボタン色に使用されています。
ユーザーにとってもひと目でFacebookを使うことがイメージできますし、ページ上でこの青色を使っているのがボタン箇所のみであることからも、引き立って見えます。

◎ 際立って見えるボタン

Facebook2

いっぽう企業向けページでは、ポイントカラーの青色をボタン色として使用しています。
じゅうぶん目立ってはいるものの、図版などでポイントカラーが多用されている箇所では、ボタン色がやや埋没して見える印象も。

注意 ボタンが引き立たない可能性も。

企業向けページ

企業向けページのCTAボタン。図版類に同じポイントカラーを使用しているためか、ややボタンが目立ちにくい場合も

ボタンらしいデザイン

いずれも角丸にボーダーをまとったいかにもボタンらしいデザインです。ユーザーは迷うことはほぼないのではないでしょうか。

とくに就活者向けサイトのボタンにはFacebookのロゴがあしらわれており、機能を想像しやすく装飾されています。

○ ボタン内にアイコンを挿入しているためわかりやすさが増す

Facebook

「無料」のワードを使用

ボタンの文言には「無料登録」「無料トライアル」のように「無料」というキーワードが使用されていました。
人々を強く惹きつけるワードをボタンの文言に持っておくとクリック率を高めることにつながると考えられます。

2つ以上のボタンでは強弱が

さらに注目したいのは、他のボタンとの強弱。

就活者向けページではデザインに明確な重み付けがあり、ユーザーがどちらのアクションをとるかで迷うことはないように設計されています。

○ 強弱が明確でユーザーが選択に迷わない

メインのCTA。

メインのCTA。

ただし、企業向けページでは、並列に複数のアクションが存在しており、ユーザーがどれを選ぶべきか迷う瞬間があるかもしれません。

注意 並列に並んでいると、どちらを選んでいいか迷ってしまうもの。

アクションが複数存在

アクションが複数存在

アクションは1つに絞るとより良いか

企業向けページではボタンの文言が「無料トライアル/資料ダウンロード」となっており、少し長い点、そして1つのボタンに2つのアクションを含んでいる点が気になります。
ユーザーがアクションに進もうとした際に疑問や迷いが生まれてしまう可能性があります。

注意 結局何ができるのかが伝わりにくい可能性が。

企業向けページでは「無料トライアル/資料ダウンロード」と2つのアクションを包含

企業向けページでは「無料トライアル/資料ダウンロード」と2つのアクションを包含

メッセージ

次に、ボタン以外の文言やメッセージについて見ていきます。

ソーシャルプルーフを使用

就活ユーザー側のCTAではソーシャルプルーフが訴求されていました。
ソーシャルプルーフ(社会的証明)とは、対象への賛同者が多くなるにつれて、それが信頼性を持つようになることを指す言葉。
客観的評価を示すことでサービスに信頼感を持たせることができます。

◎ 利用ユーザー数や

就活者向けコンテンツ下CTA

就活者向けコンテンツ下CTA

ユーザーの懸念を和らげる工夫が

ユーザーのアクションにブレーキをかけてしまう可能性のある懸念事項についてあらかじめ補足をすることで、不安を和らげています。

◎ Facebookログイン時によくある懸念のひとつ「勝手に投稿されること」を解消する文言が。

Facebook2

企業向けコンテンツ下のボタンにも同様の文言が

企業向けコンテンツ下のボタンにには同様に、自動的に課金されることがない旨の文言が

異なる角度の訴求を実施

WantedlyのCTAの一部は異なる訴求内容を複数持っていました。

アクションに対する訴求のバリエーションは多いほどユーザーに刺さる可能性は高まるでしょう。
とくにページのコンテンツ内容にあわせて訴求内容も変化させられるのが理想的です。

◎ 複数の訴求観点を持つCTAが理想的です

ユーザーの声ボトム

就活ユーザー向けには、ソーシャルプルーフのほかにもページの文脈に合わせた内容も存在

企業向けコンテンツ下のボタンにも同様の文言が

企業向けコンテンツのCTAには、ひとつのCTAに「簡単30秒」「0円」など複数の角度の訴求内容が存在する

コンテンツからの導線にも注目

Wantedlyではサービスサイトとは別に、利用者/企業の体験談を集めたブログサイトを設けており、就活者/企業側双方のサービスページから、利用者の声として引用やリンクが貼られています。
このブログコンテンツ側からアクションへの導線についても注目してみたいと思います。

ブログには上部に配置

まずサイトの上部の誰もがまず目にする位置にバナーがアニメーションを伴って挿入されます。
色も青色で目立つようになっており、ユーザーの目を引くCTAです。

○ 少し送らせてアニメーションで登場させことでユーザーの注目を集めるCTAに

ブログページを読み込んだ数秒後、ヘッダーにインラインのバナーが登場する。

ブログページを読み込んだ数秒後、ヘッダーにインラインのバナーが登場する。

記事下にもアクションボタンを配置

ブログの記事の下にはきちんとアクションへ誘導するCTAボタンが設置されていました。

○ ただコンテンツをつくるだけでなく、しっかり本サイトへの導線を確保しています。

ブログの記事下にあるCTAボタン

ブログの記事下にあるCTAボタン

最後に

本日はWantedlyのCTAについて徹底解剖いたしました。
非常に参考になるテクニックが満載でしたね。ぜひあなたのサイトのCTAにも彼らのエッセンスを取り入れてみては。

最後はいつもどおり、記事のサマリーとして、優れている点と課題に感じた点を列挙して結びとさせていただきます。

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

  • メインビジュアル、グロナビ、コンテンツ下へのわかりやすい配置
  • わかりやすく際立って見えるボタン
  • 「無料」のワードを利用したボタン
  • 強弱が付けられたボタン
  • ソーシャルプルーフを使った訴求
  • ユーザーの懸念を解消する工夫
  • 異なる角度の訴求を実施
  • ブログコンテンツからの導線の確保

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

  • 使用色の重複によるボタンの埋没
  • 並列に配置されたボタン
  • 2つのアクションを含むボタン

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

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

エフトラEFO機能アイコン

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

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

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

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

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

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

メールアドレスを入力

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