8の倍数ルールでデザインする理由とメリット・デメリット
デザインする際に意識している8の倍数ルールについての記事です。
Webサイトやアプリなどスクリーン用のデザインの際には、基本的に要素の大きさを8の倍数ピクセルで設計しています。
ここでいう要素とは、コンテンツ幅、ボタンの大きさ、余白の大きさ、バナーの大きさ、メインビジュアルの大きさなど、サイズ指定が必要な全てものを指しています。
8の倍数によるデザインルールはこれまでに16以上のプロジェクトで活用してきました。ルールを用いることのメリット・デメリットや、そのルールを使い続けている理由を当Webサイトの事例と共にまとめています。
※フォントサイズはより細かなサイズで調整をしていますが、大きな文字サイズの場合はなるべく8の倍数に近づけることが多いです。
8の倍数で設計する理由とメリット
以下は8の倍数で設計する主な理由であり、メリットです。
・要素のサイズや余白に秩序を持たせやすくなり、デザインの品質が向上するため。
・デザインルールを徹底しやすくなるため。
・8の倍数で設計することで端数が発生しにくく、コンテンツのレイアウトや余白の秩序が維持しやすくなり、コーディングが進めやすくなるため。
・デザインとコーディングの両方の品質と速度が高まり、結果的にWebサイトやアプリ全体の品質が向上するため。
・多くのデバイスの基準となる解像度に8の倍数が用いられており、汎用的なスクリーンサイズの基準に合わせやすいため。
運用段階の変更にも対応しやすい柔軟性
まず最初に実感したのは、デザインとコーディングのしやすさです。
Webサイトやアプリの場合は、サービス運用時に取り扱うコンテンツの増減によって「後からコンテンツ幅を変更したい」という場面が出てきます。
変更する段階において、あらかじめコンテンツ幅と余白を全て8の倍数で設計しておくことで、その割合を後から変える時にも端数ができずに比較的柔軟に対応できました。
またWebサイトの初期構築時におけるコーディングの際にも、8px単位でコンテンツ幅や余白の幅を調整できたことで開発効率が上がっています。
「8の倍数で設計する」というルールを用いることでデザインの幅を狭めてしまうことになるかもしれないと懸念していたのですが、実際にはそんなことはありませんでした。
むしろコンテンツの大きさや余白の秩序をより厳密に保ちやすくなり、質が上がったと感じます。
汎用的なスクリーンサイズの基準に合わせやすい
例えばフルHD解像度である1920×1080ピクセルを例に挙げると、1920も1080も8の倍数です。同様にHD解像度は1280×720ピクセルですが、1280も720も8の倍数です。
一般的に基準となっている画像サイズが8の倍数であることから、広く対応しやすい要素の大きさが8の倍数であると考えており、経験上も実感しています。
iPhone 8やiPhone XSなどのスクリーンサイズが8の倍数ではないデバイスもありますが、それでも8の倍数でデザインするメリットは大きいです。
8の倍数でデザインするデメリット
以下はデメリットに感じたことです。
・8の倍数を計算する時には繰り上がりが発生するため、計算に慣れが必要になる（慣れるとある程度は自然に計算できるようになる）。
実際はデメリットと感じるほどのことではありませんでした。
しいて挙げるならば5の倍数ルールに比べて計算が直感的ではないというデメリットはありますが、慣れによってある程度解消できていると感じます。
8の倍数ルールにしてから困ったということは無く、得られるメリットのほうが大きいです。
メリット・デメリットの総合評価
8の倍数ルールはこれまでに複数のプロジェクトで実践してきましたが、メリットがデメリットを完全に上回っていると感じます。
それは初期の設計時においてもそうですし、運用段階においてもです。
例えばWebサイトやアプリではコンテンツの数や形は変わっていくものであり、コンテンツに合わせたデザインやコーディング（実装）が求められます。
よってコンテンツの増減に柔軟に対応しやすい設計が必要で、柔軟性を高める方法の1つが8の倍数によるデザインだと考えています。
8の倍数ルールを用いたWebサイトの事例
自身のWebサイトも8の倍数ルールに沿って制作しています。
閲覧者のブラウザ表示幅によって大きさが変わるコンテンツ以外は、ほぼ8の倍数ピクセルで設計しています。
要素と要素の間の余白も8の倍数ピクセルで設計しています。わかりやすいように要素に境界線を付けてグレーで表示しています。この画像を拡大すると原寸表示を確認できます。
これは実績一覧ページの一部を抜粋したものですが、基本的にはWebサイトの全ての要素を上記のルールで設計しています。
大規模プロジェクトにも有効
別のプロジェクトでは180画面を越えるサービスサイトを8の倍数ルールで設計し、デザインとフロントエンド実装を全て担当しました。
その時も初期構築から運用継続に渡って効率的に進められたので、大規模なプロジェクトにも有効だと感じています。
よく使う余白の大きさ
余白として主に使うのは、8px、16px、24px、32px、48px、64px、96px、128px、160px、192px、256pxなどです。
また8と3の公倍数である48の倍数は、コンテンツ幅を設計したり分割する時に端数が発生せずに割り切れることが多いため重宝します。具体的には、48px、96px、192px、240px、480px、960px、1440pxなどです。
デザインの秩序維持に役立つ
8の倍数ルールで設計することで、必然的に等差や等倍の数列的な秩序が生まれます。その結果デザインの秩序維持に役立ちます。
また自分で大きさを決められない要素（例えば広告バナーやあらかじめ決められた画像サイズ規定）がある場合は、そのコンテンツ要素の幅に合わせてなるべく8の倍数ルールが広く活用できるように設計しています。
デザイン時に簡易定規シンボルを用意しておくと効率的に進められる
自分の場合はIllustratorでデザインをすることが多いので、以下のような正方形オブジェクトをシンボルとして登録して簡易定規として使っています。
これらはオブジェクトを置いたり、ガイドを引いたりする際に使います。
※当時はWebサイトやアプリケーションのデザインにもIllustratorを使っていましたが、今は状況に応じてAdobe XDと使い分けています。
最後に
UIデザインにおける8の倍数ルールの利点は、デザイナーやエンジニアだけのものではありません。サービス品質や運用性の向上も含めて、利用者や運用者にもメリットがあると考えています。
ブログに記事を集約するため、すみませんが現時点では今後のnoteの追加予定はありません。もし良ければブログをご覧ください。 https://yuyakinoshita.com/blog/
この記事が気に入ったらサポートをしてみませんか？