『なんとなく…ここの余白はキリのいい数値で15pxでいいか…。』

Webデザインにおける、この「なんとなく」は局所的な見た目のバランスを見て決められた、手抜きと言われても仕方がない数値です。

「なんとなく」を繰り返すことにより、デザインはまとまりがない上、ルールがない設計はチーム内でも共有しにくく、結果的に作業効率が下がってしまいます。

今回は、Figmaで「余白」を整えて一気にプロっぽく見えるデザインに仕上げる「8pxルール」をご紹介します。

※当記事で使用するFigmaの余白（スペーシング）とは

• 1.要素間の間隔の数値を設定する「間隔（gap）」
• 2.要素の内側の余白を設定する「パディング（padding）」

の2種類のことを指しています。

1.Webデザインにおける8pxルールとは？

8pxルールって何？

例：8px / 16px / 24px / 32px / 40px …

上記のように一定の刻みで余白や要素を作ることで、画面全体に一貫したリズムが生まれます。

8pxルールのメリット

8pxルールに基づいて余白サイズを決定していくと、自然と整った画面になると共に、以下のメリットがあります。

• デザイナーが余白設計の数値を迷うことがなくなる

• 修正時もルールに従うことで効率UPに

• デザイン・コーディングなど異なるチーム間でも共有しやすい

なんで8pxなの？

ルール化するのであれば、計算の簡単な5pxや10pxでもいいんじゃない…？
そう思う方もたくさんいると思います。
8pxの主なメリットは2つです。

• 「8」は拡大・縮小しても整数で描画が安定する

• 「8px」は人間が「差」を認識しやすい最小単位で、視覚的な差が認識しやすい

8は「2の倍数」なので、拡大・縮小しても破綻しない

たとえば15pxで余白を設定したとします。
レスポンシブ対応でスマホ版デザインでは余白を÷2にしたいとき…

15÷2＝7.5

と小数点が発生してしまいます。
「小数点以下のピクセル」は物理的には存在しないので、入力された小数点以下のピクセル数値はブラウザによって表示サイズが異なる場合があるので推奨されません。

80px÷2＝40px
72px÷2＝36px
64px÷2＝32px
…
8px÷2＝4px

8の倍数だと、どんな値でも÷2がすべて整数になり、レスポンシブ対応Webページの余白設計が格段に楽になります。

8pxは人間が“差”を認識しやすい最小単位

なぜ8pxなのか、理由の2つ目は8pxが視覚的に違いを認識できる最小ラインだからです。

「少し大きくしたい」・「少し狭くしたい」
この「少し」の単位を「8px」という数値で管理すると、違いを明確に認識できて、なおかつ中途半端なサイズが発生しません。

そんな魔法の数値が「8px」なのです。

8の倍数しか使っちゃいけないの？

例えば、24pxの余白があるとします。
レスポンシブ対応の際に半分の12pxにする。
あれ…？12ってそういえば8の倍数じゃないですよね。

狭い余白の設定時には8の倍数だけでは対応できない場合もあるので、その場合は例外として4px、12pxを使用することもあります。

8の倍数は4の倍数ということで、4の倍数である4px、12pxを部分的に使用することは、ものすごくルールから逸脱しているわけではない、と考えます。

• スマホ表示の際、16pxだと広すぎるけど8pxだと狭い…
  →12px

• 小さいアイコンとテキストの間の余白で、8pxでは離れすぎてる…
  →4px

のように設定します。

ただし、
基本は8pxルールだけど、必要な箇所だけ4pxと12px（4の倍数）も使えるという基本ルールを覚えておきましょう。
ここは違うデザインだから5px、あっちは3px…と混在してしまうと「なんとなく」が復活してしまいます。

2.Figmaで8pxルールを使う方法

ここまで、レイアウトの「8pxルール」を紹介してきましたが、実際にFigmaで「8pxルール」を設定してみましょう。
設定するのは以下の3つです。

• オートレイアウトで要素間の余白を8px単位で設定

• パディングで内側の余白を8px単位で設定

• フレーム単位での余白の設定

オートレイアウトの間隔を8px単位で設定する

複数の要素を選択してデザインパネル内「レイアウト」の横の＋ボタン、または右クリックでオートレイアウトを追加（Shift＋A）してオートレイアウトの設定画面を表示させます。

まずは子要素間の余白をオートレイアウトで8px単位で最小単位から設定します。
今回はアイコンとテキストの間隔を最小単位として設定していきます。

パディング（内側余白）を8px単位で統一する

要素間の間隔を設定後は要素内の内側の余白であるパディングを設定していきます。
今回はボタン内のパディング設定を例に説明します。
ボタンフレームを選択して、左右・上下のパディングを設定します。
他のボタンにも適用できるように、コンポーネントを作成してこの設定を使い回していきます。

フレーム単位で余白を揃える

最後に、セクション間の余白を階層ルールに従って設定していきます。
セクション間の余白はセクション内の間隔より広くなります。
セクションごとの「まとまり」が明確になるように設定しましょう。

3.Figma初心者がやりがちなミス

余白がバラバラになっている

• 階層を考えず、なんとなくで設定する

• 同じレイアウトなのに、余白が違う

• テキストの増減で余白を変更してしまう

「なんとなく」「ちょっと」で余白を決めていると、同じ役割なのに数値が違うことで一体感がなくなり、ルール化されていないことで考える時間が生まれます。

また、テキストの量の変更でバランスが悪くなるようなデザインは、もともとオートレイアウト設定が整っていない可能性があります。
例外を作りすぎてしまうと違和感が生じる原因になってしまうので注意が必要です。

オートレイアウト機能を使っていない

そもそもオートレイアウト機能を使っていないと、修正時に余白や配置の再設定が必要になります。

複数行のテキストが含まれるオートレイアウトでは、成り行き改行（自動折り返し）ができるように作成しておくと、修正に強いデザインになります。

セクション間の余白が弱い

セクション間の余白がセクション内の間隔と同じなど、まとまりを意識できていない余白設定では、ページ全体を見たときに階層の概念が消えてしまいます。

階層を意識してセクション間の余白を考えましょう。

まとめ.8pxルールは「余白を迷わなくする仕組み」

なぜWebデザインは余白で「プロっぽさ」が決まるのか？
それは余白が「見た目の美しさ」と「情報の整理」を同時に担っているからです。

デザインの印象は、フォント、配色、キャッチコピーなども重要ですが、「余白の一貫性」がないと、どんなに素敵なフォントや配色でも人は美しいと感じません。

• 人は「規則的な間隔」を無意識に美しいと感じる

• 余白の値によってグループのまとまりを感じさせてくれる

• 「グループのまとまり」が整うと、視線誘導が自然になる

つまり、余白は「見た目」と「使いやすさ」の両方に直結するのです。

8pxルールは「余白を迷わなくする仕組み」です。
迷わず効率的にデザイン、画面設計ができる8pxルールをぜひ活用してみてください。