Webデザイン

最終更新日: 2024.02.16

CVRが高いランディングページ(LP)のCVボタンの色とデザイン

CVRが高いランディングページ(LP)のCVボタンの色とデザイン

ランディングページの問い合わせや資料請求のためのCVボタン(CTAボタン)はデザインや配置でCVRが変わるのはご存知でしょうか?どういう点にこだわってCVボタンを作成すればいいのか、そのポイントをご紹介します。

三木 五月

監修者

Twitter:@satsuki_miki
神奈川県の湘南でデジタルマーケティングの会社を経営しています。湘南をシリコンバレーのようにしたく、社員一丸で突っ走っています! 座右の銘は「好きこそものの上手なれ」。成熟した文化、自然豊かな湘南で一緒に働いてくれる仲間を絶賛募集中です。フルリモートOKです。詳しくは採用ページをご覧ください。

QUERYY(クエリー)編集部

執筆者

株式会社ニュートラルワークス

QUERYY(クエリー)編集部

QUERYY(クエリー)は、株式会社ニュートラルワークスが運営するデジタルマーケティング情報メディアです。

CVボタンとは?

CVボタンとは?

CVボタン(コンバージョンボタン)とは、Webサイトに設置される画像リンクの一つです。CVボタンの多くは長方形や楕円形で、実際のプッシュボタンに似せて立体的なボタン画像にデザインされているものもあります。

ユーザーがCVボタンをクリックすると、商品をショッピングカートに追加したりメールフォームへ遷移したりといったアクションが起こります。つまり、ユーザーはCVボタンをクリックすることで、ただのWebサイト閲覧者から「顧客」へと立場が転換(コンバージョン)するのです。

また、CVボタンは具体的なアクションを促すことから、CTAボタン(コール・トゥ・アクションボタン)とも呼ばれています。このようにユーザーを顧客にするための重要な入口となるCVボタンですが、実際のLPではあまり注目されていないこともあります。

しかし、複数の調査でCVボタンの色やデザインの違いでCVR(コンバージョン率)に差が出ることが分かっています。ただのボタン画像のようですが、意外と手を抜いてはいけない部分がCVボタンなのです。
CVR(コンバージョンレート)とは?計算式、業界別の平均CVRも解説 CVR(コンバージョンレート)とは?計算式、業界別の平均CVRも解説 Webマーケティングに関わる人にはCVR(コンバージョンレート)は必ず知っておくべき用語です。では、CVRはどう計算されているのか、何%くらいが平均で低い場合はどう改善すればいいのでしょうか?CVRを基本的なところから解説します。

CVRを高めるCVボタンデザインのコツ、ポイント

CVRを高めるCVボタンデザインのコツ、ポイント

CVRを高めるための工夫には、以下のようなものがあります。

ボタンカラー:目立ちやすく、クリックしたくなる配色を選ぶ

ボタンカラーの選定は、自社のサイトのコーポレートカラーや試してみたい色を使い、ABテストを行ってみるのが良いでしょう。もともとCVボタンの色については、多くのWeb関連会社がテスト結果を公表しています。

2009年にMozillaが発表したFirefoxのDLボタンのテストでは、緑色のCVボタンのCVRが最も高かったことから、「CVには緑色のボタンが最適」という説が出たこともあります。

反対に2011年にhubspot社が行った調査では、緑色のCVボタンに比べて赤色のCVボタンの方が21%もCV率が高かったことが判明しました。つまり、CVボタンの色に絶対的な正解はないということです。

一般的に、色彩が人の心に与えるイメージには以下のようなものがあります。
赤色:セール・安売り・問題解決
青色:ビジネス・士業・信頼感
緑色:環境・健康・公的サービス

店舗の値札やバーゲンセールで赤色が多用されるのはよく知られています。だからといって赤色のCVボタンが最も売り上げにつながるとは言い切れません。

たとえばAmazonのCVボタンはコーポレートカラーのオレンジですし、ファッション通販大手のZOZOTOWNのCVボタンは灰色です。これらから、サイトデザインとのバランスを考えたうえで、CVボタンには目立ちやすく、クリックしたくなる色を選ぶのがポイントだといえるでしょう。

CVRが高いランディングページ(LP)のCVボタンの色とデザイン CVRが高いランディングページ(LP)のCVボタンの色とデザイン ABテストとは?おすすめABテストツールの比較 ABテストとは?おすすめABテストツールの比較 商品購入や問い合わせ、1人あたり閲覧数などWebサイトにはさまざまな改善したい指標があります。各指標を改善するにあたって良く行われるABテストについて、実施のポイントやABテストツールをご紹介します。

CVボタンの配置

CVボタンの配置

CVボタンの配置はCVRを高めるために重要な要素です。LPではユーザーの心を掴むセールスコピーが重要視されますが、長いセールスコピーの書かれたLPを下までスクロールして、ようやくCVボタンにたどり着くような配置は考えものです。

そもそもLPを最後まで読むユーザーが限られることから、結果としてCVRが低くなってしまうかもしれません。反対に、ユーザーがページを訪れた際のファーストビューにCVボタンがあると、ユーザーの取るべきアクションが明確になり、CVRが上がる傾向にあります。
LPOとは?LPO(ランディングページ最適化)対策とポイントを解説 LPOとは?LPO(ランディングページ最適化)対策とポイントを解説 ランディングページ(LP)を改善せず、放置していませんか?せっかく作ったLPはLPO対策を実施すれば成果を伸ばしていくことができます。この記事ではLPO(ランディングページ最適化)の方法、ポイントを解説します。

CVボタンの大きさ、マウスや指からの距離

CVボタンの大きさや設置する位置も、CVを左右します。PC向けサイトではマウスポインタを動かしやすい「ディスプレイの四隅」などにCVボタンを設置するテクニックが有名です。

また、スマートフォン向けサイトでは「指でタップしやすい大きさ」かつ「誤操作しにくい位置」にCVボタンを設置しましょう。

スマートフォンでサイトを見ている最中、スクロールのつもりがCVボタンに触れてしまい意に沿わないページ遷移をさせられると、それだけで嫌になってサイトを離脱するユーザーも少なくありません。
直帰率とは?離脱率との違いと平均値の目安、改善方法を解説 直帰率とは?離脱率との違いと平均値の目安、改善方法を解説 Webサイト、ECサイト運営者でGoogleアナリティクスを利用する人なら直帰率や離脱率という言葉はご存知でしょう?直帰率、離脱率の違いや改善が必要な数値の目安、改善方法を解説します。

CVボタンに表示するテキスト、コピー

CVボタンの枠内に表示する「注文する」「メルマガに登録する」といったコピーのことを「ラベリング」といいます。また、ボタン付近に添えられた短文コピーを「マイクロコピー」といい、どちらもCVRに影響する重要なコピーです。

ラベリングには「無料で見積もり依頼」「今すぐ注文する」などユーザーの行動を指示する文言を用います。マイクロコピーには「セールス電話はありません」「今なら送料無料!」などユーザーの気持ちを後押ししてCVを促す効果のあるコピーを添えましょう。

注意すべきなのは、「クリックする」「メール送信」など言葉足らずで具体的に何が起こるのか分かりにくいコピーです。「無料で相談する」「空メールで登録する」など、クリックした後のアクションを分かりやすく提示して、ユーザーの不信感を取り除くことが大切です。

CVボタンに表示したテキストのフォント

CVボタンの視認性を高めるために、ボタンに表示するテキストのフォントにも配慮しましょう。LP全体の中でボタンの存在が目立つようなフォントの工夫には、以下のようなものがあります。

  • 文字を太字にする
  • ボタン色に対して、文字を読みやすい色にする
  • 目立つフォントを使う

CVボタンは1種類だけにする

LPに設置するCVボタンは1種類に絞りましょう。一般的に、人は選択肢が多くなるほど「選ぶ」ことが苦痛になるのです。

たとえば、ランチを食べに行ったときに、豊富に用意された単品料理を組み合わせるより「本日の定食」を選ぶ人が多いことからも、複雑な選択肢を敬遠する人間の心理が推察できます。

つまり、1つのLPの中に「注文する」「問い合わせる」「メルマガに登録する」など複数のCVボタンを設置すると、ユーザーに行動して欲しいアクションがぶれてしまうということです。CVボタンは1種類に絞り込み、ユーザーを迷わせることのないように配慮しましょう

商品の売り方や戦略上どうしても複数のCVボタンの設置が必要な場合は、最も重要なアクションのCVボタンを目立たせるようにし、他のCVボタンを控えめな色・デザインに抑えるなどの工夫をするのもテクニックの一つです。

CVボタンは効果検証、ABテストを定期的に行うべき

CVボタンは効果検証、ABテストを定期的に行うべき

どのようなCVボタンでより効果が出るかを検証するためには、定期的にABテストを行うのが有効です。ABテストは1つのCVボタンに色違い・サイズ違い・マイクロコピー違いなどのバリエーションを用意してユーザーを振り分け、CVRを計測する手法です。

その際、1度のテストで差を持たせる要素は1つのみにしましょう。たとえばボタンの色を赤・青・緑の3色でテストする場合は、ボタンサイズやマイクロコピーなど他の要素は同じ条件に揃えておきます。ABテストの詳しいやり方は以下の記事を参考にしてください。

ABテストとは?おすすめABテストツールの比較 ABテストとは?おすすめABテストツールの比較 商品購入や問い合わせ、1人あたり閲覧数などWebサイトにはさまざまな改善したい指標があります。各指標を改善するにあたって良く行われるABテストについて、実施のポイントやABテストツールをご紹介します。

まとめ

デザインやコピーに力を入れた渾身のLPでも、肝心のCVボタンが目立たなかったり、逆に悪目立ちしてユーザーに敬遠されたりといった残念な事例も少なくありません。また、CVボタンのラベリングやマイクロコピーが不足していて、ユーザーアクションに繋がりにくい場合もあるでしょう。

ほとんどの企業様はWebサイトを構築する時間と専門知識がありません。ニュートラルワークスは、トレンドを抑えたデザインで徹底的に「成果」にこだわったサイトを構築いたします。そのため、競合に対して大きな差をつけることができ、それが更なる顧客獲得・売上増加に繋がります。Zoomなどのオンライン相談(無料)をやっておりますので、まずはこちらのお問い合わせページよりお気軽にご相談ください。ご連絡心よりお待ちしております。

監修者紹介

三木 五月

三木 五月

代表取締役社長

Twitter:@satsuki_miki
神奈川県の湘南でデジタルマーケティングの会社を経営しています。湘南をシリコンバレーのようにしたく、社員一丸で突っ走っています! 座右の銘は「好きこそものの上手なれ」。成熟した文化、自然豊かな湘南で一緒に働いてくれる仲間を絶賛募集中です。フルリモートOKです。詳しくは採用ページをご覧ください。