コンバージョンレートを上げるCVボタンのデザイン

前回は「コンバージョンレートを上げるCVボタンの配置」についてお話していきました。
今回は、CVボタンの改善要素の一つ、デザインについてお話していきます。

「ボタン」と認識してもらえるデザイン
配色選び
影をつける
サイズ
まとめ

「ボタン」と認識してもらえるデザイン

CVボタンで大切なことは、パッと見て「押せる」と認識してもらえること。
あたりまえのことですが、意外と見落としがちな点です。

次にボタンと分かるようなデザインにするためにはどうしたらいいのかについてお話していきます。

配色選び

強調的な配色を選ぶ

ボタンと分かるデザインにするためには、他の要素より目立つ必要があります。目立たせるためには、色の対比となる「補色」を選ぶと良いとされています。
補色とは、お互いの色を最も目立たせる色の組み合わせであり、組み合わせることで存在感のあるCVボタンになります。

ただ目立たせるだけではだめ

ボタンであることを認知してもらうために目立つことは必要です。
しかし、最近では売り込み感が強いものや、明らかに広告らしいものはユーザーに避けられる傾向があるのです。
そのため、ただひたすら目立たせるのではなく、コンテンツの内容とユーザーのニーズにマッチするようなデザインにしなければなりません。

色の効果

例えばMozilla Firefoxの調査によると、ダウンロード数が最も多かったバナーの色は「緑色」と公表しています。

＜参考記事＞

https://blog.mozilla.org/metrics/2009/06/19/firefox-is-green/

しかし、どのサイトもCVボタンを緑色したらCVRが上がるのかと言われるとそうではありません。
緑色で効果が出たのはあくまで「Mozilla Firefox」のWebサイトであり、その条件は皆同じではないからです。
ユーザー層や流入経路など、異なる条件では最適解も異なります。

では、それぞれの色の効果を見ていきます。

・信頼の青

有名サイト：Facebook , IBM , Microsoft
世界で最も愛される色と言われている青色。
B2BWebサイトでは最も人気があると言われています。
青色の配色を使用して、顧客に信頼感を伝えるには有効な方法でしょう。

・情熱の赤

有名サイト: Netflix , Target , Coca-Cola
スポーツ競技において淡色のスポーツウェアを身に着けたチームは勝つ勝率が高いと言われている色。
情熱や激情と関連の深い色です。
ECサイトでの赤いボタンは、顧客のワクワクする気持ちを高め、購入を促すとされています。

・アクションを促す緑

有名サイト：IBM , Argos , SportsDirect , Microsoft
ECサイトや広告でで海外では最も多く利用されていたといいます。
信号機のからわかるよう、緑には「前進」「アクションを起こす」という意味を持っています。
また、安全を示す色ともされており、オンライン決済の顧客の不安を払拭するといいう効果もあります。

・高級感を演出するには黒

有名サイト：Topshop , Net-a-Porter , The Body Shop
高級ブランドのCoco Chanel、Gianni Versace、Yves Saint Laurenがシンプルさと購入感を結びつけたことで、黒は高級感を醸し出す色になったと言われています。
白に対してコントラストが強い黒が存在感を示すとも言われています。

影をつける

ボタンとして認知してもらうためには、影をつけることが効果的です。
影をつけることで立体感が出て、直感的に「ボタンである」と認識しやすくなります。
また、ホバーアクションを施すことも効果的です。
ホバーとは、マウスカーソルが要素の上に乗った状態のこと。マウスホバーした際に、その要素が何かしらのアクションを起こす指定を「ホバーアクション」と呼びます。

もしユーザーが10代〜20代などの若年層の場合、流行りのSNSやアプリのボタンデザインに合わせることでコンバーション率を高められる場合があります。

逆に中高年層がターゲットの場合は、文字を大きくしたり、昔から使われている親しみのあるデザインのボタンにしてみましょう。