マージンとパディングの使い分け｜違いとどっちで空けるかの決め方

「ここを空けたいのに、マージンとパディングのどっちを動かせばいいのか分からない」。作業中に手が止まったことはありませんか？

この2つは、覚えることが1つしかありません。枠線の内側がパディング、外側がマージン。これだけです。
このレッスンでは、違いの見分け方、どちらで空けるかの決め方、数値のそろえ方を説明します。最後に、詰まりすぎたカードの余白を数値で直す課題をやってみましょう。デザインツールでもコードでも、同じ言葉を使うので覚えておいて損はありません。

違いは「枠線の内側か、外側か」

要素には目に見えない枠があります。ボタンもカードも写真も、四角い箱として扱われます。この箱の縁がボーダー（枠線）です。

見分け方は1つです。その余白に背景色がついてほしいならパディング、ついてほしくないならマージン。青いボタンの内側を広げれば青い面が増えます。外側を広げても青い面は増えません。

この違いがあるので、同じ「20px空ける」でも結果が変わります。パディングを20px増やすと箱そのものが大きくなり、マージンを20px増やすと箱の大きさは変わらずに隣が遠ざかります。

どっちで空けるかの決め方

迷ったときは、空けたい相手が誰かを見てください。答えは2つに1つです。

空けたいところ	使うのは	例
箱と、その中身の間	パディング	ボタンの文字と枠、カードの内側、見出しの背景帯
箱と、隣の箱の間	マージン	見出しと本文の間、カードとカードの間、段落と段落の間
箱と、画面の端の間	マージン	本文と画面の左右の端
背景色をつけた帯の中	パディング	色帯の中の文字が上下にくっつくとき

いちばん多い間違いは、ボタンの文字と枠の距離をマージンで取ろうとすることです。マージンを増やしてもボタンは大きくなりません。文字が外へ押し出されるか、何も起きないだけです。
ボタンを押しやすい大きさにしたいなら、パディングを増やします。

クリックできる範囲はパディングで作る

スマホのボタンは、指で押せる大きさが必要です。目安は縦横44px以上です。文字だけだと20pxほどしかないので、上下左右にパディングを足して広げます。
マージンで空けた部分は押せません。見た目が同じでも、押した反応が返らないので使いにくくなります。

44pxという数字には根拠があります。Appleが公開しているヒューマンインターフェイスガイドライン（iPhoneアプリの作り方の指針）が、押せる範囲を44pt以上にするよう示しています。

数値は8の倍数でそろえる

余白を毎回目分量で決めると、13px・15px・18pxのようにばらつきます。近い数字が並ぶと、そろえ損ねたように見えます。
使う数値をあらかじめ決めてください。8の倍数が扱いやすいです。

4種類あれば足ります。使う数値が増えるほど、どれを使ったか分からなくなって、次のページで再現できません。
8pxの半分の4pxまでは使って構いません。それより細かい数値は、見た目の差として伝わりません。

8を単位にするのは、GoogleのMaterial Designと同じ考え方です。自分で決めた数字ではなく、多くのアプリが使っている単位に合わせておくと、あとからコーダーに渡すときも話が早くなります。

大事なのは、関係の近さと距離を一致させることです。強く結びつくものは8px、別のグループなら24px。距離がそのまま意味になります。この考え方はデザインの4原則の近接そのものです。

余白がそろわないときに見る場所

数値を決めたのに見た目がそろわない。よくあります。原因はだいたい次の3つです。

パディングとマージンが両方入っている

カードの下パディング24pxと、中の要素の下マージン16pxが重なって、実際は40px空いている。よくある食い違いです。
直し方は、どちらか片方に寄せます。カードの内側はパディングで、中の要素どうしはマージンで、と決めておくと重なりません。

上下のマージンが合算されていない

Webページでは、縦に並ぶ要素の下マージンと上マージンが接すると、大きいほうだけが効きます。24pxと16pxが並んでも40pxにはならず、24pxのままです。
コーダーに渡す前に知っておくと、「指定どおりに空いていない」という指摘を減らせます。

文字の行間ぶんが見えていない

文字には行間が入っています。行間の上下半分ずつが文字の外にはみ出すので、見た目の余白は指定より広くなります。
直し方は、見た目で判断します。数値が正しくても詰まって見えるなら、その数値が間違っています。行間そのものの決め方は余白の使い方で扱っています。

ミニ実践：詰まったカードを数値で直す

手を動かすと一度で覚えられます。所要時間は15分、道具は無料のFigmaかCanva、プレゼンソフトでも大丈夫です。

1. 横340×縦380くらいの四角を1つ置きます。これが商品カードです
2. 中に、画像の代わりのグレーの四角・商品名・説明文・価格・ボタンの5つを入れます
3. 全部の間隔を4pxにします。わざと詰めてください。これがBeforeです
4. カードの内側のパディングを24pxにします。これで中身が枠から離れます
5. 商品名と説明文の間を8pxにします。この2つは強く結びつくので近づけます
6. 説明文と価格の間、価格とボタンの間を16pxにします
7. ボタンの中のパディングを上下12px・左右24pxにします
8. 使った数値を数えます。8・16・24の3種類に収まっていれば合格です

3で詰めた状態を必ず作ってください。Beforeを見ずにAfterだけ作ると、どこが良くなったのか分かりません。
できたらカードを3枚コピーして横に並べてみてください。同じ数値を使い回すだけで、そろって見えます◎

自分の作品を見直すときは、次のチェックリストを使ってください。

やってしまいがちな失敗

空白の行を入れて空ける

改行を2回入れて距離を作ると、文字サイズを変えたときに余白まで変わります。数値でも管理できません。
直し方は、マージンの数値で指定します。あとから全部を一度に調整できます。

上下左右のパディングを全部同じにする

ボタンの上下と左右を同じ16pxにすると、縦に長い印象になります。文字は横に伸びるので、左右のほうを広く取ります。
直し方は、上下12px・左右24pxのように、左右を2倍にします。

狭いほうを基準に決めてしまう

情報が入りきらないからと余白を削ると、全部が詰まって安っぽく見えます。
直し方は、余白ではなく情報を減らします。1枚に載せる項目を1つ削るほうが、結果として伝わります。

ページごとに数値を決め直す

トップは24px、下層ページは20px。こうすると、同じサイトに見えなくなります。
直し方は、最初に4種類の数値を決めて、全ページで使い回します。決めた数値をメモに残しておくと、数か月後の修正でも迷いません。

よくある質問

パディングとは何ですか？

要素の枠線と、その中身との間の余白です。ボタンの文字と枠の距離、カードの内側の空きがパディングにあたります。
広げると要素そのものが大きくなります。背景色をつけていれば、色のついた面積も一緒に増えます。押しやすいボタンを作るときは、ここを広げてください。

パディングとボーダーとマージンの違いは何ですか？

内側から順に、中身・パディング・ボーダー・マージンの4層で並びます。ボーダーは枠線そのもの、パディングはその内側の余白、マージンは外側の余白です。
この並びを覚えておくと、設定画面のどの数値を動かせばいいか一目で分かります。背景色がつくのはボーダーの内側までです。

パディングとマージンの使い分けが毎回わかりません

「その余白に背景色をつけたいか」で決めてください。つけたいならパディング、つけたくないならマージンです。
もう1つの決め方は、空けたい相手を見ることです。相手が自分の中身ならパディング、隣の要素ならマージン。この2つの質問で、ほぼ全部が決まります。

デザインツールとコードで言葉は同じですか？

ほぼ同じです。FigmaやStudioの設定画面にもマージンとパディングがあり、CSSにも同じ名前のプロパティがあります。意味も一致しています。
ツールの中には、要素どうしのすき間を「ギャップ」と呼ぶ設定を持つものもあります。これは並んだ要素の間隔をまとめて指定するもので、役割としてはマージンに近いと考えてください。

次に学ぶこと

このレッスンの要点をまとめます。

• パディングは枠線の内側、マージンは枠線の外側
• 背景色をつけたい余白ならパディング、つけたくないならマージン
• 数値は8の倍数で4種類まで（8・16・24・40）
• 強く結びつくものは近く、別グループは遠く
• スマホのボタンはパディングで44px以上に広げる

数値の考え方をもっと知りたい方は余白の使い方へ進んでください。どのくらい空けるかを、作品全体の単位で決められるようになります。
要素の位置そのものを決める話はグリッドレイアウトで扱っています。位置はグリッド、間隔はマージンとパディング、と役割を分けて覚えると迷いません。

ほかのレッスンはデザインの基本コース目次から選べます。