目次
1. 8の倍数で設計する理由とメリット
2. 8の倍数でデザインするデメリット
3. 実践と応用
4. 最後に
1.8の倍数で設計する理由とメリット
- デザインの一貫性向上：要素のサイズや余白に秩序が生まれ、デザインの品質が向上します。
- コーディング効率の向上：端数が出にくく、コーディングがスムーズになります。
-
汎用性の高さ：多くのデバイス解像度が8の倍数であるため、幅広いスクリーンサイズに適応しやすいです。
パソコンサイズ 1920px＝240✖️8 、スマホサイズ640px＝80✖️8 - デザインルールの徹底：統一されたルールにより、デザインとコーディングの品質と速度が向上します。
2. デメリット
- 計算の複雑さ：8の倍数を計算する際に繰り上がりが発生し、直感的ではない場合があります。しかし、慣れによって解消可能で、大きな問題ではありません。
3.実践と応用
- よく使う余白サイズ：8px、16px、24px、32px、48px、64pxなど。必要に応じて4の倍数（4px、12px）も活用します。
- 効率的なコーディング：余白サイズを変数として定義し、管理とメンテナンス性を向上させます。
- デザインの秩序維持：数列的な秩序が生まれ、デザインの一貫性が保たれます。
- ツールの活用：IllustratorやAdobe XDで8の倍数のシンボルやガイドを用意し、デザイン作業を効率化します。
4.最後に
8の倍数ルールは、デザインとコーディングの両面で大きなメリットをもたらし、結果的にWebサイトやアプリ全体の品質向上につながります。このルールはデザイナーやエンジニアだけでなく、利用者や運用者にもメリットがあり、サービスの品質や運用性の向上に寄与します。
フロントでエンジニアをしていく上で基礎的なデザイン知識はデザイナーとうまくコネクトしていく上で大切なですね。
参考文献
https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/