エンジニアから見るデザイン

デザイナーとエンジニアでデザインを見るポイントが違うなと思うことがある、という話です。

材料はHTML

エンジニアがWebサイトを作る際、材料はHTMLになります。見出しや本文や箇条書きです。

見出しや本文で構成していく文書といえば、このnoteやconfluence、notionなんかもそうですね。ルールにしたがって情報を流し込んでいくとコンテンツが出来上がります。

そうして出来上がった文書構造がそのWebサイトで伝えたい情報の本質だ、とエンジニアは考えています。

CSSでHTMLの特性を整える

HTMLだけでできた文書でも、ブラウザのスタイルのおかげで普通に読める見た目になっています。テキストにサイズや余白の違いがあり、見出しや本文・リスト表示と見た目が一目瞭然です。

そうしたHTMLを見た目の特性をCSSで変更していく、というのがWebデザインをレイアウトしていく作業になります。

HTML本来の特性と、実現したいデザインの性質が離れていればいるほど、そのレイアウト作業は手間がかかるものになっていきます。

もちろん手間がかかる = 悪いというわけではありません。やりたいことを最適な形で実現できるのが良いことだとエンジニアは考えています。

構造から見るか、ビジュアルから見るか

こうした順序でWebデザインを捉えると、構造が先に来てその次にビジュアル、ということになります。単純に作業順序だけ考えてもHTML→CSSの順序になるので、エンジニアにとっては自然な考えかなと感じます。

Webデザインにとってそれが必ずしも正解！ということはありません。こうした考えに固執するあまり美しいレイアウトや直感的なクリエイティブを取り入れないのは本末転倒です。

ただこうしたエンジニアの見るポイントをデザイナーが押さえておくと、エンジニアと協業してより良いデザインを生み出す強いチームが出来上がると思います。