CTAボタンとは｜重要性とCV数・CVRを増やす設置のポイント

CTAボタンは、コンバージョン数やコンバージョン率に関わる重要な要素です。よく考えず配置すると、意欲の高いユーザーを逃してしまう恐れがあります。この記事では、CTAボタンの概要と重要性、コンバージョン数などを改善する設置方法などを解説しています。CTAボタンについて理解を深めたい方は確認しておきましょう。

CTAボタンとは？

CTAは「Call To Action」の頭文字をとった略語です。マーケティング業界で「Call To Action」は「行動喚起」と訳されます。「行動喚起」は、WEBサイトへ訪れたユーザーを設定した行動へ導くことといえるでしょう。したがって、CTAボタンはユーザーに狙った行動を促すボタンと考えられます。

CTAボタンの特徴

いわゆるボタンを用いてユーザーを特定の行動へ導きます。形状、大きさ、カラーなどはさまざまです。いずれにせよ、テキストより目立ちやすいため効果的に訴求できます。また、デザイン次第では、クリックしたい欲求を掻き立てることも可能です。ユーザーを力強く誘導する点が特徴といえるでしょう。

設置場所もWEBサイトで異なります。WEBサイトのヘッダーやフッター、記事の途中や最後、ランディングページのファーストビューなどに設置するケースが多いといえます。別のページへ移動するときに、ポップアップなどで表示されるケースも少なくありません。

CTAボタンを設置する目的

ユーザーに行動を強く促すことといえるでしょう。もちろん、テキストでもユーザーを特定の行動へ導くことはできます。例えば「ご注文はこちら」などのテキストにリンクを貼れば、ここから注文できるとわかります。ただし、目立ちにくいため流し読みしているユーザーに見落とされる恐れがあります。CTAボタンであれば、視覚に訴えかけるため見逃される可能性は低くなります。ユーザーに促す行動の主な例は次の通りです。

【行動の例】

• 商品購入
• 見積請求
• 会員登録
• メルマガ登録
• 問い合わせ

基本的には、WEBサイトに設定した最終的な目標・成果（コンバージョン）と考えればよいでしょう。

CTAボタンを改善する重要性

CTAボタンは改善が欠かせません。コンバージョン率に大きな影響を与えるからです。例えば、スーツケースを販売しているとします。ある記事の中で、製品の説明をした直後に購入を促すCTAボタンを設置した場合と記事の末尾にCTAボタンを設置した場合では、前者のほうがコンバージョン率は高くなるでしょう。また、思わずクリックしたくなるデザインとあまり目立たないデザインもコンバージョン率に差が出るはずです。

以上からわかる通り、設置場所やデザインなどを誤ると、コンバージョンを獲得できない恐れがあります。したがって、計画的に設置して、ユーザーの行動などにあわせて改善していかなければならないのです。

CTAボタンでCV件数・CVRアップするためのポイント

ここからは、コンバージョン数やコンバージョン率をアップさせる具体的な方法を解説します。設置や見直しの参考にしてみてはいかがでしょうか。

ユーザーにとってのベネフィットや魅力を打ち出す

ユーザーが、クリックする理由を明らかにしておくことが重要です。自分にとってのベネフィットがわからないと、多くのユーザーは具体的な行動を起こしません。ベネフィットがわからない例として「資料請求はこちら」など、ユーザーにしてほしい行動だけを表示しているケースがあげられます。意欲を十分高められていないと「クリックしよう」と考えるユーザーは少ないでしょう。一方で「コンバージョン数が平均2倍になった資料の請求はこちら」のように、ベネフィットが記載してあればCTAボタンを用いてユーザーの意欲を高められるため「クリックしよう」と考えるユーザーが多くなります。ユーザー目線でベネフィットを打ち出しましょう。

マイクロコピーで安心感を与える

CTAボタンのテキストは次の要素で構成されます。

【構成要素】

• マイクロコピー
• ラベリング

マイクロコピーはボタン本体の周辺に記載されるテキスト、ラベリングはボタン本体上に記載されるテキストです。ラベリングと同じく、マイクロコピーにも気を配らなければなりません。マイクロコピーの主な役割は、ユーザーに安心感を与えてクリックを促すことです。例えば、ラベリングに「会員登録はこちら」、マイクロコピーに「最短1分で登録完了」と記載してクリックのハードルを下げるなどが考えられます。役割を考えて、両者を使いわけることも重要です。

クリックしたくなるような色を使う

視覚に訴求するため配色にも十分な注意が必要です。これまでさまざまな研究がおこなわれてきましたが、何色がコンバージョン率を高めるなどの結論はでていません。とはいえ、配色がユーザーの印象に何かしらの影響を与えることは間違いないでしょう。クリックを促す色は、WEBサイトや取扱商材などで異なると考えられます。仮説を立てて効果的な色を絞り込み、ABテストで効果を確かめるとWEBサイトに適している配色を見つけられます。CTAボタンの配色は、以下の記事でも解説しています。詳しく知りたい方は参考にしてください。

関連記事：CVRの高いコンバージョンボタンの作成方法～色・文言・位置を解説

サイト内の別要素よりも目立つようにする

WEBサイトを訪れるすべてのユーザーが、腰を据えて記事を読んでいるわけではありません。必要な情報を探すため、飛ばし読みや流し読みをするユーザーは多いと考えられています。このようなユーザーにアピールするため、目立つデザインにすることも重要です。実践しやすい取り組みとして配色の工夫があげられます。具体的には、WEBサイトのベースカラー・メインカラーと（色相環で）離れた色を用いるとよいでしょう。例えば、ブルー系のWEBサイトであればイエロー系が候補になります。アクセントになるため、気づかれやすくなるはずです。配色の工夫以外では、設置場所、サイズ、形状などにこだわると目立ちやすくなります。

サイト全体と統一感を持たせる

ただし、過度に目立たせることはおすすめできません。浮いて見えるほど目立たせると、押し付けられているような印象をユーザーに与えてしまうからです。クリックを促すはずのCTAボタンが警戒される原因になってしまいます。したがって、WEBサイトとの統一感を意識することも重要です。例えば、他の要素と同じデザインを取り入れるなどすると統一感は生まれやすくなります。悪目立ちしていないが「なんとなく目に留まる」程度の目立たせ方を意識するとよいでしょう。

写真・イラストを活用する

目立たせる方法は配色だけではありません。CTAボタンに写真やイラストを用いて目を惹くことも可能です。これらの魅力は、テキストを用いずさまざまな情報を伝えられることといえるでしょう。例えば、ボタンを指で押しているイラストを用いれば、ここをクリックすればよいとわかります。あるいは、写真におさまった人物の動作や目線で、クリックを促すことも可能です。デザインの自由度が高いため、ブランドイメージなどを演出しやすい点も見逃せません。デザインにこだわりたい方は、写真・イラストまで選択肢を広げるとよいでしょう。

ボタンと認識できるような形状を選ぶ

CTAボタンの形状に特別なルールはありません。写真・イラストを活用できることからわかる通り自由にデザインできます。ただし、特殊な形状はおすすめできません。ボタンとして認識されない恐れがあるからです。定番の形状として次のものがあげられます。

【ボタンの形状】

• 長方形
• 角丸（角を丸めたもの）
• 円形

形状でユーザーに与える印象は変わります。一般的に、長方形は安定感、角丸はかわいらしささ、円形は心地よさを演出しやすいと考えられています。したがって、ビジネスマン向けのWEBサイトに角丸のCTAボタンを配置すると不自然な印象を与えるかもしれません。WEBサイトの特徴に合わせて形状を選択しましょう。

クリック要素と認識できるようにする

クリックできるとひと目でわかるようにしておくことも欠かせません。わかりにくいと、商品などに興味をもったユーザーの行動を後押しできないからです。コンバージョンを逃す原因になりえます。形状を、定番の長方形や角丸、円形にするとわかりやすくなるでしょう。形状のほかでは次の対策も有効です。

【対策の例】

• マウスオーバーを設定する
• アニメーションをつける
• ドロップシャドウをつける

マウスオーバーは、ボタンにマウスカーソールを重ねると色などが変わる処理です。マウスで操作するPC向けサイトで特に有効です。スマートフォン向けのWEBサイトはアニメーションをつけるとよいかもしれません。ただし、過剰な演出はユーザーを不快にさせる恐れがあります。

CVによって配置を最適化する

CTAボタンの配置場所もコンバージョン数などに影響を与えます。配置場所は、視線の動きを意識すると検討しやすくなります。情報が均等に配置されている場合、視線は「左上・右上・左下・右下」の順で動きます。つまり、アルファベットのZのように動くのです。したがって、四隅に重要な情報を配置すると目に留まりやすくなります。また、コンバージョンやWEBサイトの特徴によってもCTAボタンを配置したい場所は異なります。詳細は次の通りです。

コンテンツの上部につける場合

WEBサイトの目標や成果を理解したうえでコンテンツを読み進めてもらえます。したがって、資料請求や課員登録をコンバージョンとしているWEBサイトに向いています。「コンテンツの内容がよければ資料請求しよう」などの動機づけを行えるからです。

コンテンツの下部につける場合

商品やサービスについてじっくり説明したい場合は、コンテンツの下部にCTAボタンを設置するとよいでしょう。コンテンツを読み終えるまで警戒心を抱かれにくいうえ、意欲を高めてからクリックを促せるからです。コンテンツの上部に設置するよりもクリック率は高くなるでしょう。

コンテンツの中につける場合

ただし、コンテンツのボリュームが多くなると途中で離脱するユーザーが増えます。このようなケースでは、コンテンツの中にCTAボタンを設置するとコンバージョンを逃しにくくなります。関連する情報の近くに設置するとクリックを促しやすいでしょう。ただし、設置数が多すぎると、WEBサイトの使い勝手は悪くなってしまいます。ユーザーにストレスを与えない程度に配置することが重要です。

ヘッダーやフッターに固定につける場合

ヘッダーやフッターに、固定で配置することもできます。例えば、画面右上に表示し続けるなどが考えられます。ユーザーを追いかけるように移動するため、意欲が高まったタイミングでクリックを促せます。ただし、デザインによってはユーザーから邪魔と捉えられることもあります。固定で配置する場合は、ユーザー視点が欠かせません。

CVRを改善する方法

CTAボタン以外にもコンバージョン率を改善する方法はあります。主な方法として以下取り組みがあげられます。

【CVRを改善する方法】

• 入力フォームを改善する
• ランディングページを改善する
• コンバージョンまでの導線を見直す
• コンバージョンポイントを増やす
• ターゲットを絞り込む
• 目に留まりやすいコンテンツを作る

CVRを改善する方法は以下の記事で詳しく解説しています。お困りの方は参考にしてください。

関連記事：CVRを改善する7つの方法とCVRを低下させる5つの原因

CTAボタンでコンバージョン率を改善

この記事では、CTAボタンについて解説しました。CTAボタンは、ユーザーに狙った行動を促すWEBサイトの構成要素です。コンバージョン数やコンバージョン率に影響するため、計画的な配置が求められます。ベネフィットを伝える、配色や形状にこだわる、適切な配置場所を選ぶなどを心がけるとWEBサイトのパフォーマンスを改善しやすくなります。この記事で紹介した内容を参考に、設置と見直しを進めてみてはいかがでしょうか。

コンバージョン率が上がるチャットボットqualva（クオルバ）
ぜひチェックしてください。