WEB制作でよくある3つのデータ納品方法を紹介!【注意点・便利ツールも紹介】

WEB制作でよくある3つのデータ納品方法と手順

WEB制作を仕事として行い案件を取っていくなら、デザインの作成やコーディングはもちろん、納品方法までも知っておく必要があります。
本章では、WEB制作をこれから行う予定の方や、WEB制作の主な納品方法を知りたいという方のために、3つの主な納品方法を解説していきます。
実際にどの案件でも、この3つのいずれかの納品方法を指定されることが多いので、ぜひ基本として覚えていきましょう。

WEB制作の主な納品方法↓
・zipによるファイルでの納品
・先方のサーバーにFTPでアップ
・wordpressを使った納品

それぞれの納品方法を手順とともに解説していきます。

納品方法①zipによるファイルでの納品

この納品方法は本章で紹介する3つの納品方法の中で、最も簡単で比較的知識が不要なものになります。
既に出来上がったWEB制作のファイルをZIPでまとめてクライアントに送付する形の納品方法です。
次項で紹介する「サーバーへ直接アップ」よりも直接サーバーをいじらないためミスが起こりにくい一方で、クライアントに修正を依頼された場合に、再度修正を終えた状態のデータを送り直す必要があります。
「修正には比較的手間がかかるものの責任的な面は楽な納品方法」と覚えてください。
また、ファイルの送付方法はギガファイル便などの転送ツールやchatworkなどのチャットツールが主流です。

納品方法②先方のサーバー上にFTPでアップ

この納品方法はWEB制作で最も主流なものと言われています。
無料のFTPでも十分に機能し、主に下記のFTPツールを用いてのアップがおすすめです。
おすすめ無料FTP↓
・FileZilla
・Cyberduck

実際にエンジニアの方がphpなどを編集してサイト上にアップする際にも上記の2つのツールを用いていることが多いので、ぜひダウンロードしてみてください。

FileZillaのダウンロードはこちら

FTPツールを用意することができたら次にクライアントに頂いているFTPの情報(ホスト名・ユーザー名・パスワード)をFTPツール上で入力します。
また、上記で頂いた情報はサイトの根幹を編集できる、かなり重要な情報になりますので管理には十分お気をつけください。
ログインすることができたら指定されている該当ディレクトリに各ファイルをアップロードしていきます。

画面左側に表示されているのが「自分のPCのディレクトリ情報」、右側が「接続しているサイトのディレクトリ情報」となります。
今回の場合だと、クライアントのディレクトリは画面右側に位置しているので、右側の中から指定されているディレクトリを見つけてその中にファイルのアップロードを行いましょう。

間違えて更新をしたりファイルの削除などをしてしまうと、サイトの情報を書き換えてしまうなどのトラブルにもなりかねないので慎重に作業をおこないましょう。

納品方法③wordpressを使った納品

最後にwordpressを使った納品方法を解説していきます。
最近ではwordpressを使ってWEBサイトを制作するクライアントも増えてきて、この納品方法を用いる場面も増えてきているのでぜひ覚えていってくださいね。
まず、ローカル環境でwordpressのサイトを構築していきます。この際下記いずれかのツールがおすすめです。

wordpressのサイトを構築できるツール↓
・Local
・XAMPP
・MAMP

ツールを用いてwordpressサイトを構築することができたら、事前にクライアントからお渡しされている情報でwordpressにログインし、「all in one wp migration」というプラグインを用いて、ローカル環境から本番環境へデータを移し替えましょう。

本番環境はクライアントのサイトの中身なので、ミスを防ぐために一度移し替える前にテストを行いましょう。以上で完了になります。

WEB制作の成果物を納品する際の3つの注意点

WEB制作の主な納品方法を解説してきましたが、しっかりと注意すべき点を意識して納品を行わないと、後にクライアントとトラブルになってしまう可能性があります。
そうならないためにも本章では、WEB制作の納品を行う際に気をつけて欲しい3つの注意点を解説していきます。

WEB制作の納品に関する3つの注意点↓
・事前に十分にヒアリングする
・納品の前にチェックを忘れずに
・コーディングルールの確認

それではそれぞれ解説していきます。

注意点①事前に十分にヒアリングする

前述していますが、ヒアリングはWEB制作を行ううえでかなり重要な項目になってきます。十分にヒアリングを行わないと時間をかけてデザインやコーティングをした後に、大幅な修正を依頼される場合があります。
クライアントの目的や希望をしっかりとヒアリングをしたうえでWEB制作をし、納品を行いましょう。

注意点②納品の前にチェックを忘れずに

本記事の節々で既に記載していますが、実際に納品を行う前に「十分な見直し」「テスト間環境での動作確認」を忘れずに行っていきましょう。
納品が終えた後にミスをクライアントに発見されてしまうと、トラブルになる可能性やそもそも継続的な案件がもらえなくなったり、評判が悪くなってしまいます。
チェックする項目としては主に下記のものがあげられます。

納品前の主なチェック項目↓
・ブラウザ・デバイスでの表示のずれ
・テキストの間違い
・コーティングのミス
・alt属性の入れ忘れ
・お問い合わせメールが届くか

上記で挙げた以外にもチェックする項目はあるので、時間をかけて納品前に最終確認を行いましょう。

注意点③コーディングルールの確認

クライアントによっては、後に管理やメンテナンスを分かりやすく行うためにコーティングルール(規約)を設けている場合があります。
まずはコーティングルールの有無を確認し、ある場合にはそれに伴ったコーティングを行っていかなければいけません。
上記を知らずに先に納品を行ってしまうと、かなり大幅な修正を依頼されてしまう可能性がでてくるので、しっかりとコーティングルールの確認を行いましょう。

WEB制作案件の大まかな流れ

本記事をご覧の方にはこれからWEB制作の案件を実際に取っていく予定の方もいるはずです。
そこで、本章ではもっとマクロな「WEB制作案件の流れ」を4STEPに分けて解説していきます。
どの手順も非常に重要で欠かせないものなので、一度目を通しておきましょう。

WEB制作案件の大まかな4つのSTEP↓
・ヒアリング
・デザイン、コーティング
・本番環境へ移行
・納品、請求

それではそれぞれ詳しく解説していきます。

STEP①ヒアリング

この手順はWEB制作案件の流れの中で最も重要なものといっても過言ではありません。
そもそもWEBサイトというものは基本的に人材募集や商品の紹介、最新情報の提供など「具体的な意図」を持って制作依頼をするクライアントがほとんどです。
ヒアリングを行う際には下記の項目を意識してみましょう。

ヒアリングの主な項目↓
・WEBサイトの種類
・WEBサイトの目的
・WEBページ設計
・WEBサイトのデザイン
ヒアリングを通してクライアントの目的や希望を細かくきき、どのようにWEBサイトを構築してくのか自分でイメージしていきます

STEP②デザイン・コーティング

次にヒアリングで取得した情報をもとに利用者目線でのWEBサイトデザインを行います。
納品後にトラブルにならないためにも相談や質問・提案を積極的にしていき、デザインが終わったらHTML(HTML5が主流)やCSSを用いてのコーティングをしていきます。

STEP③本番環境へ移行

この手順は本記事で紹介している「納品方法①zipによるファイルでの納品」の場合は不要になります。
それ以外の方はコーティングが終わったら、クライアント側のサーバー環境にデザイン・コーティングが終えたデータを移行していきましょう。
納品後のトラブルを避けるためにも、一度移行する前にテスト環境で確認するのがおすすめです。

STEP④納品・請求

最後に納品・請求を行っていきます。
本記事でWEBサイトの納品方法は前述しているので、そちらを参考に納品をおこない、納品書・請求書を作成しクライアントにお渡しします。
クライアントによっては請求書を送るタイミングが指定されている場合もあるのでお気をつけください。
以上が大まかなWEB制作の流れです。これからWEB制作の案件を取ろうと考えている方はぜひ頭の片隅にいれておきましょう。

駆け出しの方必見|WEB制作で案件を獲得する3つの方法

本記事をご覧の方にはこれからWEB制作を行っていくという方も多くいるかと思います。そんなWEB制作駆け出しの方のために、本章では案件が獲得できる3つの方法を紹介していきます。
また、どの案件取得方法の場合でも、事前にポートフォリオを作成しているとスムーズに進みます。

WEB制作で案件が獲得できる3つの方法↓
・クラウドソーシング
・SNSの利用
・エージェントサイトの利用

それではそれぞれ解説していきます。

方法①クラウドソーシング

クラウドソーシングを使ってWEB制作の案件を探すというのは最も主流でご存知の方も多いのではないでしょうか。
主に下記サイトがWEB制作の案件も豊富でおすすめです。

おすすめのクラウドソーシング↓
・ランサーズ
・ココナラ
・クラウドワークス

登録していない方はぜひ登録してみてください。

方法②SNSの利用

現代特有の比較的新しい案件取得方法ではありますが、SNSを利用してのWEBサイト案件取得方法もおすすめです。
様々な方に広く使われているTwitterを利用しましょう。
まずTwitterアカウントを作成し、プロフィール欄に実績や簡単な自己紹介を記載した後、既にTwitter上で募集されている案件を探したり、直接WEB制作をして欲しいという方にリプなどでアプローチを行うという手段で案件を取得していきましょう。
SNSで直接案件を取得すると、仲介業者がいないので手数料が取られないという大きなメリットもあります。

方法③エージェントサイトの利用

最後に案件を取得する方法として「エージェントサイトの利用」が挙げられます。
エージェントサイトは主に担当のエージェントの方と面談を行い、より自分のスキル・要望にあった案件を紹介してくれます。
自分で営業などを行う手間も省けるため自分で探すのが面倒・苦手という方におすすめです。
しかし、本章で紹介している他の案件取得方法よりも手数料が高めとなっているので注意が必要です。

WEB制作の納品方法に関してよくある3つの質問

最後にWEB制作の納品方法に関してよくある3つの質問を紹介していきます。
下記の質問の中に気になった項目がある場合はぜひご覧ください。

よくある質問↓
・WEB制作の納品書はどう作る?
・納品物って何を指すの?
・WEB制作の納品を練習する方法ってある?

それぞれ回答していきます。

質問①WEB制作の納品書はどう作る?

WEB制作の納品書は、納品書を簡単に作成することができるツール「Misoca」がおすすめです。
「企画書作成」や「デザイン・コーティング」など項目別に単価と数量を設定し、クライアントの会社の情報などを記入するだけで簡単に作成することができます。
納品書の例は下記画像をご覧ください。

質問②納品物って何を指すの?

WEB制作の主な納品物とはWEBサイトを構成する一式のデータを指します。
そのため、企画の際に使用した資料や撮影した写真などの2次的なデータは納品物ではないのでクライアントにお渡しする必要がありません。
上記に関してはトラブルを避けるためにも契約の段階で確認を取るのが無難です。

質問③WEB制作の納品を練習する方法ってある?

最初のWEB制作案件や始めたばかりだとぶっつけ本番で納品を行うのは不安ですよね。
練習する方法としては以下のものが挙げられます。

WEB制作の納品を練習する方法↓
・WordPressでブログを開設してみる
・自分でポートフォリオを作成し、契約したサーバーにアップ

特に2番目の方法では、これから案件を取得する際に実績として公開でき、一石二鳥になるためおすすめです。
また、練習も大事ですが、「十分なヒアリング」「進捗報告」「分からなかったら積極的に質問」という3点を徹底すればミスがかなり減りますよ。

サイトの強みと弱みが一目瞭然

サイトSEO診断書プレゼント

SEO支援は1業界あたり1社までの先着順となります為、お断りさせていただく場合もございます。ご了承ください。

Web業界10年以上の知見を持って、無料にてご相談へ対応いたします。
情報収集目的でも歓迎です。お気軽にご連絡ください。

  • 人材育成領域

    人材育成領域

    サイト流入
    2.3倍
    (6,843セッション→16,001セッション)
    反響
    2.1倍(12→25件)
    上位表示キーワード例
    「人材育成(検索Vol.8,100)」
  • 婚活領域

    婚活領域

    サイト流入
    2.1倍
    (52,945セッション→110,164セッション)
    反響
    1.3倍(412→536件)
    上位表示キーワード例
    「婚活(検索Vol.40,500)」
  • 日常用品領域

    日常用品領域

    サイト流入
    3.3倍
    (31,874セッション→105,514セッション)
    反響
    3.4倍(84→293件)
    上位表示キーワード例
    「お水(検索Vol.4,400)」

Web集客・制作・PRのご相談はこちらよりどうぞ

以下の内容でよろしければ、送信ボタンを押して下さい。

会社名
氏名
メールアドレス必須
電話番号
お問い合わせの種類
お問い合わせ内容

個人情報保護方針に同意の上、
送信ください

この記事の監修者

株式会社ブランディングワークス編集部

株式会社ブランディングワークス編集部

SEO対策・コンテンツマーケティングの支援事業者。SEO支援を中心に、伴うWeb制作修正やコンテンツ制作まで一気通貫した支援を実施。実績のあるパートナー会社と連携してその他Webマーケティング(広告運用・SNS・メディアのマネタイズetc.)も幅広くカバーし、戦略立案から実行までを総合的に支援も可能。

LIGブログに掲載されました