8pxグリッドとは?スペーシングシステムの考え方と使い方を初心者向けに解説

デザインの解説やデザインシステムの資料で、「余白は8の倍数で決める」「8pxグリッド」という言葉を見かけて、なぜ8なのか気になったことはありませんか。

余白の数値をなんとなく決めていると、5px、7px、13pxのように半端な数値が混ざり、全体の統一感が崩れやすくなります。

この記事では、余白を8の倍数で決める「8pxグリッド」とスペーシングシステムの考え方、なぜ8が選ばれるのか、デザインツールやCSSでの使い方を初心者向けに解説します。

スペーシングシステムと8pxグリッドの基本

まずは、スペーシングシステムと8pxグリッドがそれぞれ何なのか、なぜ8という数字が使われるのかを押さえましょう。

スペーシングシステムとは

スペーシングシステムとは、余白の数値を「基準になる単位」とその倍数で体系的に決めておく仕組みのことです。

「スペーシング(spacing)」は英語で「間隔をとること」を意味し、デザインでは要素同士の余白や間隔の設計を指します。

たとえば基準の単位を8pxと決めたら、余白は8px・16px・24px・32pxのように、8の倍数だけを使います。

余白を1つずつ感覚で決めるのではなく、決まった「ものさし」の目盛りから選ぶようにすることで、どこを見ても数値がそろったデザインになります。

8pxグリッドとは

8pxグリッドとは、余白や要素の大きさを8pxの倍数で決めるスペーシングシステムのことで、「8ポイントグリッド」とも呼ばれます。

「グリッド」は格子(マス目)のことで、画面に8px四方のマス目が敷かれていると考え、要素の位置や大きさをその線に合わせていくイメージです(画面を縦の列で区切る「カラムのグリッド」は別のもので、グリッドと余白の関係とはで解説しています)。

GoogleのデザインシステムであるMaterial Designでは、部品(ボタンやカードなど)をスマートフォン・タブレット・パソコンのいずれでも8dpの正方形のグリッドにそろえるとしています(Material Design「Spacing methods」(英語))。

dpは、Androidアプリで使われる長さの単位で、画面の細かさ(解像度)が違っても、見た目の大きさがほぼ同じになるように決められています。
Webのpxと同じ考え方の単位なので、Webデザインでは「8dpは8px」と読み替えて問題ありません。

日本でも、デジタル庁のデザインシステムが、一般的に使われることの多い余白の基準単位として8pxを挙げています(デジタル庁デザインシステムβ版「余白(概要)」)。

次の見本は、8pxのマス目を背景に敷いて、同じカードを作ったものです。

OK:余白も大きさも8の倍数(8px・16px・32pxなど)。要素の端がマス目の線にそろう

NG:余白も大きさも5px・11px・13pxなど半端な数値。要素の端がマス目からずれ、間隔もそろわない

OKの見本では、見出し(濃い帯)・本文(薄い帯)・ボタン(黄色)の端がすべてマス目の線に乗っていて、間隔も8pxか16pxのどちらかになっています。

NGの見本は一見似ていますが、本文の行同士の間隔とボタンの上の間隔が近い値で、どこが区切りなのかがはっきりしません。

実際の画面にはマス目は表示されませんが、このような小さなずれの積み重ねが「なんとなく整っていない」印象につながります(間隔がそろうことで生まれる規則正しさは余白のリズムとはで解説しています)。

なぜ8の倍数が使われるのか

8の倍数が選ばれる理由として、よく挙げられるのは次の3つです。

半分にしても割り切れる:8は8→4→2→1と、半分にし続けても小数になりません。
「この余白を半分にしたい」というときにも、きれいな数値のまま調整できます。
画面の表示倍率が変わっても半端な数値になりにくい:最近のスマートフォンやパソコンの画面はとても細かい点(ドット)でできていて、デザイン上の1pxを、点1.5個分・2個分・3個分などに引き伸ばして表示します。
8pxなら1.5倍でも12個、2倍でも16個の点にちょうど収まりますが、たとえば5pxを1.5倍すると7.5個になります。
点を半分だけ光らせることはできないため、はみ出した部分は中間の色でごまかして表示され、輪郭がぼやける原因になることがあります。
段階の差がはっきりする:8・16・24・32と目盛りが進むので、隣り合う段階の違いが目で見て分かりやすく、「12pxと14pxで迷う」ようなことが起きにくくなります。

ただし、8でなければいけないという決まりはなく、大切なのは「1つの基準を決めて、その倍数で統一すること」です。

8pxは多くのデザインシステムで使われているため、ほかの人と共通の感覚で話しやすく、初心者が最初に選ぶ基準として扱いやすいという利点があります(Webのpxが画面の点とどう対応するかは文字サイズとはの記事でも解説しています)。

細かい部分は4pxを補助に使う

8pxの倍数だけでは間隔が大きすぎる細かい部分には、半分の4pxを補助の単位として使います。

Material Designでも、アイコンや文字、部品の中の一部の要素は4dpのグリッドにそろえてよいとしています(Material Design「Spacing methods」(英語))。

たとえば、アイコンとその横の文字のあいだ、ラベルと入力欄のあいだなど、ごく近い関係のものに4pxを使うと、窮屈すぎず離れすぎない距離を作れます。

8pxグリッドの使い方

ここからは、8pxグリッドを実際のデザインに取り入れる手順を、使う数値の決め方、デザインツール、CSSの順に見ていきます。

使う数値の一覧(スケール)を決める

8pxグリッドを使うときは、最初に「実際に使う数値の一覧」を決めておきます。

この一覧をスケール(目盛り)と呼び、8の倍数を全部使うのではなく、よく使うものだけを選んでおくのがポイントです(余白を段階に分けてルールにする考え方は余白の間隔のルールとはで解説しています)。

数値	長さのイメージ	使う場所の例
4px(補助)		アイコンと文字、ラベルと入力欄
8px		見出しと本文、小さな部品の中
16px		段落同士、カードやボタンの内側の余白
24px		カード同士、入力欄のまとまり同士
32px		ブロック同士
64px		セクション同士

表の「使う場所」は一例で、サイトの文字の大きさや雰囲気によって変わります。

小さい数値は細かく、大きい数値は飛び飛びにすると、近い関係と遠い関係の差がはっきりします。

次の見本は、同じ入力フォームの余白を、近い値(10px・12px・14px)で作ったものと、8pxグリッドのスケールから選んだもの(4px・8px・24px)です。

お名前

例:山田花子

メールアドレス

確認メールを送ります

NG:10px・12px・14pxと近い値ばかりで、補足文が次の項目のラベルにも見える

お名前

例:山田花子

メールアドレス

確認メールを送ります

OK:ラベルと入力欄は4px、入力欄と補足文は8px、項目同士は24pxとスケールから選んでいる

NGの見本は余白の差が2pxずつしかないため、どの要素同士がまとまっているのかを目で区別できません。

8pxグリッドのスケールから選んだOKの見本では、「お名前」の項目と「メールアドレス」の項目が、それぞれひとまとまりに見えます。

デザインツールで8pxグリッドを使う

Figmaなどのデザインツールでは、いくつかの設定を変えるだけで、8pxグリッドに沿った作業がしやすくなります。

矢印キーで動く量を8にする:Figmaでは、要素を選んでShiftキーを押しながら矢印キーを押すと、初期設定では10ずつ動きます。
環境設定のナッジ量(英語表示では「Nudge amount」)で、この値を8に変えておくと、8pxずつ動かせるようになります(Figma ヘルプセンター「Set small and big nudge values」(英語))。
オートレイアウトの余白を8の倍数にする:オートレイアウト(中の要素を自動で並べ、余白を数値で管理できる機能)の「パディング」と「間隔」を、スケールの数値で入力します(Figma ヘルプセンター「オートレイアウトのガイド」)。
8pxのマス目を表示する:フレームを選び、右サイドバーの「レイアウトガイド」から「均等グリッド」(正方形のマス目)を追加できます。
マス目の大きさは初期設定では10pxなので、8に変更します(Figma ヘルプセンター「レイアウトガイドを作成」)。
8に変えておくと、要素の端がマス目の線にそろっているかを目で確かめられます。

要素の幅や高さも8の倍数にしておくと、余白と組み合わせたときに端がそろいやすくなります。

CSSでスペーシングシステムを使う

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

CSSでは、スケールの数値をカスタムプロパティ(CSSの中で使える変数)としてまとめて定義しておくと、デザインと同じ数値を使い続けやすくなります(MDN「CSS カスタムプロパティ(変数)の使用」)。

:root {
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
}

.form-item {
  margin-bottom: var(--space-24); /* 項目同士のあいだ */
}

:rootはページ全体(いちばん外側のhtml要素)のことで、ここに書いた変数はページのどこからでも使えます。
--space-24: 24px;で「–space-24」という名前に24pxを登録し、使う場所ではvar(--space-24)と書いて呼び出します。

余白を指定するときはvar(--space-24)のようにスケールの名前で書き、数値を直接書かないようにすると、スケールにない半端な数値が紛れ込みにくくなります(CSSで内側と外側の余白を指定する方法はCSSのmarginとpaddingの違いとはで解説しています)。

文字サイズをremで指定しているサイトでは、余白もremで書くことがあり、ブラウザの初期設定の文字サイズ(多くは16px)のままなら0.5remが8px、1remが16pxにあたります。

実践のポイント

8pxグリッドを使い始めたときにつまずきやすい点と、よくある疑問をまとめます。

注意点・よくある間違い

文字サイズまで無理に8の倍数にしようとしてしまうことがあります。
本文16pxや注釈14pxのように、文字サイズは読みやすさを優先して決めるのが一般的です。
8pxグリッドは、主に余白や部品の大きさを決めるためのものと考えましょう。
8の倍数でさえあればよいと考え、8・16・24・32・40・48…と全部の数値を使ってしまうことがあります。
使う数値が多すぎると、結局どれを選ぶかで迷うことになります。
よく使うものを数種類に絞って、スケールとして決めておきましょう。
数値はグリッドどおりなのに、見た目では余白がそろっていないように感じることがあります。
たとえば文字は、行の高さの中に上下のすき間を含みます。
16pxの文字を行の高さ24pxで表示すると、文字の上下に4pxずつ目に見えないすき間ができるため、数値上は8pxでも、実際の文字の端までの距離はもっと広く見えます。
グリッドはあくまで出発点と考え、最後は実際の見た目で確かめましょう。

よくある質問

Q. 8pxではなく、10px単位で決めてはだめ?
A. だめではありません。
大切なのは、1つの基準を決めてサイト全体で統一することです。
ただし10は半分にすると5、さらに半分にすると2.5と小数になるため、細かい調整では8のほうが扱いやすいとされています。
Q. 4pxグリッドと8pxグリッドは何が違う?
A. 基準の単位が4pxか8pxかの違いで、考え方は同じです。
4pxを基準にすると細かく調整できる一方、選べる数値が増えて迷いやすくなります。
初心者は8pxを基本にし、細かい部分だけ4pxを補助で使う方法から始めるのがおすすめです。
Q. 画面の大きさが変わっても、同じ数値を使っていい?
A. スケール自体はそのままで、場所ごとにどの数値を使うかを画面に合わせて変えるのが一般的です。
たとえばセクション同士の余白を、パソコンでは64px、スマートフォンでは32pxにするなど、スケールの中で一段階小さい数値を選びます。