余白の取り方がわからない人へ。デザインで余白を正しく使うための5つの原則

デザインを始めたころ、「なんかごちゃごちゃして見える」と言われたことはないだろうか。情報はちゃんと入っている。色も整えた。なのに、なんか垢抜けない。その原因の大半は、余白の使い方にある。

余白とは何か

余白とは、デザイン上に意図して設けた「何も置かない空間」のこと。

単なる「空き」ではなく、読み手の視線を誘導し、情報を整理し、デザイン全体のリズムをつくるための"能動的な設計"だ。

NOTE

余白は「もったいない空間」ではない。情報を「読ませる」ために必要な設計の一部。

近いものは「仲間」、離れているものは「別グループ」。人はそう自然に読む。これをゲシュタルトの近接の法則という。

たとえば見出しとその本文の間隔は狭く、次の見出しとの間隔は広く取る。それだけで「どこまでがひとかたまりか」が伝わる。余白を変えることは、情報の意味関係を変えることだ。

余白が均等だと、関係性が見えなくなる。意図的に「差をつける」ことが重要。

要素を詰め込みすぎると、すべてが同じ重さに見えてしまう。どこを見ればいいかわからない、圧迫感のある仕上がりになる。

逆に余白を確保すると、重要な要素が「浮き上がって」見える。高級感や信頼感が生まれるのも、この効果による。

NOTE

チラシや広告でありがちな「全部強調したい」という気持ちが、余白を殺す一番の原因。強調したいなら、あえて周りを削ぐ。

余白の数値をバラバラに設定すると、全体がなんとなくチグハグに見える。現場でよく使われる方法が2つある。

4の倍数ルール（4px / 8px / 16px / 32px...）
Webデザインで主流。CSSのグリッドと相性がよく、開発者との連携もスムーズになる。

比率ルール（黄金比・白銀比ベース）
印刷物やロゴ、高品質な誌面設計に向いている。黄金比の使い方はこちらも参考になる。

どちらでもいいが、1つのプロジェクトで混在させないことが大事だ。

コンテンツを並べてから余白を調整する。この順番が、実は余白崩れの原因になりやすい。

現場では逆の順番で考えるほうが安定する。

グリッドを先に設計することで、余白が「揃っているのに窮屈でない」バランスになる。余白計算ツールを使えば、カラム幅やガターの数値をすぐに算出できる。

NOTE

A4印刷物の場合、上下左右の余白は最低でも10〜15mmは確保したい。印刷機の物理的な限界（非印刷領域）もあるので、5mm以下は危険。

余白は多ければいいわけではない。媒体と読者の状況に合わせて調整する。

「上品に見せたい」なら余白を増やす。「お得感を出したい」なら余白を絞る。目的から逆算して考える。

余白は「空き」ではなく、デザインを機能させる設計の一部だ。

余白の数値を手軽に計算したいときは、こちらのツールが便利です。

このサイトの無料ツール

カラム幅・ガター・マージンをまとめて計算できる、デザイナー向けの余白設計ツール。
インストール不要、データはブラウザに自動保存。

jun

グラフィックデザイナー歴8年。印刷・広告・パッケージを中心に活動。制作現場で感じた「ちょっとした不便」を解消するツールを作り、このサイトで公開しています。