CSSを書くエンジニアがなるほどデザインを読むとCSSに対して意識が変わるかもしれないという話

先日なるほどデザインがお買い得になっていたのですかさず買ってしまった。（今更だがテイスト的にKindle版よりも出版物で買ったほうが良かったかもと思いつつある）

なるほどデザイン

本の趣旨としてはWebよりも出版物のデザインにフォーカスしているといえる。とはいえデザインというものの基礎の話をしている本であり、それはWebについても考える部分は多いと感じた。

自分はエンジニアという役職で、デザインに関しては専門ではない、ただフロントエンドという部分においては、デザイナの理想にいかに近似させるかという部分は責務であると思っている。そういう人間にとっては「デザイナはどういう点に気を使っているか」という部分をノンデザイナーズ・デザインブックよりも専門的な点で知れる本といえるだろう。

Chapter3にあるグラフなどはエンジニアにもよく馴染みのある話だったり、写真の構図や配置による意図などは理解しておくと「ああ、このデザインはこういう意図をしているのか」ということを知れるのはとても有益だと感じる。

エンジニアにとっての”共通化”はデザインにとってどうだろうか？

一番この本でドキッとしてしまったのは「7つ道具 その6 虫めがね」（106p〜123p) だった。
この部分を読んで「エンジニアが行っている共通化は果たして良いことなのだろうか？」と思ってしまった。

例えばノンデザイナーズ・デザインブックなどを見ると、「反復」というものが出てくる。
簡単に言えば「同じ意味を成すものは同じスタイルにする」と訳せるだろう。
例えばこれはSASSのmixinや、Atomic designで言えばAtomとして同じコンポーネントを使うという事で共通化し、実現できるものであろうし、した方が良いものだろう。

片一方、例えばカラーコードは下記のようなことをやったりするだろう

$main-color: #356ae8;

.header {
 background: $main-color;
 font-color: #000;
}

だた、上記のようなカラーコード、font-size、font-face、line-heightなどの細かい値を変数化することについては、エンジニアはもっと慎重になってみても良いのかもしれない。

なるほどデザインに載っている一例を見ると

・色の面積によって微妙に色を調整する
・文字のコロンやハイフンの位置を微調整する
・■や●など同じサイズでも図形に併せてサイズを変える
・「中央」をちょっとだけ上にあげる
・点線のつなぎ目を調整する

などが上がっている。

同様のことは下記のスライドなどでも紹介されている。

https://speakerdeck.com/ayakasumida/huriransudezainafalse-tukurukoto-hatarakukoto?slide=26

残念ながら現在のCSSでは、点線の位置などは調整するのは難しい部分だ。フォントサイズも日本語という不利な言語を抱えてしまっている以上、なかなか多くのフォントを駆使するというのもパフォーマンス影響を考えると難しい点なども多い。

ただ、カラーコードや図形のサイズ、中央の位置なんかは今からでもエンジニアは気をつけることができるのでは無いか？と思う。メインカラーがカラーコード一色でも、デザイナの解像度では、あるいは人間の視覚にとってそれは複数の色を用意して然るべきだし、微妙に「中央ではない」値があったとしたらそれがデザインにとって解像度の高い中央なのだ。

それらのゆらぎを変数や共通化によって潰してしまうことは、エンジニアのエゴだったのではないだろうか？もっと目を凝らして見るべきなのではないか？と振り返ってしまった。

当然、上記に上げたようにパフォーマンス起因や、CSSの限界によって実現できないものも多いが、徐々に無理なくできるものも増えて来ている。例えば、ハイフンやコロンだけを再現するコンポーネントを<div>123<Hyphen/>4567</div> という形で再現できなくはないだろうし、今後もっと自然にスタイリングができるかもしれない。

もしかすると未来には、フロントエンドエンジニアにはこの細部を実現する力というものも求められる時代が来るのかもしれない。はたから見れば少し前時代へのより戻しと言われてしまいそうだが、個人的には新しい道具を手に入れた上での技術の螺旋だと考える方が楽しいなと感じる。