余白の取り方

マージン(Margin)やパディング(Padding)などの余白のパターンをシーン別にまとめています。

基本的な考え方

余白は、要素間の距離に差をつけてかたまり(チャンク)を形成することで、要素同士の並列・内包などの関係性を視覚的に表現するために使います。

余白の値は、原則として8の倍数を使用し、画面の外側から内側にいくにつれて小さい値を段階的に使います。

種類

以下の余白を定義します。

  • パディング(Padding)
  • マージン(Margin)

パディング(Padding)

原則として24pxとします。縦長・横長になった場合や、中の要素がつまって狭くなってしまうときは、16pxとします。

コンテンツエリア(Base)の余白

対象エリア天地余白左右余白
コンテンツ全体24px24px

スクリーンショット:Baseのパディングのパターン

コンテンツエリア内のグループ(BaseColumn)の余白

基本的に、セクション(主にセクションタイトルで括られるエリア)内でFormGroupなどを複数配置するようなパターンで適用し、中の要素がつまったり狭くなることが想定されるため、16pxとします。

対象エリア天地余白左右余白
コンテンツ全体16px16px

スクリーンショット:BaseColumnのパディングのパターン

ダイアログの余白

見出しとボタンエリアは横長になるため、天地左右16pxのほうがすわりがよいですが、本文エリアの読み開始位置と一致させるため、左右を24pxとし、天地に16pxとします。

対象エリア天地余白左右余白
見出しエリア16px24px
本文エリア24px24px
ボタンエリア16px24px

スクリーンショット:Dialogのパディングのパターン

マージン(Margin)

セクションやブロックの見出しレベルや階層を下げるにつれて、32px24px16pxの順で段階的に使います。 ただし、段階的に使用した結果、間隔がつまったり開きすぎてしまうなど視覚的なグルーピングが不適切と判断される場合は、段階を超えて適切な大きさを使います。

具体的な配置の基準は次の通りです。

  • 原則、要素に対して上方向に適用する。
  • 同じ意味階層となる要素同士は、ぞれぞれ同じ大きさのマージンを適用する。

セクション同士の間

32pxとします。

スクリーンショット:セクション同士のマージンのパターン

画面タイトルエリアとセクションの間

24pxとします。

スクリーンショット:画面タイトルエリアとセクション間のマージンのパターン

見出しと本文(またはBase)の間

16pxとします。

スクリーンショット:タイトルと本文間のマージンのパターン

セクション内の要素同士の間

見出しレベルやコンテンツの階層を下げるにつれて、32px24px16pxの順で段階的に適用します。

スクリーンショット:セクション内の要素のマージンのパターン

アイコンやラベルなどの小さい要素間

アイコンやラベルといった小さい要素を組み合わせる場合は、基本的に8pxとします。

  • InfomationPanelFormGroupなどのように、ブロックの見出しやInputにアイコンやラベルを複合的に組み合わせる場合は、16px8pxを段階的に組み合わせて適用します。
  • インラインテキスト内でテキストリンクにアイコンを付加する場合は、4pxとします。

スクリーンショット:アイコンやラベルなどの小さい要素間

ダイアログの本文エリア内の要素間

見出しレベルやコンテンツの階層を下げるにつれて、32px24px16pxの順で段階的に適用します。

スクリーンショット:タイトルと本文間のマージンのパターン