使用しているフォントがまとめてある

デザインから読み解ける部分ではありますが、画像のようにデザインカンプで使用しているフォント・weightを1箇所にまとめてくれていると私は嬉しくなります。

コーディング作業をする前にデザインカンプで使用されている全てのフォントやweightを調べてからWebフォントを取得→コーディング作業に入るのですが、ページ数が多かったり、使用されているフォントが多いと、この作業に時間がかかるんです。

Google Fontsを使用しているデザイナーさんで、「このフォントを使ってください」とリンクを貼って送ってくれた方もいましたが、とても有り難かったです。

SVGデータを送ってくれた

見出し部分などに使用した特殊なフォントをアウトライン化してSVGで送ってくれたデザイナーさん。
特殊なフォントについては、ライセンスが必要だったりするのでSVG形式で送ってもらえると嬉しいです。または、どのデバイスでも共通のWebフォントで代替フォントのご指示をいただけると助かります。

hover時のデザインがある

hoverした状態が分かるデザインがあると、とてもコーディングしやすいです。
ボタン・ヘッダーのグローバルナビ・テキストリンク・画像の動きなどを通常状態とマウスを当てたhover状態を並べたデザインカンプを送ってくださったデザイナーさんがいましたが、とても分かりやすかったです。

要素の余白がわかりやすい

ブログのカードなどの余白が明確に記載してある。
上記の画像については、私の方で一部加工していますが、このデザインカンプを受け取った時、「神！！！」とテンションが上がりました。
要素を測るうちにズレたり、送ってもらったデータに差異があることがあったりすることもあるので、画像のように余白を明記してもらえると一目瞭然ですよね！

テキストの増減が分かるデザインにしてある

ブログやお知らせ一覧などのデザインでよくあるのが、全て同じタイトル＆同じ文章のパターンなのですが、違う文章で書かれているデザインを見た時に「分かってる〜！」とテンションが上がります。

メールやメモ機能で「文章が3 行以上になる場合は3点リーダーにしてください」とご指示いただけた方もいます。
どちらでもOKなのでテキストの増減によってデザインがどのように変わるのか教えていただければ嬉しいです。

修正が１箇所にまとめてある

コーディングしたものををテスト環境にアップして確認していただいた後のことですが、修正箇所を分かりやすく1箇所にまとめてくれたデザイナーさん。
（「修正箇所はこことここね・・・」とまとめてあると理解しやすいので、個人的にまとめてあるのが好みなんです。）

修正箇所にコメントがあり、コメントをクリックするとデザインカンプへぴょーんっと移動！
Figmaってすごいですね！
ここまでしてもらえると、修正の抜け漏れもないな、と感動しました。

まとめ

私がコーディングしやすい、嬉しくなるデザインカンプについて一部ですが紹介させていただきました。

• 使用しているフォントやweightが一目瞭然
• hover時のデザインがある
• 要素の余白がわかりやすい
• テキストの増減が分かるデザイン
• 修正が１箇所にまとめてある
  

「こんなに気を遣わなくても・・・」と思うデザインカンプを送ってくださるデザイナーさんもいますが、コーディング代行は割と急ぎの案件が多いので、正直助かります！！

デザインカンプだけでは読み取れない部分について指示があるとコーディングの進み具合が違うので、
動きのイメージや「こうしてほしい」という要望を箇条書きでOKなので、デザインカンプと共に送ってくださいね。