WebサイトのCTAを効果的にするための10のテクニック

どんなWebサイトでも、CTA（＝Call to Action、行動喚起）、つまりユーザーにしてもらいたい行動というものがあるべきです。しかし、どのようにユーザーに行動をうながせば良いのでしょうか？　また、効果的なCTAを作るにはどうすれば良いのでしょうか？

CTAは、私の仕事において非常に大きな部分を占めています。たとえば、デジタルエージェンシーに対してコンサルティングを行うときは、CTAについて話します。また、クライアントのプロトタイプを作成する場合はCTAにこだわります。エキスパートレビューを行う際も、CTAは頻繁に話題に上がります。

あらゆるWebサイトにおいて、効果的なCTAは欠かすことのできないものです。また、CTAは重要なのはECサイトに限ったことではありません。お問い合わせフォームの入力やニュースレターの登録、ボランティア活動であったとしても、すべてのWebサイトはユーザーに達成してほしい目標があるべきです。

CTAには以下のような効果があります。

・サイトに集中させる

・Webサイトが成功しているか測定できる

・ユーザーを案内する

では、効果的なCTAとはどのようなものでしょうか？　ここでは、効果的なCTAの作成に役立つ10のテクニックを紹介します。

１. CTAが提供する価値に焦点を当てる

ユーザー自らが行動するためには、ユーザー自身がニーズを理解している必要があります。インフォマーシャル（編注：テレビショッピングの一種で、商品を詳細にレビューしながら紹介する構成のもの）は、この点を上手に行っています。インフォマーシャルはユーザーに反応を求める前に、ユーザーが抱えている問題を明らかにします。そして、その問題を解決する商品を紹介するのです。

また、CTAをクリックすることでユーザーが得られるメリットについても伝えなければなりません。ユーザーはCTAをクリックすることで何を得られるのでしょうか？

Skypeを例に挙げてみましょう。SkypeはダウンロードをうながすCTAにおいて、ダウンロードのメリットを明確に示しています。

しかし、ユーザーにCTAのクリックを急かすことにより、理解しにくくなってしまう場合があることに注意しなければなりません。Skypeのトップページでは、Skypeが何をするものか一目ではわかりません。コピーは心を動かすものですが明確ではありません。つまり、CTAのメリットとわかりやすさの両方が必要なのです。

２. CTAに関するユーザーの質問に対処する

CTAを完成させることは、ユーザーから信頼を得るための一歩です。サイトによっては、支払い情報や個人情報の入力が必要なこともあります。このようなサイトの場合、ユーザーは疑問や懸念を抱くことが多いです。ユーザーが行動を起こす前に、ユーザーの懸念に対処するべきです。

また、ユーザーに配送料や返品条件を探させるべきではありません。ニュースレターに登録する顧客に対しては、配信頻度を表示する必要があるでしょう。また、簡単に購読を解約できるかどうかも知りたいはずです。

このニュースレターのCTAは登録のメリットを訴えるだけでなく、メールの配信数の開示や購読の解除に関する詳細を記載することで、ユーザーの疑問にも答えています。

３. CTAは少なくし、それぞれ違うものにする

CTA自体に焦点を当てることも重要です。CTAが多すぎると、ユーザーは困惑しています。スーパーマーケットでの調査によると、買い物客は選択肢が多すぎるとあまり購入しない傾向にあるそうです。

ユーザーがしなければならない選択肢を制限することによって、精神的な努力を減らします。つまり、ユーザーに少しずつサイト案内をするのです。案内には、ナビゲーションオプションからCTAまですべてが当てはまります。

適切なCTAの数はサイトによって異なります。しかし、適切なCTAとは数ではなく、それぞれのCTAに違いがあるかどうかということです。

私が最近Amazonで利用しようとした予約注文を例に挙げてみましょう。私に提示されたのは、たった２つのCTAでした。問題は、その２つのCTAの間に、明確な違いがなかったことです。購入するためにクリックする選択肢はどちらだったのでしょうか？

４. CTAをどのように配置するか考える

もう１つ注意すべき重要な点は、CTAをページのどこに配置するかということです。以下の例のように、CTAはページ上部や中央のコラムに配置するべきです。

しかし、顔の画像がページ内にあるときは事情が異なります。下のアイトラッキングのヒートマップからわかるように、顔の画像はCTAから注意をそらしてしまいます。

画像とCTAを関連付けることで、ユーザーの注意を引くのに役立ちます。

カスタマージャーニーを考慮した配置

CTAのページ上での配置を考えるだけでなく、ユーザーに反応を求めるのに適切なタイミングについても考えましょう。

ユーザージャーニーでCTAをどのように配置するか考えましょう。急かしすぎるとユーザーは応えてくれません。

Tシャツを買うためにBonobosを訪問したとき、ポップアップが表示されました。そのポップアップは、私のメールアドレスと引き換えに割引をするというものでした。問題は、ポップアップが表示された時点で私がまだTシャツを１枚も見ていないということです。どのTシャツが欲しいのかわからないので、割引してほしいかもわかりませんでした。つまり、適切でないタイミングでCTAに応えるよう求めてきたのです。

５. CTAの周りの余白を利用する

CTAの配置だけが問題なのではなく、CTAの周りのスペースも重要です。CTAの周囲のスペースが大きいほど、より多くの注意を引くことができます。CTAの周りをごちゃごちゃにしてしまうと、ページが乱雑なためにCTAを見失ってしまうでしょう。

YahooとGoogleのホームページのシンプルさを比較してみましょう。余白がどのようにユーザーの視線をCTAに向けるかを表しています。

６. CTAに別の色を使うことを検討する

色は、要素にユーザーの注意を引くための効果的な手段です。特に、サイトのCTA以外の部分の色調範囲が限られているのであれば効果的でしょう。

次の例は色の効果をよく表しています。サイトのCTA以外の部分に落ち着いた青と灰色が使用されている一方で、CTAは鮮やかな緑です。このはっきりとしたコントラストによって、ユーザーが次にすべきことが明らかになっています。

強い対比色は、CTAへの注意を引くのに有効です。

もちろん、色だけに頼ってはいけません。なぜなら、色の区別がつかなかったり、コントラストがわからなかったりするユーザーが多くいるからです。

７. CTAにおけるサイズの重要性

Webデザイナーである私たちは、要素のサイズをより大きくするよう依頼してくるクライアントによく悩まされます。サイズがすべてではないというのは真実です。配置や色、余白も非常に重要であることはすでに確認しました。

しかし、サイズが大きな役割を果たすということは否定できません。CTAを大きくすればするほど、ユーザーが気付く可能性が高まります。また、CTAを大きくすることでより心に響くコピーを加えることもできます。

CTAはサイズが重要です。太字ではっきりしたものにしましょう。

８. 希少性を利用してアクションをうながす

心理学への理解によって、CTAの効果に大きな差が生まれます。

たとえば、供給を限定することで生まれる緊急性は、人々に行動をうながします。人はチャンスを逃したくないからです。緊急性を生み出して、今すぐ行動しなくてはならないという必要性を作り出すために、以下のようなことに考慮しましょう。

・期間限定割引を提示する

・供給を限定する

・すぐに売り切れてしまうことを強調する

Booking.comは、希少性の考えを上手に利用しています。Booking.comでは、利用可能な部屋がどれだけ少ないかを提示しています。そして、何人がそのホテルの情報を見ているということを知らせます。これにより、ユーザーの行動を促進します。ユーザーは、その部屋を予約しなければ、空きがなくなってしまうかもしれないと思うのです。これが、希少性の力です。

Booking.comは希少性を利用して、人を今すぐ予約する気にさせます。

しかし、これは希少性の力のほんの一部にすぎません。希少性の力についてもっと知りたいのであれば、Susan Weinschenk氏の著書『100 Things Every Designer Needs to Know About People』をおすすめします。

９. 最後までCTAを実行する

ユーザーがCTAに応じる際に、何が起きるか考えましょう。CTAと同様に、それ以外のプロセスについてもしっかりと考慮する必要があります。

結局のところ、ユーザーがCTAをクリックしても、カスタマージャーニーは終わりません。登録プロセスやメールの送信、あるいは多くのステップがほかにあるかもしれません。ユーザーの注意をそらさないためにも、これらのようなプロセスの無駄をなくして合理的にする必要があります。ユーザーの注意がそれてしまうと、プロセスを完了する上で妨げになるかもしれません。

Amazonでは、いったん支払のCTAをクリックすると、邪魔なものがいかにして取り除かれているか気が付くでしょう。

10. すべてのページにCTAを配置する

CTAがホームページ上だけでないことを確認しましょう。サイトのあらゆるページで、ユーザーの注意を引くCTAを何らかの形で設置する必要があります。もしユーザーが行き詰まってしまったら、あなたの呼びかけに応えることなくサイトから離脱してしまうでしょう。

私のサイトの主なCTAは、ニュースレターに登録をうながすことです。ユーザーが見逃すことがないように、すべてのページの下部にCTAを配置しています。

私のCTAはこのブログの全ページに表示されます。

CTAはすべてのページで同じである必要はありません。その代わり、ユーザーを最終目標まで導くためのさらに小さなアクションを使用することができます。

ユーザーを困らせないよう注意する

優れたCTAはコンバージョンに大きな違いを生み出します。しかし、CTAに使われたテクニックは危険につながる恐れもあります。

CTAを使ってユーザーを操り、アクションを起こさせることは可能です。これは特に心理学の分野での研究に当てはまります。しかし、このテクニックによって、ユーザーが買ってから後悔してしまうという事態を招くことがよくあります。ユーザーは騙されたと感じてしまい、オンライン上での否定的なコメントに繋がる恐れがあるのです。そのような否定的なコメントは、長期に渡って売上に損害を与えます。

ユーザーを操ろうとすることは、怒りを買うだけです。

しかし、問題はこれだけに留まりません。コンバージョン達成に必死になるあまり、私たちはユーザーにアクションを押し付けていることがよくあります。オーバーレイ広告やポップアップにより、ユーザーを困らせているのです。こうしたテクニックは確かに効果がありますが、かなりの犠牲をはらいます。１人のユーザーがコンバージョンを達成するごとに、その10倍のユーザーを遠ざけているのです。

CTAは慎重に配置していきましょう。コンバージョンだけに重きを置くのではなく、ユーザーの認識にも注目しましょう。あなたのCTAはブランドにどのように影響しますか？　ユーザーの認識に注目すれば、長期的な収益を改善することができるでしょう。