UIの余白と密度設計の原則
余白(whitespace)は空きスペースではなく、視覚的なリズムを作るデザイン要素です。十分な余白はコンテンツを読みやすくし、階層構造を明確に伝え、高級感と信頼感のあるブランドイメージを形成します。
一方、ダッシュボードやデータテーブルのように情報密度が重要なUIではコンパクトな余白が必要です。重要なのはコンテンツの目的と使用状況に合った密度を選ぶことです。
8pxグリッドシステムの活用
すべてのspacing値を8の倍数(4, 8, 16, 24, 32, 48, 64px)に統一すると、デザインの一貫性が高まり開発者との連携がしやすくなります。Figma、Material Design、Tailwind CSSはすべてこのシステムを基盤としています。
よくある質問
余白が多いと情報が少なく見えませんか？
余白が十分あるほど読みやすく高級感が増します。ダッシュボードのように多くのデータを一画面に表示する場合のみコンパクトな密度が必要です。
適切なline-heightはどのくらいですか？
本文は1.5〜1.7、見出しは1.1〜1.3、ボタン/ラベルは1.2〜1.4が適切です。
8pxグリッドシステムとは？
すべてのspacing値を8の倍数に設定するシステムです。クリーンにレンダリングされ、開発者との連携がしやすくなります。