CTA（コールトゥーアクション）とは
CTAとは「Call To Action コールトゥーアクション」の略です。ユーザーに対して最適な道筋をつけてあげ、ゴールまで導くことを指します。ボタンをデザインするときも、このCTAがきちんと機能していればクリック率やコンバージョン率を大幅に改善することができるのです。
今回は、CTAボタンを実装するときにチェックするべき7つのポイントをご紹介します。
コンバージョンにつなげるための7つのポイント
1ユーザーの言葉を使う
突然ですが、あなたがネットで買い物しているところを想像してみてください。以下の左右のボタンはどちらを押したくなりますか。
右の「注文する」のほうを選んだのではないでしょうか。自分が日ごろから使う言葉のほうが、押しやすいですよね。
このように企業側の言い回しと、ユーザー側の言い回しがずれているほど、ユーザーは企業側の言い回しではアクションを起こしづらくなります。CTAボタンのラベルにはユーザーが普段使っている言葉を使うべきです。
サイトを作成していると、つい企業側目線の言葉を使いがちです。以下の例を参考にして、ラベルを見直してみましょう。
2目が留まる場所にボタンを置く
ページのなかの余計なものを取り除いたうえで、CTAボタンを目立ちやすく押しやすい場所に配置しましょう。
こちらの例をご覧ください。上のキャプチャでは、ボタンは文章のすぐ下に配置されています。
一方で下のキャプチャではボタンの下が空白になっていて、目にとまるのではないでしょうか。
3ページ上で明るく目立つ色を選ぶ
CTAボタンを明るく目立つ色にしましょう。ただし、何色でもよいわけではありません。そのページのなかで目立つ色を選ぶべきです。
こちらのLinkedInのボタンをご覧ください。会員登録へ誘導する「View full profile（経歴を見る）」ボタンが黄色になっています。
ポイントは、ページ内では使われていない色であることです。色自体はそこまで派手ではないですが、背景が白と水色だからこそボタンの色が際立つ結果になっています。
4トンマナに従順すぎるな
CTAボタンをトンマナに馴染ませすぎて、色を抑えてしまうといったことはありませんか。しかし、それはおすすめできません。
こちらのSwinton Car Insuranceのサイトをご覧ください。どのボタンも同じに見え、どこを押せばいいのか迷ってしまうのではないでしょうか。しかも左側のボタンの色と、メインの画面に配置されている文字の色も同じです。ボタンが埋もれてしまっていますね。
この場合は、重要なボタンにはオレンジ系で目立つ色を使ってみるとよいのではないでしょうか。
5ボタンを大きくする
「サイズが大きく、現在のポインター位置から近いものほど押しやすい」というフィッツの法則をご存じですか。オブジェクトの距離が離れていてマウスでの移動距離が大きい場合や、クリックできる場所が非常に小さい場合は、ユーザーにとってはストレスなのです。
以下のFirefoxのボタンをご覧ください。
このようにフィッツの法則にのっとって、ボタンのサイズを大きくするというのはボタンを押してもらうにあたって非常に有効なのです。
6ボタンのサイズで優先順位をつける
しかし、全てのボタンを同じように大きくしてしまうと逆効果です。
以下は、その事例です。3つの画像を順に見ていきましょう。まず、ボタンが1つのみの場合です。「Get Started Now」のボタンは目立つ位置と配置になっています。
しかし、ボタンがもう一つ増えるとどうでしょう。右上に赤いボタンが一つ増えました。ユーザーはどちらのボタンが優勢かわからず、一瞬迷ってしまうはずです。
そこで、下の「Get Started Now」のボタンを大きくしてみます。
このように、ボタンのサイズで優先順位をつけることでどれを押すべきかひと目でわかるようになるのです。
7邪魔なボタンのつけすぎに注意
こちらはTD Waterhouseという銀行のサイトです。上からログイン、口座開設、CFD&バイナリーオプションログイン、証券業者ログインの4つのボタンが同じ色、同じサイズで並んでいます。
すでに口座のアカウントを持っている人であれば多少見つけにくくてもログインしてくれるはずです。たくさんあるログインボタンは、口座を解説するユーザーの邪魔になっているのです。
練習問題にチャレンジ！
こちらはLaura Ashleyのカート画面で、実際に検証に使われたものです。この1～3のなかで「Go to checkout(支払に進む)」のクリック率が最も高かったものはどれでしょうか。
答えは2です。ちなみに、1が改善前の画面、それに対し2のクリック率は11.02％上昇、3は逆に7.85％低下しています。
2のクリック率が上昇した理由はボタンが大きさと色が目立つこと。また、めったに使わないボタン「update shopping bag(ショッピングカートの更新)」がテキストリンクのままになっていることでしょう。一方、3はこのテキストリンクがボタンになっていたことで邪魔になったと考えられます。
目的への最短ルートを設計しよう
UXデザインに大切なのは、ユーザーが目的地に早くたどり着けるにようにすることです。今回ご紹介したCTAも、その方法の一つです。上手に使いこなしてユーザービリティを向上し、コンバージョン率を改善していきましょう。
