効果的なCTAボタンを作る4つのコツ

ユーザーのことを理解し、ユーザーの気持ちになって考えることは大切ですが、それだけで具体的なアクションを促すことは難しいでしょう。

アクションを促すための第一歩として「CTAボタンを押してもらう」というハードルがあるなら、「ユーザーにとって押しやすいのはどんなボタンか」を知らなければなりません。

ユーザーにとって押しやすいボタンの作り方、ボタンクリック後の遷移先で「問い合わせ」「資料請求」などのアクションを起こしてもらうにはどうすればいいのか、4つのコツを紹介します。


効果的なCTAボタンを作る4つのコツ


  • 起こしてほしいアクションを具体的に明示する
  • テキストは端的にまとめる
  • ユーザーにとって押しやすいデザインにする



遷移先の内容とボタンのテキスト・アイコンをマッチさせる

起こしてほしいアクションを具体的に明示する

遷移先が問い合わせフォームであれ資料請求フォームであれ、まずはその画面に続くCTAボタンを押してもらわなければなりません。そのために、CTAボタンには「ユーザーに起こしてほしいアクション」を具体的に書きましょう。

たとえばCTAボタンの遷移先が資料請求なら、最低でも「資料請求」のテキストをボタンに入れます。資料のダウンロードが目的なら「資料請求はこちら」「資料をダウンロードする」など、ダウンロード不要でブラウザから読める資料なら「詳細を見る」「ダウンロード不要の資料はこちら」などというように、より具体的なテキストを考えてみましょう。

テキストは端的にまとめる

CTAボタンはあくまでボタンであり、「ボタンのサイズ」がある程度制限されます。ボタンの中に入れられるテキストは限られていますし、文字がぎっちりと詰まった「見づらいボタン」は読みづらくクリックされづらいです。

ボタンがすっきりとした見た目になるよう、ボタンに入れるテキストは端的にまとめましょう。

最近はPCよりも、画面の小さなスマートフォンでWebページを見るという人が多いです。小さな画面でも文字がつぶれないよう、文字数を抑え、テキストのサイズを大きくするよう心がけましょう。

なお、「うちのサイトはBtoBでPC閲覧がメインだから、テキストが多少小さくても問題ない」という場合でも、端的さは大切です。直感的に内容がわかるボタンの方がクリックされやすいからです。

ユーザーにとって押しやすいデザインにする

CTAボタンが押されるかどうかには、その中に入れるテキストだけでなく、デザインも大きくかかわってきます。色や形などのデザインも工夫し、「ユーザーにとって押しやすいボタン」を作りましょう。

デザインを工夫するといっても、凝ったデザインにすればいいわけではありません。CTAボタンで重要なのは見やすさ、シンプルさです。それを踏まえ、具体的には次のようなポイントを意識するといいでしょう。

ボタンの色をアクセントカラーにする

CTAボタンの色はWebページ全体の基調となる色（メインカラー）の反対色（アクセントカラー）にすると目立ちます。メインカラーとアクセントカラーは、それぞれ色相環の対角線上に位置しています。

Color Supplyのようなツールを使うと、メインカラーとアクセントカラーを調べやすいでしょう。

与えたいイメージからボタンの色を決める

白と青なら誠実さ、白と淡いオレンジなら暖かさというように、使う色やその組み合わせにより与える印象は大きく変わります。

たとえばBtoB、BtoCでも保険や住宅といった高額商品を扱うなら、誠実さを印象付ける「白と青のボタン」がよく使われます。「家族で写真を共有するアプリのダウンロードボタン」なら、幸せで暖かな家族を印象付ける「白と淡いオレンジや黄色のボタン」もいいかもしれません。

ただ、画面内にたくさんの色があると見づらい、ごちゃごちゃしているという印象を与えてしまいます。画面全体の色味や色の数、ページ全体のメインカラーとの相性を考え、CTAボタンの色を決めましょう。

ボタンサイズはスマートフォン表示で10mm×10mm

CTAボタンのサイズも押しやすさに影響を与えます。特にスマートフォン表示では、ボタンを押す指の大きさを考えましょう。平均的な指のサイズから、10mm×10mmのCTAボタンが押しやすいといわれています。

アイコンを入れてよりわかりやすく

CTAボタンにアイコンを入れることで、そのボタンが何のボタンなのかをより直感的に伝えられます。たとえば電話問い合わせなら受話器やスマートフォンの、メール問い合わせならEmailのアイコンを入れるといいでしょう。

北米のマーケティングエージェンシー・Tinuiti社が行ったABテストでは、アイコンなしよりもアイコンありのCTAボタンの方が、リード送信数が30％高くなるという結果が出ました。

参考：【ABテスト事例】CTAのアイコン表示。有りと無しではどちらが効果的？

もちろん、画面の全体構成やボタンのサイズや形（アイコンを入れるとボタンが大きくなり、高さや幅も大きくなる）の兼ね合いもあるので、自社に取り入れると効果的か検討してみてください。

遷移先の内容とボタンのテキスト・アイコンをマッチさせる

CTAボタンの遷移先と、ボタンに入れるテキストやアイコンはマッチさせましょう。ここでは「より具体的に」と意識してください。

たとえば同じメルマガ登録のCTAボタンでも、「定期配信を受け取りたい方はこちら」では、何の配信かがわかりません。「メルマガ登録はこちら」のような、より具体的で端的なテキストが好ましいです。