WEBサイト制作案件の受注から納品までの流れ【副業&フリーランス版】

きたしょー
前職は銀行で5年勤務、現在はフリーランスエンジニアのきたしょーです。

  • Twitter:フォロワー1.1万人
  • プログラミング:最高月商120万円
まさる
  • WEB制作の仕事の流れが知りたい
  • ヒアリング時のポイントは?
  • デザイン制作の流れは?
  • アフターフォローはどうやるの?

と疑問を抱えている方の悩みを解決できる記事を書きました。

 

本記事に、ぼくがWEB制作受託案件に取り組む中で学んできたことやWEB制作上場企業で常駐勤務する中で得たノウハウをすべて詰め込みました。

実際にプログラミング開始1年で月商120万円稼いだときも、本記事の流れに沿って制作作業を進めましたよ

 

記事の前半では、「お問い合わせから契約締結まで」を解説し、記事の後半では、「デザインからシステム構築までの実作業および納品後のアフターフォロー」を解説していきます。

 

本記事を読めば、WEB制作案件を受注してから納品するまでの流れをすべて把握することができます

まだ案件を獲得したことがないWEB制作学習中の方やこれからWEB制作案件を受注予定の方は、ぜひ最後まで読んでみてください。

 

【全体像】WEBサイト制作案件の受注から納品までの流れ

まずはWEB制作の全体像を把握しましょう。

WEB制作案件を個人で受注する場合、主に以下の流れで進んでいきます。

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

 

WEB制作案件の受注から納品までの流れ

  1. お問い合わせを受ける
  2. ヒアリングする
  3. 契約する
  4. 素材や情報を依頼する
  5. デザインを制作する
  6. コーディングする
  7. WordPressでシステム構築する
  8. 動作確認・修正対応
  9. 公開する
  10. 納品する
  11. 請求する
  12. アフターフォローする

1:お問い合わせを受ける

まずはお問い合わせのフェーズから解説していきます。

 

お問い合わせフェーズ

  1. 案件の打診を受ける
  2. 簡単にヒアリングする
  3. 概算見積もりを提出する

1.1:案件の相談を受ける

営業した結果、「ホームページを作りたいんですが、いくらくらいで作れますか?」と案件の相談が舞い込んでからがスタートです。

 

【プログラミング学習手順や案件獲得方法が知りたい方へ】 

プログラミング初心者が月15万円稼ぐまでの全ステップ【完全保存版】

2019-09-21

1.2:簡単にヒアリングする

お客様からお問い合わせが来たら、まずは簡単にヒアリングをしましょう。

初回ヒアリング時に聞くべきこと

  • サイトを作る目的は?
  • どんなサイトが作りたい?
  • 実装したい機能やページ数は?
  • 納期の希望は?
  • 予算はどのくらい?

 

特に予算感は必ず確認しておいた方がいいですね。

理由としては、お客様が個人事業主や零細企業の場合はそもそもの予算が限られているからです

 

従業員が数十名いる中小企業なら30〜100万円以上の予算があるケースが多いですが、従業員ゼロでほぼ個人事業主と変わらないような企業だと10〜15万円と低予算なケースが多いんですよね。

 

結局、制作側がいくら魅力的な提案をしたとしても、提案金額がお客様の予算をオーバーしてしまえば、成約には至りません

成約率の高い提案をするためにもお客様の予算は必ず確認するようにしてください。

 

1.3:概算見積もりを提出する

お客様に簡単なヒアリングを行ったら、概算見積もりを出しましょう。

 

ここでのポイントは、概算見積もりの価格は少し高めに設定すること

 

万が一、正式見積もり時の価格が概算見積もり時の価格よりも増えてしまうと、お客様の予算をオーバーしてしまう可能性があるため、成約率が下がってしまいます。

 

概算見積もりの段階では「これ以上の価格には絶対にならない」くらいの価格帯で提案するようにしてください

 

概算見積もり時のポイント

  • 提案金額は少し高めに設定する
  • 金額は口頭ではなくチャットや概算見積書などの文面で伝える
    →言った言わない問題を回避するため

2:ヒアリングする

続いて、ヒアリングのフェーズを解説します。

 

ヒアリングフェーズ

  1. 詳細にヒアリングする
  2. 正式見積もりを提出する

2.1:詳細にヒアリングする

概算見積もりにOKが出たら、詳細ヒアリングに進みましょう。

 

詳細ヒアリング時に聞くべきこと

  • サイト制作の目的
    →なぜサイトを作ろうと思ったの?
  • ターゲット層
    →年齢、性別、地域、だれがどんなときに利用する?
  • サイトのテーマ・コンセプト
    →だれがどんな方法でどうなる?
  • サイトに期待する効果
    →ブランディングのため?集客のため?
  • デザインの希望
    →使用するカラーや参考サイトなどサイトに必要な情報やページ数
  • 素材(写真・画像・ロゴ・原稿)の確認
    →どちらがなにを準備する?
  • 納期の希望
  • サイトの保守・管理・運用に関する方針

 

これらの中で一番大事なのはサイトを制作する目的です

 

なぜなら、目的やコンセプト次第でどんなサイトを作るか大きく変わってくるから。

 

例えば、目的がWEB集客ならブログ機能付きのサイトを提案した方がいいですし、名刺代わりにホームページが作りたいなら、見た目や動きを重視したサイトを提案した方がいいですよね

 

序盤のヒアリングや打ち合わせ段階でお客様のニーズを理解しないままにサイト制作を始めると、全く役に立たないサイトが出来上がってしまいます。

そうなると、あなたはお客様からの信頼を失いますし、お客様もお金を無駄にすることになります。

 

WEB制作においてヒアリングや打ち合わせは「サイト制作の全工程の鍵を握る」と言っても過言ではないくらい重要な工程なのです。

 

2.2:正式見積もりを提出する

詳細ヒアリングが終わったら、工数を再計算して正式見積もりを出しましょう。

現時点で実装する機能や制作側が準備する素材は確定しているはずです。

 

概算見積もり時と同じく言った言わない問題を避けるためにも、必ず正式見積書として文書で提出するようにしてくださいね

 

3:契約する

正式見積もりにOKが出たら、契約書を取り交わしましょう。

 

WEB制作はクライアントワークなので、「当初の仕様にない実装作業を依頼されたので追加費用をお願いしたら、お客様が納得せずに追加費用を払ってくれない…」みたいなトラブルが起こりやすいです

 

ちなみに、ぼくはすでに信頼関係のあるお客様からの案件はお客様から要望がなければ契約は結ばず、面識のないお客様からの案件は必ず契約を結ぶようにしています。

 

とはいえ、トラブル防止のためにも基本的には契約を取り交わすようにしてください

 

WEB制作でよく使う契約書類

  • 請負契約書
  • 準委任契約書
  • 秘密保持契約書

4:素材や情報を依頼する

契約書を取り交わしたら、詳細ヒアリングで打ち合わせた通り、お客様に準備してもらう素材や情報を依頼しましょう。

 

WEB制作でよく必要となる素材や情報

  • 素材(写真・画像・ロゴ・原稿)
  • サーバー情報
  • FTP情報
  • WordPressの情報
  • メールアドレス
  • Googleアカウント

 

ここで重要なのは、お客様に準備してもらう素材や情報は最初にまとめて依頼すること

 

制作作業中に素材が必要になったタイミングで都度、「ログインIDとパスワードを教えてください」とか「メールアドレスを教えてください」などとお客様に依頼するのは相手に迷惑です

 

できるだけ、お客様には無駄な時間を取らせないようにスムーズな制作進行を心掛けましょう。

 

【重要】デザイン工程の前に注意事項1つ

必要な素材や情報をお客様に依頼したら、次はデザイン工程に入ります。

ですが、その前に注意事項を1つ。

 

デザイン工程では必ず1つ1つの作業が完了する度にお客様に完了報告して次の工程に進んでいいかの確認を取ってください

 

なぜなら、お客様への確認作業を怠ると、「ん〜、これ思ってたのと違います…」とデザインカンプ完成後に指摘され、最初から全部作り直す羽目になりかねないから。

 

ぼくがデザイン制作をやってるときは以下の①〜③を必ず伝えてました。

  1. 〇〇が完成したのでご確認をお願いします
  2. 修正して欲しい箇所があれば気軽にお申し付けください
  3. もしこれでOKであれば、次の工程に進みますが、次の工程に着手した後に発生した前工程までの修正については別途追加費用をいただきます

 

特に③は重要です。

③を事前に伝えておかないと、「やっぱりもっとこうして欲しい」とか「これはやっぱりいらない」などとやり直し作業地獄に陥ります

 

デザイン工程では必ず1つ1つの制作作業が完了する度にお客様に確認を取るようにしてください。

 

5:デザインを制作する

では、デザイン制作のフェーズを解説していきます。

これから解説するデザイン、コーディング、システム構築は専門的な領域なので、案件によっては外注するケースもあります。

いまのあなたに必要な箇所を適宜読んでもらえればと思います。

 

デザインフェーズ

  1. サイトマップを作る
  2. ワイヤーフレームを制作する
  3. 素材を準備する
  4. デザインカンプを制作する

5.1:サイトマップを作る

サイトマップ参考例

サイトマップ参考例

まずはサイトマップを作っていきましょう。

サイトマップとは、ホームページ内にどんなページがあって、そのページにはどんな情報が入ってるのか、一目で分かるサイトの全体構造を表すものです。

 

サイトマップで記載すべきこと

  • サイトの階層構造
  • ページタイトル
  • URL
  • キーワード
  • ディスクリプション

 

特にページ数が多いサイトは、これらを事前に決めておかないと、URLを変更する度にページ内のリンク先を変更しなければならないなど無駄な工数が発生しやすいです。

 

制作作業をスムーズにするためにも最初にサイトマップを作って入念にサイト設計しておきましょう。

 

さらに詳しく知りたい方へ

5.2:ワイヤーフレームを制作する

サイトマップを作ったら、紙とペンもしくは制作ツールを使ってワイヤーフレームを作りましょう。

ワイヤーフレームとは

サイトのレイアウトを定める設計図のこと。

 

WEBデザイナーは制作ツールでワイヤーフレームを作る人が多いですが、デザイン未経験者であれば、まずは手書きでもOK

お客様がワイヤーフレームを見て、完成後のサイトがどんなレイアウトになるのか理解できれば問題ありません。

 

とはいえ、デザイン未経験者がゼロからレイアウトを考えるのは難しいので、最初は参考サイトを真似しながら作っていく感じで大丈夫ですよ

 

さらに詳しく知りたい方へ

おすすめのワイヤーフレーム制作ツール

参考ホームページが見つかるサイト

5.3:素材を準備する

ワイヤーフレームが完成したら、写真、画像、原稿、ロゴなどの素材を準備しましょう。

 

正直、素材集めは相当大変です。

 

ぼくはサイト制作始めたての頃、勢いで素材準備をすべて請け負ったことがあるのですが、トータルで20時間以上かかりました

お客様のビジネスモデルを調べて原稿を作成したり、星の数ほどある無料画像の中からお客様の要望に合う画像を選ぶのはマジで時間かかるんですよね。

 

どこまでの素材をお客様が準備してどこから制作側が準備するのか、事前の詳細ヒアリング段階で必ず決めておくことが大事です

 

良かれと思って「全部こちらでやりますよ…!」なんてことを言ってしまうと、十数時間タダ働きすることになりますよ。

制作側が準備する素材がある場合は必ず費用に盛り込むようにもしてくださいね。

 

5.4:デザインカンプを制作する

素材が準備できたら、次はPhotoshop、Illustrator、XD、SketchなどのAdobeツールでデザインカンプを制作しましょう。

デザインカンプとは

主に顧客に提示するデザイン案のこと。

 

正直、デザインカンプもワイヤーフレームと同様に素人には激ムズです

特にAdobeツールは使い方自体が難しいので、素人が少し勉強しただけで使いこなせるような代物ではありません。

 

ぼくも初めてデザインに取り組んだときはAdobeツールの使い方に相当苦労しました。

やはり知り合いのWEBデザイナーも「PhotoshopやIllustratorは自由自在に使いこなせるまで半年はかかる」と言ってましたね。

 

ぼく個人的にはAdobeツールの中でもSketchは使いやすかったので、最初はSketchで作ってみて慣れてきたらPhotoshopやIllustratorに移行する流れでもOKかなと思います

 

デザイン未経験者はデザインの作り方やAdobeツールの使い方などを勉強する時間が必要になります。

デザイン制作がある案件の場合は余裕を持ったスケジューリングを心掛けましょう。

 

さらに詳しく知りたい方へ

Adobeツールの使い方が学べる学習サイト

【重要】コーディングの前に注意事項1つ

デザインが完成したら、次はコーディング工程に入るのですが、その前に注意事項が1つあります。

 

必ずテスト環境と本番環境を使い分けてください

 

なぜなら、最初から本番環境で作業すると制作途中のサイトが閲覧できてしまうからです。

作りかけのサイトが外部に閲覧可能な状態だとお客様に迷惑を掛けてしまいますよね

 

サイトが完成するまでは必ずテスト環境でサイト制作していきましょう。

 

6:コーディングする

テスト環境が準備できたら、適当なファイルを作ってデザインカンプ通りにコーディングしていきましょう。

 

WEB制作の中でもデザインカンプ通りに寸分違わずコーディングする作業は初心者にはハードルが高い工程です

 

ぼくはWEB制作を始めたばかりの頃、Adobeデータをコーディングする作業が一番難しいと感じてました。

正直、MacやWindowsでの表示統一など細かい箇所まで対応するのはフリーランスや副業レベルでは物理的に難しい一面もあります

 

とはいえ、HTML/CSSが正確に扱えるスキルがあると、市場価値が高い人材になれるので、まずはデザインカンプ通りにコーディングできるように頑張りましょう。

 

7:WordPressでシステム構築する

デザインカンプ通りにコーディングできたら、次はWordPressでシステム構築していきます。

もし、WordPressは使わずに静的サイトを作る場合は本章は飛ばしてもらってOKです。

 

WordPressでシステム構築する流れ

  1. HTML/CSSファイルをWordPress化する
    静的HTMLサイトをWordPress化する方法まとめ
  2. WordPressをインストールする
  3. WordPressに必要なプラグインを導入する
    WordPressインストール後すぐやっておきたい6つの初期設定
  4. テスト環境でサイトを完全再現する

 

ぼく個人的にはコーディングよりもWordPress化する方が簡単だと感じました。

まずはテスト環境でサイトを再現していきましょう。

 

WordPressサイト制作事例

8:動作確認・修正対応

テスト環境でサイトを再現できたら、次はお客様に動作確認をしてもらい、指摘事項があれば修正対応するフェーズです。

 

動作確認・修正対応フェーズ

  1. 各ブラウザで動作確認する
  2. お客様に確認してもらう
  3. 指摘事項を修正する

8.1:各種端末&各ブラウザで動作確認する

テスト環境でサイトが出来上がったら、各種端末と各ブラウザを組み合わせて動作確認を行いましょう。

 

動作確認時のチェック項目

  • 画面を伸び縮みさせてレイアウトに崩れはない?
  • ホバー 時の挙動は正しい?
  • リンクの遷移先は正しい?
  • リンク先に404(Not Found)はない?
  • サイトリニューアルの場合はリダイレクト設定してる?
  • サイトの読み込みスピードは遅くない?

 

ぼくがWEB制作会社で常駐勤務していたときには以下の組み合わせで実機検証していました。

実機検証の組み合わせ例

  • Mac + Safari
  • Mac + Chrome
  • Mac + Firefox
  • Mac + Microsoft Edge
  • Windows + Internet Explorer
  • Windows + Chrome
  • Windows + Firefox
  • Windows + Microsoft Edge
  • iPad + Safari
  • iPad + Chrome
  • iPhone + Safari
  • iPhone + Chrome
  • Android + Chrome

 

これらを最新機種、一世代前、二世代前くらいまで行っていました。

正直、フリーランスや副業レベルでは難しいかもしれませんが、できるだけ多くの組み合わせで動作確認を行うようにしてくださいね

 

8.2:お客様に確認してもらう

テスト環境で動作確認が終わったら、お客様にテスト環境のサイトを見てもらいましょう。

 

8.3:指摘事項を修正する

そして、お客様から修正事項があれば、随時修正対応します。

 

9:公開する

テスト環境で動作確認と修正対応が完了したら、本番サーバーに公開しましょう。

 

本番サーバーに公開するまでの流れ

  1. 独自ドメインを契約してサーバーを契約する
    →契約するタイミングはいつでもOK
  2. 本番サーバーにファイルをアップロードする
    もうFTPは時代遅れ!SFTP対応のFTPクライアントソフトおすすめ3選を徹底比較
  3. テスト環境から本番環境に移行する
    実は簡単!WordPressのテスト環境の作り方と本番への移行法

 

もし、本番環境に移行してレイアウトの崩れや動作の不具合いが判明したら、再度修正してくださいね。

 

10:納品する

本番サーバーに公開したら、納品完了です。

案件やお客様によって変わりますが、納品方法は主に以下の2つが主流です。

納品方法代表例

  1. サーバーにアップロードする
  2. ファイル一式を納品する

 

元請け案件の場合はサーバーにアップロードして納品完了のケースが多いですし、コーディングのみなどの外注案件の場合はHTML/CSSファイル一式を渡して納品完了のケースが多いですね

 

納品方法は契約次第なので、事前のヒアリング段階で確定させておいてください。

 

11:請求する

納品が完了したら、次は請求フェーズです。

 

請求フェーズ

  1. 請求書を発行する
  2. 領収書を発行する
  3. 支払いが振り込まれる

11.1:請求書を発行する

制作物の納品が完了したら、請求書を発行しましょう。

 

無料で使える請求書類作成サービス

11.2:報酬が振り込まれる

請求書を出して、無事に報酬が振り込まれたら、これでようやく全ての制作作業が完了です。

お客様が個人事業主の場合は請求書を出してすぐに振り込んでくれるケースも多いですが、お客様が中小企業以上レベルになると翌月末振込や翌々月末振込が多いですね

 

ちなみに、ぼくは翌翌々月末振込の案件を経験したこともありますよ。

 

11.3:領収書を発行する

無事に報酬が振り込まれたら、領収書を発行しましょう。

基本的に請求書を出して、報酬が銀行口座に振り込まれる場合は、領収書は不要です

 

お客様によっては「領収書を出して欲しい」という方もいるので、臨機応変に対応してください。

 

12:アフターフォローする

最後はアフターフォローのフェーズです。

 

アフターフォローフェーズ

  1. 保守・管理・運用する
  2. 定期的にニーズを聴取する
  3. 提案する

12.1:保守・管理・運用する

サイトを納品し無事に報酬が振り込まれたら、サイトを保守・管理・運用していきます。

 

サイトの保守・管理・運用の業務例

  • キャンペーンページの定期的な更新
  • 画像やテキストの差し替え
  • WordPressのプラグイン更新などのメンテナンス作業

 

サイトの保守・管理・運用については、月額制で数千〜数万円の費用を徴求する業者もいれば、ページの修正や更新の度に費用を徴求する業者もいますよ

 

詳細ヒアリング時に必ず「サイト納品後の管理はだれがどのように行うのか?」を聞いて、契約時に必ずサイトの保守・管理・運用の取り決めを行っておきましょう。

 

12.2:定期的にニーズを聴取する

サイトを保守・管理・運用してる際には定期的にヒアリングも行いましょう。

 

  • お仕事の調子はいかがですか?
  • サイトからのお問い合わせは増えてますか?
  • なにかお困りごとはありませんか?

 

 このように常にお客様の経営状態や問題点は把握するようにしてくださいね

 

12.3:提案する

定期的にヒアリングする中でお客様のニーズを聞き出せたら、新たな提案のチャンスです。

 

  • ネットからのお問い合わせを増やしたい
    →ブログ機能の追加実装を提案する
  • ネットから新商品を販売したい
    →LPの制作を提案する
  • 正社員の採用を増やしたい
    →採用サイトの制作を提案する

 

ぼくは銀行で法人営業をしていた経験を活かして、既存のお客様と仲良くなってニーズをヒアリングし、改善提案することで継続的に案件を獲得してきました

 

新規のお客様に営業するよりも既存のお客様から案件を獲得する方が100倍コスパが良いですよ

 

「なにか提案できることはないか?」という意識を常に持って、定期的にニーズをヒアリングし、提案し続けましょう。

 

以上がWEB制作案件を受注してから納品するまでの全工程です。

 

独学で難しい場合はメンターを活用するのもあり

最後にお伝えしておくと、未経験者が本記事の内容を最初から最後まですべて自分の力だけで行うのは難しいです

 

なぜなら、WEB制作はあらゆる専門分野の掛け合わせでようやく完結する仕事のため、どうしてもデザインやプログラミングなどの専門分野外のスキルが必要となるからです

 

コーディングだけを勉強中の方はデザインが分からないはずですし、デザインだけを勉強中の方はコーディングが分からないはずです。

 

ちなみに、ぼくはコーディングやプログラミングはできましたが、デザインが全く分かりませんでした。

なので、デザイン工程の際には知り合いのWEBデザイナーにお金を払ってデザインを教えてもらいながら、自力でデザインを作りましたよ

 

もし、「すべて自分でやるのは難しいかも…」と感じる場合はメンターをつけるのもあり

 

メンターが探せるおすすめサイト

 

ぼくは侍エンジニア塾に通いながら、本記事の内容に沿ってWEB制作に取り組みましたが、正直、それでも分からないことだらけでした。

「全て自分でやるのは厳しいかな…」と感じたら、思い切って専門家に外注するか、侍エンジニア塾などのプログラミングスクールを検討してみるといいでしょう。 

 

【侍エンジニア塾に興味がある方へ】

【体験談】侍エンジニア塾6ヶ月の感想!卒業後に月100万円超えました

2019-04-23

【プログラミングスクールを検討したい方へ】

本気でおすすめできるプログラミングスクール5選【現役エンジニア厳選】

2019-02-24

【まとめ】WEBサイト制作案件の受注から納品までの流れ

最後に本記事をまとめます。

WEB制作案件の受注から納品までの流れ

  1. お問い合わせを受ける
  2. ヒアリングする
  3. 契約する
  4. 素材や情報を依頼する
  5. デザインを制作する
  6. コーディングする
  7. WordPressでシステム構築する
  8. 動作確認・修正対応
  9. 公開する
  10. 納品する
  11. 請求する
  12. アフターフォローする

 

案件受注後の流れを事前に理解しておけば、「案件を獲得したあとどうすればいいんだろう?」という不安なく営業活動に専念できます。

そしたら、心置きなくガンガン営業できますので、案件受注率も格段に上がりますよ

 

これからWEB制作で稼ぎたい方は、本記事を何度も読み返してWEB制作の仕事の流れをマスターしてください。

 

P.S.

現在、「完全未経験からプログラミングを始めて1年で月商100万円を超えるまでの全過程」というnoteを販売しています

 

  • 未経験からプログラミングで稼ぐ方法
  • プログラミング学習で必ず抑えておくべきこと
  • ブログやSNSで言えなかった失敗談

 

ぼくがプログラミングを始めてから1年間で経験したことを全て盛り込みました!

これからプログラミングで稼ぐために役立ててもらえると嬉しいです。

 

▼プログラミングで月7桁超えするまで▼

 

  • プログラミングに関する人気記事

プログラミング未経験者が月収100万円稼ぐまでの過程を実況する!

2019-02-06

プログラミング初心者が月15万円稼ぐまでの全ステップ【完全保存版】

2019-09-21

本気でおすすめできるプログラミングスクール5選【現役エンジニア厳選】

2019-02-24