スペーシング・グリッドシステムの設計：一貫性のある余白設計
モバイルアプリのスペーシング・グリッドシステムの設計方法を解説。8px基準のスペーシングシステム・マージン・パディング・コンポーネント間の余白の統一、タイポグラフィとの関係まで、一貫性のある美しいレイアウトを作るための余白設計を紹介します。
スペーシング（余白）の設計はUIデザインの質を決定づける重要な要素です。一見地味に見えますが、余白が適切でないデザインは視覚的に不整合で、使いにくいと感じさせます。本記事では、一貫性のあるスペーシングシステムの設計方法を解説します。
8pxベースのスペーシングシステム
最も広く採用されているスペーシングシステムが「8pxベース（8の倍数）」です。Material Designにより広まったこのシステムは、視覚的に調和のとれた余白を効率的に生み出します。
基本スペーシングスケール：
- 2px（極小）：ラベルとアイコンの間隔など
- 4px（超小）：インラインの細かい余白
- 8px（小）：コンパクトなコンポーネント内のパディング
- 12px（中小）：コンポーネント内の標準パディング
- 16px（中）：セクション内の標準的な余白
- 20px・24px（中大）：セクション間の余白
- 32px・40px（大）：画面の主要セクション間
- 48px・56px・64px（特大）：ヒーローエリアなどの大きな余白
コンポーネント別のスペーシング
リストアイテム：
- 高さ：48dp（標準）・56dp（1行テキスト）・72dp（2行テキスト）
- 内部パディング：水平16dp・垂直8dp
カード：
- 外側マージン：16px（標準）
- 内部パディング：16px
- カード間の余白：8〜12px
ボタン：
- 水平パディング：16〜24px
- 垂直パディング：8〜16px（ボタンの高さによる）
- ボタン間の余白：8〜12px
モバイルの画面マージン
スマートフォンのコンテンツエリアの左右マージンは、以下の基準で設定します。
- 最小マージン：12px（コンテンツが狭くならないよう）
- 推奨マージン：16〜20px
- ゆったりした印象：24px
画面端からの余白が少なすぎると、コンテンツが窮屈に見えます。
タイポグラフィとスペーシングの関係
テキストと周囲の要素の間の余白は、タイポグラフィの「ラインハイト」と関連して設計します。
テキストとボタンの間：
テキストのラインハイトの半分程度（通常8〜12px）が自然な間隔です。
見出しと本文の間：
- H1の下：24〜32px
- H2の下：16〜20px
- 本文段落間：16px
デザイントークンでの管理
スペーシングの値をデザイントークン（変数）として管理することで、デザインとコードの間でスペーシングシステムを共有できます。
Figmaの変数機能では：
spacing-xs: 4px
spacing-sm: 8px
spacing-md: 16px
spacing-lg: 24px
spacing-xl: 32px
spacing-2xl: 48px
のように定義して、コンポーネントに適用します。
まとめ
スペーシングシステムの設計は「一度正しく決めれば、あとは一貫して使うだけ」という投資です。8pxベースのシステムを採用し、デザイントークンで管理することで、チーム全体で一貫した余白設計が実現できます。