8の倍数ルールとは？整った印象にしたいなら！

WEBデザインの世界において「8の倍数ルール」（＝基本8の倍数のピクセルで定義）と呼ばれるルールがあります。

「8の倍数ルール」とはWEBサイトの余白やブロックサイズ、サイトの横幅などを8px、16px、24px、32pxといった8の倍数という規則性で固めてあげることで、見た目の統一感やバランスの良さが生まれます。

8の倍数ルール初心者こそ使うべき

ルールをかっちりと決めておくと、デザインを考える制約になるのでは？という意見があると思います。

ですが僕は、8の倍数ルールは初心者こそ使うべきガイドラインだと思っています。

なぜなら、要素の大きさや余白を一定の規則に基づいて設定できるため、むしろ、迷いなくデザインができるから。

初心者デザイナーは、まだデザインの基本ルールに慣れていないですよね？つまり作業していく中で、要素の配置や間隔にばらつきが出やすくなります。

ですから8の倍数ルールで全体を管理していくことで、デザイン全体に一貫性が生まれてくるわけです。

コンテンツ幅、ボタンサイズ、余白感、バナー、メインビュジュアルなどサイズ指定するものはほぼ全て8の倍数で設計します。

8の倍数にする要素とは？【どういう時に使うの？】

次に具体的に8の倍数ルールにする「要素」を見ていきましょう。

ちなみに8の倍数は基本的に「余白」に関わってくる要素で利用することが多いです。コンテンツ幅、ボタンサイズ、余白感、バナー、メインビュジュアルなどサイズ指定するものはほぼ全て8の倍数で設計します。

コンテンツ幅

コンテンツ幅はウェブサイトのメインコンテンツ領域の幅。完全なリキッドレイアウト（幅が100%で、画面サイズに応じて常に伸縮するレイアウト）を使用しない限り、コンテンツ幅は設定します。（widthプロパティを使用）

一般的なコンテンツ幅の設定値は、960px、1024px、1280pxなどです。

マージン（Margin）と パディング（Padding）

要素間の間隔（マージン）や要素内部の余白（パディング）を8の倍数に設定します。例えば、8px、16px、24px、32pxなどが使用されます。

行間（line-height）

テキストの行間を8の倍数に設定します。例えば、24px、32px、48pxなどが使用されます。

セクション間の余白

セクション間の余白は、異なるセクション同士を視覚的に分離するために使用されます。一般的に、セクション間の余白はセクション内のコンテンツ同士の余白より大きく設定されます。セクション間の余白は80pxくらいに多くとってもいいです。

ボタンサイズ

ボタンの幅と高さ、内部の余白を8の倍数に設定します。例えば、高さ48px、左右のパディング32pxなどが使用されます。

グリッドレイアウト

コンテンツ領域を分割するグリッドシステムのカラム幅とガーター幅を8の倍数に設定します。例えば、12列グリッド（各列の幅が64px、ガーター幅が32px）などが使用されます。

コンテンツ幅と余白をあらかじめ8の倍数で設計

コンテンツ幅と左右の余白をあらかじめ8の倍数で設計しておくことで、後からレイアウトを変更する際にも柔軟に対応できます。

例えば、当初は以下のような設計だったとします。

• コンテンツ幅: 960px (8 × 120)
• 左右の余白: 各80px (8 × 10)

デザインの変更や要件の変化により、コンテンツ幅を広げたくなったとします。このとき、8の倍数で設計されていれば、以下のように簡単に変更できます。

• コンテンツ幅: 1024px (8 × 128)
• 左右の余白: 各48px (8 × 6)

このように、コンテンツ幅と余白の割合を変えても、全体の幅は1120px (8 × 140)と、8の倍数のままです。端数が出ないため、レイアウトが崩れる心配がありません。

【番外編】フォントサイズの8倍数ルール

フォントサイズにおいてはまず基本となる大きさを設定します。フォントサイズの基準は16px。ただ使用シーンによっては14pxや18pxと使い分けることがあります。

次に見出し等のその他のテキスト要素のサイズを設定します。リード文、サブタイトル、ナビゲーションなどのテキスト要素に対して、基準フォントサイズに一定の比率を掛けることで、適切なサイズを決定します。 よく使われる比率には、以下のようなものがあります。

• 黄金比（約1.618）
• 完全五度（1.5）
• 完全四度（1.333）

これらの比率を基準フォントサイズに掛けることで、視覚的に美しく、読みやすいフォントサイズの階層を作ることができます。

例えば、基準フォントサイズが16pxで、見出しのサイズを黄金比で設定する場合、以下のような計算になります。

• 見出し1: 16px * 1.618^3 ≒ 68px
• 見出し2: 16px * 1.618^2 ≒ 42px
• 見出し3: 16px * 1.618 ≒ 26px

この場合、使用するフォントサイズとしては、16px、26px、42px、68pxになります。このように比率に基づいてフォントサイズを設定することで、テキスト要素間の視覚的な階層が明確になります。

そしてここから8の倍数ルールの適用することも良いです。例えば、上記の数字に対して8の倍数へ丸めることができます。

• 見出し1: 68px → 64px
• 見出し2: 42px → 40px
• 見出し3: 26px → 24px

なぜ8の倍数なの？

ここで疑問に思うのが、なぜ8の倍数なのかということですよね。その理由は、画面の解像度に関連しています。

スクリーンサイズが8で割り切れるから

8の倍数がいい理由は、デバイスのサイズ（解像度）が8の倍数で作られているものが多いから。

例えば、Full HD解像度の1920pxは、8の倍数である240を8倍した数字です。

同様にHD解像度の1280pxは160の8倍、1080pは135の8倍になっているのです。

このように、8の倍数は主要な画面解像度と密接な関係があるため、デザインの基準として採用されているのだと考えられます。

端数（小数点以下）が出にくい

8は、2で割り続けても偶数を保つことができますよね？だから解像度を半分にしたり、さらにその半分にしたりしても、整数値を維持できます。

例えば、要素の幅を100pxと指定し、その中に3つの要素を均等に配置したい場合を考えてみましょう。

• 10の倍数で割ると、100 ÷ 3 = 33.33…（小数点以下が出る）
• 8の倍数で割ると、96 ÷ 3 = 32（小数点以下が出ない）

8の倍数を使えば、このようにきれいに割り切れるサイズを設定しやすくなります。

また、8の倍数は2の倍数でもあるため、半分に分割するような場合にも都合が良いです。

• 96 ÷ 2 = 48
• 48 ÷ 2 = 24
• 24 ÷ 2 = 12

このように、8の倍数を使うと、レイアウトの計算がしやすく、端数を気にせず要素を配置できます。

コーディングされたデザインには注意しよう！

ここまで8の倍数ルールについて説明しましたが、実装に伴ってよくある失敗例も紹介しましょう。

8の倍数ルールに従って厳密にデザインした。でもいざコーダーにデザインを実装したときに、なんと奇数で出てきたり、ルールに則っていない数値になっている可能性があります！

これは外注系のコーディング会社によくあります。

ですからこの対策としてやって欲しいのは、「デザインルールを明確に文書化し、エンジニアへ共有」すること。例えばガイドラインやスタイルガイドを作成して、そこにデザインルールを明記するわけです。

またエンジニアにデザインデータを引き継ぐ際に、正確なサイズ、余白、フォントサイズなどの情報を伝えられたら伝えたほうがいいです。