【Web Design Talk】デザインは余白で決まる！では余白を決めるポイントは？

2024年3月19日 18:27

こんにちは、How many designs です。
Web Design Talk というタイトルで、デザインに関するお話を少しだけ書いていこうと思います。気軽に読んでいただければ幸いです。

はじめに

デザインができる人はまず全体の余白を考慮してデザインします。余白に応じて画像やフォントのサイズが決定し、それから細部のデザインに取り掛かります。

一方、デザインに時間がかかってしまう人は、小さな要素から先にデザインして最後に余白を考えます。すると、余白の調整のために今までの作業内容を修正することになり、大きな時間ロスとなります。

このように、デザインの中で最も重要なのは余白です。余白が決まればデザインは決まります。そこに気づくだけで、質の高いデザインを素早く作成することができます。

余白を決める時にセンスは必要ありません。バランスよくデザインされた余白は、実は計算に基づいでいます。計算と聞くと面倒な感じがしますが、ここでは知っておくと便利な1つのルールを紹介します。

Webデザインを余白から考えようとすると、出てくる問題が上下左右の余白です。何となく100px？と決めてしまうと、狭すぎたり広すぎる場合の調整に悩みます。そこで、まず8の倍数でデザインすることをお勧めします。

なぜ 10 や 5 でなく8なのか。これには理由があります。8の倍数は2でも4でも割り切れますが、さらに、1.5倍、1.25倍、1.75倍にしても整数になります。しかし10や5の場合は整数になりません。

例えば、以下のように8では倍数が整数となります。

8 × 1.25 = 10
8 × 1.5 = 12
8 × 1.75 = 14

しかし、10の場合は以下のように小数が出てきます。

10 × 1.25 = 12.5
10 × 1.5 = 15
10 × 1.75 = 17.5

実際のWebデザインを想定してみましょう。まずは大きな余白から考えてみます。例えば、セクションの padding に対して、以下のように上下左右の余白を指定してみます。

レスポンシブサイトで余白を詰めたい場合は、以下のように調整することができます。。

このように、8の倍数でデザインすることで、要素のサイズや余白に規則性を持たせることができます。これは、デザイン全体の統一感と秩序を生み出し、洗練された印象を与えるのに役立ちます。

実は小さな要素の余白でも8の倍数でデザインすることで、同じように調和の取れた統一感のあるデザインを作ることができます。例えばボタンの余白を考えてみましょう。

バリエションとして余白の小さなボタンをデザインする場合は、以下のように調整します。

このように、小さな要素の余白でも8の倍数でデザインすると便利です。

8の倍数はデザインする上で便利です。実際にコーディングする場合は最小単位として8pxを設定し、各要素のpaddingにその倍数を設定するとメンテナンス性の高いCSSを書くことが出来ます。

具体的には以下のようにコーディングします。
まず、最小単位としてCSS変数を設定します。
ここでは、--unit-size:8px という名前の変数を設定します。

:root {
  --unit-size: 8px;
}

そして、paddingとして、8 × 5 = 40pxを指定してみましょう。
CSSではcalcを使って以下のように記述すると、--unit-size の倍数を指定できます。


padding: calc(var(--unit-size) * 5 ); /* 40pxになる */

SCSSの場合はCSS関数を使うと便利です。
まず、unit-size という関数を用意します。
この関数は、引数として渡した値の8px倍の値を返します。

@function unit-size($value: 1) {
  @return 8px * $value;
}

では paddingとして、8 × 5 = 40pxを指定してみましょう。
CSS関数を使うと以下のようにシンプルに記述することが出来ます。

padding: unit-size(5) // 40pxになる

実際にサンプルコードを作成してみましたので、値を変更して確認してみてください。

この記事が気に入ったらサポートをしてみませんか？