ボタンを作ってみたら、なんだか窮屈で安っぽく見えたり、スマホで押そうとしたら隣のリンクを押してしまったりしたことはありませんか。
その原因の多くは、ボタンの枠と文字の間に取る「ボタンの内側の余白」にあります。
この記事では、ボタンの内側の余白(padding)とは何かと、見た目のバランスと押しやすさ(タップ領域)の両方から余白を決める方法を、見本を使いながら初心者向けに解説します。
ボタンの内側の余白の基本
まずは、ボタンの内側の余白がどこを指し、見た目と押しやすさにどう関わるのかを押さえましょう。
ボタンの内側の余白とは
ボタンの内側の余白とは、ボタンの枠(塗りの端)と、その中に入る文字やアイコンとの間に取る空きのことです。
要素の内側に取る余白なので、CSSやデザインツールでは「パディング(padding)」と呼ばれます。
ボタンの大きさは「文字の大きさ+内側の余白」で決まるので、内側の余白はボタンの見た目と押しやすさの両方を左右します。
次の見本は、同じ文字のボタンの内側の余白だけを変えて並べたものです。
NGの見本は、文字に色の帯を敷いただけのように見え、ボタンというより強調された文字のようです。
OKの見本は、文字のまわりにゆとりがあることで、ひとかたまりの「押せる部品」として目に入ります。
左右の余白を上下より広くとる理由
文字の入ったボタンでは、左右の内側の余白を上下より広くとるのが一般的です。
文字は横一列に並ぶため、上下と左右を同じ値にすると、文字の左右の端が枠に近く見えて、窮屈な印象になりやすいからです。
次の見本は、同じボタンの内側の余白の配分だけを変えたものです。
見本Aは、文字の左右の空きが少なく見え、ボタン全体が縦に厚ぼったく感じられます。
見本Bは、左右に余白を多く配分したことで横長の落ち着いた形になり、文字もゆったり収まっています。
左右は上下の2倍前後にするとまとまりやすいですが、決まった比率があるわけではないので、文字の長さや角の丸みに合わせて見た目で調整しましょう。
押しやすさ(タップ領域)との関係
ボタンの内側の余白は、見た目だけでなく、指やマウスで押せる範囲(タップ領域)の広さにも直結します。
ボタンは枠の内側全体が押せる範囲になるため、内側の余白を広げるほど、押せる範囲も広がるからです。
押せる範囲の大きさには、次のような公的なガイドラインやOSメーカーの目安があります。
| ガイドライン | 押せる範囲の目安 | 位置づけ |
|---|---|---|
| WCAG 2.2 達成基準2.5.8 | 24×24 CSSピクセル以上 | 最低限の基準(レベルAA) |
| WCAG 2.2 達成基準2.5.5 | 44×44 CSSピクセル以上 | より厳しい基準(レベルAAA) |
| Apple Human Interface Guidelines | 44×44pt以上 | iPhoneなどのアプリ向けの目安 |
| Android(Google) | 48×48dp以上 | Androidアプリ向けの推奨 |
WCAGは、Webを誰にとっても使いやすくするための国際的なガイドラインで、WCAG 2.2では押す対象の大きさを少なくとも24×24 CSSピクセルにすることを求めています(WCAG 2.2 達成基準2.5.8 ターゲットのサイズ(最低限)・WAIC日本語訳)。
より厳しい達成基準2.5.5では44×44 CSSピクセル以上が示されています(WCAG 2.2 達成基準2.5.5 ターゲットのサイズ(高度)・WAIC日本語訳)。
アプリの世界でも、Appleはボタンのヒット領域(押せる範囲)を基本的に44×44pt以上に(Human Interface Guidelines「ボタン」(Apple))、Androidは48×48dp以上にすることを勧めています(アプリのユーザー補助機能を向上させる(Android Developers))。
CSSピクセル・pt・dpは、どれも画面の細かさ(解像度)に左右されない「見た目の大きさ」の単位なので、ほぼ同じ感覚でとらえて大丈夫です。
スマホの画面は、画面を作る点(画素)がとても細かく、その細かさも機種ごとに違います。
画素の数で大きさを決めると、同じ「44」でも機種によって実際の大きさが変わってしまうため、Web・iPhone・Androidがそれぞれ、画素の細かさに左右されない単位を決めているのです。
44pt・48dpは、実際の画面ではどちらもおよそ7〜9mm四方で、指先で押しやすい大きさにあたります。
24×24は「これより小さいと押しにくい」という最低限の線なので、よく押されるボタンは44〜48px程度の高さを目指すと安心です。
ボタンの内側の余白の決め方
ここからは、ボタンの内側の余白を実際にどう決めればよいかを、手順に沿って見ていきます。
ボタンの高さから上下の余白を逆算する
上下の内側の余白は、「ボタンの高さをいくつにしたいか」から逆算して決めると迷いません。
ボタンの高さは、「文字1行分の高さ+上の余白+下の余白」で決まるからです。
行の高さ(line-height)とは、文字そのものの大きさに上下のわずかなゆとりを加えた、文字1行が占める高さのことで、文字サイズの何倍にするかで指定するのが一般的です。
たとえば、文字サイズ16pxで行の高さを1.5倍にすると、文字1行分の高さは16px×1.5=24pxです。
ボタンの高さを48pxにしたいなら、残りの24pxを上下で分けて、上12px・下12pxにすればよいことになります(24px+12px+12px=48px)。
左右の余白は、上下の余白を決めたあとに、見た目のバランスを見ながら上下の2倍前後から調整していきましょう。
サイズごとに余白をルール化する
サイトやアプリの中で大・中・小など複数のサイズのボタンを使う場合は、サイズごとの内側の余白をあらかじめ決めておきます。
ボタンを作るたびに余白をその場で決めると、同じ役割のボタンなのに画面ごとに大きさが違って見え、統一感がなくなるからです。
8の倍数を中心に決めた一例は次のとおりです。
| サイズ | 文字サイズ | 内側の余白(上下・左右) | ボタンの高さ | 主な使いどころ |
|---|---|---|---|---|
| 小 | 14px | 8px・16px | 約37px | PC画面の補助的な操作、表の中の操作 |
| 中 | 16px | 12px・24px | 48px | 一般的なボタン |
| 大 | 18px | 16px・32px | 約59px | ページで一番押してほしいボタン |
ボタンの高さは、文字サイズ×1.5(行の高さ)に上下の余白を足して計算しています。
3つのボタンは文字サイズと余白が一緒に大きくなっているので、大きさは違っても同じ仲間のボタンに見えます。
なお、小サイズは高さが約37pxと44pxを下回るので、スマホで指で押すボタンには中以上を使い、小サイズはPC画面や、周りに十分な間隔がとれる場所に限るのがおすすめです。
文字数が違っても余白は揃える
「戻る」と「お問い合わせフォームへ」のように文字数が違うボタンでも、同じサイズのボタンなら内側の余白は同じ値に揃えます。
ボタンの幅を固定して文字数の違いを吸収しようとすると、短い文字のボタンは左右がスカスカに、長い文字のボタンは窮屈に見えてしまうからです。
次の見本は、文字数の違う2つのボタンを、幅をそろえた場合と余白をそろえた場合で比べたものです。
余白の値をそろえると、ボタンの幅は文字数に合わせて伸び縮みしますが、高さと文字のまわりのゆとりは同じになるため、並べても同じ仲間のボタンとしてまとまって見えます。
Figmaでは、ボタンにオートレイアウト(中身の量に合わせて枠の大きさを自動で調整する機能)をかけ、「パディング」で余白を指定し、幅を「コンテンツを内包」にすると、文字数が変わっても余白が一定に保たれます(オートレイアウトのガイド(Figmaヘルプ))。
横に並ぶボタンの幅をどうしても揃えたい場合は、一番長い文字のボタンに合わせて幅を決め、どのボタンにも左右の余白が十分残るようにしましょう。
CSSでボタンの内側の余白をつける例
ここからは、コーディングする人向けの補足です。
デザインツールだけを使う人は、「高さから上下の余白を逆算し、左右はそれより広く」という考え方を押さえておけば十分です。
CSSでは、中サイズのボタンを次のように指定できます。
.button {
display: inline-block;
font-size: 16px;
line-height: 1.5; /* 文字1行分の高さは24px */
padding: 12px 24px; /* 上下12px・左右24px → 高さ48px */
min-height: 44px; /* 文字が小さくなっても押せる高さを保つ */
}paddingに値を2つ書くと、1つめが上下、2つめが左右の余白になります(MDN「padding」)。
min-heightは高さの下限を決める指定で、内側の余白を減らしたときでも、押せる範囲が狭くなりすぎないようにする保険になります。
ボタンの中の文字の大きさや太さの決め方は、CTAボタンの文字デザインの記事で解説しています。
実践のポイント
ボタンの内側の余白で陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- PCの画面で見た目のすっきり感を優先して内側の余白を削り、スマホでは押しにくいボタンになってしまうことがあります。
ボタンを作ったら、必ず実際のスマホで指で押して確かめましょう。 - アイコンだけのボタン(閉じる「×」や検索の虫眼鏡など)は、アイコンが小さいぶん押せる範囲も小さくなりがちです。
見た目のアイコンは小さくても、内側の余白を足して押せる範囲を44px程度まで広げておくと安心です。
たとえば16pxの「×」アイコンなら、上下左右に14pxずつ余白を足すと、押せる範囲は16+14+14=44px四方になります。
余白は透明なので、見た目は小さな「×」のまま、そのまわりを押しても反応するようになります。 - 同じ役割のボタンなのに、画面ごとに内側の余白が少しずつ違ってしまうことがあります。
サイズごとの余白を決めたら、1つの部品として作って使い回しましょう。
よくある質問
- Q. 内側の余白は広ければ広いほどいい?
A. 広すぎると、ボタンが大きくなりすぎて周りの情報より目立ちすぎたり、画面の中で場所を取りすぎたりします。
押しやすさの目安(高さ44〜48px程度)を満たしたうえで、ページの中での重要度に合わせて大きさを選びましょう。 - Q. ボタンとボタンの間の余白も関係ある?
A. 関係あります。
ボタン同士が近すぎると押し間違いが起きやすいため、内側の余白だけでなく、ボタンの外側の間隔も確保しましょう。
ボタンの周りの余白で目立たせる考え方はCTAボタンとは?で解説しています。 - Q. 文章の中のテキストリンクも44pxにしないといけない?
A. その必要はありません。
WCAGの達成基準2.5.8でも、文章の中にあるリンクのように、行の高さで大きさが決まる対象は例外とされています。
ただし、リンクが何行も連続して並ぶ場合は、行の間隔を広げて押し間違いを防ぎましょう。
まとめ
ボタンの内側の余白とは、ボタンの枠と文字の間に取る余白(padding)のことで、ボタンらしい見た目と押しやすさの両方を決める大切な要素です。
上下の余白はボタンの高さ(よく押すボタンなら44〜48px程度)から逆算し、左右はそれより広くとり、サイズごとに値をルール化しておくと、統一感のある押しやすいボタンになります。
まずは自分が作ったページのボタンを1つ選び、高さが何pxあるか、上下と左右の余白がどのくらいかを測ってみてください。
