ユーザーにクリックされやすいボタンデザインの5つのポイント

ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。

サイトのキャプチャ

Web Design Trends: Call To Action Buttons

先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。
以下は、各ポイントを意訳したものです。

はじめに

サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。
ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。

行動を呼びかけるボタン(Call to Action Button)はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。

1. ボタンのカラー

サイトのキャプチャ

ボタンのカラーはページの他の箇所より際立ったものを使用します。通常は、より明るく、コントラストがあるカラーです。

2. ボタンの配置

サイトのキャプチャ

ボタンのページ内での配置は、ユーザーが簡単にみつけだせる場所に配置します。
商品画像の横、ヘッダ、ナビゲーションの側など明白な場所に配置し、決して見つけにくい配置はしないでください。

3. ボタンの文言

サイトのキャプチャ

ユーザーとのコミュニケートで重要なのは言葉です。それは簡潔で、ポイントをついたものにし、「サインアップ」や「ダウンロード」などユーザーの行動をあらわすものにします。
ユーザーに響く言葉の一つに「フリー」「無料」があります。ユーザーが行動への呼びかけボタンをクリックする理由を考えてみてください。

4. ボタンのサイズ

サイトのキャプチャ

最も重要なボタンは、ユーザーがボタンをクリックしやすいように他のボタンよりも大きくしします。その際は可能な限り大きなエリアを確保してください。

5. ボタンのスペース

サイトのキャプチャ

ボタンの周りは他のエレメントで混雑させるべきではありません。充分な余白を確保します。そして可読性のために、テキストには充分なパディングも設定します。

sponsors

top of page

©2018 coliss