ボタンはしっかり目だつデザインを!ボタンデザインの原則3つ

イメージ写真

ECサイトのデザイナーは、日々、サイトに訪れてくれたユーザーに、「申し込み」、「購入する」、「資料請求」など、ボタンを押していろいろアクションを起こしてほしいと考えデザインしている。
Webデザイナーは、どうしたらコンバージョン率が高まるのかを日々考え・テストを繰り返し、デザインを検討している。
私もそのことを考えている1人として、今回はサイトの目的を達成させるために欠かすことのできない重要な要素の1つであるCTAボタン(Call to Action Button)、行動を呼びかけるためのボタンデザインについての3原則をまとめてみた。

ボタンは品よく目だたせるべきである

ECサイトのCTAボタンとは、「購入する」または「カートに商品を追加する」などクリックするためのボタンだ。そして、驚くことに、このボタンの色、配置場所、文言、サイズを変えるだけで、ページのコンバージョン率は大きく変わる。
結論を言えば、CTAボタンは“品よく目だたせる”ことでコンバージョン率は大きく変わると言える。ボタンデザインはページの中で必ず、目だたなければならない。ページ埋もれてしまって見つからないようでは、間違いなくクリック率は下がり、コンバージョン率は悪くなる。では実際にどのような点に注意し、デザインすべきか具体的に整理しよう。

1.色と形

一般的にCTAボタンの色は緑系かオレンジ系が良い。ただし、サイトのデザインイメージに即した色彩を選ぶべきである。回り周りの色と違う色を使って目だたせる。
周りの色に対して補色にする、彩度を変える、明度を変えるなど、どうしたら目だつか工夫をすることが大切である。

表

また、形も角丸や周囲のデザインと変化をつけ、目だたせることで、コンバージョン率がアップすることが下記の資料からも分かる。

ボタンデザイン

2.レイアウト

ボタンの位置も重要だ。上が良いか、下が良いか。ページのどの位置に配置するかでコンバージョン率も変わってくる。
ECサイトの商品ページの場合は、ボタンはファーストビューの右側に配置することが効果的な場合が多い。

さらにボタンの周りにいろいろな要素を置かない。ボタンの周りには広めのスペースを確保し、ボタンを目だたせること。

レイアウト

3.ボタンの文言

最後にボタンの言葉だ。「注文」より「注文する」。「購入」より、「カートに入れる」などユーザーが主体的に~するなどの動詞にする。
また、「送料無料!」や「3分で簡単!」「期間限定」「タイムセール」など、お得な注目情報を入れるだけでコンバージョン率は大きく変わる。

カートコピー

 

私は上記3つの原則をふまえ、“品よく目だたせるデザイン”することでコンバージョン率・数を上げることができると考えている。
そして、これからもこの3つ原則を意識しデザインすることでユーザーが“クリックしたくなるボタン”をデザインしていきたい。

関連する記事

デバイス毎のWebブラウザシェアは? 2017−12月... 前回、2017年9月からブラウザシェアはどのような変化が見られたか。Google Chromeはどこまでシェアを伸ばしたか、MicrosoftのIE11や Edgeのシェアは、どこまで伸びたのか。Iphoneが販売され、シェアは伸びたのだろうか? 今回は12月の日本と世界の各ブラウザシェア...
越境ECで売り上げ好調なサイトは? 越境ECで海外に販路を拡大しようとする企業が増えている。越境ECとは日本から世界に向けネット販売することだが、言語、物流、決済、クレーム対応などの問題をクリアすれば、世界に向け消費者を開拓することができる。これからは、この市場はさらに拡大し、品質や価格面だけではなく、きめ細やかな顧客対応、商品数...
デバイス毎のWebブラウザシェアは? 2017−2月... 前回2016年9月からブラウザシェアはどのような変化が見られたか、Google Chromeはどこまでシェアを伸ばしたか、Microsoft Edgeのシェアは普及し、どこまで伸びたのだろうか? 今回も各ブラウザ毎に日本と世界で見ていこう。 ※掲載に使用したデータは「Stat...
拡大する越境EC 今後の課題は何? 先日、イーベイ・ジャパン株式会社より、越境ECのに関するアンケート結果が公表された。 これは日本の企業でイーベイ・ジャパンのサービスを活用し越境ECを3年以上行っている111社の担当者111名に対して行ったものである。 アンケートの概要としては、越境ECの手応えを感じたのは、「1年以内」...
押さえておきたい、海外マーケティングの基本... 海外に向けてECサイトを公開した後、次に行うべきは、集客し売り上げを伸ばしてゆくということになる。つまりマーケティングである。海外では自社商品の認知度が皆無に近いものを実際に越境ECサイトを立ち上げただけでは、集客できるものではない。たとえ集客できたとしてもコンバージョンまでにたどり着くには至難...
【メーカー限定】 ビジネスモデルを根本から転換、海外販売代行モデル... ・外国語対応のホームページの初期費用が高く、新規事業の投資を抑えたい.... ・外国語対応のホームページを立ち上げたが、全く効果が出ない.... ・海外からの顧客開拓・売上をどうやって作ればいいのかわからない... 1つでもあてはまるメーカーの経営者様へ 国内のメーカーから、「国際的...
このエントリーをはてなブックマークに追加

コメント / トラックバック1件

  1. […] ボタンのデザインについてはlive commerce ブログ「ボタンはしっかり目立つデザインを!ボタンデザインの原則3つ」を参照: http://www.live-commerce.com/ecommerce-blog/button_design/#.VSJTY_msVkA […]

コメントをどうぞ