こんなデザインカンプがあったらやりやすそう

どうも、くまだです。

コーダーとして仕事をするときに、こんなデザインカンプがあったら作業進めやすいだろうなと、思うときがあります。（たぶん、一部のコーダーさんはわかってくれるはず…）

あくまでも自分の場合は、というので他の人は違うかもしれません。

普段はデザインカンプをもらったら、以下のことをします。

上の一部の作業を、コーダーではなくデザイナーさんがやってくれると非常に助かったりします。

画像系の素材は、デザインカンプとは別で「デザインカンプで使った画像一式」をフォルダでまとめてもらえるとありがたい笑

自分の場合は、ほぼ自分で書き出すことがほとんどです。エクセルで作ったデザインカンプ（というよりワイヤー）のときは、先方から画像素材一式もらっていましたが、そのケースぐらいです。

もちろん、画像の用途によっては書き出しの形式が違ってくるので、それが分かっていないデザイナーさんだと、こっちで書き出したほうがよかったりする場合もありそうです。

ちなみに、自分で書き出すときは以下の感じで書き出し形式分けてます。

デザインカンプ全体で使われている共通パーツを、自分で一か所に集めてそれぞれにクラス名を付けて、みたいな感じで作業を始めます。

クラス名はこちらで考えるので問題ないのですが、もし可能であれば、共通パーツ集、コンポーネント集的なものが最初からあると非常に助かります笑。

自分の場合、ほとんどのケースでコンポーネント集的なものはないので、自分で探します。

デザインカンプ全体で使われている色やフォントの一覧があると助かります。いわゆるスタイルガイド的なやつです。

こちらの場合も、ほとんどのケースでスタイルガイドはないので、トップページの上から下層ページの一番下まで舐めるように確認して、使われている色やフォントを抜き出して、それを環境ファイルに反映させる作業になります。

色やフォントの数によっては探すのにも時間かかります。

要素間の余白が小数点になっていたり、一貫性がなかったりするとめんどう。

小数点はデザイナーさんが気づいていないことが多いので、だいたいは他の要素と比較して合わせてしまいます。

一貫性がない、というのも例えば、リストみたいに要素が縦に並んでいる状態で、途中の要素間がバラバラだったりするケースです。

AとBの間が10px、BとCの間が12px、CとDの間が11px、DとEの間が10px…みたいな感じです。このケースだったら10pxが一番使われているので、10pxに合わせてしまいます。

デザイナーさんも大変

デザイナーさんの仕事も大変なのは承知しているし、そこまで工数かけられないのもわかっています。個人的な理想のデザインカンプがあったらいいなあという感じです。

ここまで読んでくださりありがとうございました。