デザインするなら仕組みを知っとくほうがいい

デザイナーもコーディングができなければいけない、みたいな話は何度も出てくるけど、経験したり覚えたりするにこしたことはないけど、実際に業務として書いたほうがいいかは別。

例えばWebをデザインするのであれば、デザイナーが知るべきなのは、コーディングスキルとしてHTMLの要素をたくさん知っておくことや、CSSのプロパティやテクニックではなくて、Webそのもののことや、ブラウザの仕組み。

どのような仕組みでWebページは表示されるのか、ページの表示が遅いとしたら何が原因で遅くなるのか。HTMLでマークアップされた情報を機械(ブラウザなど)がどう解釈しているのか、などといったような。

数年前から実際にデザイナーが直面した課題としては、スマートフォン、高解像度のディスプレイを搭載したデバイスの登場があった。物理的に画面のサイズが小さいという環境でのWebページのデザインという課題だけでなく、用意する画像の種類を増やさければいけないことに難儀したはずだ。

これも単純に2倍の画像を用意すればいい、という認識だけだと、iPhone 6 Plus以降でさらに精細になると単純に3倍を用意する、という発想になってしまう。でも実際にそんなことをすると画像のサイズは膨れ上がるし、実際用意したところで2倍前後にした画像と見比べてもほぼ違いはない。

しかし、写真にメッセージ性やブランド感を出す、あるいはそれらしい雰囲気を出すためにWebサイトのトップページで画面全体を覆う画像を扱うようなデザインは増えており、そうすると「きれいに見せたい」と「ページ表示速度を落としたくない」のバランスを考えてデザインする必要がある。
もちろん実装の工夫で画像の読み込み方を工夫するといったことはできるが、1枚のJPGの写真を扱うにしても、アートディレクションや、色数を減らす工夫をまずは考えないといけない。

とはまぁ、いろいろあるのだけど、長くなりそうだったのでこの辺で。

車のデザインをするためには、車が走る仕組みを知らなければいけない

とかそういう気持ちの話でした。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

明日の元気の素になります。

58
株式会社サイバーエージェント Webのエンジニアだけどデザインのこと考えています。 OSS: FLOCSS http://github.com/hiloki/flocss 著書: Web制作者のためのCSS設計の教科書 http://amzn.to/2hJcQVX

こちらでもピックアップされています

#デザイン 記事まとめ
#デザイン 記事まとめ
  • 4857本

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。