Webデザインの納品形式｜コーディング込みか画像のみかの指定 2026

Webデザインを外注しようとして、見積もりを取った途端に金額の幅の広さに戸惑った経験はないでしょうか。同じ「トップページ制作」という依頼でも、ある制作者は5万円、別の制作者は30万円という見積もりを出してくることがあります。この差の正体は、多くの場合デザインだけの納品なのか、コーディングまで含めた納品なのかという「納品形式」の違いです。この記事では、Webデザインの納品形式にはどんな種類があるのか、コーディングを含めるべきかどうかの判断基準、発注時に指定すべき項目を具体的に整理します。

Webデザイン外注の納品形式で迷う理由

Web制作の発注が初めての担当者ほど、この納品形式の違いでつまずきます。理由はシンプルで、デザインとコーディングは本来別のスキルセットだからです。

デザインはFigmaやAdobe XDといったツールで見た目のカンプ（完成イメージ）を作る作業です。一方コーディングは、そのカンプをHTML・CSS・JavaScriptといった実際にブラウザで表示されるコードに変換する作業です。この2つの工程を1人が両方担当することもあれば、デザイナーとコーダーが完全に分業しているケースもあります。

発注者が「Webデザインをお願いします」とだけ伝えた場合、制作者によって「画像データ一式を納品します」と考える人もいれば「当然コーディングまでやります」と考える人もいます。この認識のズレが、納期直前になって「まだサイトが動く状態になっていない」という深刻なトラブルを引き起こします。

コーディングできる人は多いけれど、実際にWebサイトを公開できなかったり、サーバー・ドメインの段階でつまづく人は多いです。 出典: shogo-log.com

この指摘は発注者にとっても示唆的です。コーディングスキルがある制作者に依頼できたとしても、その先の公開作業（サーバー設定・ドメイン紐付け）まで対応してもらえるかどうかは別問題だということです。納品形式を決める際は、単に「コーディングが含まれるか」だけでなく「どこまでの工程を制作者が担当するのか」を明確にする必要があります。

マクロ視点で見るWeb制作市場の納品形式の傾向

Web制作を取り巻く市場では、近年ノーコードツールやCMSの普及によって、納品形式の選択肢が広がっています。かつては「デザイン→コーディング→サーバーへのアップロード」という一直線の工程しかありませんでしたが、現在はWordPressのテーマ改修、STUDIOやWixのようなノーコードプラットフォーム、Reactなどのフレームワークを使った開発など、納品物の形が多様化しています。

経済産業省がまとめるIT関連の調査でも、中小企業のデジタル化投資は年々拡大傾向にあるとされており、Webサイトのリニューアルや新規制作の需要は継続的に存在しています。

この需要拡大の裏側で、発注者側の知識不足によるミスマッチも増えています。特に個人事業主や中小企業の担当者は、社内にWeb制作の専門知識を持つ人材がいないケースが多く、「デザインだけ頼んだつもりが、後からコーディング費用を追加請求された」「逆にコーディングまで頼んだつもりが、画像データしか届かなかった」というトラブルが後を絶ちません。

こうした背景から、発注時点で納品形式を明文化しておくことの重要性が増しています。特に予算に制約のある個人事業主やスタートアップほど、納品形式の齟齬による追加費用の発生は事業計画に直結する痛手になります。

Webデザインの納品形式は主に3パターン

Web制作の納品形式は、大きく分けて3つのパターンに整理できます。それぞれの特徴とメリット・デメリットを見ていきましょう。

パターン1：デザインカンプのみの納品

Figma・Adobe XD・PhotoshopなどのデザインファイルとPNG・JPEG形式の画像書き出しのみを受け取る形式です。この場合、実際にブラウザで表示できる状態にするコーディング作業は発注者側で別途手配する必要があります。

この形式のメリットは費用が比較的安く抑えられる点です。相場としては、トップページ1枚のデザインで3万円から10万円程度が目安になります。デメリットは、コーディングを別の制作者に依頼する必要があるため、デザイナーとコーダーの間で意図が正確に伝わらないリスクがある点です。デザインカンプに書かれたフォントサイズや余白の指定が曖昧だと、コーダーが独自解釈で実装してしまい、完成品がデザインイメージと微妙に異なることがあります。

パターン2：静的コーディングまで含む納品

デザインに加えて、HTML・CSS・JavaScriptで組んだ静的なファイル一式を納品してもらう形式です。ブラウザで開けば見た目通りに表示される状態まで仕上げてもらえます。

この形式は、レスポンシブ対応（スマートフォンやタブレットでの表示崩れがないようにする対応）まで含めるかどうかで費用が大きく変わります。レスポンシブ対応込みのコーディングでは、トップページ1枚あたり5万円から20万円程度が相場です。ページ数が増えれば当然費用も比例して増加します。

静的コーディングまで依頼するメリットは、公開直前までの完成度が高いことです。デメリットは、その後の運用（お問い合わせフォームの設置や、CMSへの組み込み）を別途行う必要がある点です。

パターン3：CMS実装・システム組み込みまで含む納品

WordPressなどのCMS（コンテンツ管理システム）へのテーマ組み込みや、独自システムとの連携まで含む納品形式です。デザイン、コーディング、実装のすべてを1つの制作者、あるいはチームに一括で依頼する形になります。

この形式は最も費用が高くなりますが、発注者側で技術的な作業をほぼ行う必要がないという利点があります。WordPressサイトの新規構築であれば、ページ数やカスタム機能の有無にもよりますが30万円から100万円を超える案件も珍しくありません。

コーディングを含めるべきかどうかの判断基準

納品形式を決める上で最も悩ましいのが「コーディングを含めるべきか」という判断です。以下の3つの観点から考えると整理しやすくなります。

社内にコーディングできる人材がいるか

もし社内やチーム内にHTML・CSSを扱える人がいるのであれば、デザインのみを外注し、コーディングは内製化するという選択肢が取れます。この場合、外注費用を抑えられる一方で、社内の人的リソースを割く必要があります。

逆に社内にコーディング人材がいない場合は、多少費用がかかってもコーディングまで含めて依頼するのが結果的に安上がりです。デザインのみで納品してもらい、別途コーダーを探して依頼すると、デザイナーとコーダーの間での連携コスト（打ち合わせの時間、修正指示のやり取り）が発生し、トータルの手間と時間が想定以上にかかることが多いためです。

公開後の更新頻度

サイト公開後、ブログ記事や商品情報を頻繁に更新する予定がある場合は、CMS実装まで含めた納品形式を検討すべきです。静的なHTMLファイルのままでは、更新のたびにコーディング知識が必要になり、運用コストがかさみます。

一方、企業のコーポレートサイトのように更新頻度が低い場合は、静的コーディングまでの納品で十分なケースも多くあります。

予算の上限

当然ながら予算にも左右されます。限られた予算の中でコーディングまで依頼したい場合は、テンプレート的なデザインを採用してコストを抑える、ページ数を絞るといった工夫が必要です。

このあたりの判断について、実際に外注する側として痛感したことがあります。初めてWeb制作を発注したとき、複数社から見積もりを取り比較する中で、金額差の理由を深く確認せずに一番安い業者を選んでしまった経験があります。結果的にその業者はデザインのみの対応で、コーディングは含まれておらず、別途コーダーを探す手間と追加費用が発生しました。見積もりを比較する際は、金額だけでなく「納品形式に何が含まれているか」を必ず一つずつ確認することの重要性を、身をもって学びました。

発注時に指定すべき納品形式のチェック項目

トラブルを避けるためには、発注時点で以下の項目を明文化しておくことが欠かせません。

ファイル形式の指定

デザインデータであればFigma・Adobe XD・PSDのどれで受け取るか、コーディングデータであればHTML・CSSに加えてSassやTypeScriptといった開発言語を使うかどうかを事前に確認します。

WEBデザインに関わるデータファイル形式と使い分け

このように制作会社側も納品時のファイル形式に関する解説記事を用意しているケースが多く、発注者側もある程度の基礎知識を持っておくと、やり取りがスムーズになります。

レスポンシブ対応の範囲

スマートフォン・タブレット・PCのどのサイズまで対応させるか、ブレイクポイント（表示が切り替わる画面幅）をどこに設定するかを具体的に指定します。「レスポンシブ対応込み」とだけ伝えると、制作者によって対応範囲の解釈が異なるため、できれば主要な画面幅（375px、768px、1024px、1440pxなど）を明示するのが望ましいです。

ブラウザ対応範囲

Google Chrome、Safari、Microsoft Edgeなど、どのブラウザでの動作確認まで行うかを指定します。特にSafari特有の表示崩れは見落とされがちなので、対応ブラウザのリストを共有しておくと安心です。

修正対応の回数と範囲

納品後の修正について、何回まで無料で対応してもらえるのか、修正の範囲（文言修正なのか、レイアウト変更なのか）をあらかじめ取り決めておきます。修正回数の上限を超えた場合の追加費用の目安も事前に確認しておくとトラブルを防げます。

権利関係の確認

納品されたデザインデータやソースコードの著作権が発注者に譲渡されるのか、それとも制作者側に留保されるのかを確認します。特にコーディングを含む案件では、ソースコードの二次利用や改変の可否についても明確にしておく必要があります。

コーディングの品質を見極めるポイント

コーディングまで含めて依頼する場合、成果物の品質をどう見極めればよいのかという疑問も出てきます。専門知識がない発注者でも確認できるポイントを紹介します。

表示速度

Googleが提供する無料ツールでページの表示速度を測定できます。表示速度が極端に遅い場合、画像の圧縮が不十分だったり、コードが最適化されていない可能性があります。

モバイル表示の崩れ

スマートフォンの実機、または開発者ツールのモバイル表示モードで、文字が画面からはみ出していないか、ボタンが押しにくいサイズになっていないかを確認します。

HTML構造の妥当性

見出しタグ（h1、h2、h3）が正しい階層構造で使われているかは、SEOにも影響する重要な要素です。専門知識がなくても、ページのソースコードを開いて見出しタグの使われ方をざっと確認するだけでも異常には気づけます。

発注者の失敗談から学ぶ納品形式のトラブル回避

見積もり比較の失敗以外にも、外注する側として経験した気づきがあります。あるとき、納品されたコーディングデータを確認すると、想定していたレスポンシブ対応が不十分で、スマートフォンで見ると一部のボタンが押しにくいレイアウトになっていました。契約時に「レスポンシブ対応込み」とだけ記載しており、具体的な画面幅の指定をしていなかったことが原因でした。この経験から、発注時の指定はできる限り具体的な数値で書くべきだと痛感しました。

安さだけを基準に業者を選んで品質面で苦労するという流れは、Web制作の発注では非常によくあるパターンです。相場より極端に安い見積もりを見た場合は、その金額に含まれる作業範囲を必ず確認する姿勢が重要です。

直接依頼と仲介経由での納品形式の違い

制作会社や代理店を通して依頼する場合と、フリーランスに直接依頼する場合とでは、納品形式の柔軟性にも違いが出ます。

代理店経由の場合、パッケージ化されたプランが用意されていることが多く、納品形式もあらかじめ決まっているケースが目立ちます。その分、途中で細かい調整をお願いしにくいという側面があります。加えて、代理店を通す分の中間マージンが上乗せされるため、同じ品質の成果物でも費用が高くなりがちです。

一方でフリーランスに直接依頼する場合は、納品形式を柔軟にカスタマイズしやすいというメリットがあります。デザインのみ、コーディングまで、CMS実装までといった選択を、予算に応じて相談しながら決められます。中間マージンが発生しない分、同じ予算でもより多くの作業を依頼できたり、より高いスキルを持つ制作者に依頼できたりする可能性が高まります。手数料0%で直接依頼できる仲介サービスを活用すれば、相場より抑えた費用で希望の納品形式を実現しやすくなります。

Web制作を発注する際、LP制作・HTML/CSSコーディングのお仕事のガイドでは、ランディングページ制作におけるコーディング込み依頼の相場や進め方を具体的に解説しています。単一ページの制作を検討している場合は参考になるはずです。

また、Webサイトの運用開始後に広告運用やセキュリティ対策まで見据えている担当者には、AI・マーケティング・セキュリティのお仕事のガイドも役立ちます。制作後の運用フェーズで必要になる周辺業務の外注相場も併せて把握しておくと、Web制作全体の予算計画が立てやすくなります。

20年の市場観察から見える納品形式トラブルの本質

フリーランス・在宅ワーク市場を長く見てきた運営者の視点から言えば、納品形式にまつわるトラブルの多くは「言葉の解釈のズレ」に起因しています。発注者は「コーディング込み」という言葉を「公開できる状態まで仕上げてもらえる」と解釈しがちですが、制作者側は「HTML・CSSファイルの納品まで」と解釈していることがあります。この解釈の幅を埋めるのは、契約書や発注書に書く言葉の具体性です。

長く安定して受発注を続けている関係性ほど、初回の依頼時点で納品形式のすり合わせに時間をかけている傾向があります。単発の作業を安く済ませることよりも、「この制作者になら次も任せられる」という信頼関係を築くことに価値を置く発注者ほど、結果的に長期的なコスト効率が高くなるという構造が見えてきます。

また、中間マージンが発生しない直接取引の構造は、発注者と制作者の双方にとって利点があります。発注者は同じ予算でより幅広い納品範囲を依頼でき、制作者側は手取りが厚くなることで、より丁寧な仕事に時間を割く余裕が生まれます。この双方が得をする関係性は、単に安いという表面的な価格差以上に、成果物の品質そのものに影響してくる部分だと、長年この市場を見てきた立場からは実感として言えます。

納品形式を決める際に確認すべき追加ポイント

ここまで紹介した基本項目に加えて、実務でよく見落とされがちなポイントをいくつか補足します。

バージョン管理の有無

コーディングを含む案件では、Gitなどのバージョン管理システムを使って開発が進められているかを確認しておくと安心です。バージョン管理がされていれば、修正の履歴が残り、万が一トラブルが起きた際にも過去の状態に戻せます。

デイトラにもGit講座が!!

このように専門スクールでもGitの学習が重視されているのは、コーディング品質を支える基盤技術としての重要性が高いためです。発注者側がGitの詳細を理解する必要はありませんが、「バージョン管理をしているか」を質問できる程度の知識は持っておくと制作者選びの判断材料になります。

画像素材の権利関係

デザインに使用されているストックフォトやアイコン素材について、商用利用のライセンスが発注者側に引き継がれるかどうかも確認すべき項目です。特に無料素材を使っている場合、クレジット表記が必要なケースもあるため、契約時に確認しておきましょう。

納品後のサポート期間

コーディングまで含む納品の場合、公開後一定期間は不具合対応を無償で行ってもらえるかどうかも重要な確認事項です。一般的には納品後1ヶ月から3ヶ月程度の無償サポート期間を設けている制作者が多い傾向にあります。

公的機関・関連参考情報

本記事の内容に関連する公的機関や信頼できる情報源は以下の通りです。最新情報は公式サイトで確認してください。

• 厚生労働省

まとめに代えて：発注前の準備が納品形式トラブルを防ぐ

Webデザインの納品形式は、単なる「デザインかコーディングか」という二択ではなく、レスポンシブ対応の範囲、ブラウザ対応、権利関係、修正対応まで含めた複合的な取り決めです。発注前にこれらの項目を一つずつ言語化し、見積もり比較の際には金額だけでなく作業範囲を丁寧に照らし合わせることが、後々のトラブルを防ぐ最も確実な方法です。

予算に限りがある個人事業主やスタートアップほど、中間マージンのかからない直接依頼という選択肢を検討する価値があります。同じ予算でより広い納品範囲を依頼できる可能性が高まるためです。

Webデザインを内製化する道を検討している担当者には、Figma初心者ガイド｜Webデザインの基本操作【2026年版】が基礎操作の理解に役立ちます。また、資格取得を通じてデザインスキルの土台を固めたい場合は、Webデザインに役立つ資格おすすめ5選｜独学で取れる資格を厳選も参考になります。

よくある質問

Q. Webデザインとコーディングを別々の業者に依頼してもいいですか？

可能ですが、デザインの意図がコーダーに正確に伝わるよう、余白やフォントサイズの指定を明確にしたデザインカンプを用意することが重要です。連携コストを考慮すると、同じ制作者に一括依頼する方がスムーズな場合もあります。

Q. コーディング込みの納品にすると費用はどれくらい上がりますか？

デザインのみの場合と比べて、レスポンシブ対応込みの静的コーディングでは相場が2倍から3倍程度になることが多いです。ページ数や機能の複雑さによってさらに変動します。

Q. 納品形式を発注書に書く際、最低限どんな項目を含めるべきですか？

ファイル形式、レスポンシブ対応の画面幅、対応ブラウザ、修正回数の上限、権利関係の5項目は最低限明記しておくとトラブルを防げます。

Q. 静的コーディングの納品後、WordPressに組み込むことは可能ですか？

可能です。ただしHTML・CSSで組まれた静的サイトをWordPressのテーマ形式に変換する追加作業が必要になるため、別途費用と工数がかかる点を見込んでおく必要があります。

無料で案件を掲載する

入力は3分ほど。掲載料も取引手数料も0円です。@SOHOに登録しているフリーランス・副業ワーカーから、早ければ当日中に最初の応募が届きます。