余白のレイアウトパターン

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

基本的な考え方

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

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

種類

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

パディング(Padding)

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

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

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

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

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

基本的に、セクション内でFormGroupなどを複数配置するようなパターンで使用し、中の要素がつまったり狭くなることが想定されるため、16pxを使用します。

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

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

ダイアログ(Dialog)の余白

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

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

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

マージン(Margin)

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

具体的な配置のルールは次の通りです。

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

セクション(Heading/sectionTitleで括られるエリア)同士の間

32pxを使用します。

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

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

24pxを使用します。

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

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

16pxを使用します。

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

セクション内の要素(Base内の見出しで括られるエリア)同士の間

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

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

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

  • アイコンやラベルといった小さい要素を組み合わせる場合は、基本的に8pxを使用します。
  • InfomationPanel)やFormGroupなどのように、ブロックの見出しやInputにアイコンやラベルを複合的に組み合わせる場合は、16px8pxを段階的に組み合わせて使用します。
  • インラインテキスト内でテキストリンクにアイコンを付加する場合は、4pxを使用します。

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

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

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

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

© 2021, SmartHR, Inc.