8の倍数を気にしてみる

今回はシステムデザインにおける「余白」の使い方についてお話しします。
特に「8の倍数」ルールを中心に、その理由やメリットについて詳しく解説します。

 

余白とは？

余白は、デザインにおいて要素と要素の間に設ける空間です。
この空間は、視覚的な休息を提供し、情報の整理を助けます。特に、ユーザーが情報を効率的に処理できるようにするために重要です。
余白が不足していると、デザインは窮屈に見え、情報が混雑して見えます。
適切な余白を取ることで、デザインは洗練され、ユーザーにとって読みやすく、理解しやすいものになります。

余白の効果

1.視認性の向上
余白を適切に使うことで、情報が整理され、ユーザーは必要な情報を迅速に見つけることができます。
例えば、テキストと画像の間に余白を設けることで、各要素が際立ち、情報が明確になります。

2.デザインの洗練
統一感のある余白は、デザイン全体をよりプロフェッショナルに見せます。
適切な余白があることで、要素間の関係が明確になり、デザインが整然として見えます。
これにより、ユーザーはより快適にコンテンツを消費できます。

 

余白の比較

これはタイトルと本文のセットを繰り返すデザインです。
この2つのデザインについて、どう思いますか？

 

 

 

どちらのデザインも、余白の扱いが曖昧です。

上のデザインは、繰り返しの構造にもかかわらず、余白が不規則です。
タイトルと本文の間の余白が揃っておらず、グループ間の間隔もバラバラで、狭かったり広かったりしています。

下のデザインは、全体的に余白が狭く窮屈な印象を与え、グループの境目が曖昧で、どこで区切るべきか一目ではわかりにくくなっています。

 

では、適切な余白を使ったデザインを見てみましょう。

適切な余白を設けることで、グループ間の区別がはっきりしますね。

 

---

不規則な余白は、デザインが乱雑で視覚的に不安定に見えます。
情報が散らばり、ユーザーはどこに焦点を合わせれば良いか迷います。

統一された余白は、デザインを視覚的に安定させ、情報を整理して見せる効果があります。
ユーザーは重要な情報を迅速に見つけることができ、全体的なユーザー体験が向上します。

 

余白をつくるコツ

では適切な余白をつくるにはどうすればよいのか。

 

きれいな余白のコツ「8の倍数ルール」

きれいな余白のコツに「8の倍数ルール」があります。

 

「8の倍数ルール」とは余白やマージン、パディングを8pxの倍数で設定する方法です。

 

なぜ”８”なのか。

8の倍数がいい理由は、デバイスのサイズ（解像度）が8の倍数で作られているものが多いためです。
例えば、Full HD解像度の1920pxは、8の倍数である240を8倍した数字です。
同様にHD解像度の1280pxは160の8倍、1080pは135の8倍になっています。
このように、8の倍数は主要な画面解像度と密接な関係があるため、デザインの基準として採用されているのだと考えられます。

※スマートフォンにおいては、8の倍数に由来しない解像度も多く存在します。18:9や19:9など、縦長のディスプレイを採用するケースも非常に多いです。

 

８の倍数の例

とあるWEBサイトをモデルにしたフレームワークです。

TOPの写真から48pxの余白を空けてカテゴリタイトルを配置し、そこから24px空けて商品一覧を並べています。
商品はそれぞれ16pxの間隔で横並びに配置され、一段目と二段目の間には36pxの余白があります。

商品一覧からボタンまでは48px、さらにボタンからセクションの終わりまでも48pxの余白を確保し、これを繰り返して全体の流れを整えています。

余白には、やはり8の倍数が採用されていました。

 

Bootstrapを使用していると、marginやpaddingが8pxの倍数（またはその約数）に設定されていることがあり、
知らず知らずのうちに8px単位のルールが適用されている場合があります。

 

まとめ

適切な余白の使い方は、デザインの質を大きく向上させます。8の倍数ルールことで、視覚的に一貫性があり、使いやすいデザインを実現できます。

 

---

参考

https://liginc.co.jp/624584
https://note.com/nagaimen/n/n9d6a9589cbf9
https://zenn.dev/highgrenade/articles/b740847ec4ea29