海外サイト Medium で公開された Design Better Buttons を著者 Andrew Coyle より許可をもらい、意訳転載しています。
この記事では、ユーザーインターフェースを作成するときに気をつけたいボタンデザインのポイント11個をまとめてご紹介します。
悪い例と良い例を比較しながら、具体的なボタンデザイン代替案をシンプルなイラストをつかって詳しく見ていきましょう。
1. ボタンの種類ごとに1つのスタイルに制限しよう
ウェブサイトやアプリでは、同じアクションタイプに複数のボタンスタイルを使用しているケースがよくあります。使用しているボタンスタイルの数をきちんと把握し、タイプごとに1つのスタイルにまとめてみましょう。
一般的なボタンの種類には、コールトゥーアクション（CTA）、第一プライマリ（Primary）、第二セカンダリー（Secondary）、第三ターシャリ（Tertiary）、成功（Success）、危険（Danger）、リンクなどが挙げられます。
2. イベントの状態を含め、視覚的なフィードバックを提供しよう
ボタンの状態（Hover、Pressed、In-Progressなど）は、ユーザーにとって必要な視覚的なフィードバックを提供します。イベントの状態が分からないと、ボタンを押したときに何が起こるのか理解できず、混乱してしまう恐れがあります。
3. ボタンの種類を区別しよう
ボタンの種類は、階層の視覚的な手がかりを提供するために、スタイル別に区別するべきです。一次的なアクションは二次、三次のアクションよりも目立たせること重要で、キャンセルや取り消しといったアクションでは、意図的にデザインを変更すると良いでしょう。
4. ボタンのスタイルに一貫性をもたせよう
全体的なボタンスタイルを統一したものにしていれば、どのようなデザインスタイルでも構いません。たとえば4pxの角丸で、グラデーションとドロップシャドウを使用しているときは、同じスタイルをすべてのボタンデザインに適用してみましょう。
5. ボタンでないものはボタンのように見えないようにしよう
ボタン（特に丸みを帯びたもの）は、タグと似たようなスタイルとなっていることもしばしば。デザインで両方のUIコンポーネントを使用するときは、ユーザーの混乱を防ぐために、見た目の違いをはっきりとさせましょう。ユーザーが間違ってクリックしないようにすることが大切です。
6. 大文字、小文字など文字テキストを統一させよう
上記サンプル例のように特に英語テキストでは、大文字と小文字どちらを利用している場合でも、ボタンの種類によって一貫性があることを確認しましょう。
7. アイコンを利用するタイミングを知ろう
上記サンプルのように長い表テーブルを表示するときは、行ごとにボタンを重ねることで見栄えが悪くなってしまいます。同じ種類のコンテンツが繰り返されているコンテンツでは、アイコンのようなより繊細で、控えめなビジュアルスタイルを検討してみましょう。
8. 長すぎる文字ラベルは避けよう
文字テキストの多すぎる長いボタンやリンクのラベルは、ユーザーインターフェースをごちゃごちゃした印象にし、ユーザーが一瞬迷ってしまいがちです。ボタンのラベルは、特別な場合や複雑な場合、データ削除など後戻りできないアクションを除き、必要なものだけに限定するようにしましょう。
9. ラベルはアクションをはっきり表示しよう
特にデータ削除や取り消しなど後戻りできないときは、ユーザーを考えさせないようにしましょう。ボタンをクリックするとどうなるのか、明確かつ簡潔に説明することが重要です。
「はい」、「いいえ」、「取り消し」などのラベルは、ユーザーに誤解を招く可能性があるため注意が必要です。上記サンプル例では、ユーザーは「キャンセル（Cancel）」ボタンを「削除のキャンセル」ではなく、「キャンセルの確認」と捉えてしまう恐れがあります。
10. リンクの間に余白スペース、パディングを追加しよう
文字テキストリンクの設定も見落とされがちなポイントのひとつです。複数のリンクを一緒に表示するときは、十分あん余白パディングスペースを確保しましょう。
11. ボタンの文字ラベルは折り返さないようにしよう
ボタンに使われている文字ラベルは、折り返すことで読みやすさを損ねてしまいます。文字テキストは1行に収まるようにすると良いでしょう。
