ユーザーにクリックされやすいボタンデザインの5つのポイント
Post on:2010年2月17日
ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。

Web Design Trends: Call To Action Buttons
先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。
以下は、各ポイントを意訳したものです。
はじめに
サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。
ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。
行動を呼びかけるボタン(Call to Action Button)はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。
1. ボタンのカラー

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

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

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

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

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