CVボタンのクリック率を確実に改善する方法。デザインの正解はある？ 市川莉緒 2021.05.21 2024/1/15 CROWEBデザイン実例 CROCVR改善WEBデザイン CVボタンのデザインに正解はあるのか？ CVボタンを構成する要素とデザインの考え方 CVボタンの改善を決めるタイミング CVボタンはユーザーが認識できるものにしよう CVボタン（コンバージョンボタン）とは、ランディングページ（LP）などのWebサイトに訪れたユーザーに対して、問い合せや商品購入など具体的な行動を促すためのボタンです。ユーザーに対して具体的な行動を喚起することからCTA（コールトゥーアクション）とも呼ばれています。 CVボタンのCTR（クリック率）を高めるには、ボタンは何色で、どんなデザインにすべきか悩みますよね。 今回は、成果につながるCVボタンのデザインの決め方と、CTRを改善するための本質をわかりやすく説明します。 CVボタンのデザインに正解はあるのか？ 結論、CVボタンのデザインに正解と呼ばれるものはありません。 CVR（コンバージョン率）やCTRが高いCVボタンのデザインについて、多くの調査結果が公表されています。例えばMozilla Firefoxの調査によると、ダウンロード数が最も多かったバナーの色は「緑色」と公表しています。 ここからCVボタンの正解は緑色だと感じてしまいますが、ユーザー層や流入経路などが異なるあなたのWebサイトで同じ結果が得られるとは限りません。 参照：Firefox is Green – Ken Kovash 色は緑、サイズは何ピクセルなど、CVボタンのデザインに絶対的な勝ちパターンは存在しないことを前提に、以降はCVボタンの正解を導き出すための方法を、独自の事例を交えて解説します。 CVボタンを構成する要素とデザインの考え方 CVボタンを構成する要素は次の4つです。 ① 色 ② コピー文 ③ 配置場所とボタンの数 ④ サイズと形 CVボタンの要素～色～ CVボタンの色は周囲の色や基調となる色と対比させることでより認識されやすくなります。。 CVボタンでまず大切なのは、「このボタンは押せる」と認知してもらうことです。当たり前の話に思えるかもしれませんが、意外に盲点でもあります。 ここで事例をひとつご紹介します。 資料ダウンロードのCTAにて「FREE」ボタンを「こちらをクリック」に変更し、色を緑色→赤色へ変更したところ、CTRが4％上昇しました。 改善した大きな要因は、ユーザーに対して「押せるボタン」であることを認識してもらえたことです。言い方を変えると、変更前は「押せるボタン」と認識してもらえていなかったのです。 「色の対比」を必ず意識してデザインすること 上述の事例は、CTAバナー全体の色と、CVボタンの色が同じ緑色であったため、認識されてませんでした。そこでCVボタンを「赤色」に変更したとことでクリックできると認識されるようになりました。 今回の例にならうと、CVボタンの色は、その周囲の色と対比する「補色」を選ぶことで目立たせられるといえます。 下の図は、補色と補色でない色を組み合わせた例です。「補色」は、はっきりした色合いであるのに対して、「補色でない」方は少しぼやけて見えるのがおわかりでしょうか。補色とは互いの色を最も目立たせる色の組み合わせであり、CVボタンに取り入れることで視覚的に認識されるやすくなる効果が期待できます。 なお、補色の組み合わせを見つける方法はいくつかありますが、Adobe Colorが分かりやすくてオススメです。サイトの基調となる色を入力すると、自動で補色を出してくれます。 サイトのデザインと照らし合わせながら、CVボタンの色に活用してみてください。 CVボタンの要素～コピー文～ CVボタンやCTAのコピー文は、心理的なハードルが低い文言にしましょう。 ユーザーにとって「ボタンを押す」という行動は、みなさんが想像している以上に不安であり勇気のいる行為です。そんなユーザーの不安を取り除いてあげるために、コピー文（文言）が活躍します。 例えば資料請求の場合、「無料」や「45秒で完了」の文言で、「お得感」や「入力の簡単さ」を伝えることができます。また、「試す」や「はじめる」などの文言も心理的ハードルを下げる効果があります。 加えて、「〇〇する」や「〇〇に進む」など、ユーザーの行動を動詞にした文言にすることで、自分事として感じてもらうことができます。 ユーザーの不安を取り除くためには、ボタンを押した先に何が待っているか？を先回りして教えてあげることが大切です。不安を払拭できればCTRの向上が期待できます。 もちろん、実際は有料なのに「無料」と書くような虚偽はいけません。目先のCTRアップを狙った悪質なコピー文はUXが悪くなり、ブランドに大きなキズをもたらします。 コピー文を変更してクリック率が改善した事例 コピー文を心理的なハードルを下げた文言に変えたことで注文率が143%上がった事例を紹介します。 CVボタンの文言はもともと「ご注文はこちら」でした。クリック率が思わしくないのは、文言が支払いをイメージさせてしまうのが原因ではないか？と仮説を立ててテストを実施。 文言を「お得な5セットを試してみる」に変更したところ、クリック率を向上させることに成功しました。10文字程度の小さな施策ですが、大きな影響を与えることがわかりますね。 CVボタンの要素～配置場所と数～ CVボタンをページ内のどこに配置するかによって、CTRに大きな影響を及ぼします。 ひと昔前までは、CVボタンはページの上部、中部、下部の3ヶ所に置くのが良いと言われていました。しかし無作為に複数のCVボタンを設置すると、広告色が強くなってしまいユーザーに不快感を与えかねません。 最近ではページの下部に1ヶ所だけ配置するという見解も多いですが、すべてのページにおいて同じ結果が得られるとは限りません。 最も高いCTRを得られる個所は、ユーザーが興味を示して読んでいる「熟読エリア」です。もちろん前後の文脈を考慮して途中に設置しないよう注意が必要ですが、熟読エリアを発見 しCVボタンを配置できれば、CTRの向上が期待できます。 ヒートマップを活用して熟読エリアを発見する 熟読エリアとは、「ユーザーによく読まれている箇所」のことです。ヒートマップを利用することで、熟読エリアを可視化することができます。 アテンションヒートマップでは、4秒以上スクロールを止めている箇所が暖色（赤）になります。もしCVボタンが暖色ではなく冷色の位置に配置さているようであれば…CVボタンのデザインをいくら改善しても、残念ながら効果はあまり期待できません。 CVボタンを熟読箇所の真下に置くことでCV増加を見込めることがあります。実際こちらの事例ではCVR（コンバージョン率）が1.8倍になりました。 その他にもUIデザイン改善のコツを紹介しているのでこちらの記事も併せて読んでみてください。 >>とりあえず無料のヒートマップを使ってみる CVボタンの要素～形・サイズ～ 続いてCVボタンのCVRを改善するための形やサイズについて解説します。 CVボタンの形は「ボタン」と認識されるよう影をつける CVボタンにおいて「目立つ」のは大切な要素ですが、「ボタン」と認識されないとクリックしてもらえません。 上記の画像のようにボタンに影をつけると、直感的にボタンを認識しやすくなります。また、PCサイトに限りボタンにマウスオーバー（ホバーアクション）を施して、「クリックできる場所」と認識してもらうことも有効です。 CVボタンのサイズはページ全体のバランスをみて決める ユーザーはページの上から下まで熟読するとは限りません。CVボタンが周囲の要素と同じサイズ、あるいは小さいサイズだと、コンテンツに埋もれてしまい気づかれないことがあります。 反対にCVボタンのサイズが大きすぎると、ユーザーが知りたい情報の可読性を下げてしまったり、広告感が露骨にでてしまい不快に感じさせてしまうことも…。 こちらもページ内の他の要素や、バランス、対比の度合いを考慮してサイズを決め、ABテストをしましょう。 最適なCVボタンを検証するには「ABテスト」が必須 あなたのサイトにおいて独自の正解を導き出すには、ABテストを行うことが必須です。もちろんABテストは闇雲に行えば良いわけではありません。テストすべき要素やデザインを考察する方法について、次章より解説します。 また、ABテストを効果的に行う方法についてはこちらの記事をご覧ください。 CVボタンの改善を決めるタイミング CTRの成果が思うようにでないとき、多くのWeb担当者は「CVボタン」のデザイン改良に注力する傾向があります。しかしCTRが上がらない原因を「CVボタン」のみに囚われるのは、まさに「木を見て森を見ず」であり、森で遭難してしまう可能性が極めて高いです。CVボタンを改善する前に、まずは次の3つを確認しましょう。 ① CVボタンは現在認識されているか？ ② CVボタンの前後は読まれているか？ ③ CVボタンまでどのくらいのユーザーがたどりついているか？ ひとつずつ解説します。 CVボタンは現在認識されている？ ユーザーがページを閲覧する中で、そもそもCVボタンが認識されていないケースがあります。それはCVボタンがページ内に埋もれていたり、熟読エリア外にCVボタンが配置されていたり、といった原因が考えられます。 CVボタンがしっかり認識されているかどうかは、グーグルアナリティクスのイベント設定で確認できます。イベント設定することで、ユーザーがCVボタンまで到達しているかを把握することができます。 ただ、イベント設定はCVボタン毎にタグを設定する手間があり、ページ数やCVボタンの数が多いサイトでは骨の折れる作業です。 対してミエルカヒートマップではイベント設定は不要でカンタンに導入できるのはもちろん、非常に正確な熟読エリアを分析することができます。 ユーザーが立ち止まっていればアテンションHMで表示され、クリックされていればクリック痕がつくので、視覚的にユーザー行動を把握することができます。 >>自社サイトでもヒートマップを使ってみる CVボタンの前後は読まれているか？ CVボタンを設置している前後の文章や記事が熟読されていない場合、いくらCVボタンのデザインやコピー文を改良してもあまり意味がありません。前後の文章やコンテンツが熟読されているかをヒートマップで確認しましょう。もし熟読されていないようであれば、次の２点を検討しましょう。 ① ユーザーが興味を示すコンテンツに改善する ② CVボタンの位置を変更する 熟読されないエリアにCVボタンを設置するのは、魚がいない池で釣をするのと同じです。魚がいない池でエサ（CVボタン）をいくら変えても意味がないので、水質改良して魚が集まるようにする（コンテンツの改善）、あるいは魚が釣れる場所へ移動（CVボタンの位置を変更）しましょう。 また、傾向として、文章が続くコンテンツはユーザーが疲れ、読み流されることがあります。適度に画像や装飾を加え、ユーザーが興味を示すコンテンツ作りを目指しましょう。 CVボタンまでどのくらいのユーザーがたどり着いているか？ CVボタンが適切な位置にあったとしても、そもそもユーザーが途中で離脱して見ていないことがあります。離脱が多いエリアにCVボタンを設置してもCTRの向上は期待できません。ページ下部に進むほど離脱が多くなりますので、ユーザーが確実にCVボタンまでたどり着いているかを把握しましょう。 把握するにはヒートマップの「スクロールHM」がオススメです。 仮にページの途中で離脱が多いのであれば、そのページはユーザーの検索意図を満たせていない可能性が考えられます。コンテンツ内容を見直し、CVボタンまでユーザーがたどりつくようにしましょう。 コンテンツ内容の見直し前後ではヒートマップツールを使ってユーザー行動の変化を観察することをオススメします。 >>とりあえず無料のヒートマップを使ってみる CVボタンはユーザーが認識できるものにしよう >>とりあえず無料のヒートマップを使ってみる 編集者情報 市川莉緒 大阪大学卒。新卒でFaber Companyに入社後、 300近くの会社のヒートマップ分析に従事。 現在はミエルカヒートマップのマーケティングを担当。 大学時代1年休学し1人で世界を放浪。 グレートバリアリーフでのダイビングが最高の思い出。 監修者情報 玉飼 真一 この記事をシェアする
