非常に効果的なCTAボタンのための17のベストプラクティス

本日は海外記事から、効果的なCTAボタンを作る為の17のポイントについてご紹介します。

取り上げるのは、worldstreamブログより、「17 Best Practices for Crazy-Effective Call-To-Action Buttons」です。より詳しい内容については元記事（英語）をぜひご覧下さい。

効果的なCTAボタンを作る為の17のポイント

紹介されていた全17の方法は下記のとおりです。

1. アクションを含んだ文言を使用する
2. 色にこだわる
3. 形にこだわる
4. 大きく
5. 文言を長くしすぎない
6. 一人称を使う
7. 緊急性をもたせる
8. ファーストビュー内に配置する
9. ほかのボタンよりも目立たせる
10. ユーザーに価値を提供する文言を使用
11. ボタンを装飾する
12. ボタンのそばに補足のテキストを配置する
13. EC向け施策：Paypalボタンを配置する
14. 選択肢はなるべく少なく
15. ボタンは自然な位置に配置
16. 余白を確保する
17. とにかくテストを繰り返す

本記事では、これらのうち一部について詳しくピックアップしてみます。

一人称を使う

文言のなかの「あなた＝（2人称）」を「私は＝（1人称）」に置き換えると効果が上がるケースがあるようです。
ある調査では、ボタンの文言を「あなたの無料テンプレートを手に入れる」から「わたしの無料テンプレートを手に入れる」に改善したところ、なんとクリックが90％も向上したのだとか。

これは英語ならではの改善効果のような気もしますが、日本語においても同じ。よりユーザー目線に近い視点でアクションを促すことが重要です。
日本語では1人称2人称ともに省略されてしまうことが多いですが、例えば「今すぐ始めよう！」よりも「今すぐはじめる」のほうが、より”自分事”に捉えやすいのではないでしょうか。

ほかのボタンよりも目立たせる

サイト内に複数のボタンが存在する場合は、それらを並列に並べるのではなく、主要なCTAがもっとも目立つように色や形・大きさをデザインするようにするべきですね。

【EFOテクニック】主要ボタンとサブボタンは並列にせず、見た目の強弱をつけるべき
https://f-tra.jp/blog/column/4855

ボタンを装飾する

ボタンはボタンらしくデザインすることが前提ではあるものの、時にはアイコンなどでボタンを装飾するとより効果的なボタンを作ることができるようです。

例えばよく使われるのは矢印のアイコンを添える例。ボタンを目立たせるだけでなく、クリックすることでアクションが進んでいくイメージを与えます。

矢印をつけたボタンの例。

さらに、CTAの内容に合った意味合いを持ったアイコンをつけると、よりユーザーがアクションをイメージしやすくなります。

ホワイトペーパーダウンロードのCTA。ボタンにダウンロードをあらわすアイコンを挿入している

選択肢はなるべく少なく

わたしたちは、２つから１つを選択することは簡単でも、より多くの選択肢のなかからひとつを選ぶことには迷ってしまい、選択することが困難となります。
CTAボタンにおいてもそれは同じです。選択肢が多すぎるとユーザーはどれを選んで良いか迷ってしまいます。

できるだけ選択肢は減らすか、やむをえない場合は、どれかおすすめのひとつを強調しておくと、ユーザーは意思決定しやすくなるでしょう。

とにかくテストを繰り返す

17ものベストプラクティスが並ぶ中、筆者が最後に伝えたもっとも大切なポイントは、とにかくテストをすることの大切さ。

これまでご紹介してきたどんなボタンの形や色・文言が効果を持つかというベストプラクティスは、あくまで傾向であり、実際にどんなものが効果的かは試してみなければわかりません。
ぜひさまざまなパターンでテストを繰り返し、あなたのサイトにとっての最適解を見つけていただきたいと思います。

その他関連記事

その他、関連する当ブログの過去記事を下記に引用いたします。気になった項目をさらに深めたい方は、ぜひあわせて参考にしていただければ幸いです。

2.色にこだわるについては下記が参考になるかもしれません
ボタンの色は、何色にするべき？～ケーススタディから見る、送信ボタンに最適な色とは～
https://f-tra.jp/blog/column/5704

7.緊急性をもたせる に関して下記の記事で詳しい手法を紹介しています
“今すぐ”ユーザーを惹きつける！緊急性のあるCTAをつくる4つのポイント
https://f-tra.jp/blog/cta-column/8134

10.ユーザーに価値を提供する文言を使用については下記が参考になるかもしれません
【CTA】大公開！ユーザーを惹きつけるメリット18のアイデアと60の代表フレーズ
https://f-tra.jp/blog/cta-column/8167

15.ボタンは自然な位置に配置についてはぜひ下記を参照ください
視線の動きのクセから考える、フォームの送信ボタンを 右側におくべき理由
https://f-tra.jp/blog/column/4857

最後に

いかがだったでしょうか。本日は海外記事より、17つのCTAボタンのためのTipsをご紹介しました。
ぜひあなたのサイトのUI改善にもお役立てください。

参考記事：17 Best Practices for Crazy-Effective Call-To-Action Buttons