CVボタンは改善とテストが重要！具体的な方法を解説

ユーザーがアクションを起こすためのCVボタンは、色や形、サイズなどさまざまな要素から成り立っています。CVボタンの工夫によってコンバージョン率は大きく変化するため、常に工夫を重ねる必要があります。今回は、CVボタンの改善やテスト方法についてご紹介します。

CVボタンとは

CVボタンとはWebサイトを訪問したユーザーに購入や資料請求などのコンバージョンを起こさせるためのボタンのことで、「購入ボタン」や「送信ボタン」などが該当します。
Webサイトを訪問した後のユーザーのアクションを喚起させるためのボタンであることから、「CTA（Call To Action）」と呼ばれることもあります。

関連記事はこちらCTAって何！？CTAの設置場所とCVR上昇のための5つの改善ポイントとは

CVボタンの構成要素

構造は単純なようにも見えるCVボタンですが、実はさまざまな要素から成り立っています。ここでは、CVボタンの構成要素についてご紹介します。

サイズと形

「サイズ」と「形」はCVボタンの重要な要素のひとつです。
例えばボタンがあまりに小さすぎるとWebサイトを訪れたユーザーはどこをクリックすれば良いのかわからず、アクションを起こすことを諦めてWebサイトから離脱する可能性があります。そのためCVボタンだということをすぐに認識してもらえるようなサイズにすることが大切です。
しかしあまりに大きすぎると文章が読みにくくなる可能性もあるため、ページ全体に対して適切なバランスを意識しましょう。

さらにCVボタンに影などの効果を加えると、ユーザーにひと目でボタンだと判別してもらいやすくなる効果が期待できます。
「マウスカーソルを合わせると状態が変化する」などの工夫も、ユーザーに「クリック可能な場所だ」と判断してもらうために効果的です。

色

CVボタンであることを認識してもらう上で、「色」は非常に重要な役割を果たします。
「ここは押せるボタンだ」ということを直感的に理解してもらえるだけでコンバージョン率は高まりやすくなるため、CVボタンの色については十分に検討しサイト設計を行いましょう。

加えて、「ページ全体の色調と同化しにくい色」を選択することで効果が高まりやすいともいわれています。例えばページが緑色を基調としているなら、赤色のボタンを設置すると補色効果で目立ちやすくなると考えられるでしょう。

コピー（文章）

わかりやすく表示されていても、「押して何が起こるかわからない」という状態ではボタンを押すことに不安を覚えるユーザーが多いためもう一工夫が必要です。そこで、コピーを工夫して「ボタンを押すと何が起きるか」を伝える必要があります。

例えば「Click」や「進む」などのあいまいなコピーではなく、「資料請求」「購入」などのわかりやすいコピーにするとユーザーの不安を取り除きやすくなります。
一歩進んで「資料を請求する」「購入する」などの動詞の形でCVボタンを設置すると、ユーザーの認識を他人事から自分事に切り替えさせる効果があり、ユーザーのアクションを促しやすくなります。

配置場所と数

CVボタンの配置場所や数も大切なポイントです。
「できるだけ目立つ複数の場所にボタンを設置すると効果が高くなる」と考えて過剰に設置すると、ユーザーは押し付けられているような感覚をもち自社へ悪い印象を抱きかねません。興味をもっているユーザーでもWebサイトから離脱する原因になるため、ユーザーに最もインパクトを与えられる1か所から2か所に留めて、配置することが効果的だといえるでしょう。
多くのユーザーはページを開いたときに最初に見える部分（ファーストビュー）の内容を見て、興味がある内容かどうかを把握します。そのため、このファーストビューにCVボタンを設置するのもおすすめです。

なお、すべてのWebサイトで同じ結果が出るとは限りません。結果を分析して必要に応じて改善を繰り返しながら適切な配置を見つけることをおすすめします。

CVボタンの改善方法

CVボタンは、工夫次第でさらに効果を高められる可能性があります。
そこで、配置、デザイン、コピーの3つの観点から、効果的な改善方法をご紹介します。

配置

CVボタンのコンバージョン率を高めるためには「ユーザーに最もインパクトを与えられる場所に配置すると良い」とご紹介しましたが、より具体的には「ページ内において最もユーザーの目に留まりやすい場所」に配置することが望ましいといえるでしょう。

例えばランディングページのような縦長のレイアウトなら、CVボタンは最下部に設置するのが一般的だといわれています。ブログの場合は関連記事のリンクや広告などが設置されているケースも多いため、記事の下部だけでなくページの右上にも設置しておくとコンバージョン率が高まりやすくなるでしょう。

ランディングページは長文になるほど途中で離脱するユーザーが増えやすくなり、CVボタンにたどり着いてもらえない可能性があります。そのため、ファーストビューにもCVボタンを設置したり、スクロール中に常にユーザーの挙動を追いかける追尾型のCVボタンの導入も効果的です。

デザイン

CVボタンの色は全体のデザインを考慮して選ぶことが大切ですが、一般的にコンバージョン率が高まりやすいといわれている色がいくつかあります。

Firefox社が実施したテストによれば、緑色のCVボタンは他の色に比べて3倍以上のダウンロード数を記録したというデータがあります。さらに緑色のCVボタンに続いて、青色や紫色のCVボタンも高い効果を上げています。
ただしページ全体と同系色のCVボタンを設置するとインパクトが薄れるため、あくまでも傾向として捉えて全体のバランスを見ながら適切な色のCVボタンを取り入れることが大切です。

コピー

CVボタンのコピーは「ラベリング（CVボタンそのものに書かれているコピー）」と「マイクロコピー（CVボタンのそばに書かれているコピー）」の2種類に分かれます。
このラベリングには、前述の「コピーの文言を動詞にする」という工夫の他にもコンバージョン率を高めるためのさまざまな工夫を施すことができます。

例えば「今だけ無料」のように書いてお得感をアピールしたり、「60秒で登録完了」のようなコピーで手軽さを伝えたりする内容は効果的です。加えて「登録する」ではなく「今すぐはじめる」のように、ユーザーに寄り添った内容を記載することもコンバージョンへのハードルを下げやすくなるでしょう。

しかし「有料の会員登録を無料と表示する」ようなコピーは虚偽の記載となり、企業の信頼度を大きく低下させるため注意が必要です。

CVボタンを作成する際のポイント

これまでにご紹介した要素の他に、CVボタンを作成するために注意しておきたい2つのポイントをご紹介します。

わかりやすいコピーにする

CVボタンのコピーにおいては、何よりも「わかりやすさ」を重視しましょう。
前述のとおり「メール送信」や「クリック」のようなあいまいな表現は、「メールを送信した後何が起こるのだろう」「クリックしたら不利益なことが起こるのではないか」と思わせる原因になります。

例えば「メールを送信して登録する」「クリックで相談してみる」など、アクションを起こすことで生じる結果を明示することが大切です。

加工しすぎはNG

CVボタンやページの装飾は効果的な場合もありますが、加工しすぎるとかえってユーザーを迷わせる原因になります。
適切な色や形、多すぎず小さすぎないフォントサイズの選択を心がけて、CVボタンが目立つかどうかだけでなく、全体のバランスが取れているかどうかにも注目しましょう。

CVボタンの検証にはABテストが有効

CVボタンの効果を検証する際は、ABテストが効果的です。
例えば「1つのCVボタンをAとBの2つのサイトに別々の条件で設置し、それぞれのサイトでどのように結果が変化するかを検証する」といった方法です。

例えばAのサイトには青色のCVボタンを、Bのサイトには緑色のCVボタンを設置して、100人のユーザーのうち50人にはAのサイトを、残りの50人にはBのサイトを見せ、それぞれの結果を導き出します。
なおABテストを行う際は、1つの条件以外はすべての箇所を同じ状態にする必要があります。

関連記事はこちらメルマガ配信の効果を最大化！活用すべきABテストの実施方法

まとめ

CVボタンを工夫することで、コンバージョン率に大きな影響をもたらします。サイズや形、色、コピー、配置や場所などに変化を加えて、ユーザーがコンバージョンを達成しやすい環境を整えることが大切です。加工のしすぎには注意しながら、少しずつ効果の高いCVボタンに近づけましょう。

改善したCVボタンの効果を検証するなら、ABテストの活用が有効です。Webサイトによって結果は異なるため、自社にとって効果の高いCVボタンを見つけることが大切です。