デジタルマーケティングTips
LPやECサイト等のCTA/コンバージョンボタンの形状に関する諸説まとめ
購入や申し込みにユーザーを誘導するボタンは、形状によって視認性やアピール度が大きく変わる場合があります。ボタンの形状を工夫して購入・申し込み等を増加させるコツを、実際のサンプルや成功事例の紹介とともに解説します。
※ボタンの色・文言・配置に関する記事はこちら
LPやECサイト等のCTA/コンバージョンボタン色に関する諸説まとめ
要点
メルマガでも情報を配信中です！ ぜひご登録ください。
見逃されやすいボタンは要改善
サイト訪問者を購入・申し込み等に誘引する「コンバージョンボタン」「Call to Actionボタン」(以下、CTAボタン)は、サイトの目標到達(コンバージョン)にとっては非常に重要な要素です。ボタンのアクション促進効果は様々な要素によって変動し、ボタンの形状もそのうちの一つです。
ボタンの形状は何でもよいとは限りません。何も考えずにボタン要素に色をつけただけの長方形のボタンでは、見出しや他の要素と見間違えられたり、訪問者のクリックを促進できなかったり、等の問題がたびたび発生します。
特に、2010年代に広く普及したフラットデザインやその派生形は、CSSを駆使した可変レイアウトには向いているものの、立体感に乏しく、クリック要素の視認性を損ねやすいという問題があります。これをカバーするには、ボタンの色や文言だけでなく、形状等にも工夫していく必要があります。
ポイント(1)：外形をボタンと判りやすいものにする
ボタンの視認性を高めるには、ボタンがボタンであることが視覚的に分かりやすいことがまず重要です。
見出しやリンクタイルが長方形の場合は、現実にある物理的なボタンのように、ボタンを角丸長方形や両端半円等に丸める形状変更を行うと、機能の見分けがつきやすくなります。
なお、両端が半円になるまで丸めた場合は、両端部分を空白(文字を入れない部分)として確保しておくのがおすすめです。この場合字数制限が1～2文字程度狭くなるので、文言が長くなりがちな場合は要注意です。
事例：ボタン形状変更等で登録数アップ
とある欧州のECサイトで、購入ボタンの形状と色を変更したところ、CV数が35.8%アップしました。
※参照：How To Design Call to Action Buttons That Convert
https://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/
ポイント(2)：クリック/タップしやすいように適度にサイズ・余白を調整
ボタンの縦が細すぎると、クリックやタップが難しくなり、コンバージョン率の悪化につながります。PC表示に合わせて作ったボタンが、実はスマートフォン表示では押しにくかった、というケースもあるので要注意です。
Googleでは縦横とも48px以上(かつ要素間余白8px以上)を推奨値としているため、このくらいを目安としておくのがおすすめです。
とはいえ、余白を不自然に開けすぎると、見た目が不格好になり、ユーザーを心理的に遠ざけてしまう可能性もあります。場合によっては文字サイズを調整しつつ、字数・余白とのバランスをうまくとることも重要です。
事例：ボタンの上下余白を増やしてコンバージョンが増加したり、増やしすぎて逆にコンバージョンが低下したり
とある不動産サイトで、情報取得に誘導するボタンの内側余白を、上下左右とも文字高さの1倍程度(上下のトータルの高さは約2倍に拡大)にしたところ、コンバージョン数が2倍以上に増加しました。
ただし、別のサイトで、アカウント新規作成に誘導するボタンの内側余白を、上下だけ文字高さの0.5倍⇒1.5倍程度(左右は0.5倍程度のまま)にしたところ、ここではコンバージョン数が逆に10%低下しました。
※参照：How To Design Call to Action Buttons That Convert
https://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/
ポイント(3)：シャドウ等で立体感をつける
物理的にボタンっぽい見た目を出す方法としては、CSSのシャドウ等を利用してボタンに陰影をつける手法も有効です。
この方法を使うと、角のある長方形でもボタンの機能的視認性を高めることが可能です。
(a)ドロップシャドウをつける
シャドウを外側につけると、ボタン部分がページ本体から浮き上がっているように見せることが可能です。マテリアルデザインのような、フラットデザインを基本としつつ奥行きや分かりやすさを意識したデザイン手法でよく使われます。
マウスオーバーやクリックに応じてシャドウの位置を変化させることで、ボタンが手前に浮き上がったり、奥に押下されるような動きをつけられます。
(b)内側に陰影をつける
ボタン要素内側に、明るい色と暗い色のシャドウをそれぞれ正反対の方向に設定することで、ボタンに陰影をつけ、立体感を出すことができます。スキューモーフィズム的な、リアルな質感をレスポンシブデザインで実現させたい場合に最適です。
(c)外側に陰影をつける
明暗の陰影を2方向から外側につけることで、紙からボタン部分を平たく押し出して浮き上がらせたような質感を出すことが可能です。2020年ごろから流行り始めた「ニューモーフィズム」というデザイン手法で使われています。こちらも、ドロップシャドウと同様、操作に応じてシャドウの位置を調整すると、奥行き方向にボタンが動くようなアニメーションをつけることができます。
注意点として、グレースケールで陰影をつける場合は、ベースになる背景色に気を付ける必要があります。完全な白や黒を避け、何かしら薄くでも色を付けておくと、明暗双方の陰影が見えやすくなります。
ポイント(4)：ボタン内アイコンなどでボタンの役割を明示する
ボタンの中に、問い合わせや資料請求等の目的に応じたアイコンを入れたり、遷移を示す右向きの矢印・三角形等を入れたりすると、ボタンとしての役割が可視化されます。
事例：ボタン内矢印がある方がCVが多かった
とある不動産情報サイトで、ボタン内に入れていた矢印をデザイナーの好みにより外してみたところ、CV数が12.29%減少しました。
※参照：How To Design Call to Action Buttons That Convert
https://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/
注意点：必ずA/Bテストで確認してみること
行った変更が最適かどうかは、実際に自サイトでA/Bテスト(対照実験)を行い、効果を確認することが重要です。
A/Bテストを実施するには、現状調査、仮説構築、実験内容の企画・実施、結果分析など、Webサイト運用のPDCAサイクルを回す総合力や、LPOツールの活用ノウハウが求められます。独力で実施するのが難しい場合は、Web制作のパートナー企業に相談しつつ実施していくのがおすすめです。
まとめ
CTAボタンの形状は、デザイン的なセンスだけでなく、時にはデザイン上のあるべき論と競合する仮説を試してみることも必要で、奥が深い領域です。
A/Bテストをするには荷が重い場合は、パートナー企業等に協力を仰くことも重要です。様々なボタンデザインを模索していくことが、購入・申し込み等増加に繋がります。
マックスマウスからのお知らせ
Webマーケティングの成果アップに役立つ情報をメールマガジンでお届け！
SEO・LPO・EFOなどWebで成果を上げるための改善・最適化、デザイン改修、A/Bテスト等に加え、マーケティングWebサイトでの情報発信の安定化・効率化、CMS導入・運用、脆弱性対策、Flashコンテンツ置き換え、Webプロモーションなどなど、Web制作・マーケティング関係者向けの課題解決に役立つ、便利なサービス情報や活用法などをご案内します。
いますぐご登録ください！
