余白の間隔のルールとは?一貫性のある余白の決め方を初心者向けに解説

間隔のルールと余白の一貫性の基本

まずは、「間隔のルール」と「余白の一貫性」がそれぞれ何を指すのか、なぜ必要なのかを押さえましょう。

間隔のルールとは

間隔のルールとは、余白の大きさをその都度感覚で決めるのではなく、あらかじめ決めておいた数種類の数値の中から選んで使う、という決まりごとです。

たとえば「余白は8px・16px・32px・64pxの4種類だけを使う」と決めておけば、どこに余白を入れるときも、この4つから選ぶだけで済みます。

選べる数値が限られているので、似た場所の余白が自然とそろい、デザイン全体に統一感が生まれます。

余白の一貫性とは

余白の一貫性とは、サイトやページ全体を通して、同じ役割の余白には必ず同じ数値を使うことです。

デジタル庁のデザインシステム(サイトやアプリを作るための共通のルール集)でも、同じ種類の要素には同じ間隔の値を使い、余白の一貫性を保つことが挙げられています(デジタル庁デザインシステムβ版「余白(概要)」)。

次の見本は、同じ形の記事カードを3つ並べたものです。

NGの見本は、1枚ずつ見ればそれほどおかしくありませんが、並べると見出しと本文の距離やカード同士の距離が少しずつ違い、ガタガタした印象になります。

OKの見本では、同じ役割の余白に同じ数値を使っているため、3枚のカードが同じ部品として整然と並んで見えます。

間隔をルール化すると何がよくなるのか

間隔をルール化するいちばんの効果は、見る人にとっての分かりやすさと、作る人にとっての迷いの少なさが両立できることです。

• 見る人にとって:同じ構造の部分がいつも同じ間隔で並ぶので、どこがひとまとまりなのかを迷わずに読み取れます。
• 作る人にとって:決まった数値から選ぶだけなので、余白を決めるたびに悩む時間が減ります。
• チームで作るとき:担当者が変わっても同じ数値を使えるので、ページが増えても余白がばらつきにくくなります。

余白に限らず、色や文字にもルールを決めて一貫させると、サイト全体の信頼感につながります(書体のルールの作り方はブランドとタイポグラフィの記事で解説しています)。

間隔のルールの作り方と守り方

ここからは、実際に間隔のルールを作り、それを守り続けるための手順を見ていきます。

難しい計算は必要なく、「関係の近さ」で余白を数段階に分けるのが基本です。

関係の近さで余白を段階に分ける

ルール作りの第一歩は、ページに出てくる余白を「どのくらい関係の近いもの同士のあいだか」で分類することです。

デザインでは、近くにあるもの同士は関係が深く、離れているもの同士は別のまとまりだと受け取られやすいため、関係が近いほど小さい余白、遠いほど大きい余白を割り当てます(この見え方の性質は近接の原則とはで解説しています)。

次の表は、余白を4段階に分けたときの一例です。

段階	どんな関係のあいだか	使う場所の例	数値の一例
小	1つの部品の中のとても近い関係	アイコンと文字、見出しと本文	8px
中	同じまとまりの中の要素同士	段落と段落、カードの内側の余白	16px
大	まとまり同士	カード同士、ブロック同士	32px
特大	大きな区切り	セクション同士	64px

表の数値はあくまで一例で、サイトの文字の大きさや雰囲気に合わせて調整してかまいません。

大切なのは、「関係が遠くなるほど余白が大きくなる」という順番が守られていることです。

次の見本は、同じお知らせ欄の余白を、すべて同じ数値にしたものと、関係の近さで段階分けしたものです。

NGの見本は余白の数値がそろってはいるものの、見出しと本文、お知らせ同士のどちらも同じ距離なので、どこで話題が切り替わるのかが読み取りにくくなっています。

OKの見本のように関係の近さで段階を分けると、2つのお知らせがそれぞれひとまとまりに見えます。

つまり、間隔のルールは「全部同じ数値にする」ことではなく、「同じ関係には同じ数値、違う関係には違う数値」を使うことなのです。

使う数値は3〜5段階に絞る

ルールで使う余白の数値は、3〜5段階くらいに絞ると扱いやすくなります。

段階が多すぎると、「12pxと14pxのどちらを使うべきか」のような迷いが生まれ、ルールを決めた意味が薄れてしまうためです。

デジタル庁のデザインシステムでも、スタイルガイド(デザインの決まりごとをまとめた資料)で定める余白の段階は3〜5つ程度になることが多いとされ、例として8px・24px・64pxの3段階を組み合わせた使い方が紹介されています(デジタル庁デザインシステムβ版「余白(概要)」)。

段階と段階のあいだは、見た目ではっきり違いが分かるくらい差をつけるのがコツです。

文字サイズを大・中・小などの段階に絞ってメリハリをつける考え方と同じです(文字サイズの差のつけ方はジャンプ率の記事で解説しています)。

ルールを書き出して名前をつける

決めたルールは頭の中に置いておかず、「どこに・どの数値を使うか」を表にして書き出しておきましょう。

書き出しておくと、時間がたってから新しいページを作るときや、ほかの人に作業をお願いするときにも、同じルールで作れるためです。

名前	数値	使う場所
space-s	8px	見出しと本文、アイコンと文字
space-m	16px	段落同士、カードの内側
space-l	32px	カード同士、ブロック同士
space-xl	64px	セクション同士

このように数値に名前をつけて管理する仕組みは「デザイントークン」と呼ばれます。

デザイントークンとは、色・文字の大きさ・余白などのデザインの決まりごとに名前をつけ、デザインと実装の両方で同じ名前で呼べるようにしたものです。

「8px」という数値に「space-s」というあだ名をつけておくイメージです。

名前で管理しておくと、あとで「小さい余白を8pxから12pxに変えたい」となっても、名前に対応する数値を1か所書き換えるだけで、その名前を使っている場所すべてに反映できます。

また、デザインする人とコードを書く人が「ここはspace-sで」のように同じ名前で話せるので、数値の伝え間違いも減ります。

ここからは、コーディングする人向けの補足です。

CSSでは、カスタムプロパティ(CSSの中で使える変数)を使うと、次のように余白のルールを1か所にまとめて書けます(MDN「CSS カスタムプロパティ(変数)の使用」)。

:root {
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 32px;
  --space-xl: 64px;
}

.card-title {
  margin-bottom: var(--space-s); /* 見出しと本文のあいだ */
}

:rootはページ全体のいちばん外側の要素(html要素)を指し、ここで決めた値はページのどこからでも使えます。

--space-s: 8px;は「–space-sという名前に8pxを登録する」という意味で、使うときはvar(--space-s)と書いて登録した値を呼び出します。

余白を指定するときに数値を直接書かず、var(--space-s)のように名前で指定すれば、ルール以外の数値が紛れ込みにくくなります。

ルールを守り続けるための見直し

ルールは作って終わりではなく、制作を続ける中で守られているかを見直すことで、はじめて一貫性が保たれます。

「ここだけ少し詰めたい」という小さな例外を重ねるうちに、気づけばルールが形だけになってしまうことがよくあるためです。

1. 新しいページやパーツを作る前に、書き出したルールの表を見返す。
2. 作り終えたら、余白の数値を1つずつ確認し、ルールにない数値が使われていないかを探す。
3. ルールにない数値が見つかったら、ルール内の数値に置き換えられないかを考える。
   どうしても必要なら、例外にせずルールの表に追加するかを検討する。

数値の確認は、Figmaなどのデザインツールで要素を選び、隣の要素との距離を表示させると手早くできます。

実践のポイント

間隔のルールを作って運用するときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• すべての余白を同じ数値にそろえて、「一貫性がある」と考えてしまうことがあります。
  関係の近さが違う場所まで同じ余白にすると、まとまりが読み取れなくなります。
  そろえるのは「同じ役割の余白」だけです。
• 細かい調整のたびに10px、14px、18pxのような例外の数値を足していき、ルールがばらばらになってしまうことがあります。
  例外を使いたくなったら、まずルールの中の数値で代わりにならないかを試しましょう。
• 最初から段階を7つも8つも作ってしまい、どれを使えばいいか自分でも迷うことがあります。
  まずは3〜4段階で始め、足りないと感じたときに増やすのがおすすめです。

よくある質問

• Q. ルールの数値は何pxにすればいい?
  A. 決まった正解はありませんが、8pxを基準の単位にして、その倍数で段階を作る方法がよく使われます。
  デジタル庁のデザインシステムでも、一般的に使われることの多い基準の単位として8pxが挙げられています。
  8が選ばれやすい理由としては、半分(4px)や2倍(16px・32px)の値を作りやすいことや、画面が1.5倍などの倍率で表示されても端数が出にくいこと(5pxは7.5pxになるが、8pxは12pxになる)がよく挙げられます。
  迷ったら8px・16px・32px・64pxあたりから始めて、実際の見た目を確かめながら調整しましょう。
• Q. 一人で作る小さなサイトでも、ルールは必要?
  A. 必要です。
  一人で作る場合でも、数か月後に新しいページを足すころには、以前どの数値を使ったかを忘れてしまいがちです。
  簡単な表を1枚書き出しておくだけでも、余白のばらつきを防げます。
• Q. 文字サイズの段階と、余白の段階はどう関係する?
  A. 別々に決めてかまいませんが、大きい見出しのまわりには大きめの余白をとるなど、文字の階層と余白の段階が同じ方向を向いていると、情報の構造が伝わりやすくなります(文字の大きさで情報の階層を見せる考え方は情報の階層の記事で、余白で階層を見せる考え方は視覚的な階層とはで解説しています)。

まとめ

間隔のルールとは、余白の数値をあらかじめ数段階に決めておき、その中から選んで使う決まりごとで、同じ役割の余白に同じ数値を使い続けることで余白の一貫性が生まれます。

ルールは関係の近さで3〜5段階に分け、表に書き出して名前をつけ、制作のたびに見直すことで守りやすくなります。

まずは自分が最近作ったデザインを1つ開き、使われている余白の数値をすべて書き出して、何種類あるかを数えてみてください(余白の学び方の全体像はデザイン初心者のための余白学習ロードマップで紹介しています)。