雑記
8の倍数を気にしてみる
わら
更新日:2024/10/22
今回はシステムデザインにおける「余白」の使い方についてお話しします。
特に「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
