CVボタン（コンバージョンボタン）は、ユーザーに問い合わせや商品の購入などのアクションを促す重要なパーツです。CVボタンの色や形にこだわることで、CVRの向上が期待できます。そのため、CVボタンのデザインを改善して、ECサイトやランディングページの成果を高めたいと考えている方も多いのではないでしょうか。
この記事では、CVボタンをデザインする際のポイントについて解説します。効果的な色や文面などもご紹介しますので、CVRの改善を目指す際にぜひ参考にしてみてください。
そもそもCVボタンとは、WEBサイトにおいてどのような役割を持っているのでしょうか。ここでは、CVボタンの意味や重要性について解説します。
CVボタンとは、WEBサイトやランディングページにおいて、ユーザーに具体的なアクションを促すボタンのことをいいます。例えば、「資料請求はこちら」「商品を購入する」などの文章が書かれているボタンです。ユーザーの行動を喚起するきっかけという意味で、CTA（Call To Action）とも呼ばれます。WEBサイトの運営側はユーザーにCVボタンをクリックしてもらって初めて、期待した成果（コンバージョン）を得ることが可能です。
CVボタンは、WEBサイトのCVR（コンバージョン率）に大きく影響を与えます。例えば、目立たない色のCVボタンは、ユーザーに気付いてもらえません。また、ボタン内の文章が魅力的でなければ、ユーザーは積極的にクリックする気にならないでしょう。このようにCVボタンのデザインやコピーによって、コンバージョンを獲得できるかどうかが左右されます。CVボタンがよりユーザーの心理に刺さるようなものになれば、クリックされる可能性が高まり、CVRの向上が期待できます。
CVボタンをデザインする際に、どのようなことを意識すればよいのでしょうか。ここでは、CVボタンをデザインする際に必須となる5つのポイントについて解説します。
コンバージョン率を高める上で、CVボタンを配置する場所は非常に重要です。CVボタンは目にとまりやすい場所に設置しましょう。例えば、ファーストビューに一つ設置する、ヘッダーやフッターに固定するなどは有効な戦略です。
また、WEBサイトのタイプによってCVボタンの位置を変えるのも効果的です。ランディングページであれば、ユーザーの購買意欲が最も高まる最下部にCVボタンを設置するという考え方があります。ブログ形式のWEBサイトであれば、メニューバーや各記事の最後部にあるCVボタンは目につきやすいのが特徴です。長めのサイトの場合は、追尾型のCVボタンも有効とされています。このようにユーザーの視線や導線を意識して、最もクリックされやすい位置を選ぶようにしましょう。
加えて、複数のCVボタンを一ヶ所に集中させないのもポイントです。同じ場所にいくつものCVボタンがあると、ユーザーはどれを押せばよいか迷ってしまいます。CVボタンの設置数は必要最小限にすることが鉄則です。
CVボタンは、ユーザーから「このボタンはクリックできる」と認識されなければ、コンバージョンにつながりません。CVボタンができるだけユーザーの目につくように、色を工夫することが重要です。
CVボタンを目立たせるポイントとして、周囲の色と対比させることが挙げられます。例えば、WEBサイトの背景が暗めの色であればCVボタンは明るめにしたり（明度の対比）、背景が淡い色であればCVボタンを濃くしたり（彩度の対比）するのも有効です。また、CVボタンに背景の補色を使うという手法もあります。補色とは、色相環において正反対の位置にある色のことで、2つの色を際立たせることが可能です。
また、CVボタンを目立たせるには、それぞれの色が持つイメージを利用することも大切です。Firefoxを運営するMozilla社の調査（※）によれば、CVボタンを緑、青、紫、オレンジに分けて効果を検証したところ、CVRが最も高かったのは緑でした。これは、緑色が持つ安全・安心というイメージが、ユーザーの背中を押した結果ともいわれています。
ただし、必ずしも緑色がコンバージョンにつながるとは限りません。WEBサイト全体の色味や商材の種類、ブランドカラーによっても、コンバージョンにつながりやすい色味は異なります。そのため、ページごとにユーザーがクリックしたくなる色を検討して、適した色味を使うことが重要です。
コンバージョン率を高めるには、CVボタンのサイズとマウスカーソルからの距離も意識する必要があります。
CVボタンのUIを考える際によく使われるのが、フィッツの法則と呼ばれる考え方です。フィッツの法則とは、マウスを操作する際、クリックの対象が大きいほど、またはマウスカーソルからの距離が近いほど選択しやすくなるというものです。フィッツの法則によれば、マウスカーソルで選択しやすい位置の特徴は以下の4点です。
つまり、CVボタンを設置する際は、ユーザーのマウスカーソルに近い位置やページの四隅または四辺（ヘッダーやフッターを含む）を選ぶことが効果的といえるでしょう。マウスカーソルの位置は、ページ内で熟読されやすい部分を考えると想像しやすくなります。また、CVボタンのサイズを悪目立ちしない範囲で大きくする、スマートフォン向けには、指でタップしやすい大きさや誤操作しにくい位置へ設置することも検討しましょう。CVボタンをクリックされやすい配置とサイズにすることで、ユーザーの行動を促しやすくなります。
CVボタンには、2種類のキャッチコピーが使われています。
一つはラベリングといい、ボタンの中に書かれた、ユーザーに具体的なアクションを促すメッセージです。例えば、「資料請求はこちら」のような言葉が挙げられます。もう一つはボタンの付近にあるマイクロコピーで、「最短10秒で登録可能」のような補足文章です。
ラベリングのポイントは、できるだけ心理的なハードルの低い言葉を使うことです。例えば、「相談する」や「申し込む」という言葉よりも、「まずは相談してみる」や「トライアルセットを試す」の方が手軽な印象を与えられます。また、名詞ではなく動詞を使うのも有効な戦略です。「注文」や「資料請求」よりも、「注文する」や「資料請求する」のほうがユーザーに具体的な行動をイメージさせやすいため、コンバージョン率も高めやすくなるでしょう。
マイクロコピーのポイントは、入力の手軽さを伝え、ユーザーの不安を払拭することです。例えば、「1分で簡単登録」のような言葉があると、ユーザーも気負うことなくクリックできます。また、「今なら30%OFF！」「お一人様1回限り」「無料でプレゼント」のようにお得感を醸成し、アクションを促すのも一つの方法です。
CVボタンで意外と見落としがちなのが、文字のフォントです。フォントが弱々しい、線が細過ぎる場合は、CVボタン自体が目立たない可能性もあります。そのため、CVボタンだけフォントを変える、太くインパクトのあるフォントにする、ボタンの色に対してフォントの色を読みやすくするなどの工夫をして、ユーザーにクリックしてもらいやすくしましょう。
また、フォントだけでなく文字の大きさも、コンバージョン率を左右する重要な要素です。文字が小さいと、CVボタン自体が目立たずクリックされないリスクがあります。その際、意識したいのはジャンプ率です。ジャンプ率とは、文中における他の文字サイズとの差を意味し、大きくなるほどメリハリが生まれます。CVボタンの文字を周囲の文字よりも大きくし、ジャンプ率を高めることでよりユーザーから認識されやすくなるでしょう。
CVボタンをどれだけ魅力的なデザインにしても、思うように効果が出ないケースもあります。ここでは、CVボタンで成果を出すために気を付けたい注意点を解説します。
クリックを誘導したいあまり、同一ページ内に複数のCVボタンを設置するケースがあります。しかし、CVボタンが複数ある場合は、広告感が出てしまいユーザーから避けられる可能性があります。また、人は選択肢が多いほど、選ぶこと自体を放棄しやすくなります。これは決定回避の法則と呼ばれ、WEBマーケティングでは鉄則となる考え方です。ユーザーを迷わせないよう、CVボタンの数は最小限に絞るようにしましょう。
ただし、商品の数が多い、ページが長いなどの都合上、複数のCVボタンを設置するケースもあります。その際はメインのCVボタンを一つに絞り、目立たせることでユーザーの迷いを防ぎましょう。
どれだけコンバージョン率の高いCVボタンでも、時間が経つとユーザーのニーズが変わり、効果が落ちてくる可能性もあります。そのため、CVボタンは定期的に効果検証し、デザインやキャッチコピーを改善しましょう。
効果検証の主な手法として、ABテスト（A/Bテスト）があります。ABテストとは、2種類のクリエイティブを比較し、効果を確かめるテストです。CVボタンの色や形、コピーの文面などの要素に分けてABテストを実施すれば、勝ちパターンも見えてきます。検証結果を速やかにCVボタンへ反映することで、継続的に成果を出しやすくなるでしょう。
CVボタンのデザインやコピーについて要素ごとに細かくABテストし、結果を反映することでCVRが119%改善したという成功事例もあります。詳しくはこちらで解説していますので、ぜひ併せてお読みください。
CVボタンの効果検証では、複数のクリエイティブを用意する手間がかかったり、ABテストのノウハウが不足したりという問題に直面します。その際、専門的なツールを活用すれば、スムーズにCVボタンの効果検証をすることが可能です。ここでは、効果的なCVボタンへ導くDLPOのサービスを紹介します。
ボタン野郎は、CVボタン専門の自動ABテストツールです。ランディングページをはじめ、サービスサイトや商品ページ、カートページ、入力フォームなどの幅広いWEBページで、CVボタンのコンバージョン率を検証できます。
従来のABテストは、デザイナーやコピーライターがゼロからCVボタンを制作する必要がありました。しかし、ボタン野郎はCVボタンのコピーやクリエイティブを自動で生成し、最適なテストパターンでABテストを実施できます。
一定期間のABテストが終了したら、ボタン野郎が自動でデータを集計し、結果をメールでお知らせします。統計的に有意差が出た際は、ボタン野郎が“チャンピオンパターン”を自動的に最適化することが可能です。
テスト案の設計からクリエイティブの制作、実装までボタン野郎が自動で実行します。そのため、専門知識は一切必要ありません。いくつかの簡単な質問に答えるだけで、すぐにテストを設定でき、効果検証を始められます。
ボタン野郎について詳しくはこちらをご覧ください
DLPOは、CVボタンだけでなく、WEBページ全体の効果を柔軟に検証できるLPOツールです。ランディングページやサービスサイト、ECサイトなどの幅広いサイトで、コンバージョン率をはじめとする成果を検証できます。
具体的には、ABテストで異なる2つのクリエイティブを比較できるほか、WEBページの背景色やCVボタンの形状、キャッチコピーの文言などを複雑に組み合わせて多変量テストを行うことも可能です。ユーザーの年齢や性別、流入元といったパーソナル情報でセグメントもできるため、高い精度でテストできます。細やかな効果検証でコンバージョン率の高いページを導き出し、WEBサイトの成果改善を実現できる便利なツールです。
DLPOについて詳しくはこちらをご覧ください
DLPOはこれまで約850社以上のABテストなどを支援しております。ツールのご導入を頂いた企業様には電話・メールでの常時カスタマーサポート対応はもちろんのこと、勉強会の実施や成功事例の共有も行っています。 また、別途有料ですが、ABテストの運用代行コンサルティングやツールの設定代行を承ることも可能です。お気軽にお問い合わせください。
CVボタンは、コンバージョン率を大きく左右するパーツです。だからこそ、色や形、サイズ、コピーの内容などを細かく調整し、効果検証を重ねながら最適な状態を目指すようにしましょう。効果検証のノウハウが足りないと感じた際には、無料でスタートできる「ボタン野郎」をはじめ、専用ツールを積極的に活用することもおすすめします。