【webデザイン制作の参考に】8の倍数ルールを用いてデザインを作るメリット・デメリットとは?

8の倍数ルールとは?

webデザインについて調べていると見かけるのが「8の倍数」という言葉。

webデザインにどんな関係があるの?と思ったので調べてみました。

8の倍数ルールとは、

Webサイトを作る際に要素の大きさを8の倍数ピクセルで設計することなんだそうです。

要素とは、コンテンツ幅、ボタンの大きさ、余白の大きさ、バナーの大きさ、メインビジュアルの大きさなど…サイズ指定が必要なものは全て対象となるんですね。

確かにデザインを作るとき、様々な要素のサイズ指定を行いますよね。

大体慣れてくるとすぐ頭にサイズが浮かびますが、最初のうちはこの計算が意外と苦戦しますよね…

8の倍数ルールによるメリット

今回はこちらの記事に書かれていたメリットを引用しております。

・要素のサイズや余白に秩序を持たせやすくなり、デザインの品質が向上するため。

・デザインルールを徹底しやすくなるため。

・8の倍数で設計することで端数が発生しにくく、コンテンツのレイアウトや余白の秩序が維持しやすくなり、コーディングが進めやすくなるため。

・デザインとコーディングの両方の品質と速度が高まり、結果的にWebサイトやアプリ全体の品質が向上するため。

・多くのデバイスの基準となる解像度に8の倍数が用いられており、汎用的なスクリーンサイズの基準に合わせやすいため。

https://yuyakinoshita.com/blog/2019/02/10/design-by-multiple-of-8/#toc-1


なるほど…デザイナー的にはサイズ指定が必要な場面で迷うことがなくなり、考える時間が削減され、作業効率UPに繋がる。

そしてコーダーも「端数が出にくい」「制作の速度UP」など同じように良い影響があるんですね。

しかも、「多くのデバイスの基準となる解像度にも8の倍数が用いられている」というのは言われて気付きました!

確かにフルHD(1920×1080)、HD(1280×720)はそれぞれ8の倍数…!

だからこのルールを用いると、スクリーンサイズに合わせやすくなるのですね。

8の倍数ルールによるデメリット

色々な記事を見たところ、一番よく見かけたデメリットは

計算がめんどくさい」「倍数が直感的に浮かびにくい」でした。

確かに5の倍数などに比べると、普段私生活で使うことがない8の倍数は一瞬戸惑うかもしれません。

このルールを実践に取り入れるのであれば、一度シミュレーションをして慣らすのがベストのようですね。

まとめ

今回はwebデザイン制作に用いられる「8の倍数ルール」について調べてみました!

以前から気になってはいましたが、なかなかじっくり調べることがありませんでした。

もう少し深掘りして、実践に取り入れてみたいと思います!

コメント

タイトルとURLをコピーしました