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

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

• Twitter：フォロワー1.1万人
• プログラミング：最高月商120万円

• WEB制作の仕事の流れが知りたい
• ヒアリング時のポイントは？
• デザイン制作の流れは？
• アフターフォローはどうやるの？

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

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

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

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

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

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

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

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

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

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

１：お問い合わせを受ける

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

１.１：案件の相談を受ける

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

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

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

2019-09-21

１.２：簡単にヒアリングする

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

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

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

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

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

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

１.３：概算見積もりを提出する

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

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

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

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

２：ヒアリングする

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

２.１：詳細にヒアリングする

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

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

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

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

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

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

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

２.２：正式見積もりを提出する

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

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

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

３：契約する

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

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

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

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

４：素材や情報を依頼する

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

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

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

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

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

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

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

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

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

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

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

特に③は重要です。

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

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

５：デザインを制作する

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

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

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

５.１：サイトマップを作る

サイトマップ参考例

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

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

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

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

５.２：ワイヤーフレームを制作する

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

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

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

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

５.３：素材を準備する

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

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

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

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

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

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

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

５.４：デザインカンプを制作する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

６：コーディングする

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

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

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

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

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

７：WordPressでシステム構築する

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

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

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

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

８：動作確認・修正対応

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

８.１：各種端末＆各ブラウザで動作確認する

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

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

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

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

８.２：お客様に確認してもらう

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

８.３：指摘事項を修正する

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

９：公開する

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

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

１０：納品する

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

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

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

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

１１：請求する

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

１１.１：請求書を発行する

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

１１.２：報酬が振り込まれる

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

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

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

１１.３：領収書を発行する

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

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

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

１２：アフターフォローする

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

１２.１：保守・管理・運用する

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

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

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

１２.２：定期的にニーズを聴取する

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

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

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

１２.３：提案する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2019-04-23

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

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

2019-02-24

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

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

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

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

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

P.S.

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

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

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

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

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

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

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

2019-02-06

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

2019-09-21

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

2019-02-24