ホワイトスペース（余白）のデザイン原則：UIの呼吸感と情報整理を生む設計技術

「何もない空間」であるホワイトスペース（余白・ネガティブスペース）は、UIデザインにおいて最も過小評価されている要素の1つです。余白を適切に使うことで、情報の整理・読みやすさ・ブランドの品質感が劇的に向上します。本記事では、UIデザインにおけるホワイトスペースの役割と、体系的な余白設計の方法を解説します。

ホワイトスペースが果たす役割

情報のグループ化と分離：

ゲシュタルトの近接原則にあるように、近くにある要素は関連しているように見えます。余白の大小で「このテキストはこのボタンに属する」「このカードは独立したコンテンツ」という構造を視覚的に伝えます。

読みやすさの向上：

テキストの行間（line-height）・段落間の余白・コンテンツの最大幅設定は、長文を読む疲れを大幅に軽減します。画面いっぱいに広がる720pxを超える長い行は、視線の折り返しが難しく読みにくくなります。

呼吸感と高級感：

余白が十分なUIはブランドの品質感を高めます。高級ブランドのサイト・アプリが余白を多用するのは、「丁寧さ・余裕・自信」を余白で表現しているためです。

認知負荷の軽減：

余白が少なく情報が密集したUIは、処理すべき情報量が視覚的に多く見え、認知負荷を高めます。適切な余白は「まず何に注目すべきか」を明確にします。

8pxグリッドシステム

なぜ8pxなのか：

現代の主要デバイス（iPhoneからフルHDモニターまで）のディスプレイ解像度は、ほぼすべて8の倍数で割り切れます。また、人間の視覚は小さな不整合（5pxと8px）を認識しにくいため、8pxを最小単位とすることで、細かい数値を気にせず整合性を保てます。

スペーシングスケールの例（8pxベース）：

• 4px: 最小の内部パディング（アイコンとラベルの間など）
• 8px: コンパクトなコンポーネント内のパディング
• 12px: 標準的なコンポーネント内パディング（小）
• 16px: 標準的なコンポーネント内パディング（基準値）
• 24px: コンポーネント間の余白
• 32px: セクション内のグループ間余白
• 48px: セクション間の余白
• 64px: ページセクション間の大きな余白
• 80〜96px: ヒーロー・ランディングセクションの余白

コンポーネント内の余白設計

パディング（内側の余白）の設計：

ボタン・カード・インプットなどのコンポーネント内のパディングは、コンポーネントのサイズ感とタッチターゲットに影響します。

ボタンの標準パディング例:

• 小ボタン: 上下6px / 左右12px
• 標準ボタン: 上下10px / 左右20px
• 大ボタン: 上下14px / 左右28px

カードのパディング：

カード内のパディングは16〜24pxが標準的です。カード内のコンテンツと枠との間に十分な余白を持たせることで、情報が「枠に押しつぶされていない」印象になります。

マクロスペースとミクロスペース

マクロスペース（大きな余白）：

ページセクション間・大きなコンポーネント間の余白。ページ全体のリズムと視覚的な区切りを作ります。ランディングページのセクション間は64〜120pxの余白が一般的です。

ミクロスペース（小さな余白）：

テキストとアイコンの間・ラベルとフィールドの間・リスト項目内の余白など。コンポーネント内部の細かな余白がUIの「丁寧さ」を決定します。

モバイルUIの余白設計

画面端のマージン（セーフエリア）：

モバイルUIでは左右のマージンが重要です。iOSのHIGでは最小16px、実際のアプリでは20〜24pxのマージンが多く採用されています。画面端にコンテンツが貼り付いていると圧迫感が生まれます。

セーフエリア対応：

iPhone Xシリーズ以降のノッチ・Dynamic Island・ホームインジケーターエリアを考慮し、env(safe-area-inset-*) を使ったセーフエリア対応が必要です。

余白を減らしすぎないためのチェックリスト

• [ ] テキストとコンテナの境界の間に十分な余白があるか（最低12px）
• [ ] 関連する要素のグループ間には、グループ内より大きな余白があるか
• [ ] 行間は本文で1.5以上に設定されているか
• [ ] CTAボタンの周囲に十分な余白があり、誤タップを防げているか
• [ ] セクション見出しとそのコンテンツが余白で区別されているか

まとめ

ホワイトスペースは「勇気を持って空けること」で生まれます。スペースを埋めたい衝動に抗い、余白を「デザイン要素」として積極的に活用することで、UIの品質が一段階向上します。8pxグリッドシステムを採用し、マクロ・ミクロのスペーシングを体系的に管理することが、一貫性のある美しいUIの基盤となります。UI ZUKANでは余白設計が効果的に使われているUIサンプルを多数掲載しています。