デザインする際に意識している8の倍数ルールについての記事です。Webサイトやアプリなどスクリーン用のデザインの際には、基本的に要素の大きさを8の倍数ピクセルで設計しています。
ここでいう要素とは、コンテンツ幅、ボタンの大きさ、余白の大きさ、バナーの大きさ、メインビジュアルの大きさなど、サイズ指定が必要なほぼ全て要素を指しています。
8の倍数によるデザインルールはこれまでに16以上のプロジェクトで活用してきました。ルールを用いることのメリット・デメリットや、そのルールを使い続けている理由を当Webサイトの事例と共にまとめています。
※フォントサイズは8の倍数ではなく、18pxを基準とした倍率計算によって算出する方法を試しています。詳しくは以下の記事にまとめています。
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の倍数でデザインするメリットは大きいです。
以下はデメリットに感じたことです。
実際はデメリットと感じるほどのことではありませんでした。しいて挙げるならば5の倍数ルールに比べて計算が直感的ではないというデメリットはありますが、慣れによってある程度解消できていると感じます。8の倍数ルールにしてから困ったということは無く、得られるメリットのほうが大きいです。
8の倍数ルールはこれまでに複数のプロジェクトで実践してきましたが、メリットがデメリットを完全に上回っていると感じます。それは初期の設計時においてもそうですし、運用段階においてもです。
例えばWebサイトやアプリではコンテンツの数や形は変わっていくものであり、コンテンツに合わせたデザインやコーディング(実装)が求められます。よってコンテンツの増減に柔軟に対応しやすい設計が必要で、柔軟性を高める方法の1つが8の倍数によるデザインだと考えています。
このWebサイトも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の倍数ではないですが、4px、12pxも活用範囲は広いです。特にWebアプリケーションのように画面内の情報量が多くなりがちな場合に使っています。
Webサイトやアプリで余白を扱う際には、あらかじめ変数として登録しておくとコーディングを効率化できてメンテナンス性が高まります。
// spacing
$spacing-0: 0;
$spacing-half: 4px;
$spacing-1: 8px;
$spacing-2: 16px;
$spacing-3: 24px;
$spacing-4: 32px;
$spacing-5: 48px;
$spacing-6: 64px;
$spacing-7: 96px;
$spacing-8: 128px;
$spacing-9: 192px;
$spacing-10: 256px;
// 後半に向かって差を大きくしているのは、余白のメリハリ(コントラスト)を維持するため。
変数の定義方法(コードの設計方法)は、これまでの経験則に加えて次のデザインシステム(スペーシングルール)を参考にしています。
Spacing – Carbon Design System
Customizing Spacing – Tailwind CSS
Tailwind CSSでは12pxや20pxなどの4の倍数の余白として変数定義されているので、1画面内の情報量が多くなりやすいWebサービスやアプリケーションの画面設計に向いているかもしれません。
4の倍数で変数定義すると、余白の大きさを細かく調整できるメリットがあります。その一方で管理する変数が多くなることで管理しずらくなったり、どの余白を指定するか迷いやすくなったり、メリハリ(コントラスト)が弱くなったりするデメリットもあります。
そのためまずは8pxの倍数で設計して、どうしても必要になったときに4の倍数による余白(例:12px、20px、40px)の追加を検討するのが良いと考えています。
8の倍数ルールで設計することで、必然的に等差や等倍の数列的な秩序が生まれます。その結果デザインの秩序維持に役立ちます。
また自分で大きさを決められない要素(例えば広告バナーやあらかじめ決められた画像サイズ規定)がある場合は、そのコンテンツ要素の幅に合わせてなるべく8の倍数ルールが広く活用できるように設計しています。
自分の場合はIllustratorでデザインをすることが多かったので、以下のような正方形オブジェクトをシンボルとして登録して簡易定規として使っています。
2019年以降はWebサイトやアプリケーションのデザインではAdobe XDを用いることが増えてきました。Adobe XDでも応用できるかと思います。これらはオブジェクトを置いたり、ガイドを引いたりする際に使います。
余白の基礎については、こちらの資料も公開しています。Webサイト、アプリ、資料などの品質を上げたいと思っている方へ向けた内容です。余白(スペーシング)の基礎について、3つのポイントに分けて書きました。
UIデザインにおける8の倍数ルールの利点は、デザイナーやエンジニアだけのものではありません。サービス品質や運用性の向上も含めて、利用者や運用者にもメリットがあると考えています。