【CVボタンの決定版】1週間で売上を5倍にする具体的な作り方と注意点

Webサイトで商品やサービスを販売しているものの、売上が伸び悩んで困っている方も多いのではないでしょうか。Webサイトやランディングページ経由の売上を伸ばすためには、CVボタンを工夫することが重要です。 適切なCVボタンを作ることで、あなたのサイトからの売上を5倍にすることも夢ではありません。 この記事では、CVボタンの役割やCVボタンをデザインする際の具体的な5つのポイント、押さえておくべき注意点について解説します。WebサイトにアクセスしたユーザーにアピールできるCVボタンを作り、商品やサービスの売上を伸ばしましょう。

CVボタンとは、Webサイトにアクセスしたユーザーに対して、商品の購入や資料請求などを促すボタンです。CVは転換を意味するConversion（コンバージョン）の略語で、Webサイトにアクセスしたユーザーが顧客へ変わることを表します。 CVボタンは、ユーザーに対して何らかの行動を呼びかける役割があるため、CTA（コールトゥアクション）とも呼ばれます。 顧客の獲得を目的として作られたランディングページやWebサイトにおいて、CVボタンは重要な要素です。

CVボタンを工夫すると、ランディングページやWebサイトのCVR（コンバージョン率）が上がる可能性があります。CVRとは、一般的に次のような計算式で割り出される指標です。 より良いCVボタンは、ユーザーの興味関心や購買意欲を高め、行動を促します。CVRを上げる＝売上を上げるためにも、CVボタンを設置することは重要です。 また、CVボタンを設置すると、CVが発生する経路やCVR向上の施策が分かるようになります。アクセス解析ツールを使用すると、CVボタンがクリックされた回数の計測が可能です。複数のCVボタンが設置されている場合、どのCVボタンをクリックしたユーザーがCVに至ったか調べられます。CVが発生した経路が分かると、導線の改善施策が考えやすくなるでしょう。

CVRを上げるために工夫するべき主なポイントとして、CVボタンを設置する位置やサイズなどが挙げられます。また、CVボタンの色やCVボタンに記載する文字なども重要なポイントです。 実際に、私（SEO対策を専門業務とするテンナラの中の人）も、CVボタンを改善する際にはこの５つのポイントに注目しています。これらを徹底的に最適化することでCVRや売上を5倍にしていくことに近づきます。 それでは、CVRが上がるCVボタンのデザインについて、5つの項目に分けてみていきましょう。

CVボタンをクリックしてもらうためには、まずユーザーの視界に入ることが重要です。Webサイトやランディングページの下部にCVボタンを設置すると、ユーザーに見つけてもらいにくくなります。 ユーザーがページを最後まで読まなくてもCVボタンをクリックできるように、ページの上部に設置することがおすすめです。 また、画面のスクロールに合わせて表示位置が変わる追従型のCVボタンを設置すると、ユーザーの視界に入りやすくなります。ランディングページが長い場合など、必要に応じて追従型CVボタンの設置も検討しましょう。

スマートフォン向けのサイトを運営している場合は、CVボタンをタップしやすい大きさにしましょう。 CVボタンを目立たせようとするあまり、必要以上にボタンサイズを大きくすると、誤ってタップされるリスクがあります。画面をスクロールしている最中に誤ってCVボタンをタップしてしまうことは、ユーザーが離脱する原因となるため注意が必要です。 配置場所も考慮した上で、誤操作が発生しにくいサイズのCVボタンを作成しましょう。

CVボタンの色を適切に選び、背景や周囲にある要素に埋もれないようにすることもCVRを上げるための方法です。 一般的に、周囲の要素と色相や明度、彩度が異なる色を選ぶと、CVボタンを目立たせられます。周囲が寒色の場合は暖色を選んだり、暗い背景色に対して明るい色を選んだりして、CVボタンを強調しましょう。 Mozillaが行ったテストによると、Firefoxをダウンロードするボタンで最もCVRが高かった色は緑色で、2位は青色、3位は紫色という結果になりました。

出典：Blog of Metrics「Firefox is Green」

CVボタンを何色にするか迷う場合は、周囲との対比を考慮した上で、Mozillaのテスト結果も参考にしてみましょう。

CVボタンに表示する文字は、フォントを工夫して目立つデザインにすることがポイントです。 一般的に、文字の線が太いフォントを使用するとボタンの存在が目立ちます。また、ボタンとテキストで反対の色相を選ぶことも効果的です。文字の周囲の枠線を太くする、凹凸が付いているような加工を施すなどのデザインによっても、CVボタンを目立たせられます。 ただし、文字の変形や装飾を過剰にすると、文字が読みにくくなってしまう場合があります。あくまでも読みやすさを重視し、ボタンを目立たせるフォントのデザインを考えましょう。

ラベリングとは、CVボタン自体に書かれたテキストのことです。また、CVボタンの近くに添えられた文字はマイクロコピーと呼ばれます。 ラベリングやマイクロコピーには、ターゲットユーザーの行動を促す具体的な言葉を使用することが、CVRを上げるポイントです。効果的な言葉として、次のような例が挙げられます。 CVボタンをクリックすると何が起きるかを明示することが重要です。また、ユーザーが普段から目にするような分かりやすい言葉を使うことも、CVRを上げるポイントとして挙げられます。

CVボタンはCVRを上げるために重要ではあるものの、設置する個数や記載する文言を誤ると逆効果となる可能性があります。そのため、正しい作り方を押さえた上で、CVボタンを設置することが重要です。 ここでは、CVボタンを作るときに注意すべきポイントを2つ紹介します。

同じページ内に設置するCVボタンの数や種類は、必要最小限に抑えることが重要です。 Webサイトやランディングページの途中にCVボタンが頻繁に出てくると、しつこい印象を与えます。コンテンツの読みやすさを損ねないために、適切な個数のCVボタンを設置しましょう。 また、ページの目的を考えた上で、最も優先度の高いCVボタンを選んで設置することも大切です。CVボタンの種類が多すぎると、ユーザーが迷ってしまいます。どうしても複数のCVボタンを設置する必要がある場合は、最優先のCVボタンだけを目立たせるなどデザインを工夫しましょう。

何を意味しているか具体的に分からないテキストは、ユーザーに不安を与えます。たとえば、下記のような言葉は具体性に乏しく、CVボタンのラベリングやマイクロコピーとして不適切です。 サイト訪問者が安心してクリックできるようにするため、CVボタンには具体的な情報を記載しましょう。 また、CVボタンを設置する際は、ABテストを行う必要があります。ABテストとは、複数の施策で効果測定をして、より高い成果が得られた方を採用するWebマーケティングの手法です。CVボタンを設置する位置やデザイン、テキストなどはABテストを繰り返すことで改善できます。CVRを高めるために、CVボタンのABテストを定期的に実施しましょう。

CVRを上げるためには、商品購入や問い合わせなど具体的な行動を促すCVボタンの設置が重要です。CVボタンを設置すると、CVが発生した経路やサイトデザインの改善ポイントを知ることもできます。 CVボタンを設置する際のポイントは、CVボタンのサイズや色、周囲に記載するテキストの内容などです。ユーザーの視界に入りやすい位置に目立つデザインのCVボタンを設置することで、CVRを上げられます。 この記事で紹介したデザインのポイントを踏まえて、定期的にABテストをしながらCVRを改善しましょう。