悩めるWEB担当者様のための最新ノウハウをお届け

CTAとは?クリックを促すボタンのデザインでコンバージョンを獲得!

アイキャッチ

皆さんは「CTA(Call To Action)」をご存知でしょうか。
CTAはCV(コンバージョン)獲得のためには欠かせない、デジタルマーケティングにおいて非常に重要な要素のひとつです。
本記事では、CTAについての基本的な事柄から、CTA改善のポイントや注意点、事例まで幅広くご紹介します。

>>制作実績多数、CVR1.5倍の改善実績あり!弊社のLP制作サービスはこちら

CTAとは

CTAとは、Call To Action(コール トゥー アクション)の頭文字をとった略称です。日本語では「行動喚起」)という意味になります。Webサイトに訪れたユーザーに取って欲しい行動を促す、ボタンやテキスト、画像などを指します。また、CTAを目的に設置したボタンのことを「CTAボタン」と呼びます。

具体例としては、以下のような「詳しくはこちら」や「eBookでダウンロード」のボタンがあげられます。この様なCTAボタンを設置することで、ユーザーに対してセミナー情報ページの訴求やダウンロードを促すことが可能です。
DIブログのCTAボタン

CTAはなぜ重要なのか

CTAはユーザーの離脱を防ぐために重要です。ユーザーによってサイトを訪れる目的は異なります。商品やサービスを比較したいと考えているユーザーが訪れるページに、購入を促すCTAを設置しても効果は期待できません。詳しい情報を得られたり、問い合わせができるCTAを設置したほうが、ユーザーを次の行動に繋げることができます。このように、サイトを訪問するユーザーのニーズにあったCTAを設置することで、CVに繋がる可能性が高くなります。

この結果、CVR改善に繋がります。

CTA改善のポイント

CTAの改善には以下の3つのポイントが挙げられます。

  • 設置場所
  • デザイン
  • テキスト

それぞれ詳しく見ていきましょう。

ボタンの設置場所

ページ最上部
ユーザーが一番最初に目につく位置なので、「購入」や「お問い合わせ」などを行っていることをアピールすることができます。どんなアクションがあるのかユーザーに認知してもらやすい位置です。
ページ最下部
文章を最後まで読んだ、関心度の高いユーザーの目につく位置になります。文章の最後にCTAを設置することでCVに繋がる可能性が高くなります。
固定ヘッダー
ページが縦に長い形式のものだと、ユーザーがCTAボタンにたどり着く前に離脱してしまう可能性があります。そのため、CTAボタンの位置を固定することで常にユーザーの目に届き離脱されにくくできます。ページを読んでいる最中でもクリックできるので機会損失を防ぐことも可能となります。
コンテンツ内や直下
ユーザーがコンテンツを読んだ直後にCVアクションを取ることが可能なため、扱っているコンテンツの種類が多いときに効果的です。

ボタンのデザイン

改善するにあたり、最も大事なポイントは統一感をもたせることです。
例えばTwitterなら青、LINEなら緑のようにイメージがあると思います。
各Webサイトにも、メインとなるカラー・大きさ・フォントを崩さないように注意しましょう。

ボタンの色

CTAボタンに使われる色は、ページ全体の配色のバランスや構成を考える必要があるため、「この色ならcvに繋がりやすくなる」といった答えはありません。しかし、視覚的な影響が大きいCTAボタンにとって、色という要素はユーザーに与える印象を大きく左右するため、決して軽視できないものです。

インバウンド向けマーケティングツールを開発するHubSpot社の「ボタンカラーA/Bテスト」によると、ある会社のホームページのクリック率は赤色が緑色に比べ21%もCVRが高かったとの調査結果が出ています。この調査では「Get Started now!」という文言を使っていたため、活発な印象を与える赤色が多くのユーザーにより良い印象を与えたと推測できるでしょう。

それでは実際に色味よってどのような印象を与えるのかご紹介します。

印象 最適なページ
赤系 活発 セールなど購入意欲を掻き立てるページ
青系 安全性 ビジネスなどユーザーを信頼させるページ
緑系 健康 落ち着かせるページ

自社で取り扱う商品やサービス、どのようなターゲットを狙うのか明確にし、イメージにあった色を採用することで大きな効果を得ることが出来るはずです。

ボタンの大きさ

パソコンとモバイルなどデバイス別にボタンサイズを考慮します。
パソコンではマウスでクリックするのに対して、スマートフォンなどのモバイル端末では指でクリックすることになります。ユーザーの利用環境に合わせた配慮をすることも必要です。
PC、モバイル共に:縦幅0.5㎝以上が理想です。

ボタンのテキスト

シンプルであるか
ボタン内のテキストが長いとユーザーはそのCTAで「何ができるのか」、「どんな便益があるのか」を理解するのに時間がかかってしまいます。理解までに時間がかかってしまうと、CVとニーズが一致していても、クリックされる前に離脱してしまう可能性があります。そのため、端的で分かりやすい文言を意識することで、機会損失を防ぐことができます。
ユーザーが行動しやすい文言か
CTAのテキストは「行動」を意識できる文言にしましょう。「お問い合わせ」と表記するのではなく「お問い合わせはこちら」のように、ユーザーのCVまでの行動を促す文言にしましょう。

CTAに関する注意点

次にCTAに関する注意点を説明します。

ボタンを詰め込みすぎない

ひとつのページにいくつものCTAを設置すると、ユーザーが離脱しやすいといった傾向があります。どのボタンをクリックしていいかわからなくなり行動を諦めてしまう心理が働くからです。場所やテキストに合わせた設置の仕方は問題ないので、複数のCTAを設置する場合は同じ場所を割けたりするなど分散して設置するようにしましょう。

効果測定を行う

CTAを設置しただけではその効果はわかりません。CTAの位置やデザインはユーザーの行動を促すものになっているのか、クリック数は増えたのかを測定する必要があります。
効果がなければ設置場所を変えてみたり、デザインや色を変更したりと、改善を図っていくことで効果的なCTAを設置できるようになります。

>>制作実績多数、CVR1.5倍の改善実績あり!弊社のLP制作サービスはこちら

CTAの参考事例

ここまで、CTAのポイントや注意点を解説しました。ここからはCTAの事例についてご紹介します。

Twitter

全体が白・青・黒の3色でまとめられているため、CTAを青と白で設置しています。
また、「Twitterをはじめよう」というキャッチコピー文を置き、CTAはシンプルにしています。
TwitterCTAボタン
引用元:Twitter公式HP

アディダス

各コンテンツ毎にCTAを設置しています。アディダスのロゴカラーである白黒を用いることで、統一感を出しています。
アディダスCTAボタン
引用元:アディダス公式HP

DELL

画面右側に固定のCTAを置き、いつでもお問い合わせできるようにしています。
また、文字を詰め込みすぎずシンプルにしています。
DELL CTAボタン
引用元:DELL公式HP

まとめ

今回はCTAについてご紹介いたしました。CTAはただ設置をすればいいというわけではなく、ターゲットとなるユーザーのニーズや行動を理解し、適切な位置やデザインで設置する必要があります。ポイントや注意すべき点に気をつけながら、効果測定を行い改善を繰り返していきましょう。

>>制作実績多数、CVR1.5倍の改善実績あり!弊社のLP制作サービスはこちら

当サイトではこの他にもWebに関するお役立ち情報を多数ご紹介しています。
Web担当者の方、デジタルマーケティングに興味がある方はぜひご覧ください。


広告運用やSEO、解析・Web製作など、当社はWebに関わるベストソリューションをご提供しています。お悩み・ご相談も受け付けておりますので下記のボタンからお気軽にご連絡ください。

関連記事

広告運用 SEO対策 サイト改善 MA活用 デジタルマーケティングの端から端まで支援 3分でわかるDIのナレッジと実績を凝縮!! 資料ダウンロード