TOP デザイン・情報設計・UI Call to Actionの効果を向上させる10のテクニック

Call to Actionの効果を向上させる10のテクニック

この記事はboagworldからの翻訳転載です。配信元または著者の許可を得て配信しています。
Call to Action: The 10 Most Effective Techniques

全てのウェブサイトにはユーザーにやってほしいことを完了するために必要な”Call to Action”(CTA)が備わっています。

あなたはユーザーにどうやってその行動を促しているでしょうか?
効果的な”Call to Action”(CTA)をどのように作っているでしょうか?

“Call to Action”は私の仕事の多くを占めています。

ウェブを専門とする広告代理店に指導をするときには、”Call to Action(CTA)とは”について話をしますし、クライアントのためにプロトタイプを製作するときには”Call to Action”(CTA)に注力します。

”Call to Action”(CTA)は私がエキスパートレビューをする際には必ずと言っていいほど登場します。
なぜなら効果的な”Call to Action”(CTA)はウェブサイトにとっては必要不可欠な存在であるためです。

”Call to Action”(CTA)はECサイトにだけ必要とされるものではありません。

あらゆるウェブサイトでユーザーにやってほしいことを完了してもらうために必要なものです。

例えばコンタクトフォームへの入力だったり、ニュースレターの配信登録だったり、ユーザーが自分たちの時間を費やしたりすることです。

“Call to Action”(CTA)には以下の効果があります。

  • あなたのサイトに集中してもらえる
  • あなたのサイトが成功しているかをはかる指標になる
  • ユーザーを導くことができる

では、どのようにして効果的な”Call to Action”(CTA)を作ることができるのでしょうか?

以下にそれを実現するための10のテクニックをご紹介します。

1. “Call to Action”(CTA)で価値に注目させる

ユーザーが率先して”Call to Action”(CTA)を実行するには、彼らがその必要性を理解しなければなりません。

インフォマーシャルはその良い例です。インフォマーシャルでは人々に行動を起こしてもらうように促す前に、(ユーザーの抱えているであろう)問題点を明確にします。そしてその問題点を解決する商品を紹介します。

あなたはユーザーに対して、行動を起こすと何がいいかということを伝える必要もあります。ユーザーは”Call to Action”(CTA)を実行した結果何を得られるのでしょうか?

Skypeの例を持ってきました。ダウンロードボタン(このページにおける”Call to Action”)の上には、Skypeを使うことによるメリットが明確に書かれています。

Skypeはクリックすることによって得られるメリットを明確にしています。

ただし、注意すべき点があります。ユーザーに対して強い主張をする”Call to Action”(CTA)を急いで作ろうとするあまり、私たちはときにこの明確さを忘れてしまうことがあります。

Skypeのホームページのトップには、すぐにこのサービスで何ができるか分かるほどの明確さはありません。

コピーは感情に訴えかけるものではありますが、明確ではありません。あなたが”Call to Action”(CTA)を用意する際にはこの両方が必要となります。

2. “Call to Action”(CTA)に関する質問に答える

“Call to Action”(CTA)を完了していくということはユーザーがサービスを信頼していく過程を表しているとも言えます。ユーザーは支払いをしなければならないかもしれませんし、個人情報を提供しなければならないかもしれません。

この過程でユーザーは疑問や不安を抱くこともよくあります。そしてユーザーは自分自身が行動を起こす前にその疑問や不安に答えてほしいのです。

ユーザーは配送料や返品のポリシーをわざわざ探し回るようなことはしません。あなたはユーザーにニュースレターの配信頻度を伝えることで、ユーザーがニュースレターに登録する(サインアップする)ことに対して安心感を与える必要があります。

このニュースレターの”Call to Action”(CTA)はサインアップによるメリットを売り込むだけではなく、ニュースレターの頻度や登録を解除が簡単にできることを伝えることでユーザーの疑問や不安を解消しています。

3. 複数”Call to Action”(CTA)を用意する時には最小限の数で違いを明確にすること

あなたがやってほしい行動にユーザーを集中させることも重要です。あまりに多い”Call to Acton”(CTA)はユーザーを困惑させてしまいます。

スーパーマーケットでの研究では買い物客に多くの選択肢を見せてしまうと、購入に至る可能性が低くなってしまうという結果が出ています。

選択肢を限られた数にすることによって、ユーザーの心理的な負担を減らさなければなりません。あなたは各ステップごとにサイトを通じてユーザーを導き、これはナビゲーションから”Call to Action”(CTA)までの全てに適用されます。

“Call to Action”(CTA)の適切な数というのはサイトによって異なります。実際のところは”Call to Action”(CTA)というのはそれほど多いわけではなく、それぞれの”Call to Action”(CTA)の意味は違います。

最近私が行ったAmazonでの予約注文をでの例を見てみましょう。

私にはたった二つの”Call to Action”(CTA)が与えられていただけでしたが、問題はその二つの違いが明確でなかったことです。購入するためにはどちらのオプションを選べば良いのでしょうか?

もしあなたが二つ以上の”Call to Action”(CTA)を用意するのであれば、それらの明確な違いがわかるようにしなければなりません。もしそれらが似通いすぎていると、ユーザーは選ぶことができません。

4. “Call to Action”(CTA)をどこに置くかを考える。

別の重要な要素として”Call to Action”(CTA)をページのどこに置くのかということがあります。下の例に示すとおり、Webページのトップでかつ中央に配置する必要があります。

“Call to Action”(CTA)の場所はページのトップの位置でかつ中央になっています。

しかし、気をつけてください。ページ内に人の顔の写っている画像を設置している時には、この方法は成功を約束してくれません。

「顔」というのは”Call to Action”(CTA)から注意をそらしてしまうのです。下のアイトラッキングの結果をヒートマップで示したものから、それが分かるでしょう。

“Call to Action”(CTA)の位置は画面の要素に応じてよく考えましょう。「顔」がある時には特にその必要があります。
ただ、幸いなことにこれは私たちに利益をもたらしてくれることもあります。

もし、「顔」と”Call to Action”(CTA)が結びつく場合には、ユーザーが”Call to Action”に集中するのを助けてくれますし、その「顔」の視線の先に”Call to Action”(CTA)がある場合には、ユーザーの視線を誘導してくれます。

“Call to Action”(CTA)と画像を結びつけることによって、よりユーザーの注意を引きやすくなります。

ユーザーの行動の流れに合わせて位置を考える。

“Call to Action”(CTA)の位置をページの中だけで考えてはいけません。ユーザーが行動を起こしたくなる適切なタイミングというのも考慮する必要があります。

ユーザーの行動の流れの中でどのように”Call to Action”(CTA)を配置するか考えましょう。あまりにタイミングが早すぎるとユーザーは反応したくなくなってしまいます。

私がTシャツを買うためにBonobosにアクセスした時、ポップアップが上がってきました。ポップアップにはメールアドレスを教えてくれたら値引きしますということが書かれていました。

ここでの問題点はまだ私がTシャツを全くみていないタイミングだったということです。まだ私がTシャツを欲しくなるかどうかもわからないタイミングでは値引きが必要かどうかもわかりません。Bonobosは間違ったタイミングで私に”Call to Action”(CTA)を要求してしまったことがわかります。

5. “Call to Action”(CTA)の周りにはネガティブスペース(余白)を使う。

場所だけが”Call to Action”(CTA)で考慮すべき事項ではありません。”Call to Action”(CTA)の周りのスペースも同様に考慮しなければならないポイントです。

”Call to Action”(CTA)の周りによりスペースを設けることで、より”Call to Action”(CTA)にユーザーの注意を引くことができるのです。

YahooとGoogleを比べて見るといかにネガティブスペースが”Call to Action”に視線を集めてくれるかが分かるでしょう。
参考: Why Whitespace Matters.

6. “Call to Action”(CTA)には周りとは違う色を使う

色というのは要素に注目を集めるのに効果的な方法の一つです。

これはサイトの”Call to Action”(CTA)以外の部分に使われる色が限られているほど効果を発揮します。

以下は上手く色を使っている例です。サイトの大部分には控えめな青やグレーが使われていますが、”Call to Action”(CTA)には鮮やかな緑色が使われています。このはっきりしたコントラストはユーザーに対して次に何をすべきかを明確にしてくれます。

強いコントラストの配色は”Call to Action”(CTA)に強く注意を引いてくれます。
もちろん色にだけ頼るということをしてはいけません。なぜなら色盲であったりコントラストを捉えられない(色弱など)のユーザーも多くいるからです。

7. “Call to Action”(CTA)にはサイズも重要

Webデザイナーはクライアントの「要素を大きくしてくれ」という要望によくイライラさせられます。ここまでにすでに「色」「場所」「空白」の重要性については私たちは理解したところでしょう。

「サイズ(大きさ)」というのも重要な要素であることは否定できません。より大きな”Call to Action”(CTA)であれば、ユーザーに気づいてもらえる可能性は高くなるのです。また、大きな”Call to Action”(CTA)には重要なコピーを書き加えることができます。

“Call to Action”(CTA)にはサイズ(大きさ)も重要な要素です。コピーは太くはっきりと書きましょう。

8. 行動を促すために希少性を使う

心理学の知識というのは効果的な”Call to Action”(CTA)を用意することにおいて、大きな差を生みます。

例えば供給を制限し、緊急性を感じる状態を作り出すことはユーザーの行動を促進することになります。ユーザーは逃すことを嫌います。緊急性を感じる状態を作り出し、行動の必要性をユーザーに感じてもらうためには以下のような方法が考えられます。

  • 限られた時間の間だけ値引きを行う。
  • 提供する量を制限する。
  • 売り切れの可能性を強調する。

Booking.comは希少性の考え方をうまく使っています。Booking.comでは予約可能な部屋数がどれほど少なくなっているかを見せたり、どれほどのユーザーが今同じホテルをみているかということを見せたりしています。

これはユーザーの行動を促します。ユーザーは「もし予約しなければ、その部屋はもう予約で埋まってしまう」という恐れを感じることになるのです。これが希少性の効果です。

Booking.comはユーザーの予約の動機付けとして希少性を利用しています。
これは心理学を使う例のほんの一部です。心理学の力についてより多く学びたいのであれば、Susan Weinschenkの100 Things Every Designer Needs to Know About People.をお勧めします。

9. あなたの”Call to Action”(CTA)を完遂してもらう

“Call to Action”(CTA)から行動を起こしたユーザーに何が起こるか考えてみましょう。”Call to Action”(CTA)の先のプロセスも”Call to Action”(CTA)と同じように考える必要があります。

“Call to Action”(CTA)をクリックした時点でユーザーのやりたいことが完了することは稀です。そこからサインアップが必要だったり、メールで連絡を取り合う必要があったりなど”Call to Action”の先には多くの新たなステップが存在します。

あなたはその一連の流れからユーザーの気が散らないようにする必要があります。気が散ってしまうとユーザーはそこで行動をとめてしまいます。

ユーザーが購入しようと”Call to Action”(CTA)をクリックした後、Amazonがいかにしてユーザーの気をそらしてしまうものを排除しているか分かるでしょうか。

10. 全てのページに”Call to Action”(CTA)を用意すること

“Call to Action”(CTA)はWebサイトのトップページだけにあればいいというものではありません。

全てのページにユーザーを導くための何らかの”Call to Action”(CTA)は必要です。もしユーザーが行き詰まってしまったら、ユーザーはあなたに対して何もアクションを行うことなく離脱してしまいます。

私にとっての”Call to Action”(CTA)はニュースレターへの登録です。あなたが見過ごすことがないように、私は全てのページの下部に登録のための”Call to Action”(CTA)を設置しています。

私の”Call to Action”(CTA)はこのブログの全てに存在しています。
“Call to Action”(CTA)は全てのページで同じである必要はありません。その代わりに最終的な目的を達成に導くためにより小さなアクションを用意すれば良いでしょう。

ユーザーのイライラに気付きましょう

良い”Call to Action”(CTA)はコンバージョンに大きな違いを生みます。しかし、コンバージョンを向上させるテクニックは同時に危険もはらんでいます。

私たちはそのテクニックを駆使すればユーザーの行動をコントロールすることができます。これは特に心理学の世界を深掘りしていくと実現できてしまいます。

これは時に購入者に後悔させてしまう結果となることがあります。

ユーザーは騙されたと感じ、時にウェブ上にネガティブなコメントを残すというところにまでつながってしまいます。このコメントは長い目で見たときの売り上げにダメージを与えることになります。

ユーザーの行動をコントロールしようとするのは、ユーザーをイライラさせるだけです。問題はそこでは終わりません。

私たちはユーザーに対して自分達が行って欲しい行動を押し付けてしまいます。

例えばオーバーレイやポップアップというのはユーザーをイライラさせてしまいます。確かにこれらのテクニックというのは効果を発揮しますが、高い犠牲を伴います。

あなたがユーザーのためにやったことが多くのユーザーを離れさせる原因となってしまうのです。

参考: Newsletter Signup: How to get subscribers without being annoying.

“Call to Action”(CTA)については慎重に対応しましょう。

コンバージョンにだけフォーカスするようにしないでください。

ユーザーがどのように感じるかということにもフォーカスしてください。

あなたの”Call to Action”(CTA)はあなたのブランドをどのように反映しているでしょうか。正しい”Call to Action”は長期的な収益を向上させることに結びつくでしょう。

UX DAYS TOKYO オーガナイザ/デジタルマーケティングコンサルタント 著書 ・ノンデザイナーでもわかる UX+理論で作るWebデザインGoogle Search Consoleの教科書 毎年春に行われているUX DAYS TOKYOは私自身の学びの場にもなっています。学んだ知識を実践し勉強会やブログなどでフィードバックしています。 UXは奥が深いので、みなさん一緒に勉強していきましょう! スローガンは「早く学ぶより深く学ぶ」「本質のUXを突き止める」です。

まずは言葉を覚えよう

「UX用語」のカテゴリー

UXを取り入れるためのマインドセット

「UX格言」の新着

UX格言 一覧

現場の声をリアルで届ける

動画で学ぶUX 「You X Tubo(ゆーえっくすつぼ)」の新着

You X Tubo(ゆーえっくすつぼ) 一覧