こんにちは。
元銀行員エンジニアのきたしょー（@KitamuraShohei）です。
と疑問を抱えている方の悩みを解決できる記事になっています。
ぼくはフルリモートのフリーランスエンジニアとして半年間活動した後に、現在はWEB制作系の上場企業に常駐して働いています。
フリーランスとWEB制作会社の両方の活動経験があるので、WEB制作の仕事の流れについては熟知している自信があります。
- 案件獲得後のお客様へのヒアリング方法
- デザイン制作からコーディング作業までの流れ
- お客様に制作物を納品した後のフォロー対応について
この記事を読み終えることで、WEB制作の仕事の流れが理解できるので、案件受注時の「ちゃんと納品できなかったらどうしよう…」という不安を最小限に抑えることができます。
なので、自信を持って営業活動に注力できるようになりますよ。
まだWEB制作案件を受注したことがない方やこれからWEB制作で稼ぎたい方はぜひ最後まで読んでみてください。
▼プログラミング初心者に読んで欲しい▼
■目次
WEBサイト制作案件を受注してから納品するまでの仕事の流れ
まず始めにWEB制作案件を受注してから納品するまでの全体像を確認します。
- 営業して案件を受注する
- お客様と打ち合わせ
- 制作作業（デザイン→コーディング→システム構築）
- 制作物の動作確認・修正対応・納品
- 納品後の保守・管理・運用
それぞれの詳細に加えて想定される作業時間なども合わせて解説していきます。
１：案件受注フェーズ
１.１：お客様からお問い合わせを受ける
営業活動の結果、お客様から「ホームページを作りたいんですけど、概算見積もりはいくらになりますか？」とお問い合わせがあったところからスタートです。
プログラミングを始めてから営業活動までの流れは以下の記事を参考にしてみてください。
【あわせて読みたい】初心者/未経験者がプログラミングで月15万円稼ぐまでの全ステップ
１.２：お客様に予算感を確認する
お客様から概算見積もりに関するお問い合わせがあったら、まずは「予算はどのくらいですか？」と逆に質問してください。
「え、まずはお客様のお問い合わせ通りに概算見積もりを出した方がいいんじゃないの？」と思われるかもしれません。
ですが、ぼくの経験上、即座に概算見積もりを出すのは極力控えた方がいいです。
なぜなら、お客様が零細企業や個人事業主の場合はホームページ制作予算が限られているから。
中小企業以上の場合は予算が30万円以上用意されているケースが多いので、こちらが即座に概算見積もりを出したとしてもほぼ予算の範囲内に収まります。
しかし、零細企業や個人事業主の場合は10〜15万円と低予算なケースが多いので、結局案件を受注するとしてもお客様の予算の範囲内で取り組むしかないんですよね。
だから、資金潤沢な中小企業以上がお客様でない限り、いきなり概算見積もりを出すのではなく、まずはお客様の予算感を聞くこと。
そして、その予算の範囲内で対応可能な作業量を算出して概算見積もり出します。
その方が成約率は確実に上がりますよ。
１.３：概算見積もりを提出する
お客様に予算感を聞くと「予算はだいたい〇〇〜〇〇万円です」と答えてくれるので、その予算の範囲内で概算見積もりを出します。
例えば、予算が10〜15万円と低いにも関わらず、ゼロからデザインを作ったり、WordPressでオリジナルテーマを制作するのは心身ともに疲弊するので注意が必要です。
ゼロからデザインを作ってWordPressまで立ち上げるとなると、完成するまでに２ヶ月以上かかります。
制作実績を作るという目的のためにあえて低単価で案件を受注する戦法はアリですが、そうでない場合はあまりおすすめしません。
予算が10万円ならWordPressの無料テーマを使ったりして予算に対して作業量が膨大になりすぎないように注意してください。
- お客様の予算感を確認する
- 予算に見合った作業量で提案をする
- 制作実績のためにあえて低予算で受注する戦略はアリ
２：お客様との打ち合わせフェーズ
２.１：お客様のニーズをヒアリングする
お客様に提出した概算見積もりにOKが出たら、次はヒアリングに進んでいきます。
- サイト制作の目的
→なぜサイトを作ろうと思ったの？ - ターゲット層
→年齢、性別、地域、だれがどんなときに利用する？ - サイトのテーマ・コンセプト
→だれがどんな方法でどうなる？ - サイト制作後に期待する効果
→ブランディングのため？WEB集客のため？ - デザインの希望
→使用するカラーや参考にしたいサイトなど - サイトに必要な内容・情報・ページ
- 素材の確認
→利用可能な素材(写真・画像・ロゴなど)はあるか？ - 納期の希望
- サイトの保守・管理・運用に関する方針
→サイトを作ったあとはだれが管理するの？
ヒアリング事項の中で一番大事なのはサイトを制作する目的やサイトのコンセプトです。
なぜなら、サイトを作る目的やサイトのコンセプト次第でどのようなサイトを作るかが変わってくるから。
例えば、お客様がWEBから集客したいならWordPressでブログ機能付きホームページを提案した方がいいですし、名刺代わりにホームページを作りたいなら、見た目がカッコいい方がいいですよね。
このようにWEB制作という仕事は単にサイトを作るだけでなく、大きい枠で見るとWEBコンサルティング的な意味合いが強いことも理解しておきましょう。
２.２：正式見積もりを提出する
お客様へのヒアリングが終わったら、ヒアリングを元に正式見積もりを提出します。
ヒアリングした結果、WordPressでサイトを作る必要があることが判明して概算見積もりから価格が跳ね上がるケースも結構あります。
概算見積もり時点から作業内容が変わる場合は価格も変わるはずなので、必ず正式見積もりを提出しましょう。
２.３：正式に案件を受注したら必要な情報の提出を依頼する
お客様に正式見積もりを提出した結果、無事に案件受注が確定したら、お客様に制作作業にあたって必要な情報の提出をまとめて依頼します。
- サーバー情報
→エックスサーバーやさくらサーバーなどのレンタルサーバー情報 - FTP情報
→レンタルサーバー内に記載されてることが多い - メールアドレス
→お問い合わせフォームを制作する際に利用する - グーグルアカウント情報
→グーグルアナリティクスやサーチコンソールを設定する際に利用する - サイトに使用する素材や画像
→お客様が準備する必要がある素材や画像など
ここで重要なのはお客様に事前にまとめて依頼することです。
なぜなら、制作作業を進めていく中で情報が必要になったタイミングで都度、お客様に提出を依頼するのはお客様に手間を取らせてしまうからです。
- あなた「サーバーの情報を教えてください！」
- お客様「はい、どうぞ。」
- あなた「メールアドレスを教えてください！」
- お客様「（え、また聞くの？）はい、どうぞ。」
- あなた「グーグルアカウントの情報を教えてください！」
- お客様「（もういい加減にしろ）はい、どうぞ。」
このように何度も何度も依頼するのはお客様に迷惑なんですよね。
「必要な情報は最初にまとめて言えよ！」ってお客様に思われてしまいます。
サイト制作の経験が浅いうちは事前に不備なく必要な情報を依頼することは難しいかもしれませんが、できるだけお客様に手間を取らせないような対応を心掛けてください。
- ヒアリングではサイトを制作する目的やコンセプトが一番大事
- ヒアリング結果を元に作業量を算出し直して正式見積もりを提出する
- 制作作業に必要な情報はお客様に事前にまとめて依頼する
３：デザイン制作フェーズ
お客様に正式見積もりを提出して制作作業に必要な情報をまとめて依頼したら、次はデザイン制作作業に進んでいきます。
３.１：デザイン制作作業にあたり注意事項１つ
これからデザイン制作作業にあたり注意事項が１つあります。
それはデザイン制作作業の工程に入ったら、１つ１つの作業が完了する度にお客様に報告して次の工程に進んでいいかの確認を取ることです。
お客様への確認作業を怠ると、「ん〜、これ思ってたのと違います…」とデザイン完成後にお客様から指摘されて、最初から全部作り直す羽目になりかねません。
お客様に報告して確認を求めるときには以下の３つを必ず伝えるようにしてください。
- 〇〇ができたのでご確認をお願いします
- 修正して欲しい箇所があれば気軽にお申し出ください
- もしこちらでOKであれば、次の工程に進みますが、次の工程に着手した後に発生した前工程までにかかる修正については別途で追加費用をいただきます
特に③の赤線部分は重要なので必ずお客様に伝えること。
③を事前に伝えておかないと制作物を作ってOKをもらったにも関わらず、「やっぱりもっとこうして欲しい」とやり直し作業が発生しまくります。
「ん〜、でも私は仕事をもらってる立場だし、お客様にはちょっと言いづらいかも…」という方もいるかもしれませんが、ここは勇気を出して伝えましょう。
無制限にやり直し作業を受け付けてしまうと作業量が膨大になって疲弊しまくります。
前工程までにかかる修正事項について別途費用がかかることは必ず事前に説明しておいてください。
- お客様の修正指示が分かりにくい
- 以前修正した箇所にまた修正指示が入る
- 当初の想定から逸脱した指示が入る
これらが原因で全体のスケジュールがずれ込んで、プロジェクトが現在の人員では徐々に回らなくなっていきます。
ゆえに、納期日が近くなるにつれて残業せざるを得ない状況になるので、納期月は22〜24時まで働くのがWEB制作企業あるあるですよ。
初級者はWEB制作案件を受注するうえでスキルが問題になりますが、中級者以上になるとお客様とのコミュニケーションが問題の種になることを事前に頭に入れておいてください。
３.２：サイトマップを用いてサイト設計する
WEB幹事さんから拝借したサイトマップ(画像をタップするとWEB幹事さんのサイトマップダウンロードページに飛びます)
デザイン制作作業に入る前にお客様からヒアリングした事項を元にサイトマップを作成します。
サイトマップとは簡単に言うと、ホームページ内にどんなページがあって、そのページにはどんな情報が入っているか、一目で分かるサイトの全体構造を表すものです。
ページの階層構造やページタイトル、URL、キーワードなどのサイト構造を事前に決めておくことでSEO対策に使えますし、作業の全体像を洗い出すことにも役立ちます。
はっきり言って、サイト設計の完成度合いで案件がスムーズに進むかどうかが決まると言っても過言ではありません。
- ページのファイル名やURL（階層構造）を事前に決めないでおくと…
→URLが途中で変わる度に全ボタンのリンク先を変更する必要がある - ページのディスクリプションを事前に決めないでおくと…
納期ギリギリになって約140文字のディスクリプションをページ数分考える必要がある - 最初に必要なページを洗い出しておかないと…
案件全体の作業量が掴めないので正確なスケジュールが出せない
こんな感じでサイト設計が甘いと作業量が爆上がりします。
ページ数が少ないサイトの場合はサイトマップを省略してもOKですが、ページ数が多くなるとサイトマップを用いたサイト設計は必須です。
案件のページ数が多いか少ないかに限らず、最初は練習のためにも事前にサイトマップを作成してみてください。
- 404ページを作成し忘れる
３.３：ワイヤーフレーム（ラフデザイン案）を制作する
サイトマップを作ったら、紙とペンもしくはツールを利用して全体のワイヤーフレームを制作します。
WEBデザイナーはツールを使ってワイヤーフレームを作る人が多いのですが、デザイン未経験者であれば、手書きでもOKです。
お客様がワイヤーフレームを見て完成後のサイトがどんなレイアウトになるか理解できれば問題ありません。
※ワイヤーフレームとはWEBサイトのレイアウトを定める設計図のこと。
※ラフデザイン案とは「ラフなデザイン案」という意味で大まかな部分のみ記した素案。
デザイン未経験者はゼロからレイアウトを考えるのは難しいので、最初は「こんな見た目にしたい！」というサイトをいくつか見つけて真似して作っていく感じで大丈夫ですよ。
３.４：サイトに使用する原稿を作成して写真・画像・ロゴなどの素材を集める
ワイヤーフレームが完成したら、次は原稿作成や写真などの素材を集めます。
原稿作成・写真・画像・ロゴなどの素材をお客様が用意するのか？それともこちらで準備するのか？は極めて重要な問題です。
なぜなら、原稿作成や素材集めには膨大な時間がかかるからです。
お客様のビジネスモデルを調べて原稿を作成したり、星の数ほどある無料素材の中からサイトに合う画像を選ぶのは想像を絶するほど大変な作業なんですよね…。
ぼくは以前WordPress案件に取り組んだとき、サイトにマッチする無料素材を集めるだけで10時間以上も費やした覚えがあります。
お陰様でWEB上にある画像を一目見るだけで無料素材かオリジナル素材かの見分けがつくようになりました。
- 原稿はお客さんが準備する？ or 自分で考える？
- 写真はお客さんが撮る？ or カメラマンに依頼する？
- 画像は有料素材を使う？ or 無料素材を使う？
- ロゴはデザイナーに依頼する？ or 自分で作る？
これらはお客様との打ち合わせの段階で必ず決定しておくこと。
そして、原稿作成や素材集めが必要となる場合は原稿作成費用や素材準備費用として正式見積もりに盛り込んで必ずお金をもらうようにしてください。
でないと、十数時間もタダ働きをすることになってしまいますよ。
３.５：PhotoshopやIllustratorなどでデザインカンプを制作する
サイトに使用する原稿や画像が集まったら、PhotoshopやIllustratorなどのデザイン制作ツールでデザインカンプを作ります。
※デザインカンプとは主に顧客に提示するデザイン案。
有名なデザイン制作ツールはPhotoshop、Illustrator、XD、Sketchがあります。
「一気に４つもおすすめされてもどれを使えばいいのか分からないよ…」という方はPhotoshopかIllustratorのどちらかを使えばOKです。
PhotoshopとIllustratorは90%以上のWEBデザイナーが利用しています。
しかしながら、PhotoshopやIllustratorは使い方がものすごく難しいので素人がすぐに使えるようになる代物ではありません。
「自由自在に使いこなせるまでに半年はかかる」と仲の良いWEBデザイナーが言ってました。
ぼくもPhotoshopでデザインカンプを作りましたが、機能が盛りだくさんでボタンも山ほどあるのでかなり苦戦しましたね。
ぼくは一番最初にデザインカンプを作ったときは、30日間フリートライアル版があるSketchを使ってみましたが、サクサク動いて初心者にも使いやすい仕様でした。
ぼくの個人的な感想ですが、デザイン素人にはPhotoshopよりもSketchの方が2倍は使いやすいですね。
Udemyとかで良さげな教材を見つけて使い方を勉強するのがおすすめです。
デザインカンプについては、サイトのページ数が多かったり、PC版とスマホ版の見た目が大きく違ったりすると、制作期間に１〜２ヶ月とか普通にかかります。
ぼくも最初はデザインカンプを作るだけで１ヶ月もかかったので、デザイン制作の工程がある案件の場合は余裕を持ったスケジュールを組みましょう。
３.６：お客様にデザインカンプを提出して修正指示があれば対応する
デザインカンプが完成したらお客様に確認してもらって、修正指示がある場合は修正対応します。
「もうちょっとこの部分をこうしてほしい！」と修正指示が２〜３回入るケースがほとんどですね。
３.７：お客様からデザインカンプにOKをもらったらコーディングを開始する
お客様にデザインカンプについてOKをもらったら、ようやくコーディング開始です。
案件ボリュームによって変わるのですが、未経験者はデザインカンプを作るまでに１ヶ月以上はかかりますね。
デザイン込みのWEB制作案件はコーディングのみ案件よりも納期を長めに取っておかないと想像以上に時間がかかるので注意しておいてください。
４：コーディングフェーズ
４.１：デザインカンプ通りにコーディングする【テスト環境】
デザインカンプが完成したら、テスト環境に適当なファイルを作ってコーディングします。
ここで注意して欲しいのは、いきなりお客様のサーバー上（本番環境）にファイルをアップロードして制作作業しないこと。
最初から本番環境で作業してしまうとURL検索したときに制作途中のサイトが閲覧できてしまいます。
お客様に作りかけのサイトを見せて迷惑を掛ける可能性があるので、まずはサーバー上にテスト環境を構築してからサイト制作していきましょう。
話を戻すと、ぼくの体感としては、デザインカンプ通りにコーディングしていく作業が最初は一番大変です。
一般的に定型化されたデザインならコーディングしやすいのですが、コンテンツの配置が独特なデザインはやはり難しいです。
エンジニア界隈には「HTML/CSSはプログラミングじゃない！」という声もありますが、ぼくはHTML/CSSは立派なプログラミングと感じてます。
デザインカンプ通りにコーディングしたり、細かい箇所までレスポンシブ対応するのは本当に難しいんですよね。
マジでちょっとした箇所がズレる。
「たくさんの言語を扱えるようになりたい」という初心者の気持ちも分かりますが、まずはHTML/CSSを正確に扱えるスキルを身に付けることが大事です。
- まず始めに全体のレイアウトから共通パーツと独自パーツを見分ける
- ヘッダー、フッター、ボタンなどの共通するパーツを作成する
- サイトに共通パーツを組み込んだ後に独自パーツを作成する
４.２：HTML/CSSファイルをWordPress化する【テスト環境】
WordPress案件の場合はコーディングが終わったら、WordPressをテスト環境にインストールして、HTML/CSSファイルをWordPress化します。
WordPressは一般的な静的なサイトとは違って、ヘッダー、フッダー、サイドバーなどの各パーツごとにファイルを分ける必要があります。
WordPress化でのポイントはWordPress独自の関数を使いこなせるかどうか。
HTML/CSSファイルのコードをWordPress独自の関数に置き換えていく必要があるんですね。
とはいえ、コードを覚える必要はなくてGoogleで「WordPress 〇〇」と検索すれば出てくるので安心してください。
WordPressオリジナルテーマを制作するにあたり、functions.phpをカスタマイズするなら最低でもPHPを読めるスキルは必要ですよ。
５：システム構築フェーズ
５.１：独自ドメインを取得してサーバーを契約する
テスト環境でサイトが完成したら、いよいよ本番環境にサイトをアップロードします。
WEB上にサイトをアップロードするにはまず独自ドメインを取得してレンタルサーバーを契約する必要があります。
独自ドメインはお名前.com、レンタルサーバーはエックスサーバーなどなんでもOKです。
WordPress案件の場合は合わせてWordPressも合わせてインストールしておいてください。
５.２：サーバーにファイルをアップロードする【本番環境】
独自ドメインを取得してレンタルサーバーを契約したら、FTPクライアントソフトを利用してサイトをサーバーにアップロードします。
５.３：WordPressの場合はプラグインを導入する
WordPress案件の場合はサーバーにサイトをアップロードしたら、プラグインを導入してSEO対策を施します。
WordPressの基本設定や細かいSEO対策をどこまでやってあげるかはお客さんとの最初の契約内容次第ですね。
６：制作物の動作確認・修正対応・納品フェーズ
６.１：制作物の動作確認
サイトをサーバーにアップロードしたら、本番環境で動作確認を行います。
- 画面を伸び縮みさせてレイアウトに崩れはないか？
- ホバー時の挙動は正しいか？
- リンクの遷移先が正しいかどうか？（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
６.２：制作物の確認依頼・修正対応
動作確認が完了したら、お客様にサイトの動作確認を依頼します。
もし、レイアウトの崩れや動作の不具合いなどが見つかったら修正ですね。
６.３：制作物の納品
特にサイトに問題がなければ、制作物を納品します。
作成したファイル一式をお客様にお渡しして納品完了となるケースもあれば、サーバーにファイルをアップロードした時点で納品完了となるケースもあります。
どの時点で納品になるのかはお客様に確認しておきましょう。
６.４：請求書・領収書の発行
制作物の納品が完了したら、請求書を発行します。
お客様によっては領収書のみ（請求書なし）で対応してくれるところもありますよ。
７：サイトの保守・管理・運用フェーズ
制作物の納品後はサイトの保守・管理・運用の仕事が発生するケースがあります。
- キャンペーンページの定期的な更新
- 画像やテキストの差し替え
- WordPressのプラグイン更新などのメンテナンス作業
サイトの保守・管理・運用については、毎月月額制で費用をもらう業者もあれば、修正やプラグインの更新の度に費用をもらう業者もいます。
「サイト納品後の管理はだれが行うのか？」はお客様ヒアリング時の段階で相談しておきましょう。
WEBサイト制作案件を受注してから納品するまでの仕事の流れまとめ
最後にWEB制作案件を受注してから納品するまでの流れをまとめておきます。
- 案件受注フェーズ
1.1：お客様からお問い合わせを受ける
1.2：お客様に予算感を確認する
1.3：概算見積もりを提出する - お客様との打ち合わせフェーズ
2.1：お客様のニーズをヒアリングする
2.2：正式見積もりを提出する - デザイン制作フェーズ
3.1：サイトマップを用いてサイト設計する
3.2：ワイヤーフレーム（ラフデザイン案）を制作する
3.3：サイトに使用する原稿を作成して写真・画像・ロゴなどの素材を集める
3.4：PhotoshopやIllustratorなどでデザインカンプを制作する
3.5：お客様にデザインカンプを提出して修正指示があれば対応する
3.6：お客様からデザインカンプにOKをもらったらコーディングを開始する - コーディングフェーズ
4.1：デザインカンプ通りにコーディングする【テスト環境】
4.2：HTML/CSSファイルをWordPress化する【テスト環境】 - システム構築フェーズ
5.1：独自ドメインを取得してサーバーを契約する
5.2：サーバーにファイルをアップロードする【本番環境】
5.3：WordPressの場合はプラグインを導入する - 制作物の動作確認・修正対応・納品フェーズ
6.1：制作物の動作確認
6.2：制作物の確認依頼・修正対応
6.3：制作物の納品
6.4：請求書・領収書の発行 - サイトの保守・管理・運用フェーズ
WEBサイト制作案件の仕事の流れを理解したうえで営業活動やWEB制作に取り組もう！
以上がWEB制作案件を受注してから納品するまでの仕事の流れになります。
案件受注後の仕事の流れを事前に理解しておけば、「案件を受注したあとどうすればいいのかな？」という不安なしに思い切って営業できます。
「このホームページならいつまでに出来上がりますか？」というお客さんからの質問に対しても自信を持って回答できるはずです。
これからWEB制作で稼ぎたい方は本記事を何度も読み返してWEB制作の仕事の流れをマスターしてください。
- プログラミングに関する人気記事
案件受注後の流れが理解できてないと、お客様に自信を持って営業できないし、お客様からスケジュール感について質問されたときにも困るんだよね。
きたしょーさん、WEB制作の仕事の流れについて教えてよ！