BLOG スタッフブログ

「コンバージョンにつながるようなボタンを作りたいけど、具体的にどう作ればいいかわからない」

「ボタンデザインを工夫すれば、コンバージョンを高められるかも…？」

HPやLPを制作する際に、ボタンのデザインをどうすればいいのか悩まれている方もいらっしゃるのではないでしょうか？

本記事では、デザインの観点からボタンのクリック率・コンバージョン率を高めるために必要な要素をまとめました。

信憑性の高いデータに基づき、

『ボタンは何色がいいのか』『装飾はしたほうがいいのか』など、

デザインの細部まで切り込んで解説していきたいと思います！

コンバージョンとは？

そもそもコンバージョン(conversion：CV)とは何でしょうか。

直訳すると、「変換」「転換」「転化」といった意味になります。

マーケティング分野では、Webサイトに訪れた人がそのサイトの目標達成となる行動を起こして『訪問者から顧客に転換すること』を指して使われます。

つまり、コンバージョン＝Webサイトにおける最終的な成果ということですね。

具体例

・商品の購入

・お問い合わせ／資料請求

・会員登録／メルマガ登録

など

また、コンバージョンとは『訪問者から顧客に転換すること』ですが、そのきっかけとなるボタンのことを「CVボタン」と言います。

※関連して、CVボタンが置かれる(行動を促すための)エリアのことを「CVエリア」と呼びます。

今回のテーマは「CTA改善」

コンバージョンに関する用語としてCTA・CTR・CVRなどがあります。

—–

CTA（Call To Action）

行動換起。サイトの訪問者を具体的な行動に誘導すること。もしくは、ユーザーを誘導するボタンやテキストリンクなどを指す。(例：「資料請求はこちら」「カートに入れる」など。)

CTR（Click Through Rate）

クリック率。広告がクリックされた頻度。

CVR（ConVershion Rate）

アクセス数に対してコンバージョンに至った割合。

—–

それぞれの用語の意味は上記の通りです。

中でも、今回の記事ではボタンのデザインや配置など、CTAの改善をテーマに書いていきます。

CTAは「コンバージョンまでの道のりを目立たせる役割」をしており、

CTAを改善することでCTR・CVRの改善につながっていきます。

（なかなかややこしいですね。。）

コンバージョンを高める5つのポイント

では、ここから本題に入っていきます。

コンバージョンを高めるための最大のポイントは、CVボタンを目立たせることです。

「どこか改善できるところはないかな…」と迷った時に、まずは下記の5つをチェックしてみてください。

①ボタンの配置

いちばん目につきやすい場所にボタンを配置しましょう。

尚、ユーザーにボタンであるということを認識させることも重要です。

✓チェックポイント

—–

・最初に目に飛び込んでくる位置にあるか

・「このボタンを押せばアクションが起こる」と分かる配置になっているか

—–

✓CVボタンの配置による効果

オランダのデジタル最適化代理店であるGreenhouse Groupさんが行ったCTAボタンのテストの検証結果です。

AからBのレイアウトに変えただけで、コンバージョン率(CVR)が19%も向上したようです。

驚きの結果ですね！（参照：【ABテスト事例】ボタンの配置を変えるだけでCVRは上がる）

②ボタンの色

結論から先に言うと、色に正解はありません。

以前は「緑色」が効果的とも言われていましたが、一概にそうとは言えなくなりました。

その理由は、株式会社ビーワークスさんの検証で証明されており、ターゲットユーザーや商材、企業イメージなど様々な条件によって左右されることがわかったためです。

詳しくは下記をご覧ください。

（参考：【検証】クリックされるボタンの色は？）

「どの色のボタンにするか」よりも会社のイメージやターゲットの属性、「サイト全体の中でボタンが適度に目立っているか」などを重視して色を選ぶのが良いでしょう。

③ボタンの大きさと距離

—–

①周囲の要素よりもボタンを大きくする

②マウスポインタ―からボタンの距離を近くする

—–

①周囲の要素よりもボタンを大きくする

② マウスポインタ―からボタンの距離を近くする

✓マウスポインタ―を指し示しやすい場所

—–

・現在マウスポインタ―がある場所

・ディスプレイの四隅

・ディスプレイの上下左右の4辺

・マウスポインタ―からなるべく近く、面積が大きいもの

 —–

上記は、インターフェイスの予測モデルである「フィッツの法則」に基づいています。

フィッツの法則とは、クリックする対象が大きいほど、または距離が近いほど選択しやすくなるという法則です。詳しくは下記をご覧ください。

>>フィッツの法則をUIデザインに活用する

.

④テキスト

デザイン以外に、ユーザーが思わずクリックしたくなるようなキャッチコピーを考えることも重要です。

下記に、5パターンの定番メッセージをまとめました。

①「無料」というキーワードで価格メリットを訴求

・無料登録する

・〇日間無料で試す

・無料で受け取る

②「トライアル」「お試し」で心理的な障壁をなくす

・(サービスを)体験する

・どのように動くか見てみる

・無料トライアルを今すぐ始める

③「今すぐ」「今日」などのワードで、すぐにアクションを起こすことを提案

・今すぐはじめる

・今日申し込んで、特典を受け取る

・今すぐ購読する

④緊急性でアクションを後押しする

・残り〇点。いますぐ注文を確定

・今日だけの特典を受け取る

・在庫限りセール

⑤「ボタンを押したら何ができるのか」を簡潔に説明する

・配達注文

・お持ち帰り予約

・カートに入れる

⑤フォント

フォントや文字の太さを変えるだけで、受ける印象が変わってきます。

ページ全体の文章に対して、ボタンの存在が際立つように意識してみましょう。

コンバージョンボタンの改善方法【2つの注意点】

方法①必要以上に装飾しない

ボタンを目立たせることは重要ですが、動きを付けすぎたり、サイズを大きくしすぎたりすると、ボタンの存在が”うるさい”という悪い印象を与えてしまいます。良かれと思ってやったことが、逆にコンバージョン率を下げてしまう要因となる可能性があるので注意しましょう。

✓ポイント

・異なるCTAは1ページに複数個置かない

・ボタンを大きくしすぎない

方法②検証を繰り返す

条件によってボタンデザインによる効果が変化するため、仮説と検証をすることが重要です。

他社はこれで成功しているからと周りの情報を鵜呑みにし過ぎず、自社でA/Bテストを行いながら改善を図っていきましょう。

まとめ

ここまで、コンバージョンにつなげるためのボタンデザインについてまとめてきました。

コンバージョン率を上げるための最大のポイントは、ボタンを「目立たせる」ことです。

また、「ボタンを押したら何が起きるのか」をユーザーが予測できることも重要になってきます。

条件によって効果が変化するため、独自のA/Bテストで仮説や検証を繰りかえし、ユーザーのニーズにあったボタンを見つけていきましょう！

Twitter Facebook