space

余白

余白は最も安価な素材であり、生成されたインターフェースが最も無駄にしているものです。経験豊富な人の目が最初に気づき、モデルが最後まで修正できないのが、不均一な余白です。

スケール

すべてを4pxのグリッドに配置します。使いやすい値は次のとおりです。

2 · 4 · 6 · 8 · 10 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 96

このリストから値を選び、その中間の値は使わないでください。14pxが「ちょうどよく見える」なら、隣接する要素のほうに問題があります。そこを直せば、12または16がちょうどよく見えるようになります。

関連するものは、関連しないものより近くに配置します。ラベルと入力欄の間は6。フォーム内の2つの入力欄の間は16。フォーム内の2つのセクションの間は32です。レベル間の比率によって、線を使わずに構造を見せられます。

密度

コンポーネントごとではなく、表示領域ごとに決めます。

表示領域	行の高さ	内側のパディング	グループ間
高密度のリスト／テーブル（ツール、管理画面）	28–32px	水平方向に8–10px	24px
ゆとりのあるリスト（設定、フィード）	40–48px	12–16px	32px
読み物	—	0。行長で調整します	40–64px
マーケティング	—	24–40px	96px以上

行の高さが48pxの高密度ツールは、おもちゃのように感じられます。行の高さが28pxの設定ページは、スプレッドシートのように感じられます。それぞれの項目を見る時間の長さに合わせて密度を調整してください。

幅

• アプリのフレーム：最大1120–1280px、中央揃えにします。枠線や背景色の変化で境界を見せ、ページ上で独立したオブジェクトとして認識できるようにします。
• 読み物の行長：55–70ch。テキストブロックに設定します。
• サイドバー：240–280px。それより狭いとラベルが省略され、広いとコンテンツ列が圧迫されます。
• フォーム：400–520px。幅1400pxの画面でテキスト入力欄を全幅にするのは誤りです。
• ダイアログ：400px（確認）、520px（フォーム）、720px（コンテンツ）。デスクトップでは全幅にしないでください。

マージンではなくギャップ

兄弟要素間の余白は親の役割です。FlexやGridのレイアウトではgapを使い、子要素には外側のマージンを持たせません。これにより、「最後の子に余分なマージンが付く」問題や「最初の子の位置が高すぎる」バグを防げます。また、コンポーネントをどこに配置しても余白が一緒に持ち込まれません。

マージンを使うのは1つの場合だけです。文章の流れの中で、あるブロックとその後に続く内容を分ける場合です（記事の段落に対するmargin-bottom）。

配置

• テキストはテキストに揃えます。タイトル、説明、その下の行の左端を同じx位置に揃えます。アイコンはその線の内側ではなく、外側に置きます。
• 行内のアイコンとテキストは、アイコンの視覚的な中心に揃えます。これは通常、幾何学的な中心より1px上です。translateY(-0.5px)またはmargin-top: -1pxで微調整し、テキストのパディングでは調整しないでください。
• 列内の数値は右揃え、テキストは左揃えにします。比較するものを列の中央に揃えないでください。
• 1行に並ぶボタンのベースラインと高さを揃えます。プライマリボタンとセカンダリボタンの高さは必ず同じにします。
• 幾何学的な配置より視覚的な配置を優先します。再生アイコンは中央より少し右にあると中央に見え、角丸のピル内のテキストは少し左にあると中央に見えます。

リズム

セクション間の垂直方向の余白は、区切りのレベルが上がるほど大きくします。

• セクション内の行：0（行自体で余白を確保）または2–4px
• セクションの見出しとその行の間：8–12px
• セクション間：24–32px
• ページ見出しと最初のセクションの間：28–40px

一貫したリズムが、長いページを落ち着いた印象にします。変化を付けるのはコンテンツであり、余白ではありません。

レスポンシブ対応

まず流動的にし、その後でブレークポイントを追加します。

1. メディアクエリを追加する前に、コンテンツを折り返し、グリッドを縮めます（repeat(auto-fill, minmax(280px, 1fr))）。
2. ブレークポイントは最大2つか3つにし、実際に崩れる箇所に合わせます。サイドバーが折りたたまれる位置（約1024px）、列が縦に並ぶ位置（約640px）などです。フレームワークにあるからという理由で「sm/md/lg/xl/2xl」を使わないでください。
3. 幅が異なる領域に置かれるコンポーネントには、コンテナクエリを使います。カードはビューポートを意識するべきではありません。
4. 画面端の余白：スマートフォンでは16px、デスクトップでは20–28px。0にはしないでください。
5. 水平方向にスクロールするのは、カルーセルやoverflow-x: autoを指定したコードブロックなど、スクロールすることを意図したものだけです。

375px、768px、1024px、1440pxでテストしてください。その後、これらの間でゆっくりサイズを変え、急な変化がないか確認します。

スティッキー配置と固定配置

• スティッキーヘッダーは44～52pxで、半透明（80%のbackground: color-mix(...)＋backdrop-filter: blur）にし、下辺にボーダーを付けます。下のコンテンツには高さに合わせたscroll-margin-topを設定し、アンカーがヘッダーの下に表示されるようにします。
• スティッキーサイドバーはposition: sticky; top: 0; height: 100dvhとし、オーバーフロー用の独自スクロール領域にはoverscroll-behavior: containを設定します。
• スマートフォンの固定下部バーは、ホームインジケーターより上に配置します。padding-bottom: env(safe-area-inset-bottom)を指定します。
• スマートフォンでは、56px未満のバー以外は、読書中のコンテンツの上に固定表示しません。

スクロールコンテナー

• 内部スクロール領域は明示的に指定します（フレックスの子要素にmin-height: 0、overflow-y: autoを設定）。見分けやすい境界を設け、overscroll-behavior: containを指定します。
• どの領域でも、一度にスクロールする軸は1つだけにします。
• スクロール可能だとひと目で分からない領域には、手がかりが必要です。下端にフェードを付けるか、境界でコンテンツが見切れていることを分かるようにします。

余白を活用する

フォームが1つあり、その周囲に十分な余白があるページは、焦点が定まっている印象になります。同じフォームでも、サイドバーやヘッダーに押し込まれていると雑然として見えます。要素をまとめるためにカードの境界線を追加する前に、グループの内側の余白を減らし、周囲の余白を増やしてみてください。

ある領域が「空いているのにしっくりこない」と感じる場合、たいてい問題なのは余白ではなく幅です。コンテンツの幅が、その領域より狭すぎるのです。領域を制約し、埋めようとしないでください。

カードのグリッド

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))をgap: 8–16pxと組み合わせます。カードの高さは各行で揃え（align-items: stretch）、カード内のコンテンツは上揃えにし、アクションはmargin-top: autoで下端に配置します。アクションのあるものに、メイソンリーレイアウトは使わないでください。

余白への配慮が足りないサイン

サイン	対処法
13px、18px、22px、30pxのような値	スケールに合わせます
すべての要素間の余白が16px	階層を付けます。内側は8、要素間は16、グループ間は32
コンポーネントにマージンを設定	親要素にgapを設定
3つの要素をまとめるためにカードの境界線を付ける	周囲に余白を設ける
デスクトップで入力欄が全幅	400～520pxにする
ブレークポイントが5つ	実際に崩れる箇所に2つ設定
パディングでアイコンを垂直方向に中央揃え	視覚的な中心に合わせ、1px調整
ブレークポイントでコンテンツが跳ねる	流動的なグリッドを使い、ブレークポイントを減らす

カタログから

• Ahmad Shadeed — インタラクティブな図を使った、CSSレイアウトの詳細な解説。
• Every Layout — 組み合わせて使うレイアウトの基本要素。
• Utopia — 流動的な余白と文字サイズのスケール。
• Refactoring UI — 余白と階層について、図で解説。
• Refero、Mobbin — リリース済みアプリの情報密度の設定例を確認できます。
• 詳しくはstealth.pm/learnをご覧ください。