くまだどうも、くまだです。
コーダーとして個人的にやりやすいデザインカンプとそうでないデザインカンプあります。
それらのもろもろについて。もちろん人によって意見は異なるので、あくまでも自分の場合は、ということで何かの参考になれば幸いです。
ちなみに過去にも似たようなこと書いてます。
コーディングしやすいデザインカンプ
個人的に思うコーディングしやすいデザインカンプは以下のとおりです。（すべてについて解説はしません）
- スタイルガイドがある（色、フォント、行間、文字送り…）
- Googleフォント、フリーフォントのurl
- アニメーションの指示が具体的である（参考サイト＋具体的な箇所の指示）
- コンポーネント（タイトルやボタンなど）が一覧で見れる
- ホバーやフォーカス時のスタイルがある
- デザインによるが、カンプ幅でないときの、画面幅が狭いor広くなったときの状態が分かる（例：1440幅のとき、画像の端が画面端についているようなデザイン）
- 余白の取り方に規則性がある。
- 複数ページの案件で、デザインカンプが小出しでない
- 画像一式デザイナーさんが圧縮して渡してくれる
- 404ページや記事詳細ページのデザインカンプがある（意外と抜けていることある）
「スタイルガイドやコンポーネント集がまとまっている」と神です。4年ぐらいコーダーやっていますが、スタイルガイドやコンポーネント集があるようなデザインカンプはなかなか出会えません。
「Googleフォント、フリーフォントのurl」は、 フォント系はけっこう探すことが多いので、デザインカンプのどこかにURLでも貼付してあるだけでも探す手間が省けます。
「複数ページの案件で、デザインカンプが小出しでこない」のもありがたいです（もちろんデザインが確定していることが前提）。
コーディングしながら、あっちのページとこっちのページの○○の部分は共通だからパーツで作れるな、これは共通じゃなそうだな、とか考えながらコーディングするんですが、後からデザインがきたときに実は共通で作れそうだった、ということがあります。
そういうときは作り直すこともあります。
コーディングしにくいデザインカンプ
個人的に思うコーディングしにくいデザインカンプは以下のとおりです。
- 余白やフォントサイズに小数点あり
- 余白に統一性がない
- 斜めにコンテンツが配置されているデザイン（視線誘導のためとはいえ…）
- よく見たら1文字ずつカーニングされているようなテキスト
- positionを多用しないと実現できなそうなデザイン
- よしなにで事前に了解しているはずなのに、後だしで指示出しがある
- デザインカンプが確定していない
- テキストや画像がダミーのまま→あとから差し替え指示される
（人間が作るので仕方ない部分はあるものの）「余白やフォントサイズの数値が小数点がある」のをたまに見かけます。そこまでやりにくいというわけではないですが、一瞬違和感を感じるので、なんとなく気になるレベルです笑
「よく見たら1文字ずつカーニングされているようなテキスト」は、まるっと画像にしてしまうこともあります。
「よしなにで事前に了解しているはずなのに、後だしで指示出しがある」は、例えばPCデザインだけあり、SPデザインがないときにSPはよしなにでコーディングするようなケースです。よしなにでコーディングして提出したあと、後から指示が入ることがあります。
結局直すことになるので、それだったら最初からSPデザインカンプもいただきたいところです…。
「デザインカンプが確定していない」は、デザインが確定していない状態でコーダーにデザインがくる場合です。自分は遭遇したことないですが、コーディング途中でデザインが変更になる、というケースもあるようです。
それにあわせて「テキストや画像がダミーのまま」で、コーディング時、あるいは提出後に本番用に差し替え指示が出されることがあります。
あくまでも個人的な意見なので、すべてのコーダーさんが同じ意見というわけではありません。
ここまで読んでくださりありがとうございました。