https://zenn.dev/tak_dcxi/articles/88762df24ef2eb3013c2

new_txlqub.png

TAK(@tak_dcxi)です。

コーダーやフロントエンドエンジニア（以下実装者と呼ぶ）が作業に取り掛かる前に事前にデザイナーに確認しておくとよいことを独断と偏見でまとめました。過去に面倒臭がって聞くのを放棄して失敗した経験もあるので、自戒の念も込めています。

デザインの共通ルールを確認する

余白のサイズやフォントサイズや使用している色などはルール決めがされているとは思いますが、デザインのルールを実装時に分かりやすくしておくことで効率的かつ保守性や拡張性に強いコードが書きやすくなります。

逆に実装時にルールが分からないと、実装者がデザインカンプを見てもそのルールを理解するのに時間がかかってしまうことも多いです。余白であれば感覚で配置されてるのか、似たような箇所で17pxであったり23pxであったり…と意図が分かりかねる場合もあります。余白は原則8の倍数で行うみたいなルールが事前に実装者に伝わっていればそれがズレだと認識できるでしょう。

ただ、「これは恐らく間違いだろう」と均等化しても「ここだけちょっと仕様が違うんですよーｗｗｗ」と意図的にズラしているなんてこともあるので、意図的にルールから外した箇所があるかどうかは事前に聞くようにしておくと良いかもしれません。

最低でも、

あたりはデザイナーから聞いておき、予めCSSの変数としてまとめておく。実装のデザインガイドにもなり、変更にも強くなります。

デザインに対してデザイナーと実装者で共通の認識を持っていれば、実装者の「それっぽく」が求められた際にも柔軟に対応できるというメリットもあります。

可能であればデザイナーの方はデザインガイドを作っておくと良いでしょう。デザインガイドは実装者だけでなくディレクターや運用・改修の担当者、そしてデザイナー自身の助けにもなります。

デザインカンプのサイズを何pxで作るのか取り決めておく

デザインカンプのアートボードの横幅とデスクトップビューでのコンテナ幅を何pxで作るのかは実装コストと直結しがちなので事前にデザイナーと話し合いの上決めたほうが良いです。