CTAとは？デザインだけじゃない！CTAの重要なポイント！ 村上 健斗 2023.04.21 2024/8/23 CROUI/UX CVR改善UIUXヒートマップ CTAとは？CTAはなぜ重要か？CTAと認識してもらうためにはヒートマップを使って分析をしよう！まとめ CTAとは、Call To Action(コール トゥ アクション)の略で、Webサイトやメール、広告などにおいて読者や視聴者に特定の行動を起こさせることをいいます。今回はCTAの重要なポイントとヒートマップを使った分析方法をご紹介します！ ヒートマップ無料トライアルはこちらから CTAとは？ CTAとは、Call To Action(コール トゥ アクション)の略で、Webサイトのユーザー（訪問者）を目的のページに誘導し、何らかの行動を促させる施策のことを意味します。例えば下記の画像のような「無料アカウントを発行する」や「資料請求をする」といったCVボタン（以降：CTA表記）もCTAの一種となります。下記イラストの「赤丸」で囲われた部分がCTAになります。 CTAはなぜ重要か？ なぜCTAが重要と言われているのか。それはWebマーケティングにおいて重要な要素といわれているCV（コンバージョン）を高めることができるためです。CVとは、Webマーケティングにおいては「成果」という意味で使われます。例としては、ECサイトでは商品購入、コーポレートサイトでは、問い合わせやメルマガ登録などが当てはまります。そのCVをあげるための有効な手段としてCTAがあります。CTAを設置することでユーザーが次に取るべき行動が明確になりアクションに移りやすく、目的のページへの到達率が高くなります。 CTAと認識してもらうためには Webマーケティングにおいて重要と言われているCTAですが、ただ設置すればいいわけではありません。まず大前提として、CTAはユーザーにCTAと認識してもらう必要があります。そもそもCTAと認識してもらえなければCVにはつながりません。そのため、効果的なCTAにするためにはユーザーにCTAを認識してもらうことが重要といえます。これからCTAと認識してもらうためのポイントを説明します。ポイントとしては「デザイン」「文言」「位置」の３つが挙げられます。CTAを設置する際はこの３つのポイントを意識しましょう。まず「位置」について説明します。 CTAの重要ポイント ①位置 CTAの重要ポイントの1つ目は位置になります。ユーザーにCTAと認識してもらうためにはWebサイト内の効果的な箇所に設置することが必要となります。CTAの主な設置箇所としては、以下の例が挙げられます。 ・WebページやLP（ランディングページ）のファーストビュー・Webページの最上部（ヘッダー）と最下部（フッダー）・記事の途中・直後・サイドバー・ポップアップで表示 上記が主なCTAの設置箇所になります。ただ上記の箇所に設置したからといって全てのサイトがCV向上などの効果につながるとは限りません。CTAはユーザーにアクションを取りやすくさせる必要があり、ユーザーの行動に沿った位置に設置する必要があります。そのため、各サイトごとにユーザーの視線や行動がどのような流れになっているかを分析し、日々CTAを改善していくことも重要となります。 ユーザーの行動を分析する方法としてミエルカヒートマップがおすすめです。 ミエルカヒートマップの機能の一つに、アテンションヒートマップがあります。アテンションヒートマップでは、熟読箇所の可視化ができます。図のように4秒以上スクロールを止めている箇所が暖色（赤）になります。そのためCTAを設置する際はユーザーが熟読している箇所（暖色）の部分に設置することでCVの向上につながります。 ヒートマップ無料トライアルはこちらから 重要ポイント ②文言 CTAの重要ポイントの2つ目は文言になります。ユーザーにCTAと認識してもらうためにはCTAの文言も重要なポイントとなります。具体的なCTAの文言のポイントとしては以下の２つを意識しましょう。 ・ボタンを押したら何が起きるのかを具体的に説明する・ボタンを押すメリットを具体的に説明する ■ボタンを押したら何が起きるのかを具体的に説明する 上記、図のように、「こちらをクリック」と表記するよりも、「すぐに購入する」と明記した方が、ユーザーにとってクリック後の行動が明確になります。CTAはユーザーにアクションを取りやすくさせる必要があるため、文言を使いクリック後に何が起こるのかを具体的に伝えることが重要です。 ■ボタンを押すメリットを具体的に説明する 上記、図のように文言でメリットを伝えることも重要です。例えばECサイトであれば「購入する」よりも「本日中なら10％off!」と記入したり、会員登録してもらうサービスならば「会員登録する」よりも「30日間無料で体験する」と明記する方がユーザーに理解してもらえ、メリットも感じてもらえます。ユーザーにメリットを感じてもらえることで、会員登録や購入のハードルが下がり、CVの向上にも繋がるでしょう。 ここでCTAの文言を変更してCV向上につなげた事例もご紹介します。 ▶購入バナーのデザインを変更し、注文数が143%に！ 上記事例の企業は、ECサイトを運営しており、ユーザーにスムーズにお買い物していただけるような、使いやすさを意識したサイトにしていきたいと思いヒートマップを導入。アテンションヒートマップを使い、ユーザーの熟読箇所を日々分析し、CTAの設置箇所を最適化してことで、商品購入数が前年比の143%を達成した事例になります。 重要ポイント ③デザイン CTAの重要ポイントの3つ目はデザインになります。ユーザーにCTAと認識してもらうためにはCTAのデザインも重要なポイントとなります。具体的なCTAのデザインのポイントとしては以下の２つを意識しましょう。 ・色・形 ■色デザインのポイント1つ目は色です。CTAに同じ形やテキストを使用しても、CTAボタンの色を変えるだけで印象が変わります。ここで１つ事例を紹介します。 ▶CTAボタンの色を変更して、CTRが4%上昇！ 上記の事例は、資料ダウンロードのCTAの「FREE」ボタンを「こちらをクリック」に変更し、カラーを緑色→赤色へ変更したところ、CTR（クリック率）が4％上昇したものになります。＊CTRとはユーザーに広告が表示された回数のうち、ユーザーがクリックした回数の割合のことをいいます。この事例ではCTAの色を「補色」という周囲の色と対比する色に変更したことで、CTAが目立つようになりユーザーの認識が高くなったといえます。その結果、CTRの上昇に繋がったといえます。つまり、ユーザーにCTAを認識してもらいやすくするための手段として、CTAの色を意識することは重要といえます。 ■形デザインのポイント2つ目は形です。CTAの形にこだわることでユーザーの印象や認識が変わります。ここで１つ事例を紹介します。 上記図のように、CTAでは角の丸い長方形が使用されることが多いです。理由としては角が丸い図形はユーザーの視線が内側に向くといわれ、角がとがっている図形はユーザーの視線は外側に向くといわれています。そのため、角が丸みを帯びていれば、ボタンの中に視線が向き、中に書かれているメッセージに効率よく注意を集めることが可能になるといわれています。出典元：UX Movement ヒートマップを使って分析をしよう！ CTAをユーザーに認識してもらうために重要なポイントを紹介いたしました。ただ、ポイントを抑えCTAを設置したからといって、全てのサイトがCV向上につながるとは限りません。CTAはユーザーにアクションを取りやすくさせる必要があり、ユーザーの行動に沿った位置に設置する必要があります。そのため各サイトにおいてユーザーの視線や行動がどのような流れになっているかを分析し、日々CTAを改善していくことも重要となります。 ユーザーの行動を分析するツールとしてはミエルカヒートマップがおすすめです。ミエルカヒートマップとは、Webサイトに訪れたユーザーがページ内で取った行動のデータを、色の濃淡でわかりやすく表現したものです。具体的にどのような機能があるか説明します。 ミエルカヒートマップの機能 ミエルカヒートマップの機能は主に３つあります。それぞれCTAを効果的にするためには必要な機能となっております。各機能を説明します。 ・アテンションヒートマップ（熟読箇所の可視化）・スクロールヒートマップ（離脱箇所の可視化）・クリックヒートマップ（クリック箇所の可視化） ■アテンションヒートマップ（熟読箇所の可視化）アテンションヒートマップでは、重要ポイント①でも説明した通り、ページのどこの箇所が熟読されているかを色で判断することができます。アテンションヒートマップを使うことで、CTAが熟読箇所に設置できているかが判断できるとともに、熟読箇所に設置できていない場合はコンテンツの修正やCTAの位置の変更といった改善の判断もできます。 ■スクロールヒートマップ（離脱箇所の可視化）スクロールヒートマップは、ページのどこまで読まれていて、どこで離脱しているのかを可視化する機能が備わっています。ユーザーがページのどこまで読んだかを何％で確認することができます。そのため、ユーザーが途中離脱してCTAに到達していないケースを判別することができます。 ■クリックヒートマップ（クリック箇所の可視化）クリックヒートマップでは、ユーザーがどこの位置をクリックしているか可視化する機能が備わっています。クリックされた割合が多い箇所ほど赤色になり、少ない箇所ほど緑色になります。そのため、現在のCTAの位置が適切か、また今後どの部分にCTAを設置するのが効果的かを判別できます。 まとめ CTAの定義、効果につなげるCTAのポイントと分析方法について紹介いたしました。最後にもうひとつ事例を紹介します。 ▶クリック率が4倍になった秘訣とは！ こちらの事例では、今回紹介したCTAのポイントである「文言の変更」やヒートマップを使いユーザーの熟読率が高い部分にCTAを設置し直すなどの改善をおこないました。その結果、当初4.0%だったCTAのクリック率が17.2%と4.3倍になっています。今回紹介したCTAの具体的な作成例や実際におこなったABテストと呼ばれる２つのページパターン比較し、最も高い成果が出るパターンをみつける効果検証のやり方についても書かれておりますので、参考にしてみてはいかがでしょうか。 また、今回ご紹介したミエルカヒートマップは、無料から始められるため、ぜひこの機会に試してみてはいかがでしょうか。 ヒートマップ無料トライアルはこちらから 編集者情報 村上 健斗 芸能事務所に所属し、7年間俳優として活動。 その後、株式会社リクルートにて ホットペッパーグルメの営業を経て、Faber Companyへ入社。 入社後、ミエルカコネクトの営業に従事。 この記事をシェアする
