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

イメージ写真

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

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

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

1.色と形

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

表

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

ボタンデザイン

2.レイアウト

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

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

レイアウト

3.ボタンの文言

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

カートコピー

 

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

関連する記事

グーグルが爆発的成長を予測するインドネシアのEC市場... インドネシアのEC市場は2018年の270億ドルから、2025年までに3倍の1000億ドルに達し、東南アジア最大の市場なると予測されている。 この予測は、米グーグルによる調査が発表したものだが、内容によると次のインドネシアの4分野について大きく成長すると予測している。 ひとつ目は、Eコマ...
決済プラグインにペイオニア(米国内用オンライン銀行)が登場... Live Commerce の決済プラグインに米国内の銀行送金で利用可能なペイオニア(米国内用オンライン銀行)が追加されました。 Live Commerceでは管理画面からプラグインを有効化し、Payoneer(ペイオニア)で指定された銀行振込口座を入力するだけで設定完了です。 ペイオニ...
海外ビジネス向け「海外送金サービス」比較... インターネットのおかげで海外とのコミュニケーションだけでなく、貿易、物流、金融など様々なモノの取引が便利な時代になった。その中でも、税金や海外送金については、未だに頭を悩まされているビジネスオーナーは多いらしい。 海外ビジネス取引において海外送金は頻繁に行われるのでコストも削減したいもの。 ...
Google Analytics Eコマース解析設置を標準採用... 本日申し込み分より、Google Analytics (アクセス解析)の解析とEコマースタグの解析を標準にて実装するようにいたしました。 Live Commerce利用者様は自分でGoogle Analyticsのタグを設置しなくても納品時より契約時のメールアドレスにてGoogle Analyt...
こんなに違う! 世界と日本のブラウザシェア... 現在、2015年の時点で、Webブラウザのシェアはいったいどうなっているいるのだろうか? ブラウザは日本国内、世界では多数混在しているが、Webブラウザは大きく分けるとインターネットエクスプローラー(IE)とグーグルクロム(Chrome)、ファイアフォックス(firefox)、サファリ(sa...
オンラインストアに欠かせない!便利ツール10選... Eコマースが広く普及している現在、ストア運営をサポートしてくれる便利なツールも続々と登場しています。定番のものからユニークなものまで、オススメのツールを集めてみました。 1. Google アナリティクス Googleアナリティクスは無料で利用できるアクセス解析ツールです。訪問頻度や滞在時間...
このエントリーをはてなブックマークに追加

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

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

コメントをどうぞ