ボタンをデザインするときに知っておきたい7つの基本ルール

ボタンはユーザーとシステムを繋ぐ役割を担う、インタラクションデザインには欠かせない重要な要素です。今回はそんなボタンをデザインするにあたって知っておきたい、7つの基本的なルールをご紹介します。

1. ボタンは”ボタンらしく”

”ボタンらしさ”の重要性

ボタンが”ボタンらしく見える”ことはとても重要です。ユーザーがクリック可能だと判断できなければ、ボタンの機能が成立しません。ぱっと見て機能がわかるというのは、基本的かつ重要な条件です。

では、対象がインタラクティブであるかどうかを、ユーザーはどう判断しているのでしょうか。ユーザーは過去の経験をもとに、対象がボタンかどうかを判断します。ボタンをボタンらしくするために、適切な視覚的記号（サイズ、かたち、色、影など）を活用しましょう。

記号が不十分だと、ユーザーにボタンとして認識されづらくなってしまいます。ユーザーがボタンをクリック可能なものであると認識できなければ、デザインがいくら洗練されていても意味はありません。

また、デスクトップユーザーはカーソルを対象の上に移動することによってクリック可能かどうかを確かめることができますが、モバイルユーザーは確かめることもできません。タップしてみてはじめて、インタラクティブなものなのかがわかります。こうした無駄な時間を省くためにも、ボタンをボタンらしく見せることは必要不可欠です。

ユーザーはデザイナーと同じ目線を持っていない

デザイナーは多くの場合、ボタンがインタラクティブであることは自明だと思っています。たしかにデザイナーは自分でデザインをしているので、ボタンがボタンであることを知っています。

しかし、ユーザーはデザイナーと同じ目線を持っているわけではありません。デザインをするときは、このことを忘れないようにしましょう。

ユーザーにとってわかりやすいデザインを使おう

”ボタンらしいボタン”の例を4つご紹介します。

• 塗りつぶされた四角いボタン
• 塗りつぶされた角がまるいボタン
• 塗りつぶされた影つきのボタン
• ゴーストボタン

ユーザーにとって特にわかりやすいのが、影つきのボタンです。ユーザーは三次元的なデザインをクリック可能であると判断する傾向があります。

空白を忘れずに

ボタン自体の視覚的な特性だけでなく、ボタンのまわりの余白にも気を配りましょう。

以下のようなデザインにすると、中途半端な余白が原因でボタンかどうかを判断しづらくなってしまいます。

▲ただのボックスなのかボタンなのかわかりにくい

2. わかりやすい場所にボタンを配置しよう

見つけやすい場所にボタンを配置することも重要です。ユーザーがボタンを探しまわらずに済むようにしましょう。ボタンを見つけることができなければ、それは存在している意味がありません。

トラディショナルなレイアウトと標準的なUIパターンが一番

標準的なレイアウトを採用すれば、ユーザーは各要素を簡単に見つけられます。

わかりやすいレイアウトのポイントは、クリーンなビジュアルデザインと十分な余白です。ユーザーがボタンを簡単に見つけられるデザインになっているかどうか、きちんとテストするようにしましょう。

3. ボタンのテキスト＝機能の内容

ボタンのテキストは機能の内容と一致させましょう。ボタンの機能とテキストが一致していないと、ユーザーは混乱してしまいます。テキストには、そのボタンを押すとどのような動作をするかという内容を、明確に書くようにしましょう。

不明確なボタンのテキストが引き起こす問題の一例をご紹介します。誤って削除ボタンを押してしまい、以下のようなエラーメッセージが表示されたと仮定します。

▲「OK」というボタンが削除を意味しているのかどうかが不明確

「OK」と「Cancel」だけでは機能の説明が不十分です。このようなボタンを作ることは避けましょう。「OK」ではなく「Remove（削除）」と書けば、ユーザーはボタンを押すとなにが起きるのかをすぐ理解できます。また、ボタンを赤くすることによって、危険な操作であることを知らせられます。

▲「Remove（削除）」にすると機能が明確に伝わる

▲「Disable Card（カードを無効にする）」という注意が必要なボタンは赤い（Ramotionより）

4. ボタンのサイズに注意

ボタンのサイズは優先順位を反映していなければいけません。重要な機能をもつボタンは、よりユーザーの目にとまるようにしましょう。

ボタンの優先順位づけ

重要なボタンを目立たせるために、サイズや色で他のボタンとの差別化をはかりましょう。サイズが大きく、他のものと色が異なるボタンは、重要に見えるはずです。

▲ボタンのサイズと色のコントラストによって、「Try Dropbox Business free」にユーザーの注意をひきつけている

ボタンはモバイルユーザーがタップできる大きさに

モバイルユーザーが誤ったボタンを押すのを防ぐため、ボタンが小さくなりすぎないように気をつけましょう。

▲左は適切なサイズのボタン、右は小さすぎるボタン（Appleより）

MIT Touch Labの調査によると、指の腹の平均の大きさは10〜14mm、指先の平均の大きさは8〜10mmとのこと。このことにより、10mm四方が適切なボタンのサイズだと考えられます。

▲uxmagより

5. ボタンの順序を適切に

ユーザーとシステムのやりとりを円滑にするために、ボタンの順序にも気を配りましょう。

たとえば、「戻る」と「進む」の場合は、どのような配置にすればユーザーが自然に操作できるでしょうか。一般的に、「戻る」を左、「進む」を右に配置するのが正解とされています。

6. ボタンをたくさん使いすぎない

多くのアプリやWebサイトが抱えているのがこの問題です。あまりに多くのボタンがあると、ユーザーは混乱してしまい、逆に何もしなくなります。常にもっとも重要なアクションについて考えるようにしましょう。

▲ボタンが多すぎる！

7. ボタンをクリックしたら音や画像で知らせよう

ユーザーは、ボタンをクリックまたはタップすると、なんらかのアクションが起きることを期待しています。そして期待したようなアクションがないと、システムがコマンドを受信していないとユーザーは判断し、クリックやタップを繰り返します。こうした不要な操作を避けるためにも、音や画像などでフィードバックしましょう。

▲視覚的なアクションによってボタンが押されたことを知らせる例（Vadim Gromovより）

ダウンロードなどの一部の操作については、ユーザーのインプットを確認するだけでなく、プロセスの現在の状態を知らせることも重要です。

▲現在の状況をプログレスバーで示している例（Colin Garvenより）

まとめ

ボタンはインタラクションデザインに欠かせない要素です。だからこそ、時間をかけて慎重にデザインしなければいけません。ユーザーにとって認識しやすく、機能が明確であるかどうかを意識しましょう。

（著者：Nick Babich　翻訳：Asuka Nakajima）