CV率が格段にアップする!CTAボタンのデザインで押さえておきたい8つのポイント

Webサイトを訪問したユーザに対して、商品やサービスへの問い合わせや商品の購入といったコンバージョンを上げるためには、行動を促すためのCTAの設計がとくに重要になります。この記事では、質の高いCTAを作成する上で注意するべきポイントをご紹介します。

 

 

CTAとは

「Call To Action(コール・トゥ・アクション)」の略で、日本語では「行動喚起」と訳されます。Webサイトを訪問したユーザに対して、具体的に起こして欲しい行動を示したテキストやボタンを配置して、目的を達成させるために使用します。コンバージョンをさせるために重要な要素となります。具体的には、「資料請求」や「会員登録」といったビジネスの成果を上げるための行動を取ってもらうことです。

 

なぜCTAが必要なのか?

ユーザに対して明確に次の行動を促し、内容を理解して納得をした上で先に進んでもらうためには、CTAを配置する位置やボタンの大きさ・色など、見落とされることなく、注意を引き付けるデザインが必要です。そして、具体的な行動に移すためのラベル付けが重要となります。ユーザに取って欲しい行動があるのに明確なCTAがない場合、進むべきアクションが分からずに離脱してしまう可能性も出てきてしまいます。必ず目的に応じたCTAを設計し、配置するようにしましょう。

 

CTAを作成する際に押さえるべき8つのポイント

成果を上げるCTAを作成するためには、大きくは「デザイン・色」「視線・動線」「コピー」の3つの視点を意識することが重要になります。具体的に注意すべき8つのポイントを、参考サイトと合わせて説明していきます。

 

デザイン・色

1)ボタンは大きく配置し、周囲に埋もれない目立つ色にする

デザインを作成する上では、Webサイト全体のリンクの中でも、ユーザが見落とすことなく認識できるようにボタンのサイズを大きく配置したり、目立つ配色を考慮する必要があります。ボタンの色は、全体のバランスを考慮して埋もれることのない配色にする必要がありますが、安心感を与えて不安を軽減する効果がある「緑」や、購買意欲を刺激する「赤」または「オレンジ」が使用されることが多いです。

f:id:imnstkhs:20170528235133p:plain奉行10

ページ全体のデザインは、青を基調とした寒色系でデザインされていますが、資料請求を促すためのボタンはオレンジ色で大きく配置されているので、スクロールで読み進めていった際にも見落とすことがありません。

 

2)動きを取り入れて、情報量が多くても見落とさせない

ボタンのデザインは、明らかにクリックできることが分かるようにしておく必要がありますが、コンテンツの情報量が多い場合、どうしても埋もれてしまうケースが出てきます。CTAに注目を集めるために、ボタンに動きを付けたり、色を定期的に変えるような工夫を入れることによって、CTAが見落とされるリスクを減らします。ただし、やり過ぎるとコンテンツの邪魔になってしまうので注意が必要です。

f:id:imnstkhs:20170719005745p:plain

家庭教師のトライ

画像では分からないですが、「料金を問い合わせる(無料)」に重なる「30秒でできる!」の吹き出しは初回表示の際にはアニメーションで上下に動作します。情報量が多いランディングページのような場合でも、行動を促すボタンを見落とすことがなくなります。

 

3)問い合わせの相手をイメージさせて安心感を与える

CTAは、問い合わせや資料請求を促したりと、ユーザに対して何らかの決断を求めるものになります。そのような前提のなか、相手の顔がイメージできるような人物写真を使用することで安心感を与えることができます。電話での問い合わせを促すようなCTAの場合、電話を受けるオペレーターのイメージ写真を配置することにより、話をする相手を具体化させて、問い合わせに対するハードルを大きく下げることができます。

f:id:imnstkhs:20170719014236p:plain

 〇ライフネット生命

保険という商材の場合、実際に問い合わせをするには心理的障壁が付きまといます。問い合わせに対応してくれるテレフォンオペレーターのイメージ写真を配置することによって、不安を払拭させ、電話をかけるというアクションを後押しします。

 

視線・動線

4)ページ内のストーリー構成に沿って行動を促す

CTAを設置していても、ユーザの行動に沿った位置に配置されていないと認識されることはありません。ページの中でのストーリーに合わせて、商品やサービスについての興味を持たせた後に配置して、次の行動を促す必要があります。コンテンツの末尾に設置することが一般的ですが、ランディングページのようにページの構成が長い場合には、各節ごとに配置をしたり、画面に常時表示するために固定フッタとして設置することも有効です。

f:id:imnstkhs:20170528235332p:plain

Evernote

文書や画像、音声などのファイルをまとめて管理することができるEvernoteでは、4つの特長を完結に説明していった後に、「今日からスタート」というコピーをつけて、自然な流れで新規登録を促すCTAを設置しています。

 

f:id:imnstkhs:20170528235600p:plain

 〇MFクラウド給与

ページの構成が長いため、ファーストビュー以降では資料ダウンロードと新規登録を促すCTAが画面の下部に固定表示されます。常時表示されるために、読み進める中で気になったら行動に移せるメリットがありますが、大きく配置し過ぎてコンテンツを隠さないように注意が必要です。

 

5)コンテンツを読む目線を邪魔するように配置する

CTAはコンテンツエリア内に配置するだけではなく、わざとコンテンツエリアの外に配置して、意識的にユーザの目線に入るようにすることで、じっくりと読み進めないユーザにもCTAを認識させることができます。この時にも、背景や他のコンテンツ要素で埋もれないように目立つ色を使用した方がいいでしょう。

f:id:imnstkhs:20170709232922p:plain

 〇賢者の食卓

ファーストビューからスクロールした読み進めると、画面の右上に赤い円形のCTAが表示されます。追従表示されて画面サイズによってはコンテンツに重なることもありますが、嫌でも目線に入ってくるので、申し込みボタンを見落とすことがありません。

 

コピー

6)ユーザに取ってメリットがあると具体的に伝える

ユーザに対して、その行動を取ることによって、どのようなメリットがあるのかを明確に伝える必要があります。魅力的で自分に取ってメリットが感じられなければ、次の行動を起こしてもらうことは難しいでしょう。例えば、「本日まで送料無料!」や「40%OFF」といった直接的なメリットを感じられることで、コンバージョン率は大きく改善されます。

f:id:imnstkhs:20170528235716p:plain

 〇careco

期間限定のキャンペーンを実施していることから、今すぐ登録することが金銭的にお得であることを伝えて申し込みを促します。なお、キャンペーンのような場合には、実施期間や適用外のケース等の注意事項もCTAの付近には記載しておく必要があります。

 

7)「心配しなくていいですよ」と不安を払拭する

オンラインでの会員登録を促す際に、ボタンのラベルが「会員登録」だけだとすると、「お金がかかるのでは?」「登録には時間がかかるのでは?」といった心理的な不安が付きまといます。「(無料)簡単1分で会員登録」のようなラベルにして、「無料であること」「時間がかからないこと」を明示的に伝え、ユーザが感じる心理的な障壁を払拭する必要があります。

f:id:imnstkhs:20170528235853p:plain

 〇Netflix

ストリーミング配信サービスのように月額費用が発生するサービスの場合、一度登録すると一定期間は解約できないのではないかと不安に感じるものですが、オンラインからいつでも解約できることを伝えることで、ユーザの不安を払拭しています。

 

8)手間や時間がかからないことを明確に伝える

上記の「不安を払拭する」に関連しますが、行動を起こすことによって、複雑な手順を要求されたり、時間がかかるようなイメージを持たれないように、ボタンをクリックした後の操作は簡単であることを完結に伝えなければいけません。

f:id:imnstkhs:20170529000041p:plain

 〇レバテック

求人情報への登録は、学歴や職務経歴など、膨大な個人情報を登録する手間を想像してしまいます。短時間で登録することができると明示することで、登録画面への遷移率は大きく変わるでしょう。

 

まとめ

CTAを作成する際のポイントをご紹介しましたが、商材やサイトの特性によって注意すべき点は変わってきます。

アクセス解析での効果測定やA/Bテストを繰り返し、デザインやコピー、ボタンのラベル、配置といった細部の調整を継続して実施する必要があります。他のページで成果が出ていたCTAだとしても、サービスの内容やページの構成によっては、同じような成果が出るとは限りません。細かなチューニングを行って最適化することは、成果を出すCTAを作る上では必須となります。

最低限、上記のポイントを意識したCTAを作成し、リリース後も継続したテストを繰り返すことで、コンバージョン率を高めるCTAを作成することができるでしょう。

 

※この記事は2017年12月24日に更新しています。

Webディレクターが知っておくべき新卒採用サイト制作のポイント

この3月から2018年度の新卒採用が本格化し、各企業の採用サイトが公開されています。
ここ数ヶ月間で進行していた採用サイトが先日に公開されたこともあり、Web制作会社のディレクターという立場から、制作する上で注意するべきポイントなどをまとめてみたいと思います。

 

採用サイトの目的は、質の高いエントリーを増やすこと

採用サイトは、企業の採用戦略上の課題を解決するための手段の一つであり、自社の戦略に適合する学生に認知してもらい、エントリーや説明会への参加といったアクションを起こしてもらう必要があります。採用戦略の目的としては、「求める人物像の学生を採用すること」になりますが、採用サイトでの目的は、「自社が定義する質の高い学生からのエントリーを増やすこと」になります。

新卒学生を対象とした採用プラットフォームとしては、リクナビマイナビといった就活ポータルサイトが存在し、興味がある企業情報を閲覧した上で採用サイトに流入してくることになります。ポータルサイトでは、ある程度掲載フォーマットが限定されており、独自コンテンツの追加やデザインを大きく変更することができないため、別途採用サイトを用意して、学生に自社の特色や魅力を強く訴求する必要があります。

 

学生の興味に対して、企業が用意するコンテンツのギャップ

株式会社リクルートキャリアが発表している「就職白書2017」によると、就職活動中の学生が知りたいと思った情報の上位は、以下のような結果となっています。

f:id:imnstkhs:20170329115849p:plain

出典)「就職白書2017」 就職活動中の情報収集/株式会社リクルートキャリア

www.recruitcareer.co.jp

この中で、「知りたいと思っていた」けど、「知ることができた」のギャップが一番高いのが、「社内の人間関係(-12.2ポイント)」となり、一緒に働く社員の様子や人間関係が伝わってくるコンテンツが求められているのに、実際には満足できる情報を提供できていないことがわかります。

また、経営方針や事業戦略、企業理念については、「知りたいとは思ってなかったけど、知ることができた」という結果になっており、企業目線でコンテンツを設計して前面に押し出しても、学生には響いていないことになります。それよりも、具体的にどんな仕事をするのか、どこで働くことになるのか、社風や企業文化は自分に合うのか、一緒に働きたいと思える社員がいるのか、といった自分に直接的に影響がある疑問や不安に回答するコンテンツをしっかりと用意して、学生に納得してもらえる構成にしなければいけません。

 

就職活動のプロセスにより異なる、求められるコンテンツ

学生が採用サイトに接触するタイミングは、就職活動のプロセスによって異なり、求められるコンテンツが変わってきます。自己分析を行い、候補となる業界知識を得るために活動しているプロセスでは、「どんな業界なのか?」「業界の実情はどうなのか?」「将来性はあるのか?」といった疑問に答えるため、自社を取り巻く業界の現状や魅力を伝えると同時に、業界内でのポジションや他社との差別化を伝える必要があるでしょう。

また、内定を貰った後に、最終的に「この会社に入社しよう」という決断をするためには、「自分が活躍できるイメージが持てるか?」「一緒に働きたいロールモデルとなる社員がいるか?」「キャリアパスや将来像が描きやすいか?」といった不安要素を払拭させて、背中を押すためのコンテンツが必要となってきます。

企業情報を収集して分析する段階、興味を持った企業にエントリーして選考に進む段階、複数の内定企業から就職先を決める段階、といったプロセスごとに熟読するコンテンツは変わってくるでしょう。

1)情報収集フェーズ

  • 企業理念、メッセージ
  • 業界の市場規模や特性
  • 具体的な仕事内容
  • 待遇や社内の制度 etc

2)選考フェーズ

  • 採用選考の基準
  • 応募の条件
  • 求める人物像
  • 採用プロセス etc

3)最終判断フェーズ

  • 会社の将来性
  • キャリアプラン
  • 社風や文化
  • 社員インタビューや一日の働き方 etc

 

企業目線の一方的な発信ではなく、必要な情報を提供した上で求める人物像へのメッセージを落とし込む

採用サイトのコンテンツを作成する際に注意しなければいけないのは、学生が求めている情報ではなく、企業目線でのメッセージを一方的に発信してしまうことです。学生が求める情報をしっかりと提供をした上で、採用戦略に沿った求める人物像である学生に刺さるメッセージやコンテンツを用意しなければいけません。

リニューアルしたことにより、幾らエントリー数が増加したとしても、求める人物像とは異なる学生から大量にエントリーされた場合、選考コストが上がってしまうだけで、結果的には目的を達成することができません。優等生的なペルソナ設定をするのではなく、自社ならではの具体的な求める人物像を定義した上で、キャッチコピーやメインビジュアルに登場させる人物、ボディコピーの中に落とし込まなければいけません。求める人物像と一致する学生からの問い合わせやエントリーが増加してこそ、採用サイトが有効に機能していると言えるでしょう。

 

主要コンテンツにおける役割

トップページ / 明確なキャッチコピーとメインビジュアルで採用コンセプトを表現する

採用サイトへの流入経路は、多くはコーポレートサイトか就活ポータルサイトからとなり、トップページを起点に閲覧されます。そのため、メインビジュアルとキャッチコピーで学生を引き込むような構成が求められます。また、トップページ以降のコンテンツやエントリー・マイページへの動線は、迷わせることなく読み進められるように設置しなければなりません。

f:id:imnstkhs:20170326011535p:plain

伊藤忠商事

「ひとりの商人、無数の使命」というキャッチコピーと、人物シルエットの中に都市や鉱山、森林といった風景を重ね合わせたムービーが再生され、シンプルながらも印象的で引き込まれるトップページです。商人として、「人々の明日に貢献したい」という想いと、伊藤忠商事の強さは、「卓越した個人の力にある」というメッセージが伝わってきます。

 

メッセージ / 企業が目指すビジョンと必要な人物像を明確に伝える

トップページのメインビジュアルとキャッチコピーを補完するかたちで、学生に対してのメッセージを明確に伝えるコンテンツです。別コンテンツとして設けずに、トップページ内に盛り込んでしまうことも多いです。メッセージの中では、会社の企業理念や将来のビジョンを伝えると同時に、目指すビジョンを実現するために、どのような人材を必要としているといった一貫性のあるメッセージが求められます。

f:id:imnstkhs:20170326011747p:plain

ジェイアール東日本企画

「FUN TO ALL(楽しむことからすべてがはじまる)」というメッセージの通り、サイト全体がポップで遊び心に溢れたデザインになっています。JR東日本グループの経営資源マーケティング・ノウハウを活かして、独自のビジネス企画を開発・提案できることが強みであることを紹介し、仕事を「楽しむ」姿勢を大事にしていることが伝わってきます。

 

業界特性や市場規模 / 売り上げやマーケット規模はグラフや数字を使用して分かりやすく伝える

情報収集フェーズにおいて、業界についての特性やプレーヤー、マーケットの規模感を伝えることが有効です。まだ将来働きたい仕事が明確になっていない学生に対して、業界の成長性や他業界と比べた時の優位性など、客観的なデータを使用して安心感を与えることができます。

f:id:imnstkhs:20170326012001p:plain

リクルートスタッフィング

人材派遣業における市場規模を掲載し、ライフスタイルの多様化や少子高齢化が進む中で、派遣会社の役割が年々増加していることを説明しています。また、現場の数字として、新人社員が1年間で担当した派遣スタッフの人数や創出した雇用の数などを掲載することで、入社後の仕事の規模感を伝えています。

 

プロジェクトストーリー / 障壁を乗り越えたストーリーを通じて社員の熱量を伝える

具体的なプロジェクトを通して、仕事の内容を伝えると同時に、社員に浸透している企業理念も伝えることができるコンテンツです。プロジェクトにおける背景の解説から、実現するまでの挑戦、挫折、成功といったストーリーとして、携わったメンバーのインタビューを掲載することで、社員が持つ仕事への熱量を伝えることができます。

f:id:imnstkhs:20170326012219p:plain

ソフトバンク

ソフトバンクが取り組んでいる世界初の技術開発への取り組みといった大規模なプロジェクトのほか、「コンシューマ営業プロジェクト」として、販売代理店のコンサルティングを行っている営業部門の取り組みなどを紹介しています。ソフトバンクから感じる派手さはなく、裏方として地道に顧客満足度を上げるための意識改革を行っている姿勢が伝わってくるコンテンツです。

 

募集要項 / 過不足なく募集に関する詳しい情報を掲載する

募集要項は、どの採用サイトでも最低限掲載がされる情報ですが、応募資格や募集する職種、給与や勤務地等、明確に分かりやすく掲載をする必要があります。待遇や福利厚生など、学生として不安に感じる内容が多いので、「よくある質問」としてQ&A形式にて疑問に答えるコンテンツへの動線も用意しておくことが望ましいでしょう。

f:id:imnstkhs:20170326010418p:plain

住友商事

基本的な募集要項とは別に、過去数年間における採用実績データとして、職種ごとの採用人数が掲載されています。採用サイトで過去の採用実績数を公開していない企業は意外と多いですが、信頼度を高める実証データは、少しでも多く掲載したいところです。

 

求める人物像 / 当たり前の優秀な人材ではなく理念との一貫性を持たせる

企業の採用戦略に基づいた、求めている人物像を訴求するための重要なコンテンツです。「チャレンジ精神」や「コミュニケーション能力」といった、どの企業でも言っている当たり前の優秀な人材像ではなく、創業時からの一貫した理念や自社の風土の中で活躍できる人物像を伝える必要があります。

f:id:imnstkhs:20170326010928p:plain

コクヨ

コクヨの創業者が残した言葉を紹介し、商品を作り出す上での根本的な考え方を伝えた上で、多様な価値観や強みを持った仲間と共に、「変化を楽しむ・生み出せる」人に仲間になって欲しいというメッセージになっています。採用ポリシーとして、一方的に合否をつけるのではなく、選考は相互理解の場であるというスタンスも宣言し、採用に対しての本気度が伝わってくる文章です。

 

採用プロセス / エントリーから採用までの詳細なプロセスを伝え不安を払拭する

エントリーから会社説明会の開催、適性検査の実施、面接といった最終的な採用に至るまでのプロセスを具体的に掲載します。面接における所要時間や内定が出るまでのおおよその期間の目安など、プロセスごとに詳細を記載することで学生の不安を払拭することができます。

f:id:imnstkhs:20170326011248p:plain

JR東日本

ポテンシャル採用とプロフェッショナル採用ごとに入口を分けて、選考スケジュールが紹介されています。上部には選考フローがステップとして記載されているので、全体でいくつの工程があるのかを分かりやすく伝えています。応募完了後に、書類選考通過の連絡期日も明記されているので、採用プロセスとして不安を覚えることがありません。

 

キャリアプラン / 年数に応じてキャリアアップした具体的な結果を伝える

入社後に明確なキャリアプランが描けずに退職する社員は多いです。職種によらず、希望をすれば横断的にキャリアを重ねていくことができるのか、事例として、先輩社員はどのようなキャリアパスを歩んでいるのか、スキルアップをするための研修やワークショップが充実しているかなど、自身のキャリアを形成するために充分な職場であるかを伝える必要があります。

f:id:imnstkhs:20170326012602p:plain

NTTドコモ

事務系・技術系といった職種ごとに、入社後にどのようなキャリアパスを歩んできたか、その時々のキャリアで学べたこと、課題に感じたことを紹介しています。支店での事務からスタートしても、数年後には戦略や企画業務に携えること、技術開発からスタートしても、経営企画部や広報部にもキャリアパスできることなど、選択肢が広く多様性があるキャリアを築けることが伝わってきます。

 

社風や文化 / 働きやすさやスキルアップのための具体的な取り組みを伝える

企業の持つ社風や文化、組織風土といった内容を伝えることで、自分の考え方や性格に合わない会社ではないか、長く働きたいと思える環境であるかを学生に訴求する必要があります。働きやすさを実現するための取り組みや、社内の勉強会や資格取得を推奨する制度があるか等、具体的なファクトを伝えるコンテンツとなります。

f:id:imnstkhs:20170326012941p:plain

ビーワークス

「顧客・ユーザーに高い満足を提供すること」を実現するためのイズム(行動指針)に基づく仕組みとして、社員のレベルアップや会社全体を活性化させる取り組みを紹介しています。デザイン力を向上させるためのアワードや業界のトレンドやノウハウを共有するための社内フォーラムの開催など、スキルアップのための取り組みや評価される仕組みがあることが伝わります。

 

社員インタビュー / 入社後の具体的な働き方をイメージさせる

先輩社員の働き方や人柄、社内風土などを伝えるために、社員のインタビューは必須のコンテンツです。社歴が浅い社員紹介は、自分が入社してからの具体的な働き方をイメージさせることができ、ベテランの社員を紹介することは、キャリアパスが多様であり、長く働ける企業であることを伝える役割を果たします。

また、1日のスケジュールには就業後の過ごし方も掲載することで、仕事とプライベートの両立ができることをしっかりと伝えることも必要です。

f:id:imnstkhs:20170326012931p:plain

IMJ

職種ごとの社員インタビューとして、主な業務内容や担当するクライアントの業界、入社を決めた動機等を説明しています。デイリースケジュールでは、仕事終わりのプライベートも掲載したり、休日の過ごし方も掲載することで、ONとOFFのメリハリがあり、仕事とプライベートの両立ができる会社であることが伝わってきます。

 

まとめ

採用サイトはデザインの良し悪しで効果が決まるものではありません。学生が本当に求めている情報を理解して、具体的に自分の将来を思い描けるようなコンテンツを用意する必要があります。

Webディレクターの役割としては、学生の情報ニーズを理解した上で、就職活動のプロセスに沿った設計をすると同時に、企業の採用戦略を理解して、求める人物像である学生に刺さるコンテンツを考え、写真やコピーライティング、デザインに落とし込むディレクションが求められます。

そして、サイトの公開後においても、ログ解析の結果や学生からの問い合わせといったフィードバックの内容を元に、定期的な改善を加え続けていくことで、質の高いエントリーを増やし、採用戦略における課題を解決する採用サイトを構築することができるでしょう。