８の倍数ルールとは？
webデザインについて調べていると見かけるのが「８の倍数」という言葉。
webデザインにどんな関係があるの？と思ったので調べてみました。
８の倍数ルールとは、
Webサイトを作る際に要素の大きさを8の倍数ピクセルで設計することなんだそうです。
要素とは、コンテンツ幅、ボタンの大きさ、余白の大きさ、バナーの大きさ、メインビジュアルの大きさなど…サイズ指定が必要なものは全て対象となるんですね。
確かにデザインを作るとき、様々な要素のサイズ指定を行いますよね。
大体慣れてくるとすぐ頭にサイズが浮かびますが、最初のうちはこの計算が意外と苦戦しますよね…
８の倍数ルールによるメリット
今回はこちらの記事に書かれていたメリットを引用しております。
・要素のサイズや余白に秩序を持たせやすくなり、デザインの品質が向上するため。
・デザインルールを徹底しやすくなるため。
・8の倍数で設計することで端数が発生しにくく、コンテンツのレイアウトや余白の秩序が維持しやすくなり、コーディングが進めやすくなるため。
・デザインとコーディングの両方の品質と速度が高まり、結果的にWebサイトやアプリ全体の品質が向上するため。
・多くのデバイスの基準となる解像度に8の倍数が用いられており、汎用的なスクリーンサイズの基準に合わせやすいため。
https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/#toc-1
なるほど…デザイナー的にはサイズ指定が必要な場面で迷うことがなくなり、考える時間が削減され、作業効率UPに繋がる。
そしてコーダーも「端数が出にくい」「制作の速度UP」など同じように良い影響があるんですね。
しかも、「多くのデバイスの基準となる解像度にも８の倍数が用いられている」というのは言われて気付きました！
確かにフルHD（1920×1080）、HD（1280×720）はそれぞれ８の倍数…！
だからこのルールを用いると、スクリーンサイズに合わせやすくなるのですね。
８の倍数ルールによるデメリット
色々な記事を見たところ、一番よく見かけたデメリットは
「計算がめんどくさい」「倍数が直感的に浮かびにくい」でした。
確かに５の倍数などに比べると、普段私生活で使うことがない８の倍数は一瞬戸惑うかもしれません。
このルールを実践に取り入れるのであれば、一度シミュレーションをして慣らすのがベストのようですね。
まとめ
今回はwebデザイン制作に用いられる「８の倍数ルール」について調べてみました！
以前から気になってはいましたが、なかなかじっくり調べることがありませんでした。
もう少し深掘りして、実践に取り入れてみたいと思います！
コメント