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

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

• Twitter：フォロワー1.9万人
• プログラミング：最高月300万円

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

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

本記事を読めば、WEB制作案件の受注から納品まで全行程を完璧に理解することができます。

ぼくは完全未経験からプログラミングを始めて１年で月120万円稼いだ現役WEB制作フリーランスです。

実際にぼくが取り組んでるWEB制作の仕事の流れを完全公開します。

ぼくは受託系フリーランスだけでなく、WEB制作上場企業に常駐勤務しながら数千万円から億レベルの案件にも携わった経験があるので、本記事は現場の知識に基づいた正しいノウハウとなっています。

これからWEB制作案件を受注してから納品後のアフターフォローまで全25ステップで解説していきます。

本記事を最後まで読めば、WEB制作の仕事の流れはもう完璧です。

WEB制作の仕事の流れが知りたい方だけでなく、まだプログラミング学習中の方やまだ案件を獲得したことがない方も勉強がてらぜひ最後まで読んでみてください。

• YouTube版も公開中

本記事のより詳しい内容はYouTubeで解説しています。この動画は1時間32分ありますので、本気でWEB制作で稼ぎたい方だけご覧ください。

 

▼無料登録&アンケート回答で豪華特典アリ▼

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

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

１：案件相談

「ホームページを作りたいんですが、いくらで作れますか？」と案件相談があってからがスタートです。

まだ学習が終わってない方やまだ案件を獲得できてない方は以下の記事もあわせて読んでみてください。

【独学】プログラミングで副業月５万円稼ぐまでの完全ロードマップ

2020-12-27

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

2019-09-21

【最短最速】プログラミング初心者が初案件獲得するまでの営業５ステップ

2021-08-11

２：簡易ヒアリング

案件相談後はまずクライアントに簡単にヒアリングしましょう。

特に予算感は必ず確認してください。

なぜなら、クライアントが個人事業主や零細企業の場合はそもそもの予算が限られているから。

年商10億円レベルの中小企業なら50〜100万円以上の予算があるケースが多いですが、個人事業主やひとり社長だと50万円以下の低予算なケースが多いです。

結局、制作側がいくら魅力的な提案をしても、提案金額がクライアントの予算をオーバーしてしまえば、成約には至りません。

成約率を高めるためにもクライアントの予算は必ず確認しましょう。

ポイント１：ヒアリングシートを使う

簡易ヒアリングする際はGoogleフォームに入力してもらうのがおすすめです。

あらかじめGoogleフォームに質問事項をまとめておけば、クライアントも回答するのが楽です。

LINEでヒアリングしても良いのですが、

• まとめて質問するとほぼ100%長文になる
  →LINEの長文は返信する気にならない
• １個１個質問するとチャット数が多くなる
  →チャット数が増えると返信工数が増える

こんな感じなのであまり推奨しません。

これらを使用するのがおすすめです。

ポイント２：提案する姿勢を持つ

ヒアリング時はこちらから提案する姿勢を持ちましょう。

クライアントは何が作りたいのか本当のところはよく分かってません。

「ホームページが作りたいです…！」というクライアントに対して詳しくヒアリングしてみると、「本当に必要なのはSNS運用だった」なんてことは日常茶飯事です。

クライアントはIT知識が乏しいので、「ネット集客＝ホームページ」と思い込んでるだけなんですよね。

だから、クライアントの言いなりになったら絶対にダメです。

クライアントの要望と本当に必要な施策が合致してればOKですが、間違ってる場合はこちらから積極的に提案して正しい方向へ導きましょう。

ポイント３：専門用語は使わない

ヒアリング時は専門用語は使わないようにしましょう。

クライアントのITリテラシーはあなたが思ってる以上に低いです。

• 「HTML」と「CSS」が分かりません
• 「スプレッドシート」の使い方が分かりません
• 「デザイン」と「コーディング」の違いも分かりません

専門用語を使うときは別の言葉で言い換えるのがおすすめです。

• 「サーバー＝土地」
• 「IPアドレス＝住所」
• 「ドメイン＝表札」
• 「家＝WEBサイト」

このように専門用語はクライアントが理解できる表現に置き換えましょう。

３：概算見積もり

簡易ヒアリングが完了したら、概算見積もりを出しましょう。

見積書の作成は「Misoca」がおすすめです。

WEB制作に取り組む人にとっては必須サービスなので、いまのうちに必ず登録しておいてください。

ポイント１：金額は高めに設定する

概算見積もりは想定より高めに設定しましょう。

正式見積額が概算見積額をオーバーしてしまうと、シンプルに成約率が下がります。

人間は値下がりに対しては寛容的ですが、値上がりに対しては非常にシビアです。

クライアントからしたら「当初予定よりも金額が上がる＝値上げ」なんですよね。

正式見積もり時に工数を洗い出したら、概算見積もり時よりも金額が跳ね上がるケースも多々あります。

概算見積もり時は「これ以上の価格には絶対にならない」くらいの価格帯で提案しましょう。

ポイント２：金額はテキストに残す

金額を提示する際は必ずテキストに残しましょう。

なぜなら、言った言わない問題を避けるためです。

クライアントと面談中に「今回は33万円になります」と口頭で伝えたとしても、「あれ、合計30万円でしたよね？」と後日言われてトラブルに発展するケースは多々あります。

金額や期日などの重要な連絡は、メールがおすすめです。

メールは編集できないので、証拠として残しやすいんですよね。

「でも、メールじゃなくてChatWorkやSlackはどうなの？」と思われるかもしれません。

ChatWorkやSlackだと投稿内容を編集できるので実質やりたい放題です。

このように目的に合わせて最適なチャットツールは使い分けましょう。

４：事前調査

概算見積もりに対して「詳しい話が聞きたいです」という反応がもらえたら、より良い提案をするために事前調査しましょう。

最善策を提案するためにもクライアントと卒なく会話するためにも事前調査は必須となります。

ステップ１：既存サイト調査

クライアントがすでにサイトを持ってる場合は既存サイトを調べましょう。

既存サイトに改善点や不具合が見つかればサイト改善の提案をするチャンスです。

クライアントのピンチはぼくらにとってはチャンスなので、宝を掘り当てるつもりで既存サイトを調査しましょう。

ステップ２：市場調査

クライアントが属する業界の市場を調べましょう。

クライアントと卒なく会話するためには業界知識が必須です。

あなたが「HTML/CSS」という専門用語を使うのと同じく、クライアントも業界の専門用語を使います。

クライアントとコミュニケーションが取れないのは、提案以前の問題です。

クライアントが属する市場への理解を深めてからヒアリングには臨みましょう。

ステップ３：顧客情報調査

クライアントに関する情報がないか事前に調べましょう。

事前にクライアントの情報を入手できれば、面談中に共通の話題で仲良くなれるかもしれません。

最適な提案をするためにもクライアントと卒なくコミュニケーションを取るためにもまずは相手を知ることが大切です。

クライアントに関する情報には全て目を通してから面談に臨みましょう。

こちらの公式LINEでは事前調査の全項目と具体的な調査方法をまとめたシートを無料でプレゼントしています！

実際の案件でそのまま使える有料級のチェックシートです！

ゲットしたい方は公式LINE登録後に「事前調査」と打ち込んでください！

５：詳細ヒアリング

事前調査が終わったら、実際に詳細ヒアリングに臨みます。

テレアポやDM営業の結果、商談となった場合はここでクライアントと初対面となります。

「えぇー、めちゃくちゃ多くない？」と思われるかもしれませんが、簡易ヒアリングと事前調査で情報収集済みの項目は省略してもOKです。

上記のヒアリング項目の中で一番大事なのは「サイトを制作する目的」です。

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

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

クライアントのニーズが汲み取れないままサイト制作を始めてしまうと、

• 「これもうちょっとこうして欲しいです」
• 「なんか想像してたのと全然違います」
• 「もう一度作り直してもらえますか？」

このようにやり直し作業が大量発生します。

となると、制作工数が爆上がりしますし、クライアントにもサイト完成までに多大な時間を待ってもらうことになります。

WEB制作においてヒアリングは「サイト制作の全工程の鍵を握る」と言っても過言ではありません。

ヒアリングは実作業よりも遥かに重要であることを必ず覚えておいてください。

こちらの公式LINEでは簡易ヒアリング項目と詳細ヒアリング項目をまとめたチェックシートを無料でプレゼントしています！

実際の案件でそのまま使える有料級のチェックシートです！

ゲットしたい方は公式LINE登録後に「ヒアリング」と打ち込んでください！

ポイント１：対面やZOOMで顔を合わせる

詳細ヒアリングの際はできるだけ対面やZOOMでクライアント顔を合わせましょう。

実際に会った方が得られる信頼感は大きいですし、シンプルに仲良くなれます。

1. SNSだけで交流したことがある
2. SNSでもリアルでも交流したことがある

１と２の差は相当デカいです。

ネットやSNSの発達でどんなにオンライン化が進もうとも、リアルに勝る信頼構築法はありません。

オンラインサロンやオンラインコミュニティが流行る中でオフ会がなくならない理由がこれです。

チャットで全て完結できるとしても、できるだけ最初は顔を合わせましょう。

６：要件定義

次は詳細ヒアリング内容を元に要件定義しましょう。

正式な見積額を算出します。

• 必要なページ数
• 実装する機能
• マーケティング施策（SEO、MEO、LINE等）

サイト制作やマーケティング施策に関する作業内容を整理して全体の工数を洗い出します。

ページ数を洗い出すために本記事の中盤で解説するサイトマップも軽く作っておくと良いでしょう。

同じ機能でもWordPressのプラグインを使用するのか、それともゼロから構築するのかで工数は全く異なります。

要件定義が甘いと安請け合いに繋がり兼ねませんので、入念に要件定義するようにしてください。

７：正式見積もり

要件が固まったら、正式見積もりを出しましょう。

概算見積もり時と同じく言った言わない問題を避けるためにも、必ず「Misoca」などの文書ベースで作成してください。

ポイント１：細かく見積もる

正式見積書は項目を細かく分けましょう。

なぜなら、項目を細分化した方が金額に納得感が出るからです。

例えば、以下の見積書AとBではどちらの方が契約にしたいと思えますか？

どう考えてもBですよね。

Aだとクライアントはサイトを作るために制作側がなにをやってるのかが分かりません。

中には「サイトなんて簡単に作れるでしょ！」くらいのクライアントもいるので、お互いに対等な関係で仕事するためにもサイト制作に必要な作業量は理解してもらう必要があります。

正式見積書に細かく項目を書いておけば、「これだけ作業してるからこの金額になるのか！」とクライアントにも納得してもらえます。

ゆえに、成約にも結びつきやすいです。

こちらの公式LINEではより成約に繋がりやすい見積書の記入例を無料でプレゼントしています！

実際の案件でも真似して使えちゃいます！

ゲットしたい方は公式LINE登録後に「見積書」と打ち込んでください！

ポイント２：プランを用意する

最初から複数のプランを用意するのもアリですね。

クライアントからしたら、最初からプランが用意されてる方が選びやすいです。

プランを用意する場合は３つが基本です。

人間は「３つの選択肢から１つを選ぶときに無意識に真ん中のものを選びやすい」という松竹梅の法則が働きます。

人間は「値段が安い商品より高い商品の方が品質が良い」という思い込みが働くと同時に、「一番高い商品は贅沢すぎるし一番安い商品を選んだら失敗するかもしれない」という心理が働きます。

逆にプランが２つだと価格が安い商品が選ばれやすいし、プランが４つ以上だと多すぎて迷った挙句選ばないこともあるんですよね。

プランがあると成約率が劇的に上がるのでプランの導入も検討しましょう。

８：契約

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

契約書には「請負契約書」と「準委任契約書」があります。

WEB制作では「成果物を納品して報酬が支払われる」タイプの請負契約が一般的です。

WEB制作は請負契約が多いので、「当初の予定にない実装作業を依頼されたので、追加費用をお願いしたら、クライアントが納得してくれなくて追加費用を払ってくれない…」みたいなトラブルが起こりやすいんですよね。

「でも、契約書ってどんな内容を書けばいいの？」と思われるかもしれません。

契約書に明記すべき内容はこちらです。

正直、友達や知人レベルなら契約書なしでもOKですが、トラブル防止のためにも基本的に契約書は交わしましょう。

そして、契約書の作成については弁護士が専門領域となりますので、本格的に契約書を作る際は必ず弁護士に依頼してください。

ポイント１：着手金を振り込んでもらう

契約時にはクライアントに必ず着手金を振り込んでもらいましょう。

理由はシンプルに、サイトが完成するまで制作費を１円も支払ってもらえないのは制作側に不利すぎるからです。

もし途中でクライアントと音信不通になったら、これまで作業時間は一瞬で水の泡ですよね。

万が一、途中で「やっぱりサイト作るのやめます」とクライアントから言われたら、パートナーへの作業外注費分だけ赤字になります。

ぼくは事業資金に余裕を持たせるためにも必ず案件受注額の半額を振り込んでもらってから制作をスタートするようにしています。

家や車を買うときも契約時に頭金を支払うのが一般的ですよね。

WEB制作もこれと同じです。

お互いが公平な立場でサイト制作を進めるためにもクライアントには必ず着手金を振り込んでもらいましょう。

ポイント２：素材や情報の提供を依頼する

契約締結後、すぐにクライアントに準備してもらう素材や情報の提供を依頼しましょう。

断言しますが、WEB制作はクライアントに素材や情報を準備してもらうのに一番時間がかかります。

クライアントは文章を書くことに慣れてないので、原稿を準備するだけで1ヶ月以上かかることもザラです。

新規開業案件の場合はまだ店舗が整備されてないために写真を準備するだけで数ヶ月かかることもあります。

ロゴデータがどこにあるのか分からないお客様や正しいサーバー情報が分からないお客様も多いです。

クライアントに準備してもらう素材や情報は出揃うまでに時間がかかることを見越して早め早めの依頼を心掛けましょう。

そして、クライアントに素材や情報を依頼するときは必ずまとめて依頼してください。

クライアントは準備に時間がかかるので、都度依頼していては納期に間に合いません。

それに相手からしたら都度依頼されるのは普通に迷惑です。

「素材や情報の準備には時間がかかる」と心得て、最初にまとめて依頼しましょう。

ポイント３：ドメインサーバーを契約する

契約を締結したら、ドメイン取得やサーバー契約も進めましょう。

この２点より、できるだけ早めに依頼した方がいいです。

もちろんドメイン取得やサーバー契約は費用がかかるので、最終的な判断はクライアント次第です。

「ドメインサーバー関係はクライアントに手続きしてもらうべきか？それともこちらで手続きしてあげるべきか？」という疑問がある方もいるかもしれません。

結論、クライアントに準備してもらった方がいいです。

ドメインサーバー関係については、クライアントにクレジットカード情報を入力してもらう必要があります。

下手にこちらで個人情報を預かって手続きを代行してしまうと、その後トラブルに巻き込まれる可能性があります。

WEB制作会社の場合はクライアントのドメインサーバー契約から管理まで一括で代行するところも多いです。

しかし、フリーランスや副業の場合は制作側で事前にマニュアルを準備してクライアント自身に手続きしてもらうのが無難なやり方となります。

こちらの公式LINEではドメインサーバー契約手続きに関するマニュアルを無料でプレゼントしています！

このマニュアル通りに進めるだけで完全ど素人でもドメイン取得からサーバー契約、さらにはWordPress導入まで簡単に行えます！

ゲットしたい方は公式LINE登録後に「ドメインサーバー」と打ち込んでください！

ポイント４：クライアントに当事者意識を持たせる

クライアントには「一緒に素晴らしいサイトを作り上げましょう！」というスタンスで接しましょう。

何度も繰り返しますが、サイトを完成させるためにはクライアントにも動いてもらう必要があります。

あなたがいくら高速で作業しても、クライアントが素材や情報を準備してくれなければ、いつまで経ってもサイトは完成しません。

残念ながらクライアントの中には「お金さえ払えば綺麗なサイトが勝手に出来上がる」と思い込んでる人も多いです。

クライアントが他人任せな考え方をしてると良いサイトは絶対に出来上がりません。

サイト制作をスムーズに進めるためにも、より良いサイトを作り上げるためにも、クライアントには当事者意識を持ってもらう必要があるんです。

クライアントに自分ごとと認識してもらえれば、素材や情報を準備する時にも精力的に動いてくれます。

クライアントに対しては常に「一緒に素晴らしいサイトを作りましょう！」という姿勢で接しましょう。

９：サイトマップ

契約締結後はサイトの全体像を整理するためにサイトマップを作り込みましょう。

サイトマップは主に以下の２種類があります。

テーブル構造のサイトマップは、制作側が管理するために使われることが多いです。

ツリー構造のサイトマップは、クライアントに見せるために使われることが多いですね。

最初にサイトマップを確定させておかないと、

• 「そういえば、あのページが足りない」
• 「この内容を載せたいけど該当ページがない」
• 「よく考えたらこのページいらないじゃん」

このように手戻り作業が大量発生します。

それにそもそも契約後に「あのページが足りない」「このページはいらない」となってはいけません。

サイトマップはプロジェクトの作業工数を洗い出す意味でも契約締結前の要件定義フェーズで軽く作っておくことをおすすめします。

スムーズに制作進行するためにもデザインやコーディングなどの実作業に入る前に必ずサイトマップを作りましょう。

こちらの公式LINEではテーブル構造とツリー構造のサイトマップの雛形を無料でプレゼントしています！

実際の案件でそのまま使える有料級の雛形です！

ゲットしたい方は公式LINE登録後に「サイトマップ」と打ち込んでください！

ポイント１：作業が完了したら了承をもらう

サイトマップ工程以降は各工程の作業が完了する度に必ずクライアントに了承をもらいましょう。

主な目的としては、ちゃぶ台返しを防ぐためです。

ぼくはクライアントに以下の①〜③を必ず伝えています。

これを伝えておかないと、

• 「ここをもっとこうできますか？」
• 「やっぱりあれを追加できます？」
• 「んー、なんかこれ思ってたのと違います」

このように成果物が完成した後もクライアントから何度も指摘を受けてしまいます。

最悪、最初から全部作り直す羽目にもなりかねません。

サイトマップ工程以降の実作業フェーズでは、工程の作業が完了する度に、「これでOKです」とクライアントに了承をもらってから次の工程に進みましょう。

１０：ワイヤーフレーム

サイトマップを作ったら、次はワイヤーフレームを作りましょう。

紙とペンでサクッと作成することもありますが、クライアントワークの場合は見た目が映えるワイヤーフレーム制作ツールを使うのが一般的です。

ただし、ワイヤーフレームは作り込みすぎなくてOK。

あくまでもサイトの設計図なので、レイアウトに色を付けたりボタンの形を作り込んだりと細部にこだわる必要はありません。

クライアントがワイヤーフレームを見て、完成後のサイトがどんなレイアウトになるのかイメージできればOKです。

「でも、ゼロからワイヤーフレームなんて作れる自信がありません…」という方もいるかもしれません。

ワイヤーフレームを作るときは競合サイトや参考サイトをベンチマークにすればOKです。

デザインど素人がいきなり真っ白な状態からワイヤーフレームを作るのは難しいので、成功事例を分析しながら作りましょう。

ポイント１：ローコード制作の場合はワイヤーフレームなしでもOK

ローコード制作の場合、ワイヤーフレームは作らなくてもOKです。

例えば、STUDIOなどのノーコードやWordPressの人気テーマSnowMonkeyなどのブロックエディターでサイト制作するケースですね。

なぜなら、ブロックエディター自体がワイヤーフレーム作成ツールの役割を担ってくれるからです。

たまにSnowMonkeyでサイト制作してるのにガチガチにワイヤーフレームを作ってる人を見かけますが、マジで時間の無駄です。

もちろんWEB制作会社からの下請け案件や案件の契約内容によってはワイヤーフレームを作る必要があるかもしれません。

しかし、低予算な元請け案件や小規模案件の場合は、ブロックエディターでワイヤーフレームをポチポチ作った方が早いし、圧倒的にコスパも良いです。

極論、クライアントにサイトのレイアウトを理解してもらうことができれば、ワイヤーフレームはどんなツールで作ってもOKです。

特に50万円以下の低予算な案件の場合は、作業工数を減らすためにも、ノーコードやブロックエディターでそのままワイヤーフレームを作るのがおすすめです。

ポイント２：おすすめワイヤーフレーム作成ツール集

おすすめのワイヤーフレーム作成ツールを紹介します。

ワイヤーフレームは紙とペンで手書きでも良いのですが、やはり制作ツールを使用した方が簡単かつ綺麗に作れます。

実際にワイヤーフレームを制作する際はぜひ使ってみてください。

ポイント３：ワイヤーフレーム制作事例

実際にぼくが過去に制作したワイヤーフレームを紹介します。

ぜひ参考にしてみてください。

１１：素材

ワイヤーフレームが完成したら、次は制作側が用意する素材を準備しましょう。

正直、素材集めはめちゃくちゃ大変です。

ぼくは初心者時代に画像と原稿の準備を代行したことがありますが、画像探しと原稿作成だけで合計20時間以上かかりました。

クライアントのビジネスモデルを調べて原稿を作成したり、星の数ほどある無料画像の中からサイトの雰囲気に合う画像を選ぶのってマジで大変なんですよね。

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

当然ながら、契約時にクライアントが準備する素材と制作側が準備する素材の線引きを明確にすることが大切です。

そして、制作側が素材を準備する場合は必ず素材準備費用をクライアントに支払ってもらいましょう。

おすすめ１：素材サイト集

おすすめの素材サイトを紹介します。

どんなサイトにどんな素材があるのか事前に確認しておきましょう。

もちろんブックマーク推奨です。

おすすめ２：無料画像サイト集

おすすめの無料画像サイトを紹介します。

どんなサイトにどんな画像があるのか事前に目を通しておきましょう。

こちらもブックマーク必須です。

おすすめ３：ロゴ作成ツール集

おすすめのロゴ作成ツールを紹介します。

ロゴ作成ツールを使えば、デザイン未経験者でも綺麗なロゴが簡単に作れちゃいます。

こちらもブックマークしておきましょう。

１２：トップデザイン

素材の準備が整ったら、次はトップデザインカンプを作りましょう。

なぜ最初にトップページだけ制作するのか？

それは、サイトのメインとなるトップページを固めてから下層ページを制作した方がやり直し工数を抑えられるからです。

基本的に下層デザインはトップデザインをベースに作られるので、トップデザイン確定後に作り始めた方が良いです。

逆に、全ページのデザインを一気に作ってしてしまうと、万が一、クライアントからトップデザインに修正が入った場合、残りの下層ページも全て修正しなければなりません。

こうなると、マジで地獄です。

デザイン工程をプロのデザイナーに外注する際も必ずトップデザインから制作を進めましょう。

ポイント１：最初のインパクトが大事

最初のインパクトが大事なので、トップデザインは全力で作り込みましょう。

クライアントはプログラミングやデザインなどの専門知識がありません。

デザインの良し悪しも分からなければ、HTMLやCSSも読めないわけです。

ゆえに、サイトの良し悪しは見た目だけで判断せざるを得ない。

• 「めちゃくちゃイケてますね」
• 「おー！カッコいいですね」
• 「おしゃれな感じが好きです」

こんな言葉をクライアントに言わせることができたら勝ち確定です。

万が一、「んー、なんか微妙…」と思われてしまったら、「この人は仕事が出来ない」というレッテルを貼られます。

となると、継続案件や紹介案件は絶対にもらえないので、次に繋げることもできません。

デザインも恋愛と同じで第一印象が最重要です。

クライアントの期待を超えられるようにトップデザインは入念に作り込みましょう。

ポイント２：ローコード制作の場合はデザインカンプなしでもOK

低予算な元請け案件でローコード制作する場合、デザインカンプは作らなくてもOKです。

ワイヤーフレームと同様にSTUDIOやSnowMonkeyなどでサイト制作するケースですね。

デザインカンプをまともに作ろうとすると、プロのデザイナーなら必ず10〜20万円以上の費用がかかります。

現実問題、予算20〜30万円以下の案件でデザインカンプ工程を入れてしまうと、

• 作業工数爆上がり
• 利益率爆下がり

で労働地獄に陥ります。

デザイナーに数万円レベルでデザインカンプを作ってもらっても良いですが、それでは相手に低賃金労働を強いることになります。

じゃあ、どうすれば良いのか？

結論、ワイヤーフレームと同様にノーコードやブロックエディターでそのままデザインも制作していけばOKです。

参考サイトをベースにそのままサイトのデザインを作っていきます。

最近はノーコードやローコードの進化が著しいので、わざわざPhotoshopやIllustratorでデザインカンプを作らなくても、綺麗なデザインが作れるんですよね。

特に低予算な元請け案件の場合は、積極的にデザインカンプ工程を省略して、利益率と作業効率を上げていきましょう。

ポイント３：デザインカンプ制作事例

実際にぼくが過去に制作したデザインカンプを紹介します。

これでデザインカンプのイメージを掴んでもらえたらなと思います。

１３：下層デザイン

トップページデザインが確定したら、下層ページデザインを制作しましょう。

下層デザインを制作する際は必ずトップページのデザインルールに従ってください。

良いデザインを作るためにはトップページと下層ページの統一感が必須となので、必ずチェックしてください。

１４：コーディング

デザインカンプが完成したら、次はローカル環境でコーディング作業に入ります。

• デザインカンプから画像を書き出す
• デザインカンプでサイズの数値を読み取る
• デザインカンプでカラーを調べる

このようにコーディング作業ではPhotoshopやIllustrator、XDなどのAdobeソフトを操作するスキルも求められます。

「コーダーの仕事はコーディングするだけでしょ？」と思ってる方もいるかもしれませんが、それは完全なる間違いです。

ぼくは初心者時代にゼロからデザインカンプを作りましたが、コーディング以前の問題でPhotoshopやIllustratorを操作するのでさえ四苦八苦しました。

たしかにググれば分かるんですが、サクサク操作できるレベルになるまでにはそれなりに時間がかかります。

コーダーはコーディングだけでなくAdobeソフトの操作スキルも必須なことも覚えておきましょう。

WEB制作会社からの下請けコーディング案件の場合はこの工程からスタートとなります。

ポイント１：開発環境は使い分ける

コーディング工程以降は必ずローカル環境、テスト環境、本番環境の３つを使い分けましょう。

「でも、なんで開発環境を使い分ける必要があるの？」と思われるかもしれません。

結論、目的に合わせて開発環境を使い分けた方が効率的に制作作業を進められるからです。

サイト制作中は書いたコードがすぐにブラウザですぐに確認できるローカル環境を使用した方が作業効率が上がります。

サイト完成後のテスト段階では、全機能をテストできるかつ第三者が閲覧できないテスト環境を使用した方がセキュリティの観点からも安心ですよね。

逆に、サイト制作中に出来栄えを確認するために毎度サイトをネット環境にアップロードしてたらいつまで経っても作業は進みません。

本番環境にサイトを公開する前に第三者に閲覧されて情報漏洩してしまったらクライアントに訴えられてもおかしくありません。

スムーズな制作作業を行うためにも、安全なセキュリティ下でサイト制作するためにもコーディング工程以降では必ず目的ごとに開発環境を使い分けましょう。

１５：CMS構築

コーディングが完了したら、次はローカル環境でCMSサイト構築しましょう。

CMSで一番有名なのがWordPressです。

全世界のWEBサイトのうち40%以上がWordPressで作られていると言われています。

例えば、ゼロからブログサイトを作るとしたら何千行何万行ものコードを書かないといけないんですが、WordPressを使えばほぼコードを書かずしてブログサイトが作れちゃいます。

WordPress以外にもCMSは数多く存在するんですがフリーランスや副業レベルで扱うCMSのほとんどがWordPressです。

本工程ではコーディングしたサイトをCMSに組み込んでいきます。

具体的にはHTML/CSSのコードの一部分をCMS独自のコードに置き換えたりCMS専用のプラグインを導入したりします。

WordPressなどのCMSを使用しない場合は本工程は省略となります。

１６：動作確認

ローカル環境でサイトが完成したら、次はテスト環境でサイトの動作を確認します。

FTPソフトやWordPressの引越しプラグインなどを使用してローカル環境からテスト環境にサイトを移行させましょう。

ポイント１：テスト環境は第三者が閲覧できない設定にする

テスト環境では第三者に閲覧されないためにno-indexとBasic認証を設定しましょう。

理由はシンプルに第三者に閲覧されるのを防ぐためです。

ローカル環境でサイトが完成したとしても、テスト環境で動作確認する段階はまだまだサイトは制作途中と言えます。

もし第三者がクライアントの名前や会社名で検索した時に、テスト環境で動作確認中のサイトが検索結果に表示されたら、これは立派な情報漏洩です。

大企業相手なら損害賠償にも繋がりかねません。

このような事態を未然に防ぐために必要なのがno-indexとBasic認証です。

テスト環境は必ず当事者以外がアクセスできない設定にしておきましょう。

ポイント２：品質チェックする

クライアントにサイトを見てもらう前に必ず品質チェックを行いましょう。

「えー、めちゃくちゃ多くない！？」と思われるかもしれません。

しかし、プロとして納品物のクオリティを担保するためにはサイトの品質チェックは必要不可欠です。

クライアントにサイトを見てもらう前に必ず品質チェックで不備や不具合を潰し込みましょう。

こちらの公式LINEではサイト品質チェック全項目と具体的な品質チェック方法をまとめたチェックシートを無料でプレゼントしています！

実際の案件でそのまま使える有料級のチェックシートです！

ゲットしたい方は公式LINE登録後に「品質チェック」と打ち込んでください！

ポイント３：複数の端末とブラウザで動作確認する

サイトの品質チェックは必ず各種端末およびブラウザで検証しましょう。

この他にも様々な端末やブラウザが存在しますが、日々進化するIT業界において全端末かつ全ブラウザでサイトを適切に表示させるのは実質不可能です。

よく利用される端末やブラウザを組み合わせた上記の組み合わせ例でサイトが適切に表示されれば問題ありません。

とはいえ、どの端末かつどのブラウザまでサイトを適切に表示させるかは案件の契約内容によって変わってきますので、打ち合わせ段階で必ず確認しておいてください。

「パソコンはMacしか持ってないんだけど、Windowsでの動作確認はどうすればいいの？」という方もいるかもしれませんが、安心してください。

仮想環境という技術を使えば、MacでもWindowsの環境を用意できますしWindowsでもMacの環境を用意できます。

品質チェックする際は必ず複数の端末とブラウザでサイトを確認しましょう。

１７：クライアント確認

テスト環境で動作確認が完了したらクライアントにサイトを確認してもらいましょう。

クライアントにサイトを確認してもらう際はいつまでに確認してもらえるのか必ず期日を決めてください。

理由はシンプルに期日を決めなければ確認作業が遅れるからです。

残念ながら「サイトが完成したので確認をお願いします」と伝えたとしても、「確認終わりました！これでOKです」とすぐに対応してくれるクライアントはほとんどいません。

「クライアントにサイトの確認をお願いしてから２週間経つけどまだ連絡が返ってこない…」

なんてことも日常茶飯事です。

クライアントには本業があるのでサイト制作の優先順位が低くなるのは仕方がないんですよね。

確認作業が遅れると納期に遅れが生じてしまいます。

クライアントに確認作業を依頼する際は「いつまでにご確認いただけそうですか？」と必ず期日まで決めましょう。

１８：修正対応

クライアントにサイトを確認してもらった結果、修正依頼があれば、修正対応します。

「修正依頼→修正対応」を数回繰り返します。

当然ながらこの時点でサイトは99%完成しています。

• デザインの修正
• 大規模なレイアウト変更
• 新たなページ追加

このような工数がかかる作業依頼に関しては、

• 追加費用が発生する
• 納期が遅れる

この2点を必ず伝えましょう。

本工程で許容できる修正依頼は表示崩れの修正や軽微なテキスト変更その他の細かい不具合調整のみです。

本工程はあくまでもクライアントの最終確認なので、手戻りが発生する修正依頼に関しては必ず追加費用を請求しましょう。

１９：サイト公開

クライアントによるサイト最終チェックが完了したら、インターネット上にサイトを公開しましょう。

FTPソフトやWordPressの引越しプラグインなどでローカル環境またはテスト環境から本番環境にサイトを移行します。

ポイント１：サイト公開後チェック

サイト公開後もサイトに問題がないか必ずチェックしましょう。

「テスト環境ではサイトが綺麗に表示されてたのに本番環境に移行した途端に不具合が生じた…」

なんてケースもザラにありますので、本番公開後も不具合がないか必ず確認しましょう。

そして、サイトを公開したらクライアントにも再度サイトを確認してもらってください。

こちらの公式LINEではサイト公開後のチェック項目と具体的なチェック方法をまとめたチェックシートを無料でプレゼントしています！

実際の案件でそのまま使える有料級のチェックシートです！

ゲットしたい方は公式LINE登録後に「公開後チェック」と打ち込んでください！

２０：運用ツール設定

サイトを公開したら、アクセス解析ツールを設定しましょう。

「でも、なんでアクセス解析ツールを導入する必要があるの？」と疑問に思われるかもしれません。

結論、サイトをより良いものに改善していくためです。

最初に完成したサイトはヒアリング情報や競合分析を元に「これがベストなサイトなはず」という仮説ベースで作られたものに過ぎません。

「仮説を立てたら検証する」が分析の基本です。

アクセス解析ツールを導入すれば、クライアントに分析結果を伝えるタイミングで新しい提案を持ちかけることもできます。

Google AnalyticsとSearch Consoleは必ず導入しましょう。

２１：レクチャー

納品が完了したら、クライアントにサイトの使い方をレクチャーしましょう。

このような内容をクライアントに対面またはZOOMでレクチャー、もしくはマニュアル書や手順書を作成し配布するのが一般的なやり方です。

２２：納品

ここまで来てようやく納品完了となります。

ポイント１：納品方法

納品方法は主に以下の２つです。

WEB制作会社からの下請け案件の場合はファイル一式をzipで渡して納品完了のケースが多いです。

たまにGitを使用することもありますがWEB制作ではレアケースですね。

逆に元請け案件の場合はサイトをサーバーにアップロードして納品完了のケースが多いです。

納品方法はクライアントの要望や契約内容によって変わりますのであらかじめ確認しておいてください。

ポイント２：納品書は必ず発行する

納品時は必ず納品書を発行しましょう。

理由は、制作フェーズと運用フェーズの線引きをするためです。

制作フェーズと運用フェーズの境目が曖昧なままだと、サイト完成後もクライアントからの修正依頼を断ることができずに無料で修正対応し続ける羽目になりかねません。

納品書を発行すれば、納品日が明確になるので、「◯月◯◯日以降から修正は別途費用がかかります」と自信を持って説明できますよね。

制作フェーズと運用フェーズの線引きを明確にするためにも必ず納品書は発行しましょう。

２３：請求

全ての作業が完了したら請求書を発行しましょう。

請求書の作成は「Misoca」がおすすめです。

クライアントにサイトを納品したとしても、請求書の発行を忘れてたら代金はいつまで経っても支払われません。

親切なクライアントであれば、請求書の発行を促してくれることもありますが、基本的には納品者が請求書を発行する必要があります。

請求書は送付漏れがないように注意してください。

２４：運用保守

サイト制作が完了したら、次は保守管理運用フェーズに突入します。

サイトを放置しておくと、突然サイトが見れなくなったり、サイトにバグが発生したりします。

サイト納品後は必ず保守まで対応しましょう。

ポイント１：無料で修正対応する期間を設ける

プロのWEB制作の現場では、サイトを納品してから数週間から1ヶ月は無料で修正対応できる期間を設けるケースが多いです。

理由は、サイト公開後も不具合が起きる可能性があるからですね。

「テスト環境では動いてたのに本番環境では動かない…」

なんてこともザラに起きます。

サイト公開直後から追加費用を請求すると、「いやいや、それはサイト公開前に対応しておいてよ！」となるので、クライアントの満足度が下がりやすいです。

サイトは作って終わりではなく作り終わってからがスタートです。

この言葉の通り、サイト納品後も数週間から1ヶ月くらいは無料で修正対応する期間を設けましょう。

ポイント２：月額費用をもらう

運用保守についてはできるだけ月額費で契約しましょう。

前述の通り、定期的にプラグインの更新やバックアップ作業しないとサイトに不具合が生じる可能性があるためです。

作業依頼がある度に都度対応するパターンでも良いのですが、

• クライアントとのやり取りや相談が実質無料対応となる
• 作業する度に請求する必要があるので手間がかかる
• 請求する度にクライアントの財布に痛みが伴うので満足度が下がりやすい

これらの理由により、クレジットカードで月額費を支払ってもらった方がいいです。

何度も繰り返しますが、サイトは作って終わりではなく、完成してからが本番です。

クライアントに運用保守の重要性を説明したうえで、月額5千〜2万円での契約を目指しましょう。

２５：アフターフォロー

保守管理運用フェーズではアフターフォローも欠かさず行いましょう。

ポイント１：ニーズをヒアリングする

クライアントとやり取りする際はニーズがないか必ずヒアリングしましょう。

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

このように常にクライアントの事業状況や問題点は把握しておくことが大切です。

そして定期的にやり取りする中でニーズを聞き出せたら新たな提案のチャンスです。

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

ビジネスでは新規顧客を獲得するよりも既存顧客から継続案件や紹介案件を獲得する方が圧倒的にコスパが良いです。

「クライアントの事業に役に立てることはないか？」という意識を常に持って、定期的にニーズをヒアリングし提案しましょう。

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

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

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

案件受注後の流れを事前に理解しておけば、「案件を受注しても最後まで納品できなかったらどうしよう？」という不安が解消されます。

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

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

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

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

2019-02-06

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

2019-09-21

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

2019-10-14