« ブログのトップページに戻る

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

   投稿者 : 2015年2月16日 By

イメージ写真

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

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

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

1.色と形

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

表

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

ボタンデザイン

2.レイアウト

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

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

レイアウト

3.ボタンの文言

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

カートコピー

 

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

関連する記事

消費者の購買行動を後押しするコンテンツとは?... マーケティングリサーチ会社のニールセンによって最近実施された調査で、「消費者の購入決定に最も影響力の大きいコンテンツは、専門家によるレビューだ」という興味深い結果が出ました。 消費者の購買行動に焦点を当てたこの調査の内容を詳しく見ていきましょう。   購買行動に一番効果的なコンテ...
越境ECで海外発送する際のポイント 海外に商品を発送するには日本郵便のEMSや、ヤマト国際宅急便、FedEx、DHL、UPSなどを利用するのが一般的である。その他にも、海外に商品発送する代行サービスを利用すれば、配送に関する不安を軽減されるだろう。 今回はこの海外に商品を発送する際のポイントについて見ていこう。  ...
Eメールマーケティングの最新トレンドとは?... ウェブマーケティングにおいては、ソーシャルメディアやモバイルアプリなど、新しい手法が注目されがちですが、実は今、最も注目されているのがEメールマーケティングです。Eメールマーケティングはコンテンツマーケティングと組み合わせることで、大きな力を発揮します。Eメールにより、ターゲットとする顧客層に相...
Live Commerce にタイ語が追加 Live Commerce に本日タイ語のオプションが追加されました。 機能管理 > 追加オプション申請 > タイ語追加 よりオンラインから申込が可能です。 オンラインデモ 下記サイトにてオンラインデモサイトを公開しています。 タイのEコマース事情 人口:6...
比較! こんなに違う日本とアメリカのランディングページ... 日本のランディングページはスタンダードではないとよく言われる。 ランディングページはその国の人々のニーズ、文化、習慣に合わせて、独自に変化してきたものであるので、グローバルな意味で同じ必要はないと思うが、今回は日本とアメリカのランディングページの違いについて、どのように違っているのかを調べて...
これからのWEB広告はネイティブ広告の時代となるか?... 数年前から、問題とされてきた、ステルスマーケティング、通称「ステマ」。ステマとは、消費者に宣伝と気づかれないように宣伝行為をすることであるが、ステマ広告でもなく、通常のバナー広告でもない、ネイティブ広告。 ネイティブ=自然な広告という意味合いの強いネイティブ広告とはどのようなものなのか?SN...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。