CTA改善で効率的にCVRを高める方法

アイオイクスのタッキー(@tackey_cro ) です。

CRO(コンバージョン改善)を実施しているけど中々成果が出ない…。
GAなどのツールを使うのが難しそうで、あまり手を付けたくない…。
そもそも施策する時間があまりとれない…。

こんな悩みをお持ちの方のために、今回は比較的簡単に短時間で成果が出る施策をご紹介します。

その施策がCTA(Call To Action)の改善です。

CTAは、“ご購入はこちら”、“資料請求”などの文言が記載されているクリック(スマホならタップ)可能なボタンの事です。

一般的にコンバージョン完了までのステップにCTAのクリック(すなわちフォームなどへの遷移)が必要になるため、コンバージョン数はCTAのクリック数に依存します。言い換えると、コンバージョン数の源泉はCTAのクリック数だということです。

ところが意外なことに、CTAが適切な場所に設置されていないケースやCTAが目立たないなど、ユーザーにとって使いにくいページが散見されます。

CTAの改善は、ページ間導線改善やEFOなどよりも工数が少なく効果が大きいコスパに優れる施策ですので、CROの第一歩として取り組んでみてはいかがでしょうか。

目次

CTAとは

まず最初にCTAの定義について簡単に説明します。

CTAとは、Call To Action(行動喚起の意)の略称で、サイト内のボタンやリンクなど、ユーザーが行動を起こすための要素を指します。

例えば、お問い合わせフォームやカートページへ誘導するリンクがCTAに該当します。

通常、サイト上でユーザーに資料請求や商品の購入などを行ってもらうことがKPIになりますが、そのKPIを達成するためには、CTAのクリックを増やすことが非常に重要です。

そのため、CTAを目立たせたり、ユーザーの気持ちに寄り添ったテキストを用いてCTAを作ることで、ユーザーの行動を促す必要があります。

次から、どのようにCTAを改善していけばよいかを述べますので、是非参考になさってください。

コンバージョンポイントを増やしCTAの種類を増やす

コンバージョンポイントには下記のようにいくつか種類があり、それぞれのCTAを作成することになります。

  • 購入
  • 問い合わせ
  • 資料請求
  • 無料体験 など

これらのコンバージョンポイントのうち、サイトでどれを使用するかは、サービス内容やマーケティングの方法によります。

例えばSaaS系なら”お問い合わせ”は必須でしょう。

しかし、その”お問い合わせ”のCTAのみがサイト内に設置されており、且つサイト内に適切に設置されているにもかかわらず成果が出ていない状況であれば、それはCTAの種類が足りていないことが原因かもしれません。

その場合の施策は、

  • 無料体験サービスのコンバージョンポイント
  • 資料請求のコンバージョンポイント

など、ハードルを下げたCTAを用意することがおすすめです。

このように、申し込みや購入に対するハードルが高い商材やCTAの場合に有効な施策は、ハードルが低いCTAから階段状にステップを上ってもらうことで、最終的な購入や商談へつなげることです。

CTAが少ないページにCTAを足す

CTAの種類が適切でも、CTAの数が少ないページはCTAのクリック数が少なくなる傾向にあります。

例えば、ページの下部のみにCTAがある場合と、上部から下部までに複数のCTAが設置されている場合は、後者の方がCTAのクリック数が増えることは直感的に理解できると思います。

また、

CTAのクリック数=CTAのクリック率×CTAのimp数

なので、CTAが多い方がCTAのimp数が増え、CTAのクリック数が増えるということが計算上からもわかります。

ただ、いくらCTAを複数設置したとしても、ユーザーの目線や意識が向かない場所に設置しても意味がありません。
(CTAのimpはユーザーが意識できるCTAであることが前提)

例えば、背景と同系色のCTAや、小さめのCTA、テキストに埋もれているテキストリンクなどが認識されにくいCTAに該当します。

このトピックでは、CTAの有効な設置場所を紹介しますので、ぜひ参考にしてください。

ファーストビュー(FV)

最重要ポイントです。

ユーザーはページ訪問の際に必ずファーストビューを見ますし、ファーストビューを見て離脱するかどうかを約3秒で決めると言われています。
参考:Webページの読み込み時間、3秒が限界か – 5秒になると直帰率激増

もしファーストビューにCTAが無ければアクションしたくてもできずに離脱してしまう、という事態もあり得るので、ファーストビューには基本的にCTAを設置しておくことをおすすめします。

本文中

本文を読んで納得できたり興味を持ったユーザーは、申し込みや購入を考え始めます。
そのタイミングでCTAが設置されていると、行動を促しやすくなります。

例えば、トピックの終わり目や料金を提示した直後が効果的です。

また、ヒートマップのアテンションで暖色になっている領域に設置するという施策も効果的です。

スクロール追従型

PCであればサイドバーや画面下部、モバイルであれば画面下部や上部に、スクロールに追従してくるタイプのCTAを設置することができます。

このCTAのメリットは、常にユーザーの目にさらされているため、ユーザーの好きなタイミングでクリックできる点です。その効果により、CTAのクリック数の上昇が期待できます。

一般的には成果が出やすい施策ですが、逆に成果が落ちるケースもあるので注意が必要です。
これは、CTAがユーザーの目に常に入る状態だと、徐々にユーザーの意識から消えていき、風景のようになってしまいクリックされなくなるため、と考えています。

要は、CTAはユーザーの視線や意識の向き処を考えながら設置しなければならないということで、この考え方は追従型に限らず重要です。

追従型CTAを入れるかどうかを決めるために、まずはABテストで試すことをおすすめします。

モーダル(ポップアップ)型

ブラウザの外側にマウスを移動したり、一定時間経過するとモーダルウィンドウ(ポップアップ)が表示され、その中にCTAが設置されているクリエイティブを見たことがあると思います。

このタイプのCTAは、ユーザーに強制的にCTAを見せられることが最大のメリットですが、ユーザーの行動を強制的に中断してCTAを見せるわけなので、UXを損なう可能性があることがデメリットといえます。

適切に使えば離脱の予防が期待できるモーダル型CTAですが、逆にUXを損なうリスクが考えられるため、使用は最小限にとどめることを推奨します。複数のページで何度かテストし、最も成果が上がったページだけに設置しましょう。

CTAの文言を改善する

CTAをただ設置しているだけのページをよく見かけますが、非常にもったいないです。

ユーザーがその気になっていても、なかなか踏ん切りがつかないことがあるので、背中を押してあげるような文言をCTAの近くに置くことで、クリック率が高まります。

基本的には文脈に沿ってその文脈時点での押しが強めの文言を考えればOKです。

例えば、

「高い技術力、低コスト、短納期。大切な時計を再び身に着けることをお望みなら、下のボタンよりお申し込みください」
「1ヶ月無料お試しは毎月10名様限定」 

のようなイメージです。

注意点としては、ページ内のCTA周りすべてに同一の文言を記載するのではなく、文脈に沿って、文言は都度作成しましょう。手間はかかりますが、そのほうが成果が出やすくなります。

CTAのデザインを改善する

CTAがCTAだと認識される見た目であったり、押しやすい大きさになっているなど、ユーザーの利便性に配慮したCTAにすることで、クリック率が高まります。

CTAのデザイン要素は大きく3つあります。

  • 大きさ

色はテーマカラーの補色にするなど、目立つ色にしましょう。

大きさは、常識的な範囲内で、大きすぎない程度に大きくしていきましょう。
形は、単なる長方形より角丸のほうが好成績であるケースが多いため、困ったら角丸をおすすめします。

ただ、CTAの各要素は複数パターン考えられます。色だけでも赤が良いのか、緑が良いのかなど、何パターンもあります。これらを少しずつABテストしていくのは非常に効率が悪いです。

弊社の場合では、ボタンの各要素(色、形、大きさに加えてCTA上のテキスト)を一気にテストすることが多いです。

なお、このCTAのデザイン改善は、ページ単位でのABテスト結果だけに着目すると、そこまで大きな改善効果は無いように感じるかもしれません(10%~20%程度が多いイメージ)。

しかし、CTAは複数のページに含まれているため、あるページでの勝ちCTAを全ページに展開することで、大きな改善効果を得ることも可能です。

CTAの改善に便利なツール

ここまでいくつか施策を紹介してきましたが、その施策を効率的に進めるための便利なツールを紹介します。

ヒートマップ

ヒートマップは、ユーザーが熟読している領域やクリックした箇所を記録し、それらの多寡をグラデーションで表示してくれるツールであり、ユーザーの動きを視覚的に把握できます。

ヒートマップには下記3種類あります。

スクロールヒートマップ
ユーザーがどこまでスクロールしたかがわかる
アテンションヒートマップ
ユーザーが熟読した領域がわかる
クリックヒートマップ
ユーザーがクリックした箇所がわかる

ヒートマップを用いた改善例は、、アテンションヒートマップで赤くなっている領域を見つけてその中にCTAが無ければ加える、というイメージです。

弊社ではヒートマップを用いたページ改善を行っていますので、改善したいページがありましたら、下記からお気軽にお問い合わせください。

Google Optimize

ボタンの配置やデザイン、文言が決まったら、次にABテストや多変量テストによって検証します。
いきなり実装するとCVRが下がることもあるので、手間を惜しまず、一旦テストで改善案を評価しましょう。

無料で使えるABテストツールでは、 Google Optimize がおすすめです(弊社でも使用しています)。

無料版ではABテストを5つまで実行でき、多変量テスト(16パターン以下)も可能なため、超大規模な施策でない限りは Google Optimize で間に合います。

まとめ

CTAの改善は、短期間・低コストで実行できるケースが多くコスパに優れる施策なので、CROの第一歩としておすすめです。

本記事の内容を活かしていただき、貴社のCVRが上がれば、著者としてそれ以上の喜びはありません。

ただ、実際やってみて難しかった、リソースが無く施策できないなど、中々改善が進まないケースもあると思います。

弊社では、分析から改善案の作成、テストの代行まで一貫して行えますので、お困りごとがありましたら、お気軽にご相談下さいませ。

この記事を書いた人

元物理屋で、大手電機メーカーに開発職して従事する一方、副業で自サイト運営を経験。自身のスキルを更に高め社会貢献したいという想いから現職へ。元理系ならではの論理的な分析が強み。
日本で3人目の米国CXL社認定オプティマイザー。小川卓氏の提案型ウェブアナリスト講座修了。ツイッター:@tackey_cro

目次
閉じる