現役コーダーが感じた、コーディングしやすいデザインカンプ

こんにちは、くぼです。
私は現在複業の一つとして、webサイトのコーディング業務を受託しています。
WEBデザイナーの方が制作したデザインデータをいただいて、ブラウザで表示できるようにコーディングしていくのですが、その中でコーディングしやすいものとそうでないものがあります。
決して文句を言いたい訳ではなく…笑
立場が違えば視点も変わってくるので、コーダーとして感じる部分を共有できればと思います。

コーディングが得意ではないWEBデザイナーやDTPデザイン出身の方、WEBデザインを勉強し始めた初心者の方など、コーダーってこんなこと考えてるんだなぁ〜と思いながら読んでいただければ幸いです笑

①余白や文字の値が揃っている

意図したデザインであれば全く問題ないのですが、四方のmarginやpaddingなどの値が1,2pxずつ違う、同じデザインのパーツなのにそれぞれ値がちょっとずつ違う、フォントのサイズやラインハイト、カラーコードがどれも微妙に違うetc

こういったデザインは全て忠実に再現すべきなのか、値を綺麗に揃えられていないだけなのか判断に迷うので、可能であれば揃えていただけると大変ありがたいです。

コーダーがなぜこれを気にするかと言うと、なるべくコードを簡潔にして記述量を減らしたいからです。
全て値が揃っていると一つのクラスにまとめることができるので、コードの見通しがよくなり工数の削減につながります。

もし急ぎの案件などできれいに揃えている時間がない！なんて時は一言「平均の値に揃えておいて」など言っていただけると個人的にはそれで問題ないかなと思っています。
とはいえ曖昧なことを嫌がるコーダーさんもいるので、これは人によりけりかなとも思います。

②値に小数点が入っていない

先ほどの①のポイントと被りますが、これもかなりあるあるです。
コーディングでは小数点以下は表現できないので、切り上げるべきか切り捨てるべきかとても悩みます。
全て整数値であればとても助かります。

③レイヤー管理がしっかりされている

デザインカンプのレイヤーやフォルダ管理がしっかりされていると、画像を書き出すときにとても楽です。
一緒にグループ化して書き出したいオブジェクトがどこにあるかわからない、名前も一貫性がなかったりすると探すのに苦労することがあります。

④WEBフォントかどうかわからない

以前の記事でも触れましたが、みたことがないフォントだとWEBフォントで対応するのか代替フォントでもいいのかわからない時があります。
パスのアウトライン化がされていれば画像で書き出せばいいんだな、とわかるんですが、アウトライン化がされていないとどうすべきかわからないので、フリーのWEBフォントがあれば共有していただけると助かります。

⑤セクションごとにコンテンツ幅が違う

これも意図したデザインであればそのまま再現するのですが、理由もなくコンテンツ幅がぶれているとコードを簡潔に記述できないので統一してほしいなと思います。

⑥最大文字数を想定してデザインされている

これはどういうことかと言いますと、メンバーのプロフィールを一覧で表示する時などに、それぞれの名前をコーディングするときなんかイメージしていただけるとわかりやすいと思います。

人それぞれ名前の文字数って違いますよね？
漢字で四文字の人もいれば六文字の人もいるわけです。
そんなときダミーテキストが四文字で綺麗に収まるデザインをされていると、五文字、六文字の方がきたとき枠に収まらずに文字が飛び出してしまうんですよね。

もちろんデザインする時点で具体的な情報がない場合もあると思うので、いつも完璧にできるわけではないと思います。ですがある程度の文字数を想定してデザインするか収まらない時はフォントサイズを調整するなどの指示があれば、混乱を避けられるかなと感じています。

まとめ

何かグチのような内容になってしまいました…。
デザイナーの皆さん、気分を害されたら申し訳ありません。
決して文句を言いたいわけではありません。
コーダー側が譲歩すべき時もたくさんあると思います。
お互い協力して良いものを作り上げられればと思いますので、これからもよろしくお願いいたします。（誰やねん）

コーダーたちはできる限りデザイナーの意図通りに実装したいと思っています。
カンプでは伝えきれない部分はコミュニケーションを取ったり仕様書に書くなどしてどんどん言っていただければと思います。

最後に

コーディングが苦手なWEBデザイナーさん、人手不足の制作会社さん、コーディング代行いたします。
TwitterのDMからお気軽にご連絡してください。