全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
デザインデータの渡し方｜コーディング外注前に整える入稿ルール
2026.09.16
※この記事は2026年09月16日時点の情報をもとに作成されました。
コーディング外注で手戻りが起きる原因の多くは、デザインデータの渡し方にあります。
データが整理されていれば質問は減り、見積もりも早く正確になります。
この記事では、コーディングを依頼する前にデザインデータを整えるポイントをまとめます。
- 1. 渡す前に整える5つのポイント
- 2. PC・スマホの両方を用意する
- 3. 可変幅の指定を添える
- 4. 動きの指定は文章か動画で
- 5. 指示書とセットで渡すと最短になる
- 6. 入稿ルールを決めれば依頼のたびに楽になる
- 7. よくあるご質問（FAQ）
渡す前に整える5つのポイント
形式（XD／Figma／Photoshop／Illustrator）を問わず共通するのは次の5点です。
- レイヤー名と階層：セクション単位でグループ化し、名前を付ける
- 非表示レイヤーの整理：使わない案・下書きは削除するか別ページへ
- フォント情報：フォント名・ウェイト・行間・字間を明記
- 画像の書き出し：書き出し対象を指定（またはアセット設定済みにする）
- アートボードの命名：PC/SPとページ名が分かる名前にする
PC・スマホの両方を用意する
PCデザインだけを渡して「スマホはよしなに」は、認識のズレが起きやすい進め方です。
最低限、トップと下層1種のスマホデザインがあれば、他ページは規則性から展開できます。タブレットは「PCとSPのどちらに寄せるか」を伝えれば足ります。
可変幅の指定を添える
デザインは固定幅で作られますが、実際のブラウザは幅が変わります。
次の指定があると実装が迷いません。
- コンテンツの最大幅（例：1080px）
- 背景を全幅にするか、コンテンツ幅で止めるか
- 画像は幅に応じて伸縮するか、トリミングするか
- ブレークポイント（切り替える画面幅）
対応範囲の決め方は対応ブラウザ・端末の決め方で解説しています。
動きの指定は文章か動画で
デザインデータには動きが入りません。
ホバー時の変化、スライダーの秒数と枚数、アコーディオンの開閉、スクロール時のフェードなどは、文章か短い画面録画で添えてください。参考サイトのURLを示すのも有効です。
指示書とセットで渡すと最短になる
デザインデータに加えて、実装上の決めごとを1枚にまとめた指示書を添えると、質問のラリーがほぼ無くなります。
項目と書き方はコーディング指示書・仕様書の作り方にテンプレートを用意しています。
入稿ルールを決めれば依頼のたびに楽になる
一度自社の入稿ルールを決めてしまえば、次回以降は同じ形で渡すだけです。
外注先が変わっても通用するため、社内資産として持つ価値があります。
RunLandは制作会社様のデザインをお預かりして実装する下請けを専門としています。コーディング外注もご覧ください。
よくあるご質問（FAQ）
Q. Figmaでもコーディングを依頼できますか？
A. はい。Figma・XD・Photoshop・Illustratorのいずれでも対応可能です。閲覧権限をいただければ書き出しもこちらで行えます。
Q. スマホのデザインが無くても依頼できますか？
A. 可能です。その場合はPCデザインをもとにこちらで組み方をご提案し、ご確認いただく進め方になります。
Q. デザインデータが整理されていないと追加費用になりますか？
A. 整理そのものを費用に上乗せすることは通常ありませんが、確認のやり取りが増えると納期に影響します。可能な範囲で整えていただけると助かります。
まとめ
デザインデータの整理にかける30分が、実装中の質問と手戻りを何時間分も減らします。
まずはレイヤー名とフォント情報の明記から始めてみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 株式会社 RunLand 管理者
この記事を読んだ方はこんな記事も読んでいます
人気のWEBブログ
最新WEBブログ
-
NEW!
-
NEW!
-
NEW!
