コーダー目線で教える／デザイン入稿ファイルのベストプラクティス（紙→Web編）
はじめに
「紙もの中心でデザインしてきたけれど、Web用にどう渡せばいいのか分からない…」
そんな悩みを抱えるデザイナーさん向けに、“コーダーがそのまま実装に使える”入稿データの作り方をまとめました。
1. ドキュメント設定 3つの鉄則
- 単位は px — mm/ptだと誤差が出る
- アートボード横幅は 1920px または 1440px（モバイルは 375px 推奨）
- カラーモードは RGB／sRGB — CMYKのままは色ズレの原因
Illustratorなら 「ピクセルプレビュー」＋「ピクセルにスナップ」 を ON に。
2. レイヤー／グループ整理のベストプラクティス
- セクション単位でレイヤー or アートボード分け（header / hero / features / footer など）
- 命名は英語＋ハイフン（例：btn-primary, card-service）
- 不要レイヤーは削除・非表示でスリム化
3. タイポグラフィ設定
- Webフォントは重量増— ウエイトは 2〜3 程度に絞る
- 全角スペースでの調整は NG。
文字間は基本「letter-spacing:0」で、必要なら 0.05 em など CSS で調整しましょう。
※全角スペースは環境によって幅が変わり、レスポンシブで崩れる原因になります。
4. 罫線（ボーダー）設定の注意点
- 幅は整数 px —
0.5pxなど少数の線幅はブラウザごとにアンチエイリアスが変わり、 1px 未満でガタつく原因になるため避ける - 線は内側に揃える — Illustrator・Figma なら 内側を指定
→ 実装時box-sizing:border-box;と相性が良く、レイアウトズレやはみ出しを防げる
5. 画像・アイコン書き出しルール
- 写真・背景：JPEG 80〜85%／横 1920px 以内
- 透過ロゴ・図版：PNG24（影ありの場合）、単色なら SVG
- UIアイコン：SVG（16px or 24px で stroke 2px 程度）
- @2x 用は image@2x.png 命名＋50% 表示を前提に渡す
6. デバイスプレビューでの最終チェック
- Figma Mirror／XDプレビューで文字のにじみ・崩れ確認
- Chrome DevTools → Device Toolbar でモバイル幅を確認
- Contrast Checker で WCAG AA 以上を確保
最も大切なのは “わからないまま進めない” こと
仕様や書き出しで迷ったら、ぜひお気軽にご連絡ください。
「早めの相談＝納期短縮 & 品質向上」 が合言葉です。
まとめ
– px単位・RGB・ピクセルグリッド —— Web 基本三種
– レイヤー整理＆命名 —— コーダーに優しい = リピート指名率UP
– 書き出し設定 & 注釈 —— 修正ループを激減
制作のご相談、お気軽にどうぞ！
「工数を抑えつつデザインクオリティを上げたい」「カスタム投稿で運用がラクな WP を作りたい」
──そんな時はお気軽にご相談ください。初回ヒアリングは無料です。