以前私が参加させていただきたWeb制作プロジェクトの中で
「ちょっとアレなデザイナーさんのWebデザインをコーディングする」
「普通のデザイナーさんのWebデザインをコーディングする」
という2つの貴重な経験を短期間でさせていただきました。
私ごときが上からWebデザイナーを評価するわけではないのですが、同じ仕事をする身として2人（2案件）の違いをまとめ、辛かったことや感動したことなどの高低差を共有したくレポートしていきたいと思います。
と表面上は言ってみたものの愚痴かもしれないw
私の経験した「ちょっとアレな デザイナーさん 」の予備知識としてレスポンシブデザインやjQueryが導入され始めた10年ほど前からすこしずつコーディングから遠ざかっていったというデザイナーさんです。コーディングできないWebデザイナーさんというよりはコーディングを考えていないWebデザイナーさんという印象でした。
そして「普通のデザイナーさん」とは外注で他社のデザイナーさんだったのでスキル・職歴などの情報は不明でした。
あえて普通と表現しました。
今回はWebデザインセンスの視的優劣ではなくコーディングするうえでどのような感想を抱いたのかに焦点を絞っていきたいと思います。
今後のデザインの参考になりよりよい仕事につながっていければ幸いです。
ちょっとアレなデザイナーさんのWebデザインをコーディングする
再現不可能なつくり（再現するのに工数がかかる）
たいていのデザインは確認したときに「ここはCSSのフィルターでーここはプラグインで対応しよう」など初見で対応策が浮かびます。
しかしちゃんと考えられていないデザインは「この表現ってCSSでできるのかな？」再現の可能性がわからないまま様々な調査、試行錯誤した結果CSS、JSでは再現不可能だったので画像の切り貼りなどを駆使してなんとか対応する必要があります。
またコーディングで無茶をしてる分複数デバイスの確認時やリリース後に問題が発覚するケースも多いです。
工数削減のためにもリリース後の安全性のためにもCSS、JSなどで再現可能かどうか一度確認することをお勧めします。
このデザイン、ブラウザ広げられたらおわるやん？
スマホのデザインの要素のサイズの問題
スマホのデザインを確認した際に違和感を感じ、実機でjpgを表示したところ段落のテキストが小さく、ボタンも大人の指では押しにくいサイズになっていました。
これは最初に現在の端末の主流のサイズや、クライアントが確認したいサイズを確認しておくべきですね。
レスポンシブデザインでは実機でjpgを確認すると意外とハンバーガーメニューや文字のサイズに修正点が見えてきます。
なにもかもがちっちぇ。。。
PCとSPで要素が逆転してる。。
クライアントさんからの強い希望など例外をのぞいて基本的にはPCとSPの要素の順番は同期しているべきです。
これもflexのorderを試したり、マイナスマージンにしたりなんとか再現しました。
要素の逆転はブラウザの幅によっては要素が崩れてしまう可能性があるので気を付けましょう。
なんでこれPCとSPで逆にしたん？ん？
優秀なデザイナーさんのWebデザインをコーディングする
ガイドがある
Webデザインはpngなどのラフ画像のほかに以下のようなカラーやマウスオーバーのガイドがついていました。
特にテキストリンクやhoverの指示などがついているとかなりの時短になりますよね。
イメージ画像の対応
デザインで使用されているイメージ画像などはスマートオブジェクト化されているので画像劣化なしでSPなどのコーディングでもそのまま使用することができました。
もしくはshutterstockの画像などなら元素材やIDの指示など用意してあるとわざわざ問い合わせしなくても助かりますよね。
普通のことがすばらしい！
気の利いた補足説明
上のガイドの他にも以下についての補足がありました。
- デザインコンセプト
- 使用フォント
- アニメーション（スライドやスクロールなど）
コーディングを考えたデータ作成
デザインセンスもさることながら一目みただけでコーディング設計が立てられました。
やりやすすぎだろーーー！
まとめ
正直上の2案件工数でもリリース後の修正作業や運用でも違いがでました。
デザイン面のほかにも考慮しなければならない点がたくさんあるということCSSで何かできるのか、レスポンシブを考慮しているのかが最低限の条件です。
ただ当時の経験はものすごく自分にとってデザイン面でもコーディング面でもプラスになりました。
今となってはどんなアタオカデザインもコーディングできますよ
