WEBサイト制作案件を受注して納品するまでの仕事の流れ【フリーランス&副業】

こんにちは。

元銀行員エンジニアブロガーのきたしょー(@KitamuraShohei)です。

 

WEBサイト制作案件を受注してから納品するまでの流れってどんな感じなんだろう…?

 

案件受注後の流れが分かってないと、お客さんからホームページ制作について質問されても、納期の予定日すらまともに答えられないですよね。

WEB制作の仕事の流れがよく分からないから、案件を受注してもちゃんと納品できるかどうか不安という初心者も多いと思います。

 

本記事では、WEB制作で月20万円稼ぐぼくがWEB制作案件を受注してから納品するまでの仕事の流れを徹底解説します。

 

WEB制作の仕事の流れを事前に理解しておけば、お客さんから質問を求められても自信を持って回答できますし、初めて案件を受注したときも慌てることなく冷静に対応できますよ

 

WEB制作で稼ぎたい初心者の方や案件を受注することに対してまだ自信がない方はぜひ続きを読んでみてください。

■目次

WEBサイト制作案件を受注してから納品するまでの仕事の流れ

まず始めにWEB制作案件を受注してから納品するまでの全体像を確認します。

  1. 営業して案件を受注する
  2. 顧客と打ち合わせ
  3. 制作作業(デザイン→コーディング→システム構築)
  4. 制作物の動作確認・修正・納品

 

それぞれの詳細に加えて想定される作業時間なども合わせて解説していきます。

 

1:営業して案件を受注する

1.1:顧客からお問い合わせを受ける

営業活動の結果、お客さんから「ホームページを作りたいんですけど、概算見積もりはいくらになりますか?」とお問い合わせがあったところからスタートです。

 

1.2:顧客に予算感を確認する

お客さんから概算見積もりに関する問い合わせがあったら、まずは「予算はどのくらいですか?」と逆に質問し返してください

 

「えぇ〜!お客さんの問い合わせ通りにまずは概算見積もりを出した方がいいんじゃないの?」と思われるかもしれません。

ですが、即座に概算見積もりを出すのは極力控えた方がいいですね。

なぜなら、お客さんが零細企業や個人事業主の場合はホームページ制作予算が限られているからです。

 

中小企業以上の場合は予算が30万円以上用意されているケースが多いので、こちらが即座に概算見積もりを出したとしてもほぼ予算の範囲内に収まります。

しかし、零細企業や個人事業主の場合は10〜15万円と低予算なケースが多いので、結局案件を受注するとしてもお客さんの予算の範囲内で取り組むしかないんですよね

 

だから、お金を持ってそうな中小企業以上がお客さんでない限り、いきなり概算見積もりを出すのではなく、まずはお客さんの予算感を聞くこと

そして、その予算の範囲内で対応可能な作業量を算出して概算見積もり出します。

その方が成約率は確実に上がるんですよね。

 

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

お客さんに予算感を聞くと「予算はだいたい10〜15万円です」と答えてくれるので、その予算の範囲内で概算見積もりを出します。

予算が10〜15万円と低いにも関わらず、ゼロからデザインを作ってあげたり、WordPressでオリジナルテーマを作成したりするのは心身ともに疲弊するので注意が必要

 

ゼロからデザインを作ってWordPressまで立ち上げるとなると、完成するまでに2ヶ月以上かかります。

制作実績を作るという目的のためにあえて低単価で案件を受注する戦法はアリですが、そうでない場合はあまりおすすめしません。

予算が10万円ならWordPressの無料テーマを使ったりして予算に対して作業量が膨大になりすぎないように注意してください

 

2:顧客と打ち合わせ

2.1:顧客のニーズをヒアリングする

お客さんに提出した概算見積もりにOKが出たら、次はヒアリングに進んでいきます。

事前にヒアリングしておくべき事項は以下です。

  1. サイト制作の目的
    →なぜサイトを作ろうと思ったの?
  2. ターゲット層
    →年齢、性別、地域、だれがどんなときに利用する?
  3. サイトのテーマ・コンセプト
    →だれがどんな方法でどうなる?
  4. サイト制作後に期待する効果
    →ブランディングのため?WEB集客のため?
  5. デザインの希望
    →使用するカラーや参考にしたいサイトなど
  6. サイトに必要な内容・情報・ページ
  7. 素材の確認
    →利用可能な素材(写真・画像・ロゴなど)はあるか?
  8. 納期の希望
  9. サイトの保守管理運用に関する方針
    →サイトを作ったあとはだれが管理するの?

 

ヒアリング事項の中で一番大事なのはサイトを制作する目的やサイトのコンセプトです

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

 

例えば、お客さんがWEBから集客したいならWordPressでブログ機能付きホームページを提案した方がいいですし、名刺代わりにホームページを作りたいなら、見た目がカッコいい方がいいですよね。

 

このようにWEB制作という仕事は単にサイトを作るだけでなく、大きい枠で見るとWEBコンサルティング的な意味合いが強いことも理解しておきましょう

 

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

お客さんへのヒアリングが終わったら、ヒアリングを元に正式見積もりを提出します。

ヒアリングした結果、WordPressでサイトを作る必要があることが判明して概算見積もりから価格が跳ね上がるケースも結構あります

概算見積もり時点から作業内容が変わる場合は価格も変わるはずなので、必ず正式見積もりを提出しましょう。

 

3:デザイン制作作業

お客さんに提出した正式見積もりにOKが出たら、次はデザイン制作作業に進んでいきます。

コーディング案件の場合はデザイン制作作業の行程はありませんので、コーダーを目指している方はすっ飛ばしてもらっても構いません。

デザインからコーディングまでやっていきたい方はデザイン制作作業も必ず頭に入れておきましょう。

 

3.1:デザイン制作作業にあたり注意事項1つ

これからデザイン制作作業にあたり注意事項が1つあります。

それはデザイン制作作業の工程に入ったら、1つ1つの作業が完了する度にお客さんに報告して次の工程に進んでいいかの確認を取ることです

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

 

お客さんに報告して確認を求めるときには以下の3つを必ず伝えるようにしてください。

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

 

特に③の赤線部分は重要なのでお客さんに必ず伝えること。

③を事前に伝えておかないと制作物を作ってOKをもらったにも関わらず、「やっぱりもっとこうして欲しい」とやり直し作業が発生しまくります

 

「ん〜、でも私は仕事をもらってる立場だし、お客さんにはちょっと言いづらいかも…」という方もいるかもしれませんが、ここは勇気を出して伝えてください

無制限にやり直し作業を受け付けてしまうと作業量が膨大になって疲弊しまくります。

前工程までにかかる修正事項について別途費用がかかることは必ず事前に説明しておきましょう。

 

3.2:サイトマップを用いてサイト設計する

デザイン制作作業に入る前にお客さんからヒアリングした事項を元にサイトマップを作成します。

サイトマップとは簡単に言うと、ホームページのどこにどの情報が入っているか一目で分かるようなサイトの全体構造を表すものです

 

サイトマップ参考例

WEB幹事さんから拝借したサイトマップ(画像をタップするとWEB幹事さんのサイトマップダウンロードページに飛びます)

ページの階層構造やページタイトル、URL、キーワードなどのサイト構造を事前に決めておくことでSEO対策に使えますし、作業の全体像を洗い出すことにも役立ちます

 

ページ数が少ないサイトの場合は省略することもあるのですが、ページ数が多くなるとサイトマップは必須です。

小規模な案件だと「ページ数少ないしサイトマップいらないかな〜」と思うかもしれませんが、最初は練習のためにもぜひサイトマップを作ってみてください。

 

3.3:全体のラフデザイン案(ワイヤーフレーム)を制作する

サイトマップを作ったら、紙とペンもしくはワイヤーフレーム制作ツールで全体のラフデザイン案を制作します。

WEBデザイナーはツールを使ってラフデザインを作る人が多いのですが、デザイン未経験者であれば、手書きでもOKです。

お客さんがラフデザイン案を見て完成後のサイトがどんなレイアウトになるか理解できれば問題なし

〜ラフデザイン案・ワイヤーフレームとは?〜
※ラフデザイン案とは「ラフなデザイン案」という意味で大まかな部分のみ記した素案。
※ワイヤーフレームとはWebサイトのレイアウトを定める設計図のこと

 

ぼくは以前ゼロからデザインを制作したときmoqupsというツールを使ってラフデザイン案を作りました。

ラフデザイン案参考例

※拡大してご覧ください。PCの場合は左側にスクロールするとラフデザイン案が見えてきます

 

デザイン未経験者はゼロからレイアウトを考えるのは難しいと思うので、最初は「こんな見た目にしたい!」というサイトをいくつか見つけて真似していく感じでOKです

 

〜イケてるホームページが見つかるサイト〜

3.4:ラフデザイン案に使用する原稿を作成して写真・画像・ロゴなどの素材を集める

ラフデザイン案が完成したら、次は原稿作成や写真などの素材を集めます。

お客さんが原稿や素材を用意してくれる場合はこの工程は飛ばしてもらってOK。

 

原稿作成・写真・画像・ロゴなどの素材をお客さんが用意するのか?それともWEB製作者が準備してあげるのか?は極めて重要な問題です

なぜなら、原稿作成や素材集めには膨大な時間がかかるから。

 

お客さんのビジネスモデルを調べて原稿を作成したり、星の数ほどある無料素材の中からサイトに合う画像を選ぶのは想像を絶するほど大変な作業なんですよね…。

ぼくは以前WordPress案件に取り組んだとき、サイトに合う無料素材を集めるだけで10時間以上も費やした覚えがあります

お陰様でWEB上にある画像を一目見るだけで無料素材かオリジナル素材かの見分けがつくようになりました。笑

 

  • 原稿はどっちが準備するのか?
  • 写真は撮ってもらえるのか?
  • 画像は有料素材を使う?それとも無料素材を使う?
  • ロゴはWebデザイナーに依頼する?それともWEB製作者が無料で作る?

 

お客さんとの打ち合わせの段階で、サイトに使う素材をどこまでお客さんが用意してどこからWEB製作者が用意するのかは必ず決めておくこと。

そして、素材集めの工程が発生する場合は原稿作成費用や素材集め費用を正式見積もりに盛り込んで必ずお金をもらうようにしてください

でないと、十数時間もタダ働きをすることになってしまいますよ。

 

3.5:Photoshop(フォトショップ)などでデザインカンプを制作する

サイトに使用する原稿や画像が集まったら、Photoshopなどのデザイン制作ツールでデザインカンプを作ります。

〜デザインカンプとは?〜
デザインカンプとは主に顧客に提示するデザイン案

 

有名なデザイン制作ツールはPhotoshop、Illustrator、XD、Sketchがあります。

「一気に4つもおすすめされてもどれを使えばいいのか分からないよ…」という方はPhotoshopかIllustratorのどちらかを使えばOKです

PhotoshopとIllustratorは90%以上のWEBデザイナーさんが利用していますからね。

 

しかしながら、PhotoshopやIllustratorは使い方がものすごく難しいので素人がすぐに使えるようになる代物ではありません。

「自由自在に使いこなせるまでに半年はかかる」と仲の良いWEBデザイナーさんが言ってました

いまぼくもPhotoshopを勉強中なのですが、機能が盛りだくさんでボタンも山ほどあるのでかなり苦戦しています。

 

ぼくは前にデザインカンプを制作したときはSketchというデザイン制作ツールを使いました。

デザインカンプ参考例

 

ぼくの個人的な感想ですが、デザイン素人にはPhotoshopよりもSketchの方が2倍は使いやすいですね

Udemyとかで良さげな教材を見つけて使い方を勉強するのがおすすめです。

 

デザインカンプについては、サイトのページ数が多かったり、PC版とスマホ版の見た目が大きく違ったりすると、制作期間に1〜2ヶ月とか普通にかかります

ぼくも上記のデザインカンプを作るだけで1ヶ月かかったので、デザイン制作の工程がある案件の場合は余裕を持ったスケジュールを組みましょう。

 

3.6:顧客にデザインカンプを提出して細かい修正を加える

デザインカンプが完成したらお客さんに見てもらって修正作業を行います。

「もうちょっとこの部分をこうしてほしい!」と修正が入るケースがほとんどです。

 

3.7:顧客からデザインカンプにOKをもらったらコーディングを開始する

お客さんにデザインカンプについてOKをもらったら、ようやくコーディング開始です。

案件ボリュームによって変わるのですが、デザインカンプを作るまでに1ヶ月以上はかかりますね。

デザイン込みのWeb制作案件はコーディングのみの案件よりも納期を長めに取っておかないと想像以上に時間がかかるので注意しましょう

 

4:コーディング作業

4.1:デザインカンプ通りにローカル開発環境でコーディング

デザインカンプが完成したら、適当なファイルを作ってHTML/CSSコーディングしていきます。

最初は慣れてないとデザインカンプ通りにコーディングするのは本当に難しいです。

自分のポートフォリオサイトを制作する場合は細かい部分を妥協してもだれにもなにも言われません。

しかし、お客さんのデザインカンプを忠実に再現するとなると細かい部分も手を抜くわけにはいきませんからね

 

スマホでも見やすいように綺麗にレスポンシブ対応したり、今後の運用を円滑に行うためにCSS設計に気を配るなどしてコーディングすることが大事ですよ。

 

4.2:HTML/CSSコーディングをWordPress化

WordPress案件の場合はコーディングしたあとにHTML/CSSファイルをWordPress化します。

いきなり本番環境で静的なサイトをWordPress化するのはリスクがあるので、必ずWordPress用のテスト環境で開発しましょう。

 

5:システム構築作業

5.1:独自ドメインを取得してサーバーを契約する

コーディングしてWordPress化が終わったら、いよいよ本番環境にサイトをアップロードします。

WEB上にサイトをアップロードするにはまず独自ドメインを取得してレンタルサーバーを契約する必要があります。

独自ドメインはお名前.com、レンタルサーバーはエックスサーバーでOK。

WordPress案件の場合は合わせてWordPressも合わせてインストールしておいてください。

 

5.2:サーバーにファイルをアップロード

独自ドメインを取得してレンタルサーバーを契約したら、FTPクライアントソフトを利用してサイトをサーバーにアップロードします。

 

5.3:WordPressの場合はプラグインを導入する

WordPress案件の場合はサーバーにサイトをアップロードしたら、プラグインを導入してSEO対策を施します。

WordPressの基本設定や細かいSEO対策をどこまでやってあげるかはお客さんとの最初の契約内容次第ですね。

 

6:制作物の動作確認&修正・納品

6.1:制作物の動作確認

サーバーにサイトをアップロードしたら、本番環境でちゃんと動くかどうかを確認します。

  • ページからページへとちゃんと遷移する?
  • ちゃんとレスポンシブ対応されてる?
  • 文字がはみ出てる箇所はない?

 

このあたりは必ずチェックしましょう。

 

6.2:制作物の確認依頼&修正

WEB製作者で動作確認を行ったら、お客さんにサイトの動作確認を依頼します。

もし動作の不具合などの問題が見つかったら修正します。

 

6.3:制作物の納品

特にサイトに問題がなければ制作物の納品完了です。

 

6.4:領収書の発行

制作物の納品後に売上が振り込まれたら、領収書を発行します。

見積もり書や請求書、領収書などは無料で利用できるMisocaが便利ですよ。 

 

7:サイトの保守管理運用

制作物の納品後はサイトの保守管理運用の仕事が発生するケースがあります。

保守管理運用の仕事は「サイトのこの箇所に新しく文章を挿入したい!」というお客さんからの依頼に答えてあげたり、WordPressのプラグインを更新してあげたりとかいろいろですね

 

サイトの保守管理運用については毎月月額制で費用をもらう業者もあれば、修正やプラグインの更新の度に費用をもらう業者もいますよ。

 

WEBサイト制作案件を受注してから納品するまでの仕事の流れまとめ

最後にWEB制作案件を受注してから納品するまでの流れをまとめておきます。

  1. 営業して案件を受注する
    1.1:顧客からお問い合わせを受ける
    1.2:顧客に予算感を確認する
    1.3:概算見積もりを提出する
  2. 顧客と打ち合わせ
    2.1:顧客のニーズをヒアリングする
    2.2:正式見積もりを提出する
  3. デザイン制作作業
    3.1:サイトマップを用いてサイト設計する
    3.2:全体のラフデザイン案(ワイヤーフレーム)を制作する
    3.3:ラフデザイン案に使用する原稿を作成して写真・画像・ロゴなどの素材を集める
    3.4:Photoshop(フォトショップ)などでデザインカンプを制作する
    3.5:顧客にデザインカンプを提出して細かい修正を加える
    3.6:顧客からデザインカンプにOKをもらったらコーディングを開始する
  4. コーディング作業
    4.1:デザインカンプ通りにローカル開発環境でコーディング
    4.2:HTML/CSSコーディングをWordPress化
  5. システム構築作業
    5.1:独自ドメインを取得してサーバーを契約する
    5.2:サーバーにファイルをアップロード
    5.3:WordPressの場合はプラグインを導入する
  6. 制作物の動作確認&修正・納品
    6.1:制作物の動作確認
    6.2:制作物の納品
    6.3:領収書の発行
  7. サイトの保守管理運用

WEBサイト制作案件の仕事の流れを理解したうえで営業活動やWEB制作に取り組もう!

以上がWEB制作案件を受注してから納品するまでの仕事の流れになります。

案件受注後の仕事の流れを事前に理解しておけば、「案件を受注したあとどうすればいいのかな?」という不安なしに思い切って営業できますよね

「このホームページならいつまでに出来上がりますか?」というお客さんからの質問に対しても自信を持って回答できるはずです。

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

 

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

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

2019-02-06

プログラミング完全初心者が月15万円稼ぐまでの過程を大公開!

2019-09-21

【無料体験あり】おすすめプログラミングスクール5選【業界人が厳選】

2019-02-24

ABOUTこの記事をかいた人

元銀行員Webエンジニアブロガー。月間2.3万人に読まれる当ブログ《きたらいふ》を運営している29歳。当ブログのメインジャンルは「プログラミング・働き方・お金」の3つで「ぼくがあなたの背中を押します」をテーマに運営中。これからの人生についてハゲるほど悩んだ挙句、愛車ハリアーを売って丸5年勤めた銀行を辞めました。Web制作のお仕事絶賛大募集中!!!