WebDesign

Webデザイナー必須の計算式とcalcで楽になる余白の計算

2017.09.20

2017.12.14

Webデザイナー必須の計算式とcalcで楽になる余白の計算のアイキャッチ画像

デザイナーって響きは何かファジーでアーティスティックなイメージで、計算式とは程遠いように感じてしまいます。一般的にデザインはひらめきってイメージですもんね!

実際のデザインはヒアリングに基づく、思考の結果の産物で、すっげーーーーーマーケティング要素を含みます。「ここは、この色の方が映えるから」なんて安直な理由でデザインは行いません!!!!

あ・・・・話がそれました。

Webデザイナーは電卓とお友達

Webデザイナーに電卓は必須です。もちろんデザインに使います。
レイアウトの余白の計算やブレイクポイント毎の画像サイズなどなど、思っているより計算しているんです!!

比率の計算式

とりわけ必要なのが比率の計算式です。
16:9の画像、横幅740pxの場合は高さ416px、では900pxの場合は?

矩形を作って調べるってのも手ですがとっても面倒だし、原始的すぎます!こんな時は計算式で求めます。

width ÷(16÷9)= height

16:9は1.7777777、黄金比率なら1.618といった具合に使っている間に比率も覚えてさらに効率化!

もちろん逆にすれば高さから横幅を導き出すことも可能です。

カラムと余白の計算

実はデザイナーはカラムと余白の計算は行わなくてよくなりました!!!!
なぜ計算を行わなくてよくなったのか?
それはcalc()ファンクションを使えばCSSで計算ができるからです。

なのでデザイナーはカラムサイズもしくはパーセントと数をカンプに添えておけばコーダーがよしなにやってくれます!

例えば横幅1120pxのラッパーに3カラムで345pxのオブジェクトを配置した場合、余白に充当できる値は85pxになります。中央に2箇所の余白を設けると、85pxの2等分で、余白は整数になりません。しかし従来の方法は整数を指定する必要があるので整数になるまでデザイナーは計算を繰り返していました。

3カラムの図

.item{
  width: 345px;
  margin: 0 calc(85px / 2);
}

上記は真ん中のオブジェクトにcalc()ファンクションを指定した例です。calc()ファンクションは割り切れない数字でもレイアウトしちゃう恐ろしいやつなので、デザイナーは整数に割り切れるまで計算する必要がなくなったのです。

.item{
  width: 345px;
  margin: 0 calc(calc(1120px - calc(340px * 3)) / 2);
}

calcに全部計算させてしまうことも可能です。

素晴らしいですね!
どんどん楽になりますね!

それでも電卓は必要だ

calc()ファンクションがいくら便利なやつでもデザイナーに電卓は必要です。比率もそうですし、冒頭で触れたマーケティング要素!!CVR出すのに電卓叩かないとダメかもです。

Webデザイナーはデザインスキルと同等にマーケティングスキルも求められるようになってくるはず!?と予測しております。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する