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

イメージ写真

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

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

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

1.色と形

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

表

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

ボタンデザイン

2.レイアウト

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

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

レイアウト

3.ボタンの文言

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

カートコピー

 

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

関連する記事

海外販売に関する補助金・助成金情報(2018.April)... 2018年も4月、企業で言えば入社式、新年度のスタート。小中学、高等学校では入学、新学期のシーズンに入った。 今月も4月の最新の補助金、助成金情報をまとめてみた。 補助金・助成金とは国や地方自治体から民間企業へ資金支援する返済不要のお金である。 補助金と助成金の違いは、補助金には予算があ...
eBay 国際売買26%上昇 今月、eBay の2014年第2期のフィナンシャル結果が発表されたことを、皆さんは確認されたでしょうか。今回の結果はeBayにとって、善い点もあれば悪い点もあったわけですが、eBayを通してEコマースを行っている方には、この結果から時代に沿った戦略を見出すことが出来るのではないかと思います。...
海外ビジネス向け「海外送金サービス」比較... インターネットのおかげで海外とのコミュニケーションだけでなく、貿易、物流、金融など様々なモノの取引が便利な時代になった。その中でも、税金や海外送金については、未だに頭を悩まされているビジネスオーナーは多いらしい。 海外ビジネス取引において海外送金は頻繁に行われるのでコストも削減したいもの。 ...
越境ECセミナー『衰退か、成長か?』を博多で開催... 9月21日(金)、博多駅、JR博多シティ会議室 9階にて「越境ECセミナー」が開催される。 博多で行われるセミナーは2部構成で、第1部ではデジタルスタジオ代表取締役の板橋憲生が「衰退か、成長か? 『独自型サイトの逆襲 儲かる越境EC最前線2018年』」と題して講演する。 第2部では同社、営業...
海外販売に関する補助金・助成金情報(2018.November)... 2018年も11月。11月は旧暦では霜月(しもつき)と呼ばれ、霜が本格的に降りる時期でもある。この時期は紅葉が深まり、下旬には落葉し冬の到来となり、一年で一番変化の大きい月である。 今月も補助金・助成金のの公募内容をまとめた。補助金・助成金とは国や地方自治体から民間企業へ資金支援する返済不...
イギリスのトップEコマース500社 Internet Retailing社は最新のイギリスのトップEコマース500社を発表、イギリスでは、AO, Argos, Holland & Barrett, Topshop やNext などが最大手となる。 この毎年実施されるランキングは今年で3回目で、特にクロスボーダーや様々な...
このエントリーをはてなブックマークに追加

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

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

コメントをどうぞ