
- Twitter:フォロワー1.2万人
- プログラミング:最高月商120万円

- WEB制作の仕事の流れが知りたい
- ヒアリング時のポイントは?
- デザイン制作の流れは?
- アフターフォローはどうやるの?
と疑問を抱えている方の悩みを解決できる記事を書きました。
本記事に、ぼくがWEB制作受託案件に取り組む中で学んできたことやWEB制作上場企業で常駐勤務する中で得たノウハウをすべて詰め込みました。
実際にプログラミング開始1年で月商120万円稼いだときも、本記事の流れに沿って制作作業を進めましたよ。
記事の前半では、「お問い合わせから契約締結まで」を解説し、記事の後半では、「デザインからシステム構築までの実作業および納品後のアフターフォロー」を解説していきます。
本記事を読めば、WEB制作案件を受注してから納品するまでの流れをすべて把握することができます。
まだ案件を獲得したことがないWEB制作学習中の方やこれからWEB制作案件を受注予定の方は、ぜひ最後まで読んでみてください。
■目次
【全体像】WEBサイト制作案件の受注から納品までの流れ
まずはWEB制作の全体像を把握しましょう。
- お問い合わせを受ける
- ヒアリングする
- 契約する
- 素材や情報を依頼する
- デザインを制作する
- コーディングする
- WordPressでシステム構築する
- 動作確認・修正対応
- 公開する
- 納品する
- 請求する
- アフターフォローする
1:お問い合わせを受ける
まずはお問い合わせのフェーズから解説していきます。
- 案件の打診を受ける
- 簡単にヒアリングする
- 概算見積もりを提出する
1.1:案件の相談を受ける
営業した結果、「ホームページを作りたいんですが、いくらくらいで作れますか?」と案件の相談が舞い込んでからがスタートです。
【WEB制作案件獲得以前のプログラミング学習手順や案件獲得方法を詳しく知りたい方へ】
1.2:簡単にヒアリングする
お客様からお問い合わせが来たら、まずは簡単にヒアリングをしましょう。
- サイトを作る目的は?
- どんなサイトが作りたい?
- 実装したい機能やページ数は?
- 納期の希望は?
- 予算はどのくらい?
特に予算感は必ず確認しておいた方がいいですね。
理由としては、お客様が個人事業主や零細企業の場合はそもそもの予算が限られているからです。
従業員が数十名いる中小企業なら30〜100万円以上の予算があるケースが多いですが、従業員ゼロでほぼ個人事業主と変わらないような企業だと10〜15万円と低予算なケースが多いんですよね。
結局、制作側がいくら魅力的な提案をしたとしても、提案金額がお客様の予算をオーバーしてしまえば、成約には至りません。
成約率の高い提案をするためにもお客様の予算は必ず確認するようにしてください。
1.3:概算見積もりを提出する
お客様に簡単なヒアリングを行ったら、概算見積もりを出しましょう。
ここでのポイントは、概算見積もりの価格は少し高めに設定すること。
万が一、正式見積もり時の価格が概算見積もり時の価格よりも増えてしまうと、お客様の予算をオーバーしてしまう可能性があるため、成約率が下がってしまいます。
概算見積もりの段階では「これ以上の価格には絶対にならない」くらいの価格帯で提案するようにしてください。
- 提案金額は少し高めに設定する
- 金額は口頭ではなくチャットや概算見積書などの文面で伝える
→言った言わない問題を回避するため
2:ヒアリングする
続いて、ヒアリングのフェーズを解説します。
- 詳細にヒアリングする
- 正式見積もりを提出する
2.1:詳細にヒアリングする
概算見積もりにOKが出たら、詳細ヒアリングに進みましょう。
- サイト制作の目的
→なぜサイトを作ろうと思ったの? - ターゲット層
→年齢、性別、地域、だれがどんなときに利用する? - サイトのテーマ・コンセプト
→だれがどんな方法でどうなる? - サイトに期待する効果
→ブランディングのため?集客のため? - デザインの希望
→使用するカラーや参考サイトなどサイトに必要な情報やページ数 - 素材(写真・画像・ロゴ・原稿)の確認
→どちらがなにを準備する? - 納期の希望
- サイトの保守・管理・運用に関する方針
これらの中で一番大事なのはサイトを制作する目的です。
なぜなら、目的やコンセプト次第でどんなサイトを作るか大きく変わってくるから。
例えば、目的がWEB集客ならブログ機能付きのサイトを提案した方がいいですし、名刺代わりにホームページが作りたいなら、見た目や動きを重視したサイトを提案した方がいいですよね。
序盤のヒアリングや打ち合わせ段階でお客様のニーズを理解しないままにサイト制作を始めると、全く役に立たないサイトが出来上がってしまいます。
そうなると、あなたはお客様からの信頼を失いますし、お客様もお金を無駄にすることになります。
WEB制作においてヒアリングや打ち合わせは「サイト制作の全工程の鍵を握る」と言っても過言ではないくらい重要な工程なのです。
2.2:正式見積もりを提出する
詳細ヒアリングが終わったら、工数を再計算して正式見積もりを出しましょう。
現時点で実装する機能や制作側が準備する素材は確定しているはずです。
概算見積もり時と同じく言った言わない問題を避けるためにも、必ず正式見積書として文書で提出するようにしてくださいね。
3:契約する
正式見積もりにOKが出たら、契約書を取り交わしましょう。
WEB制作はクライアントワークなので、「当初の仕様にない実装作業を依頼されたので追加費用をお願いしたら、お客様が納得せずに追加費用を払ってくれない…」みたいなトラブルが起こりやすいです。
ちなみに、ぼくはすでに信頼関係のあるお客様からの案件はお客様から要望がなければ契約は結ばず、面識のないお客様からの案件は必ず契約を結ぶようにしています。
とはいえ、トラブル防止のためにも基本的には契約を取り交わすようにしてください。
- 請負契約書
- 準委任契約書
- 秘密保持契約書
4:素材や情報を依頼する
契約書を取り交わしたら、詳細ヒアリングで打ち合わせた通り、お客様に準備してもらう素材や情報を依頼しましょう。
- 素材(写真・画像・ロゴ・原稿)
- サーバー情報
- FTP情報
- WordPressの情報
- メールアドレス
- Googleアカウント
ここで重要なのは、お客様に準備してもらう素材や情報は最初にまとめて依頼すること。
制作作業中に素材が必要になったタイミングで都度、「ログインIDとパスワードを教えてください」とか「メールアドレスを教えてください」などとお客様に依頼するのは相手に迷惑です。
できるだけ、お客様には無駄な時間を取らせないようにスムーズな制作進行を心掛けましょう。
【重要】デザイン工程の前に注意事項1つ
必要な素材や情報をお客様に依頼したら、次はデザイン工程に入ります。
ですが、その前に注意事項を1つ。
デザイン工程では必ず1つ1つの作業が完了する度にお客様に完了報告して次の工程に進んでいいかの確認を取ってください。
なぜなら、お客様への確認作業を怠ると、「ん〜、これ思ってたのと違います…」とデザインカンプ完成後に指摘され、最初から全部作り直す羽目になりかねないから。
ぼくがデザイン制作をやってるときは以下の①〜③を必ず伝えてました。
- 〇〇が完成したのでご確認をお願いします
- 修正して欲しい箇所があれば気軽にお申し付けください
- もしこれでOKであれば、次の工程に進みますが、次の工程に着手した後に発生した前工程までの修正については別途追加費用をいただきます
特に③は重要です。
③を事前に伝えておかないと、「やっぱりもっとこうして欲しい」とか「これはやっぱりいらない」などとやり直し作業地獄に陥ります。
デザイン工程では必ず1つ1つの制作作業が完了する度にお客様に確認を取るようにしてください。
5:デザインを制作する
では、デザイン制作のフェーズを解説していきます。
これから解説するデザイン、コーディング、システム構築は専門的な領域なので、案件によっては外注するケースもあります。
いまのあなたに必要な箇所を適宜読んでもらえればと思います。
- サイトマップを作る
- ワイヤーフレームを制作する
- 素材を準備する
- デザインカンプを制作する
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ツールの使い方などを勉強する時間が必要になります。
デザイン制作がある案件の場合は余裕を持ったスケジューリングを心掛けましょう。
【重要】コーディングの前に注意事項1つ
デザインが完成したら、次はコーディング工程に入るのですが、その前に注意事項が1つあります。
必ずテスト環境と本番環境を使い分けてください。
なぜなら、最初から本番環境で作業すると制作途中のサイトが閲覧できてしまうからです。
作りかけのサイトが外部に閲覧可能な状態だとお客様に迷惑を掛けてしまいますよね。
サイトが完成するまでは必ずテスト環境でサイト制作していきましょう。
6:コーディングする
テスト環境が準備できたら、適当なファイルを作ってデザインカンプ通りにコーディングしていきましょう。
WEB制作の中でもデザインカンプ通りに寸分違わずコーディングする作業は初心者にはハードルが高い工程です。
ぼくはWEB制作を始めたばかりの頃、Adobeデータをコーディングする作業が一番難しいと感じてました。
正直、MacやWindowsでの表示統一など細かい箇所まで対応するのはフリーランスや副業レベルでは物理的に難しい一面もあります。
とはいえ、HTML/CSSが正確に扱えるスキルがあると、市場価値が高い人材になれるので、まずはデザインカンプ通りにコーディングできるように頑張りましょう。
7:WordPressでシステム構築する
デザインカンプ通りにコーディングできたら、次はWordPressでシステム構築していきます。
もし、WordPressは使わずに静的サイトを作る場合は本章は飛ばしてもらってOKです。
- HTML/CSSファイルをWordPress化する
→静的HTMLサイトをWordPress化する方法まとめ - WordPressをインストールする
- WordPressに必要なプラグインを導入する
→WordPressインストール後すぐやっておきたい6つの初期設定 - テスト環境でサイトを完全再現する
ぼく個人的にはコーディングよりもWordPress化する方が簡単だと感じました。
まずはテスト環境でサイトを再現していきましょう。
8:動作確認・修正対応
テスト環境でサイトを再現できたら、次はお客様に動作確認をしてもらい、指摘事項があれば修正対応するフェーズです。
- 各ブラウザで動作確認する
- お客様に確認してもらう
- 指摘事項を修正する
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:公開する
テスト環境で動作確認と修正対応が完了したら、本番サーバーに公開しましょう。
- 独自ドメインを契約してサーバーを契約する
→契約するタイミングはいつでもOK - 本番サーバーにファイルをアップロードする
→もうFTPは時代遅れ!SFTP対応のFTPクライアントソフトおすすめ3選を徹底比較 - テスト環境から本番環境に移行する
→実は簡単!WordPressのテスト環境の作り方と本番への移行法
もし、本番環境に移行してレイアウトの崩れや動作の不具合いが判明したら、再度修正してくださいね。
10:納品する
本番サーバーに公開したら、納品完了です。
案件やお客様によって変わりますが、納品方法は主に以下の2つが主流です。
- サーバーにアップロードする
- ファイル一式を納品する
元請け案件の場合はサーバーにアップロードして納品完了のケースが多いですし、コーディングのみなどの外注案件の場合はHTML/CSSファイル一式を渡して納品完了のケースが多いですね。
納品方法は契約次第なので、事前のヒアリング段階で確定させておいてください。
11:請求する
納品が完了したら、次は請求フェーズです。
- 請求書を発行する
- 領収書を発行する
- 支払いが振り込まれる
11.1:請求書を発行する
制作物の納品が完了したら、請求書を発行しましょう。
11.2:報酬が振り込まれる
請求書を出して、無事に報酬が振り込まれたら、これでようやく全ての制作作業が完了です。
お客様が個人事業主の場合は請求書を出してすぐに振り込んでくれるケースも多いですが、お客様が中小企業以上レベルになると翌月末振込や翌々月末振込が多いですね。
ちなみに、ぼくは翌翌々月末振込の案件を経験したこともありますよ。
11.3:領収書を発行する
無事に報酬が振り込まれたら、領収書を発行しましょう。
基本的に請求書を出して、報酬が銀行口座に振り込まれる場合は、領収書は不要です。
お客様によっては「領収書を出して欲しい」という方もいるので、臨機応変に対応してください。
12:アフターフォローする
最後はアフターフォローのフェーズです。
- 保守・管理・運用する
- 定期的にニーズを聴取する
- 提案する
12.1:保守・管理・運用する
サイトを納品し無事に報酬が振り込まれたら、サイトを保守・管理・運用していきます。
- キャンペーンページの定期的な更新
- 画像やテキストの差し替え
- WordPressのプラグイン更新などのメンテナンス作業
サイトの保守・管理・運用については、月額制で数千〜数万円の費用を徴求する業者もいれば、ページの修正や更新の度に費用を徴求する業者もいますよ。
詳細ヒアリング時に必ず「サイト納品後の管理はだれがどのように行うのか?」を聞いて、契約時に必ずサイトの保守・管理・運用の取り決めを行っておきましょう。
12.2:定期的にニーズを聴取する
サイトを保守・管理・運用してる際には定期的にヒアリングも行いましょう。
- お仕事の調子はいかがですか?
- サイトからのお問い合わせは増えてますか?
- なにかお困りごとはありませんか?
このように常にお客様の経営状態や問題点は把握するようにしてくださいね。
12.3:提案する
定期的にヒアリングする中でお客様のニーズを聞き出せたら、新たな提案のチャンスです。
- ネットからのお問い合わせを増やしたい
→ブログ機能の追加実装を提案する - ネットから新商品を販売したい
→LPの制作を提案する - 正社員の採用を増やしたい
→採用サイトの制作を提案する
ぼくは銀行で法人営業をしていた経験を活かして、既存のお客様と仲良くなってニーズをヒアリングし、改善提案することで継続的に案件を獲得してきました。
新規のお客様に営業するよりも既存のお客様から案件を獲得する方が100倍コスパが良いですよ。
「なにか提案できることはないか?」という意識を常に持って、定期的にニーズをヒアリングし、提案し続けましょう。
以上がWEB制作案件を受注してから納品するまでの全工程です。
独学で難しい場合はメンターを活用するのもあり
最後にお伝えしておくと、未経験者が本記事の内容を最初から最後まですべて自分の力だけで行うのは難しいです。
WEB制作はあらゆる専門分野の掛け合わせで実現する仕事なので、デザインやプログラミングなどの専門分野外のスキルが必ず必要となります。
コーディングだけを勉強中の方はデザインが分からないはずですし、デザインだけを勉強中の方はコーディングが分からないはずです。
ちなみに、ぼくはコーディングやプログラミングはできましたが、デザインが全く分かりませんでした。
なので、デザイン工程の際には知り合いのWEBデザイナーにお金を払ってデザインを教えてもらいながら、自力でデザインを作りました。
正直、全部自分でやろうとしてつまづいてる時間は無駄です。
「自分一人でやるのは厳しいかも…」と感じたら、思い切って専門家に外注するか、素直にメンターやプログラミングスクールの力を借りた方が早いですよ。
【侍エンジニア塾について詳しく知りたい方へ】
【他のプログラミングスクールを検討したい方へ】
【まとめ】WEBサイト制作案件の受注から納品までの流れ
最後に本記事をまとめます。
- お問い合わせを受ける
- ヒアリングする
- 契約する
- 素材や情報を依頼する
- デザインを制作する
- コーディングする
- WordPressでシステム構築する
- 動作確認・修正対応
- 公開する
- 納品する
- 請求する
- アフターフォローする
案件受注後の流れを事前に理解しておけば、「案件を獲得したあとどうすればいいんだろう?」という不安なく営業活動に専念できます。
そしたら、心置きなくガンガン営業できますので、案件受注率も格段に上がりますよ。
これからWEB制作で稼ぎたい方は、本記事を何度も読み返してWEB制作の仕事の流れをマスターしてください。
P.S.
現在、「完全未経験からプログラミングを始めて1年で月商100万円を超えるまでの全過程」というnoteを販売しています。
- 未経験からプログラミングで稼ぐ具体的な手順
- プログラミングを効率的に学習する方法
- ブログやSNSで言えなかった失敗談
ぼくがプログラミングを始めてから1年間で経験したことを全て盛り込みました!
これからプログラミングで稼ぐために役立ててもらえると嬉しいです。
- プログラミングに関する人気記事