Webデザインの納品方法は？データ形式・手順・トラブルを防ぐ確認事項

「デザインは完成したけれど、どの形式で何を渡せばいいのかわからない」「納品したつもりが、後から元データも欲しいと言われた」。Webデザインの納品方法は学習中に触れる機会が少なく、初めての案件でつまずきやすいところです。

Webデザインの納品でトラブルになる原因は、ほぼすべて「何をどこまで渡すのかを事前に決めていなかったこと」に集約されます。データ形式の問題ではなく、合意の問題です。

この記事では、Webデザインの納品方法を、納品パターンの種類・データ形式・渡し方の手段・納品前のチェック項目・権利まわりの取り決めという順に整理します。個人で案件を受け始めた方にも、制作会社に入ったばかりの方にも役立つ内容です。

納品は作業じゃなくて手続き。ここを雑にやると、いい仕事をしても評価が下がるよ。

Webデザインの納品方法は4パターンある

ひとくちに納品といっても、案件によって渡すものはまったく違います。まずは自分の案件がどのパターンかを確認しましょう。

どのパターンかによって、納品物の量も作業時間も変わります。見積もりの段階で確定させておくことが、後の食い違いを防ぎます。

納品するデータの形式と考え方

デザインデータの渡し方

Figmaで制作した場合は、ファイルの閲覧権限や編集権限を共有する形が一般的です。先方が同じツールを使っていない場合は、PDFで書き出したものと、画像の書き出しをあわせて渡すと確認しやすくなります。

編集可能な元データを渡すかどうかは、着手前に取り決めておきましょう。元データの譲渡は「今後は自分たちで手を入れられる」という意味を持つため、料金の考え方にも関わります。ツールの共有機能についてはFigmaの公式サイトで確認できます。

画像素材の書き出し

• 写真はJPEG、透過が必要なものはPNG、ロゴやアイコンはSVGが基本です
• 高解像度ディスプレイに対応するため、2倍サイズの書き出しを用意することがあります
• WebP形式での書き出しに対応するかは、案件の要件次第です

コーディングデータの渡し方

HTML・CSS・JavaScript・画像をフォルダ構成のまま圧縮して渡すのが基本です。フォルダ名やファイル名に日本語や全角スペースが混ざっていないかは、渡す前に確認してください。サーバー環境によっては、それだけで表示が崩れます。

納品までの段取りやクライアントとのやり取りは、Webデザインの仕事を解説した本で全体の流れを押さえておくと、初めての案件でも落ち着いて進められます。

データの渡し方（手段）の選び方

クラウドストレージ

Googleドライブなどのクラウドストレージにフォルダを作り、共有リンクを渡す方法です。後から差し替えができ、履歴も残るため、修正が発生しやすい案件に向いています。

大容量ファイル転送サービス

容量の大きいデータを一度だけ渡す場合に使われます。保存期間が決まっているため、「ダウンロードしましたか」の確認まで済ませて初めて納品完了だと考えておきましょう。

FTPやサーバーへの直接アップロード

公開作業まで担当する場合は、先方から接続情報を受け取って作業します。接続情報は機密性の高い情報なので、受け取り方と保管方法にも配慮が必要です。

転送サービスは期限切れが起きやすい。「落とせました？」の一言を送る習慣をつけよう。

納品前のチェックリスト

渡す前に、次の項目を一つずつ確認します。ここを飛ばすと、納品後に細かい指摘が続いて対応工数が膨らみます。

表示・動作の確認

• 主要なブラウザでの表示崩れがないか
• スマートフォンの実機で確認したか
• リンク切れがないか、外部リンクが新しいタブで開くか
• フォームの送信テストを行い、届く先を確認したか

データ内容の確認

• テスト用のダミーテキストや仮の画像が残っていないか
• 不要な作業用ファイルや古いバージョンが混ざっていないか
• ファイル名に日本語・全角スペース・大文字小文字の不一致がないか
• 会社名・電話番号・住所・料金に誤りがないか

公開設定の確認

• 検索エンジンにインデックスさせない設定が残っていないか
• 制作中に使っていたテスト環境のURLが本文に残っていないか
• 不要なアクセス制限が残っていないか

公開後に検索結果へ出てこない原因として多いのが、テスト環境の設定を戻し忘れているケースです。公開作業まで担当する場合は、この確認を手順に組み込んでおきましょう。

納品時に取り決めておきたい権利まわり

著作権の扱い

制作物の著作権を譲渡するのか、利用を許諾する形にするのかで、後からできることが変わります。譲渡する場合はその旨を契約書や発注書に明記します。権利の基本的な考え方は文化庁の著作権に関するページにまとまっています。

素材の利用範囲

有料素材サイトの写真やフォントを使った場合、そのライセンスが誰に帰属するのかを確認します。制作者が購入したライセンスが、そのままクライアントに引き継げるとは限りません。二次利用や再配布の可否は、素材ごとに規約が異なります。

実績としての掲載可否

納品した制作物を自分のポートフォリオに載せてよいかは、納品時に確認しておくとスムーズです。公開前に聞くと断られやすいため、契約時に一文入れておく方法もあります。

納品後の流れと報酬の受け取り

検収と納品書

データを渡したら、先方に内容を確認してもらいます。この確認を検収と呼び、問題がなければ請求という流れになります。個人で受注している場合は、納品書と請求書を用意しておくと手続きが明確になります。

支払いの期日

フリーランスとして受注している場合、報酬の支払期日については法律上のルールが設けられています。記事執筆時点で施行されているフリーランス・事業者間取引適正化等法では、発注事業者は成果物を受け取った日から60日以内のできる限り短い期間内で支払期日を定め、その日までに報酬を支払うことが義務づけられています。制度の概要は公正取引委員会のフリーランス法特設サイトで公開されています。

取引条件や契約書の基本は、フリーランス向けに契約を解説した本で押さえておくと、条件のすり合わせで迷いにくくなります。

納品後の修正対応

納品後にどこまで無償で対応するかは、事前に決めておかないと際限がなくなります。「納品後2週間以内の不具合修正は無償、それ以降および仕様変更は別途見積もり」といった線引きを、契約時に伝えておきましょう。

「不具合の修正」と「仕様の変更」は別物。ここを言葉で分けておくだけで、無償対応の沼から抜け出せるよ。

納品時に添えると喜ばれる資料

データを渡すだけでも納品は成立しますが、次の資料を添えると受け取る側の負担が大きく減ります。制作会社ではこれらを標準化しているところもあります。

更新マニュアルは、スクリーンショットを並べて数ページ作るだけで十分です。公開後に何度も同じ操作を聞かれる状況は、双方にとって負担になります。最初に用意しておけば、その後の時間を守れます。

また、動作確認したブラウザとOSを明記しておくと、「古い環境で崩れている」という指摘を受けたときの話し合いがしやすくなります。対応範囲を先に決めて書き残しておくことは、自分を守る作業でもあります。

マニュアルを1回作っておけば、次の案件でも使い回せる。テンプレ化しておくと後がすごく楽だよ。

納品まわりで実際に起きるトラブル

元データを渡す前提で話が進んでいた

デザインデータの譲渡について合意がないまま「元データをください」と言われる場面はよくあります。着手前に、納品物の一覧を書面で共有しておくのが対策です。

納品したデータが開けないと言われる

先方の環境に対応するソフトがないケースです。相手が何で開くのかを事前に確認しておけば、PDFや画像を添える判断ができます。

公開直前に大量の修正が届く

確認のタイミングを設けていないと、最後にまとめて指摘が来ます。工程ごとに確認の機会を作り、そのつど合意を取っておくことで防げます。

納品後に連絡が途絶える

検収の返答がないまま時間が過ぎると、請求のタイミングを逃します。「◯日までにご連絡がなければ検収完了とさせていただきます」と添えて送る方法が用いられています。

納品作業を楽にする道具

データの受け渡しは、ファイルの探し直しや再送で時間を取られがちな作業です。手元の環境を整えておくと、納品前の確認が滞りません。

• 外付けSSD：案件ごとのデータを保管し、納品後のバックアップとして残しておきます
• 動作確認用のスマートフォン（AndroidとiOSの2台）：実機での最終確認に使います
• 27インチのWQHDモニター：チェックリストと制作物を並べて確認でき、見落としが減ります
• USBハブ（PD対応）：外部機器を複数つなぐ確認作業で、ケーブルの抜き差しの手間を減らします
• A4サイズのファイルボックス：納品書や契約書の控えをまとめて保管しておくと、確定申告の時期に慌てずに済みます

よくある質問

Q. デザインデータの元ファイルは常に渡すべきですか？

案件次第です。渡す場合は、その分の対価を含めて見積もるという考え方が一般的です。渡さない場合も、なぜ渡さないのかを説明できるようにしておくと納得を得やすくなります。

Q. 納品はメール1通で完了しますか？

データを送っただけでは完了とは言えません。先方が受け取り、内容を確認した時点が納品完了です。受領の返信をもらうところまでを一連の作業と考えましょう。

Q. WordPressで納品する場合、何を渡せばいいですか？

公開済みのサイトに加えて、管理画面のログイン情報、更新手順をまとめた簡単なマニュアル、使用したプラグインの一覧があると親切です。操作説明の場を設ける場合は、その時間も見積もりに含めます。

Q. 納品後にサーバーが落ちたら対応する義務はありますか？

保守契約の有無によります。契約に含まれていない場合は、別途対応となる旨を事前に伝えておくとトラブルになりません。運用まで任されるかどうかは、納品時に確認しておきましょう。

Q. 制作物のバックアップはいつまで保管すべきですか？

明確な決まりはありませんが、追加の依頼が来る可能性を考えて、一定期間は保管しておく方が多く見られます。保管しない方針であれば、その旨を先方に伝えておくと親切です。

まとめ

Webデザインの納品方法は、デザインデータのみ、コーディング済みデータ、サーバー公開まで、CMS構築込みという4つのパターンに分かれます。どのパターンかによって渡すものが変わるため、見積もりの段階で納品物の一覧を確定させておくことが何より重要です。

渡す前には、表示・動作、データ内容、公開設定の3方向から確認します。あわせて、著作権の扱い、素材の利用範囲、実績掲載の可否、納品後の修正対応の範囲を取り決めておけば、納品後のやり取りは驚くほど穏やかになります。納品は作業の締めくくりではなく、次の依頼につながる手続きだと考えて丁寧に進めていきましょう。

なお、本記事は一般的な情報提供を目的としたものであり、法的助言ではありません。法令や制度の内容は改正されることがあります。著作権の譲渡条件や契約内容、報酬の支払いに関する具体的な判断については、公的機関の最新情報を確認したうえで、弁護士など専門家にご相談ください。

最後の受け渡しが気持ちいいと、次も頼まれる。納品の丁寧さは、そのまま次の仕事につながるよ。