どうも上かるびです。
Twitterで定期的に「コーディングしにくい（しやすい）デザインカンプ」について話題になるので、私自身感じていることを基に皆さんの意見を取り入れながらまとめてみました。
以前Twitterで助かるデザイナーさんの特徴について呟いたところそれなりに反響があったので、デザイナーさんも実装者もお互いに興味がある話題だと感じています。
Web業界３年目のコーダーとして、「このデザイナーさん、やるなぁ、助かるなぁ、いいなぁ」と感じるデザイナーさんの特徴です。
これらは絶対条件ではないと思うのですが、コーディングをする人間からすると、これが全部できていると「好き…」ってなります。
よろしくお願いします☺️ pic.twitter.com/X03XEwbbvT
— 上かるび｜コーディング (@jookalubi24) September 1, 2021
コーディングしにくいデザインカンプの特徴
まずは業界３年目の私自身の意見です。
個人的な意見
・小数点の値がある
→イラレで多い印象。書き出した時に余白ができたり画像がにじんだりする原因。
・画像のリンクが切れている
→修正があった後などに多い印象。
・画像を書き出したそうとした時に狙ったものがうまく書き出せない
→レイヤー整理の問題？余分なパーツも書き出されたり欠けたりする場合がある。マスクなどを利用した場合に多い印象。
・コンポーネント（共通パーツ）に統一性がない
→余白などの値が微妙に違うと狙っているのか間違いなのか判断にくい。
・例外的なスタイルについての注釈などがない
→変形文字、合成フォント、カーニング、ベースラインシフト、絶妙な透明度、乗算などのアピアランスなど。
・フォントサイズ10px未満を使っている（スマホの2倍デザインカンプで20px未満）
→基本的にWebサイトでのフォントサイズは10pxが最小ライン。デザイン上必要な場面もあると思いますが、実装で一手間かかりますし可読性も低くなるのでコーディングしにくい項目として挙げさせてもらいます。
・レスポンシブの想定がされていない（完全に実装者任せ）
→基本的にお任せでも構わない＆可変しても崩れないようにするのも実装者のスキルだと考えています。しかしレスポンシブで表示が想定しにくい（どうしても崩れる）又は想定される動きが複数ある場合など、デザイナーさん側で全く考えていないのは、割と困ります。
・グラデーションが要素の端以外からスタートしている
→内側は大丈夫ですが、下記画像のように外にはみ出しているとCSSに必要な色情報が取得しにくいです。
Twitterで見かけた意見、コミュニティでの意見
私以外の実装者さんが感じていることをまとめました。
・パッと見綺麗にできていても実際に測ると値がバラバラ
・余白や幅が奇数（2倍のデータ）
・乗算を使って色調整や背景調整をした画像がある
・単語でカーニングが微妙に違う
・平文に有料フォントを使う（フォントの商用についての知識がない）
・ボーダーや角丸のサイズがわからない（ラスタライズ処理などによるもの）
・IE対応なのにぼかし表現などを使っている
・UI関連のデザイン（アコーディオン展開時、ハンバーガーボタン押した時）を考えていない
・シンプルなアイコンでpngデータを使ってくる（SNS,ピクトグラムなど）
・CMS案件で画像が設定されていないときのno-image画像が用意されていない
・OGP、faviconなどの画像が用意されていない
・横幅100%の画像などが大きいサイズのモニターでどうなるのか仕様が決まっていない
・切れたら困る画像（人物など）をテキストコンテンツの背景など比率が大きく変わる場所に配置（レスポンシブによるトリミングの想定がされていない）
コーディングしやすいデザインカンプにするために
「コーディングしやすいデザインカンプ」を作るなら、とりあえず上記のことを漏れなく行えばいいと思うのですが、Webの仕様はコロコロ変わるので根本的な解決にはならないと考えています。
個人的な解釈でコーディングしやすいデザインカンプにしていくにはどうすればいいか普遍的な部分をまとめてみました。
・共通パーツ、コンポーネントについては統一性を持たせる（例外がある場合は何かしらの形で伝える）
・Webの仕様を知ろうと努力をする（デザイナーが分かりにくい部分は実装者側も分かりやすく伝える努力をする）
・デザイン、コーディングをする前段階で共通理解を図る（会社の場合は社内ルールなどを決めるのも手）
あくまで主観なので他にもこうしたらよくなるみたいな意見がありましたらコメントなどでお願いいたします！
実装者が喜ぶデザインカンプ事例
ここからは私も含め実装者が体験した「過去にこういうデザインカンプがあって助かった・やりやすかった」という事例を紹介します。
・サイトで使用している色やフォント情報などが別途で一覧になっている
・修正があったときに口頭（チャット）に加えてデザインカンプにも注釈が入っている
・「他に足りないものがあったら遠慮なく言ってください」などの気遣いがある
・アニメーションのイメージを事前にGIFなどで準備してくれている
・使用フォントと言語が一覧で整理されている
例）日本語・かな→游ゴシック、英語→Montserrat
お互い歩み寄れたらいいですね
色々あったかと思いますが、デザイナーも実装者も人間です。
お互いミスもあれば分からないこともあります。
思いやりを持ってお互いに歩み寄れたら何かしら改善するのかなぁと思います。
「逆だったかもしれねぇ」精神でいきましょ。
コメント