ECサイト

コンバージョンレートを上げる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やアプリのボタンデザインに合わせることでコンバーション率を高められる場合があります。

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

サイズ


ユーザーはページを最初から最後までしっかり読み込むとは限りません。
CVボタンが他の要素と同じサイズ、又は小さいサイズだと、コンテンツに埋もれてしまい気づかないことがあります。
しかし、大きすぎるとユーザーが知りたい情報の可用性を下げてしまったり、広告感が露骨に出てしまい、不快に思わせる可能性も。

ページ内の他の要素やバランスなどを考慮して制作しましょう。

まとめ


今回は、CVボタンの改善要素の一つ、デザインについてお話していきました。
デザインに正解はありません。決めては検証して改善の繰り返しです。
繰り返し検証を行い、自社サイトに合ったデザインを探していきましょう。
次回は、実際にCVボタンに使われている色についてお話していきます。


RefineはECのチカラで 『時間を作り出す価値』を提供します。
様々なカスタマイズにも対応しておりますので、お気軽にお問い合わせください。

制作実績はこちら

お問い合わせはこちら

SNSもやっているので、フォローよろしくおねがいします!

【Twitter】
https://twitter.com/Refinecorp

【Instagram】
https://www.instagram.com/refine_corp

【TikTok】
https://www.tiktok.com/@refineofficial

【Firework】
https://fw.tv/refineofficial?uid=208579128

ピックアップ記事

  1. 商品毎の売上トレンドを数クリックで可視化する!
  2. 5つの業界におけるファネル分析の例とケーススタディ
  3. ファネル分析で ECサイトの売上アップ
  4. ECサイト運営で定点観測すべき指標とは?

関連記事

  1. ECサイト

    ECサイト構築で知っておきたい決済方法 -コンビニ決済-

    ECでは切っても切り離せない存在の決済方法。以前決済サービスの種類を…

  2. ECサイト

    今年視聴者数1位の楽天市場に出店するメリットとデメリット

    先日大セールが行われていた視聴者数ナンバー1の楽天市場。今回は、楽天…

  3. マーケティング

    復帰ユーザーのリテンションを計測して効率的に顧客を増やす

    新規顧客の獲得には、「休眠ユーザー」に復帰してもらうよりも多くの費用と…

  4. EC-CUBE×Amplitudeによるグロース

    コホート分析って?マーケティング初心者でもわかるユーザー行動を知る方法

    ユーザーアナリティクスを聞いたことはありますか?今回は、特にマーケ…

  5. マーケティング

    ECサイトの売上向上には「復帰ユーザー」が重要!

    ECサイトの売上向上に欠かせないのは、復帰ユーザーのリテンション率をし…

  6. ECサイト

    10回会うと好まれる?EC運営でも使えるザイオンス効果とは

    みなさんはザイオンス効果という心理効果をご存知ですか?うまく使えば顧客…

最新の記事

  1. ECサイト

    ECサイト、何でつくる?ECプラットフォーム別費用比較
  2. ECサイト

    ShopifyとEC-CUBEの違い -仕様の差-
  3. ECサイト

    EC-CUBEとShopifyの違い -ECサイトの種類-
  4. ECサイト

    Shopifyで連携できるCRM -Salesforce Sync-
  5. ECサイト

    ECカートプラットフォーム徹底比較!EC-CUBEとecforceの違いとは?
PAGE TOP