8ポイントグリッドとは？UIの余白と間隔をそろえる設計方法

8ポイントグリッドは、余白や要素間の間隔、部品の大きさを、主に8の倍数でそろえる設計方法です。まずは8、16、24、32、48を基本にし、細かな調整に必要な値を少数加えます。目的は要素同士の関係を分かりやすくすることであり、文字やアイコンの端まですべて8の倍数に合わせることではありません。

スペーシングの尺度が決めるのは「要素をどれだけ離すか」です。一方、レイアウトグリッドは列、ガター、そろえる位置を整理します。両方を組み合わせられますが、役割は異なります。ページの列がきれいにそろっていても、カードごとに内側の余白が異なると、まとまりのない画面になります。

実際に使う値に絞って尺度を決める

まず、画面でよく必要になる距離を集めます。一般的なWebアプリなら、4、8、12、16、24、32、48、64という組み合わせが出発点になります。8を基本にしつつ、情報密度の高い操作部品では4や12で調整します。8の倍数をすべて用意する必要はありません。また、すでに一貫性のある尺度があるなら、値が違うという理由だけで置き換える必要もありません。

IBM Carbonのスペーシング体系（英語）には、2、4、8をもとにした刻みがあり、部品内部の細かな間隔と、レイアウトの大きな間隔を区別しています。小さな刻みを認めることと、一貫性を保つことは両立できます。

デザイン上の単位が実装時に何を表すかも、開発者と決めておきましょう。Webのデザインで16と指定した距離は、通常、CSSピクセルや相対単位で表現されます。どのディスプレイでも物理的な16ピクセルになるという意味ではありません。Webとネイティブアプリで共通の設計を使う場合は、単位の対応を明確にします。

これらは例のための割り当てで、すべての画面に共通する規則ではありません。コンパクトなデータテーブルと紹介ページでは、適切な情報密度が異なります。共通にしたいのは、距離を選ぶ理由です。

余白で「どれとどれが一組か」を伝える

プロジェクトの概要カードを考えます。タイトル、説明、進行状況、タスク情報、「プロジェクトを見る」ボタンが入っています。すべての要素を16px間隔で縦に並べれば整然としますが、情報のまとまりまでは伝わりません。

タイトルと説明は8pxに近づけます。進行状況とタスク情報は、別の関連情報としてまとめます。本文のまとまりと操作ボタンは24px離します。こうすると、領域ごとに枠線を増やさなくても、概要、補足情報、次の操作を見分けられます。

距離は、レイアウト上のボックスを基準にして一貫して測ります。テキストレイヤーには行の高さがあり、目に見える文字の輪郭より広い領域を持つことがあります。一人がテキストボックスから測り、別の人が文字の下端から測ると、同じ間隔を意図しても入力値が変わります。共通の測り方を部品のレイアウト構造に合わせ、見た目の補正が必要な箇所だけ意図的に調整しましょう。

通常は、意味の区切りが大きいほど間隔も広くします。説明文が自分のタイトルより次のプロジェクトのタイトルに近ければ、すべて8の倍数であっても誤ったまとまりに見えてしまいます。

入れ子の間隔でプロジェクトカードを作る

ここでは幅360pxのカードを使います。左右の内側余白を24pxにすると、内容に使える幅は312pxです。計算を整えるために高さを固定せず、文章が増えた分だけカードが伸びる構成にします。

1. 概要を一組にします。タイトル「Webサイトのリニューアル」と、説明「製品ページを更新し、開発への引き継ぎを準備する。」を配置し、間隔を8pxにします。
2. 補足情報をまとめます。「進行中」と「デザインチーム・12タスク」を配置します。別のプロジェクトとの間隔より狭くし、同じカードの情報だと分かるようにします。
3. 内容全体をまとめます。概要と補足情報の間を16pxにします。同じプロジェクト内にある二つの情報群として扱います。
4. 操作ボタンを置きます。「プロジェクトを見る」を内容から24px離し、左右の端を本文とそろえます。
5. 外側の余白を設定します。カードの各辺に24pxを設けます。上下の見え方は、空の長方形ではなく実際のタイトルとボタンで確かめます。

関連の強い要素の間は8px、内容のグループ間は16px、カードの内側と操作の手前は24pxという小さな階層ができます。同じ数値にも役割があります。その役割を記しておくと、「8ポイントグリッドを使う」とだけ書くより部品を再利用しやすくなります。

次に、タイトルを「海外向け製品の公開に向けたWebサイトのリニューアル」に置き換え、折り返させます。決めた間隔を保ったまま、説明や後続の内容が下に移動するのが望ましい動作です。ボタンが文章に重なるなら、見直すべきなのは間隔の尺度ではなく、サイズの調整方法や固定した高さです。

Pixsoのオートレイアウトにルールを反映する

PixsoのUIデザイン機能では、概要、補足情報、カード全体を入れ子のオートレイアウトで構成します。それぞれの要素間隔と、外側の余白を分けて設定すると、文章が長くなってもレイヤーを一つずつ動かす手間を減らせます。

部品の横には、使用する値、用途、実例を短くまとめて置きます。カードができたらコンポーネントとして再利用し、次の画面でも同じ構造から始めます。ある画面だけ密度を高める必要があるなら、インスタンスごとにばらばらな補正をするのではなく、コンパクト版として設計しましょう。

トークンに名前を付けたり、画面の横に数値を書いたりするだけで、実装のコードと自動的につながるわけではありません。名称と実装方法は開発チームとそろえます。トークンを連携する仕組みがまだなくても、「カードの内側余白＝24、内容から操作まで＝24」と記せば、意図した関係を伝えられます。

必要な例外を少数に絞り、理由を明確にする

8ポイントの考え方は、すべての寸法に適用する規則ではありません。1pxの罫線、見た目を調整したアイコン、既存の文字サイズには、8の倍数以外の値が必要です。ファイル内の数値をそろえるために、罫線を8pxにしたりアイコンを変形したりしないでください。

操作対象の大きさは、製品のアクセシビリティ要件や対象プラットフォームの指針に沿って決めます。8の倍数だからといって、ボタンが十分に大きく、読みやすく、押しやすいとは限りません。操作対象の寸法と、その周囲の間隔は別々に判断します。

細かな刻みが意味を持つ箇所では、4pxや12pxを使います。情報密度の高い一覧で、小さなアイコンとラベルの間が8pxでは近すぎ、16pxでは離れすぎる場合があります。12pxを明文化したほうが、各所で11px、13px、14pxと独自に調整するより維持しやすくなります。

同じ例外が繰り返し現れたら、尺度に正式に加えるべきか、部品の構造を変えるべきかを考えます。偶然できた距離をすべて新しいトークンにすると、不統一な状態に名前を付けただけになってしまいます。

すべてを縮めず、必要な箇所だけ密度を変える

狭い画面では、まずカードを利用可能な幅に合わせ、文章の折り返しを許容します。外側の24px余白によって内容の幅が不足するなら、16pxにしたコンパクト版と比較します。見出しと説明の8px、操作前の24pxは、関係が明確に見えるならそのまま残せます。

モバイル用の倍率をすべての距離に掛けないようにしましょう。せっかく決めた尺度が端数だらけになり、押しやすさを保つべき操作部品まで小さくなるおそれがあります。画面幅の影響を実際に受ける関係だけを調整します。

このカードでは、短いタイトルと長いタイトル、1行と複数行の説明、想定する最も長いボタン名を比較します。グループが分かりやすく、テキストの高さを固定しなくても成立する案を選びましょう。引き継ぎでは、固定する値、密度に応じて変える値、内容に合わせて伸びる箇所を伝えます。