2019.11.14

8の倍数をデザインに取り入れてみてわかったメリットとちょっとした工夫

モニターのサイズが8の倍数で割り切れる数で設計されていることや、コンテナ要素やグリッドのサイズ、余白の取り方に8の倍数を取り入れることで綺麗に割り切れるということで最近よく耳にする手法を使ってわかったメリットやデメリットを考えてみたい。

メリット

8の倍数をデザインに取り入れてわかったことはコーディングルールが明確になりWEBサイトの質を上げつつスピードアップ出来るという点である。

今までなんとなくでモバイル端末のデザインの時は左右に15px、デスクトップは30pxの余白をとってデザインをしていたが、これをモバイル端末で左右に16px、デスクトップで32pxの余白とすることで明確なルールに則ってそのような余白を取っているという説得力が生まれる。

また綺麗に割り切れる数になっているので見た目にも美しい。

まとめるとこのようなメリットがあるのではないでしょうか？

コーディングルールが明確になるのでコーダーの負担が減る。
余白の取り方で迷うことがなくなるのでコーディング速度が上がる
割り切れる数を使うことでデザインが綺麗になる

デメリット

逆にどんなデメリットがあるか考えてみる。

まず計算がめんどくさい。
慣れてしまえばすぐに計算できるが、慣れるまですこし戸惑うかもしれない。

次に5px、10pxのようなキリのいい数字とは違い、8px、16pxのような半端な数字になるのでデザインのミスだと思われ、コーディング時に無視されてしまう可能性がある点が上げられると思う。
8pxは10pxの間違いかな？16pxは15pxの間違いかな？といった具合である。

まとめると

計算がめんどくさい
デザインの意図を見落とされる可能性がある。

これはデザイナーとコーダーがしっかり打ち合わせてコーディングルールをお互いに理解していれば防げる問題なのであまり気にしなくてもいいかもしれない。

計算がめんどくさいなら・・・

計算が面倒ならSCSS(SASS)の関数にしてしまえばいいのではないだろうか？

私はおバカなのでよく計算をミスする。
そういったヒューマンエラーをなくすために自動化できる部分は自動化した方がいいと思う。

SCSS(SASS)の関数にしてみる

たとえば

$num: 8;
@function eight($value1: null, $value2: null, $value3: null, $value4: null) {
	@if ($value2 == null and $value3 == null and $value4 == null){
		@return $value1 * $num + px;
	}@else if ($value3 == null and $value4 == null){
		@return $value1 * $num + px $value2 * $num + px;
	}@else if ($value4 == null){
		@return $value1 * $num + px $value2 * $num + px $value3 * $num + px;
	}@else{
		@return $value1 * $num + px $value2 * $num + px $value3 * $num + px $value4 * $num + px;
	}
}

こんな数行の簡単なSCSS(SASS)の関数を作っておいて、パディングやマージンを加えたい場所に関数を出力してあげるだけで計算ミスはなくなる。

.l-main{
	margin: eight(6,2);
}

これをコンパイルするとこんなCSSになる。

.l-main {
	margin: 48px 16px;
}

これなら感覚的に掛け算ができるのでコーディング速度があがるのでないだろうか？

calc()を使ってみる

SCSS(SASS)をコンパイルできる環境が整っていない場合は、calc()ファンクションを使ってみるのはどうだろう？

calcはcssで計算式を使えるようにするファンクションで、レガシーブラウザがほぼ淘汰されてきた今なら使っても問題ないのではないでしょうか？

.l-main{
	margin-top: calc(8px * 6);
	margin-bottom: calc(8px * 6);
	padding-left: calc(8px * 2);
	padding-right: calc(8px * 2);
}

まとめ

8の倍数をデザインに取り入れることで、WEBサイトの質を上げつつ、コーディングスピードもアップするのでどんどん取り入れていこうと思う。

計算がめんどくさいなどのデメリットは工夫でなんとかできる。
効率化する工夫をすることを常に頭の片隅に置いておきたい。

自分のサイトもそのうちこのルールに則って作り直そうと思う。
・・・そのうち

MENU