よくコーディングしやすいカンプ・コーディングしにくいカンプについて議論されているのを目にします。

私も2年以上コーダーとして働いてきて、様々なデザイナーさんのカンプに触れてきましたが、
デザイナーさんによってカンプの作り方は全然違うなと思います。

本記事では自身の経験から、コーディングしやすいカンプについて書いていこうと思います。

個人的見解にはなりますが、参考になれば幸いです。

コーディングしやすいデザインカンプの特徴

レイヤーが整理されている

レイヤーがパーツごとにグループで纏められていると、
構造が理解しやすいですし、画像書き出しが楽になるのでとてもありがたいです。

またレイヤー名が見てわかりやすいものになっていると、
何がどこにあるか見つけやすいので嬉しいです。

デザインガイドがある

カラー情報やフォント情報、余白ルールなど、
一覧で情報がまとめられている資料やアートボードがあるととてもありがたいです。

コーダーとしては、色やフォントなどよく使い回されるものに関して、
変数として最初に定義しておきたいので、事前にデザインガイドが用意されているとめちゃくちゃ助かります！

文字量に応じたデザインがある

例えば、「画像・タイトル」の情報を持ったカードデザインがあったとき、
よく遭遇するのは、タイトルの文字量がどれも同じデザインで作られたものです。

ただコーダーとしてはいろんなパターンが来たときを想定してコーディングする必要があるので、

と文字量に応じてデザインパターンが用意されていて欲しいのです。
どのラインを基準にして合わせるか、などを参考にしたいので、
こういった動的観点でデザインが作られていると大変ありがたいです！

数値が整数になっている

画像や余白、フォントサイズなど、要素に関わらず値は整数値になっていると嬉しいです。

小数点等があると切り捨てるか四捨五入していいのかなど、
確認する時間が必要になってしまったり、
画像の場合、書き出すと滲んだり謎の余白ができたりするので、
そういったところに配慮されていると嬉しいです。

デザインパターンが統一されている

見出しのフォントサイズが場所によって違っていたり、
余白（margin・padding）が要素間で異なっていたりなど・・

デザインパターンにブレがなく、統一されているとありがたいです！

要素間でパターンが異なっていたりすると、
これはあえてそうしているのか、もしくは間違えているだけなのかが、
コーダーには分かりづらく混乱してしまうことがどうしても出てきてしまうので・・

例外部分があれば特筆してくれている

前項に関連するところではありますが、

デザインルールから逸脱して、「ここだけは意図があってこんな風にしてます！」と
事前に例外的な部分を伝えていただけると、コーダー側としてもその部分に注意して対応できるのでありがたいなと思います。

動きがある要素は参考サイト等が書かれている

ホバーしたときの見た目やアコーディオン等、
動きを持たせる部分についてはどうしてもデザインカンプだけではイメージが湧きづらいので、

「このサイトの〇〇部分と同じで大丈夫です」等、
参考サイトURLを教えていただけるとコーダーとしては実装しやすいです。

たまに「アニメーションのスピードはお任せします」と
コーダー側に委ねられたりすることもあるのですが、
結局提出後に修正依頼が来ることも多々あるので、事前にイメージを共有していただけると助かるなと思います。

1つのデザインファイルに収められている

これは私が遭遇した事例なのですが、すごく長いLPのデザインカンプが、
約30ファイルほどのファイルに分けられていたことがあり（セクション毎に分かれていた）、
これに関しては非常にコーディングし辛かった思い出があります。

30ファイルのデータを開くのも大変でしたし、セクション間のmarginも分からなかったり、
デザインの全体像が掴めないので、どこをコンポーネントにすると良いかを構想するのも大変でした汗

なるべくデザインデータは1ファイルにまとめてもらえると、
データの行き来もなくなりますし、サイト全体像がわかるのでコーダーとしてはありがたいなと感じます！

スマホが等倍サイズのアートボードになっている

結構最近もあったりするかもしれませんが、
スマホのデザインが2倍で作られているカンプがあったりしませんか？

これは画像が2倍サイズじゃないと、スマホで見た時にボヤけてしまうから、
といった理由でそう作られることが多いのだと思いますが、

2倍サイズでデザインが作られているが故に、
フォントサイズや余白等に関してはコーディング時に「2で割る」作業が出てきてしまいます・・

今は画像は書き出し時に2倍サイズで出力することも可能なので、
等倍サイズでデザインが作られていても問題ないと思います。

この「2で割る」作業が地味に大変なので、等倍サイズで作られていると嬉しいなと思います。

OGP、faviconなどの画像が用意されている

サイトデザインには関係ない部分の、
OPG画像やfavicon画像が一緒に準備されていると、「おお！」となります。

私の経験上、8割くらい忘れられているイメージなので笑、
最初から提供いただけると感謝の気持ちが込み上げてきます！

レスポンシブ対応の指示がある

「よしなに」とレスポンシブコーディングを依頼されると、
できなくはないけど任せられてしまって大丈夫かな、、となります。

「ここはレスポンシブではこうなって欲しい！」というデザイナーさんの希望があれば、伝えてもらえると嬉しいです。

「〇〇px〜〇〇px」ではこんな見た目
「△△px〜△△px」ではこんな見た目で、
という風に具体的な数値をもとにデザインが作られているとコーディングする側としては指示が明確なので非常に助かります！

すべてのデザインを作るのは大変かもしれませんが、
ヘッダー・フッターなどパーツごとで構わないので、事前にイメージできるようにしていただけると嬉しいなぁと思ったりします。

まとめ

色々と書きましたが、コーダー目線での観点になりますので、
デザイナーさんからしたらそこまでやってられないよ！という意見もあるかもしれません。

ただいずれにせよ、デザイナー・コーダーがお互いに気持ち良く仕事ができればいいなと思うので、
何かあればこまめにコミュニケーションを取りながら進められたら一番良いのかなと思います。

私もまだまだなので、偉そうなことは言えませんが、
この記事がどなたかの参考になれば幸いです。