WordPressの構築の授業の際に、余白設定についてよく質問されるので、参考になるリンク先と参考点を引用させていただきます。
画面サイズの割り切れる数の8の倍数で行うのがよいようです。
「余白としてよく使われるのは、8px、16px、24px、32px、48px、64px、96px、128px、160px、192px、などです。8の倍数ではないですが、4px、12pxも使われます。」
汎用的なスクリーンサイズの基準に合わせやすい
スクリーンサイズでシェア率が比較的高いものの例として1920×1080pxや1280×720pxなどが挙げられますが、これらも8の倍数で割り切れます。基準となる画像サイズが8の倍数だと設計しやすいメリットがあります。
余白設計を決めておく
8と3の公倍数である48の倍数（48px, 96px, 192px, 480px, 960pxなど）は、コンテンツ幅を分割する際に端数が出にくいため重宝します。
4の倍数の使用条件
4の倍数は細かな調整が可能ですが、変数が多くなり管理しづらくなるデメリットもあります。まずは8pxベースで設計し、必要な時だけ12pxや20pxなどの追加を検討しましょう。
共有用にルール化しておくポイント
- 基本は8の倍数で定義
- 56pxは使用しない（64pxと大差ないため）
- 例外的に4px、12pxのみ使用を許可
- それ以外の端数余白は使わない
引用元・関連リンク
余白設計について:基本的な考え方
https://araishinnosuke.com/design/entry-53.html
8の倍数ルールでデザインする理由とメリット・デメリット
https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/
コメント