余白

定義

パディング（padding）は要素の枠線より内側の余白で、コンテンツと境界のあいだに 息をつく空間をつくります。マージン（margin）は枠線より外側の余白で、隣り合う 要素との距離を決めます。どちらも同じ「空きスペース」ですが、内側か外側かという 向きが正反対なので、この区別さえはっきり押さえておけば、レイアウトの悩みの 半分は片づきます。余白は画面のなかで最も頻繁にさわる値であると同時に、初心者が いちばん混乱しやすいポイントでもあります。だからこそ最初のうちは、内側ならパディング、 外側ならマージン、と口に出して覚えてしまうほうがずっと近道です。

なぜ重要か

余白は単に「何もない場所」ではなく、情報を読みやすくするいちばん強力な道具です。 要素どうしが十分に離れていれば目はそれぞれのかたまりを区別でき、逆に近ければ 互いに関係があるものとしてひとつにまとまって見えます。つまり余白の大きさの差 だけで、どれが仲間なのかというグループ分けと画面の階層が自然に生まれます。うまく 整えられた余白は、色や線を足さなくても画面を落ち着かせ、どこを先に見ればよいかを 声を出さずに案内してくれます。反対に余白がばらばらだと、どんなにきれいな色や フォントを使っても画面全体が雑然として安っぽく見えます。熟練した デザイナーほど、色を選ぶ前にまず余白から整える習慣を持っています。

よくある間違い

• パディングとマージンを取り違えて、見当違いの側に値を与えてしまうケースです。 カードの内側が窮屈ならマージンではなくパディングを大きくすべきで、カードどうしが くっついているならパディングではなくマージンや親のgapを広げるべきです。向きを 逆に取ると、いくら値を大きくしても思いどおりの結果にはなりません。
• 余白をそのつど適当な数字で決めてしまうことです。12px、15px、18pxのように 規則のない値が画面ごとに積み重なると、微妙にずれて見え、あとでどこをどれだけ 直せばよいか分からず、保守も一気に難しくなります。
• 関係のある要素とない要素を、まったく同じ間隔で離してしまうことです。すべての 間隔が同じだとグループの境目が消えてしまい、情報の構造がひと目で入ってこず、 ユーザー自身がまとまりを推測しなければならなくなります。

実務のヒント

• 余白は4または8の倍数のような、あらかじめ決めたスケールのなかからだけ選びましょう。 選択肢をいくつかに絞ると毎回の判断が速くなり、画面全体のリズムも一貫して保たれます。 このルールは、あとで扱う間隔スケールの考え方にそのままつながります。
• 内側のゆとりはパディングで、要素どうしの距離はマージンまたは親のgapで与える、 という原則をチームのなかで固定しておきましょう。役割をはっきり分けておくと、 値が互いにぶつかったり二重に重なって計算が狂ったりする失敗を大きく減らせます。
• ひとつのかたまりのなかの間隔は狭く、かたまりとかたまりのあいだは広く取りましょう。 このコントラストがはっきりするほど、ユーザーは別の説明がなくても、どの要素が ひとかたまりなのかをすぐに見分けられます。

関連概念