スペース | 1人design system advent calender 7日目

7日目はスペースについて。

デザインシステムにおいてスペースをどのように管理するか。

構成要素

UI上の空間を作り出すものをスペースの構成要素と考えると、CSSにおいてはmarginpaddingtopleftなども含めてスペースに該当すると考えられる。flexboxにおけるjustify-contentだったりalign-contentなどは自動的にスペースが割り当てられるものなので、デザインシステムで管理するスペースには該当しない。

スペースに似た要素としてグリッドがあるけど、スペース = グリッドではない。

A grid isn’t a complete spatial system. A grid is a component that uses space, just like every other component. A grid feels different. It’s invisible, comes early, and only does space. But there’s more to space than grid.

Space in Design Systems – EightShapes – Medium

Space in Design Systems – EightShapes – Mediumによると、グリッドはスペースだけで作られた目に見えないコンポーネントのこと。

基数を決める

marginpaddingに無数のルールを持つことはタイポグラフィと同じように避けたい。スペースのサイズがプロダクトの中で多種多様であれば一貫性のないUIになるし、目に見えないスペースは他のデザインシステムの構成要素(カラーやタイポグラフィなど)と比較するとルールの数による管理コストが格段に大きいはず。 なので、スペースのサイズの基準となる基数を設けて、その基数を元に目盛りをつくることでスペースを管理することがデザインシステムでは良さそう。

基数を何にするかはプロダクト次第だけど、望ましいのは8px16pxあたり。16pxは多くのブラウザにおけるデフォルトのfont-sizeと同じ値になる点で相性がいい。

If you haven't set the font size anywhere on the page, then it is the browser default, which is often 16px.

font-size - CSS | MDN

大半のviewportのサイズとも8px16pxだと割切れることが多く相性がいい。

基数を決めたら、基数に対して均一な目盛り(ex: 8, 16, 24, 32, 40, 48, ...)、等比数列の目盛り(ex: 8, 16, 32, 64, ...)、その他のどのような目盛りを用いるかを決めて、デザイントークンとしてスペースを定義する。一定の法則性がないと、UI上の一貫性が無いように見える可能性が高くなるだろうし、管理コストも大きくなってしまうので、どのような目盛りを用いるにしても予測しやすいものであることが望ましいと思う。


7日目はスペースについて書いた。8日目はアイコンについて書く。