「余白がしっくりこない」を解決する｜数値の理由づけをする余白設計

2026年08月20日

クリオ

Web制作ディレクター / フロントエンジニア

こんにちは！
今日は「『余白がしっくりこない』を解決する数値の理由づけをする余白設計」についてお話しします。

なぜ「なんか変」と感じるのか

僕も最初のころ、めっちゃこれで悩みました。
デザインを完成させたのに、クライアントさんから「ここの余白、なんか変じゃないですか？」って指摘を受ける。
でもね、具体的に「どこが」「どう」変なのかが説明できなかったんです。

その原因は、実は簡単なんですよ。
余白に「理由」がなかったからです。

現場あるあるなんですけど、多くのデザイナーやエンジニアは余白を「見た目で決める」んです。
画面を見ながら「あ、ここはもうちょっと広げたほうがいいな」みたいに。
これ自体は悪くないんですが、問題は「なぜそこにしたのか」の根拠がないってことなんです。

根拠がないと、何が起こると思いますか？
チェックのたびに変わるんです。
フィードバックをもらって「8pxにしよう」→ 次のレビューで「いや16pxがいい」→ 「やっぱり12px」みたいな感じ。
これほんま疲れます。

解決策は「余白ルール」を先に決めることです。
つまり、デザインをする前に「僕たちはどういう原則で余白を決めるのか」を明確にしておくんです。

具体的には、こんなルールを作ります：

ここで大事なのが「4番目」です。
ほんまにこれが重要やと思うんです。

例えば、こんな感じで理由を持たせるんですよ：

こうすることで、誰がデザインを見ても「あ、これは意図があるんだな」ってわかるんです。
そして修正指示をもらうときも「32pxを48pxに変えた方が空いていいですよ」みたいに、具体的で判断しやすくなるんですよ。

では、実際にどうやってこのシステムを作るか、順を追って説明しますね。

まず最初に「このプロジェクトのベースサイズは何にするか」を決めます。
8pxが業界標準的ですが、プロジェクトによって4pxや12pxにすることもあります。
大事なのは「統一する」ってことです。

次に、「どのレベルの余白が何か」を階層分けします。
僕の現場では、通常3〜4段階にしてます：

例えば、ベースサイズを8pxとした場合：

ここで注目してほしいのが、単純な倍数だけじゃなく、時々「8×5」みたいに不規則に見える数値も入れる、ってことです。
なぜかというと、デザイン的に自然に見える比率があるからです。
1:2:3:5 の比率って、結構バランスよく見えるんですよ。

ここまで決めたら、CSSで変数として定義しておくと最高です。

例えば :root に：

--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--spacing-lg: 40px;

こんな感じで定義して、使う時は margin: var(--spacing-md); みたいに書く。
そうすることで、後で変更する時も一箇所で済みますし、何より「このマージンは何の意図で設定されたのか」が一目瞭然です。

最後が重要なんですけど、このルールをドキュメントに残しておくんです。
Figmaでもいいし、Notionでもいいし、READMEでもいい。
「なぜこの数値にしたのか」という背景も一緒に。

そうすると、後から参加したデザイナーやエンジニアも「あ、このプロジェクトはこういう考え方をしてるんだ」ってすぐに理解できるんですよ。

余白で「なんか変」が続く時は、それはシステムの問題じゃなくて「根拠の欠落」なんです。
きちんと理由づけされた余白ルールを先に作っておくと、デザインの判断が速くなるし、修正も少なくなるし、チーム全体の生産性がぐっと上がります。
ほんまにおすすめです。

最初は「そこまで厳密にやる必要あるのかな」って感じるかもしれません。
でも、中規模以上のプロジェクトをやってると、この仕組みがあると本当に助かるんですよ。

Web制作で困ったことがあったら、またこのブログを覗いてくださいね！

― クリオ