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日に更新しています。