余白

余白のキホン

8の倍数のサイズを用いて余白を確保してください。（最小・中間が必要な場合は4, 12pxを使用）

8の倍数を使用する理由は、多くのディスプレイの解像度は8の倍数で定義されているためです。（1366*768や1920*1080などは8で割り切れるものとなっている. スマホは例外多数）
また8を基準にすると倍数を整数にすることができます。（8*1.25=10, 8*1.5=12など。10を基準にすると10*1.25=12.5など少数が生まれてしまう）

上記の余白を用いて要素間の情報に関係性があることを伝える、もしくは各要素を目立たせる適度な余白を設けてください。各要素間の余白について下記にある設定方法をご覧ください。

アイコンとテキスト

アイコンとテキストが合わせて1つの情報として見えるよう、適切な余白が必要です。
デザインシステム内のテキストサイズリストから用いる場合は、下記の対応表を確認し余白を選択してください。

もしテキストサイズリストにないサイズを使用する場合は、テキストの高さ（px数）を基準として、0.5～0.7倍程度の余白を設けてください。（アイコンのサイズや配置の縦横に関係なく）
上記の計算方法をもとに8（もしくは4）の倍数で設定することを推奨します。

またレスポンシブなどで余白が崩れないようにもこの通りに表示されるよう実装してください。
そのために相対的な単位のemや%で計算・設定してください。

• 

  OK

• 

  NG

  空きすぎ、狭すぎの事例
  情報の結びつきが分かりづらくなったり、文字が読みづらくなる

画像とキャプション

画像に続くテキストが画像の説明であることが伝わるように、テキストの高さ（px数）を基準として、1倍程度の余白を設けてください。
また画像に続き見出しと本文が続く場合は、見出しと本文間の余白の方が小さくなるよう設定してください。

• 

  OK

• 

  NG

  空きすぎ、狭すぎの事例
  見出しと本文間の余白の方が広いため、本文テキストが画像の説明であることが伝わりにくい

見出しのアイソレーション

見出しが適度に目を引くように、見出しの高さを基準として、最低0.5倍以上の余白を枠と見出しの間に設けることを推奨します。