ボタンの構造

定義

ボタンは一見シンプルに見えますが、実はいくつかの部品が重なってできています。 中央には何が起きるのかを伝えるラベル（文字）があり、そのラベルを包むコンテナが、 背景色・枠線・角の丸みでボタンの見た目をつくります。ラベルとコンテナのあいだにある 余白は、文字が窮屈にならないよう息を通しながら、同時に指やカーソルで押せる範囲の 大きさを決めています。ここにアイコンや読み込み中の表示が加わることもありますが、 骨組みはいつもこの三つの部品です。ラベル・コンテナ・余白をそれぞれ別々に意識して 調整できるようになると、どんなボタンでも狙った印象と大きさにきっちり整えられますし、 なぜこのボタンがどこか変に見えるのかも、部品ごとに切り分けて突き止められます。

なぜ重要か

ボタンは画面の中でユーザーがもっとも頻繁に押す要素であり、何かを実行するための 出発点です。そのため、どれだけ押しやすいか、どれだけ重要そうに見えるかが、 使い勝手にそのまま影響します。とくに余白がつくり出す押せる範囲が小さすぎると、 ユーザーは何度も押し損ねてもどかしさを感じます。また、一つの画面には普通いくつもの ボタンが一緒に並びますが、そのときすべてのボタンが同じくらい強く見えると、どれを 先に押せばいいのか分からなくなります。背景が塗りつぶされたボタン、枠線だけのボタン、 背景も枠線もないボタンというように形に差をつければ、自然と重要度の序列が生まれ、 ユーザーの視線はいちばん大切な操作へと導かれていきます。

よくある間違い

• 押せる範囲を小さくしすぎることです。文字にほとんど余白を与えないとボタンが小さくなり、 とくにモバイルで正確に押しづらくなります。指で楽に押すには、だいたい四十四ピクセル ほどのタッチ領域を確保しておくと安心です。
• 一つの画面に強調のいちばん強いボタンをいくつも置くことです。背景が塗りつぶされた ボタンがあちこちに散らばっていると、どれも重要に見えてしまい、結局どれを先に押すべきか 判断が鈍り、序列が崩れてしまいます。
• ボタンごとに余白や角の丸み、色をばらばらに決めることです。同じ画面のボタンが微妙に 違う見た目になると散らかった印象を与え、ユーザーは同じ種類の操作なのに別々のボタンだと 感じ、そのたびに判断し直すことになります。

実務のヒント

• 重要度に応じてボタンの形を使い分けましょう。背景が塗りつぶされたソリッドはその画面の 主要な操作に、枠線だけのアウトラインは補助的な操作に、背景なしで文字だけのゴーストは キャンセルのような弱い操作に使います。一つの画面にソリッドは一つだけ、を基本にしましょう。
• 押せる範囲は最低でも四十四ピクセルほどを目安に、余白をたっぷり取りましょう。見えている 文字が小さくても、実際に押せる範囲を広げれば誤操作は大きく減ります。
• ボタンの余白・角の丸み・色は個別に決めず、決められたトークンで統一して、どの画面に 置いても同じルールで見えるように管理しましょう。

関連概念