デザインを実装する際に齟齬がうまれやすい「余白」
デザインシステムで策定している新しい余白ルールについて
- 基本8の倍数のpxで定義（maxは64px）
- 56pxは使用しない（64pxと比較時にデザイン的な意味の差が無かった為、64pxを採用）
- 例外的に4px、12pxだけは使用可能とする
- それ以外のpxの余白は認めない
※上記ルールをデザイナーやエンジニア間の共通認識とする
※上記ルール以外でデザインが組まれている場合は、実装時にルールを適用後、デザイナーへ伝える
※今後、eslintでmargin, padding, grid-gapで指定されている値に関して、上記ルールが適用されていなければwarningを表示する仕組み化予定
8px指定のメリットは以下です。
- 要素のサイズや余白に秩序を持たせやすくなり、デザインの品質が向上するため。
デザインルールを徹底しやすくなるため。 - 8の倍数で設計することで端数が発生しにくく、コンテンツのレイアウトや余白の秩序が維持しやすくなり、コーディングが進めやすくなるため。
- デザインとコーディングの両方の品質と速度が高まり、結果的にWebサイトやアプリ全体の品質が向上するため。
- 多くのデバイスの基準となる解像度に8の倍数が用いられており、汎用的なスクリーンサイズの基準に合わせやすいため。
参考：https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/
また、グリッドシステムという概念があるかと思いますが、そのレイアウトを意識的に組もうとすると、デザイナーもエンジニアも負荷が高まるのですが、8px縛りにすることで自然と目に見えないグリッドが発生するので、デザイン・レイアウトに秩序が生まれます。
上記の余白のルールに加えて、ボタンなどUIパーツの高さにも8pxルールを適用しています。
大きいものは、48pxで設計されていて
小さいものは、32pxで設計されています。
ここまで定義すると一見良さそうに見えるのですが、余白や高さだけを定義しただけなので、実際にデザインを作ったり、UIを実装したりする際に、どの様に要素同士を組み合わせて利用するかの具体例が重要なので、下記のようなレベルのサンプルを作成できれば良いと考えています。
参考：https://style.monday.com/?path=/docs/foundations-spacing–page
また、こういったレイアウトを配置する際に、テキスト要素に設定されるline-heightのせいで、
上下の余白が計算しにくいといった問題がありますが、
そういった問題は、before, afterの疑似要素にネガティブマージンを入れれば解消できますので、デザインシステムのTextコンポーネントで吸収しようと思います。
↓こういった余計な余白を・・・
↓こうするということです。これにより、marginの計算が正確になります。
現状のランサーズでは、余白のルールが整理されていないUIが多く、そのメンテナンスを随時行っていかないといけないのですが、まずは、目の前のプロジェクトをReact + デザインシステムの構成で完成させることを目標に頑張っています。
Discussion