余白のスケール

定義

スペーシングスケールは、余白に使う数字をその場の感覚で選ばず、あらかじめ決めておいた 単位の倍数だけを使うルールです。たとえば 4・8・16・24・32 のように、一定の間隔で並ぶ 値だけを候補として、その中から選びます。毎回 13px、17px、21px と好き勝手に指定する 代わりに、決められたハシゴの段の上でだけ値を選ぶイメージです。選択肢がいくつかに 絞られると判断が速くなり、画面のあちこちの余白が同じ基準を共有するので、全体に一定の リズムが生まれます。このリズムはあまり目立ちませんが、画面が整って見える決定的な理由に なります。スケールは余白だけでなく、要素のサイズや角の丸みといった値にも同じように 適用できるので、画面全体をひとつの一貫した体系の上で動かすことができます。

なぜ重要か

ルールなしで決めた余白は、ひとつずつ見ればそれらしく見えても、いくつも集まると微妙に ずれて、画面全体が散らかった印象になります。人の目は 15px と 16px の違いには気づき にくいのに、値がバラバラだという無秩序さは不思議とちゃんと感じ取ってしまうものです。 スケールを使えばこうしたあいまいな差が消えて、すべての余白が同じ基準の上にそろい、 色や線を足さなくても画面が整って見えます。さらに、値がいくつかに決まっているので、 デザイナーと開発者が「もう一段あけてください」といった共通の言葉でやり取りでき、 あとから間隔を調整するときもルールに沿って予測どおりに変えられるため、メンテナンスが ずっと楽になります。結局スケールとは、個人の感覚に頼っていた余白を、チームでいっしょに 共有できる仕組みへと変えてくれる装置なのです。

よくある間違い

• スケールを決めておきながら、急いでいるときに例外の値をこっそり差し込んでしまうこと です。ひとつふたつの例外が積み重なると、いつの間にかルールが崩れて、スケールを 使っていないのと変わらなくなってしまいます。
• 段階を細かくしすぎることです。4、6、8、10、12 のように間隔が狭いと値同士の差が 見分けにくく、わざわざ分けた意味がなくなるうえ、かえって選ぶときに迷いやすく なります。
• スケールをドキュメントに書いただけで、コードの実際の値と結びつけないことです。 ルールとコードが別々に動くと時間とともに両者がずれていき、やがて誰もルールを 信頼しなくなって、また好き勝手な値を使うようになってしまいます。

実務のヒント

• いちばん広く使われる出発点は、8 を基本単位にする「8ポイントグリッド」です。値が 8 の倍数になるので目にリズムが生まれ、15px のようなあいまいな値が消えて、 デザイナーと開発者のやり取りも一段とスムーズになります。小さな余白が必要なときは、 4 を補助単位としていっしょに使えば十分です。
• スケールの値には数字ではなくトークンの名前を付けて使いましょう。名前で呼べば、 あとから基準の単位を変えても一箇所を直すだけで全体に反映されるので、余白の調整が ずっと安全になります。こうして名前で管理する習慣は、自然とデザイントークンという より大きな体系へとつながっていきます。

関連概念