フリーランス1年目で一番多い悩みは、案件の進め方がわからないことです。
打ち合わせ、見積、契約、デザイン、修正、納品…、ひとつでも判断を誤ると、修正地獄・赤字・クレームにつながることもあります。
特にフリーランスは、すべてを自分で判断して進めていく必要があります。
だからこそ、最初に全体の流れや注意点を知っておくことが、トラブル回避の一番の武器になります。
この記事では、フリーランスWebデザイン案件の進め方を、実務の流れに沿って整理しました。
これから案件に挑戦する方の、小さな指針になれば嬉しいです
【受注から納品まで】Webサイト制作の全体の流れ
まずは、案件の打診から納品までの流れをざっくり整理してみます。
フリーランスの場合も、大まかなステップ自体はどの案件でもほぼ共通です。
このあと、各ステップで「何を決めておくべきか」「どこでつまずきやすいか」を、順番に見ていきましょう。
【フェーズ1】案件を受ける前の準備（打診～契約まで）
1.案件の打診｜概要確認と「予算・納期」で判断する
クラウドソーシングのように依頼内容が整理されているケースもありますが、フリーランスをしていると、「こういうのってできます？」というざっくり相談がかなり多いです。
だからこそ、最初の打診で最低限の情報を聞き出すことがとても大切です。
ここで判断を誤ると、あとから「想定より作業が多い」「納期が無理」「赤字だった」となり、全工程が一気に崩れます。
まずは、以下のポイントをざっくりでいいので確認しましょう。
- 予算の目安（相場とかけ離れていないか）
- 納期（現実的に間に合うのか）
- ページ数・サイト規模
- 必要な機能（予約・問い合わせ・CMSなど）
- 新規サイトか、リニューアルか
この段階ではまだ詳細を詰める必要はありません。
「自分が受けられる案件かどうか」を判断するためのヒアリングです。
・自分のスキルで納品できる内容か
・予算は自分が納得できる範囲か
・スケジュール的に無理がないか
を見極めましょう。
また、相手から予算を言わずに「いくらくらいでできるの？」と聞かれることもよくあります。
「詳細はヒアリング後にお見積りします」と伝えた上で、「○万円〜が相場です」とすると、無理な案件を避けつつ、相手にも安心感を与えられます。
2.詳細ヒアリングMTG（要件定義）
受注するかもとなったら、次は具体的な内容のヒアリング（要件定義）に進みます。
対面・Zoom・チャットなど、打ち合わせの方法はクライアントに合わせる形が一般的です。
このヒアリングで確認した内容をもとに、見積書やデザインラフ（初期案）を作成するので、細かい部分までしっかりすり合わせが必要になります。
ヒアリングで確認すべき主なポイント
- サイトの目的（何を達成したいのか）
- リニューアルの場合：現状の不満点や改善したい部分
- 最終的なゴール（資料請求／問い合わせ／来店など）
- ターゲット（性別・年齢・属性など）
- 必要なページ・コンテンツの内容とボリューム
- トップページに載せたい情報
- 最も訴求したいポイント
- デザインの方向性（参考サイト、色の希望など）
- 写真・文章・ロゴなどの必要素材 → 誰がどこまで用意するのか を明確にする
- 納期と全体スケジュール感
- 公開後の運用はどうするか（更新頻度・CMSの有無）
フリーランスはここが超重要
フリーランス案件がトラブルになる原因のほとんどが、相手との認識違いや作業範囲の曖昧さ です。
例えば、
- 写真はクライアントが用意するのか？何枚もらえる？
- 文章はクライアント？こちらが作成？構成だけ？
- デザイン修正は何回まで含む？
- CMS編集できる範囲は？（どのページまで？）
- 動画・SNS埋め込みはある？
- 問い合わせフォームの内容や分量は？
- サーバーやドメインはクライアント側が契約する？サポートは必要？
- 納品形態は、デザイン納品？それとも本番アップまで？
こうした線引きを最初にしておくと、追加作業の押し付けや、後からの修正地獄を防げます。
これらの内容は「ヒアリングシート」という資料にまとめて、クライアントに事前に送っておくと、先方も答えやすいので、話がスムーズにまとまりやすいです。
また、クライアントから聞くだけではなく、より良いサイトにするための提案や意見交換も大切です。
相手もWeb専門家の知識を必要としているはずなので、寄り添った提案ができるとベストですね
最初のうちは難しいかもしれませんが徐々に慣れてくると提案もできるようになりますよ
3.見積作成・提出
ヒアリングで内容が固まったら、次は見積書の作成に進みます。
フリーランスは見積で赤字を防ぐことが超重要。
見積の基本方針
ヒアリング内容をもとに、
- 作業内容
- 作業範囲（どこまで含むか）
- 工数（何時間／何日かかるか）
- 修正回数
- 納品形態（データ納品／サーバーアップ）
を整理し、作業項目ごとに金額を分けて記載します。
例
- デザイン（トップページ）
- デザイン（下層◯ページ）
- コーディング
- CMS構築
- 写真加工
- ライティング
- デザイン修正（◯回まで含む）
細分化しておくことで、後の追加費用も請求しやすくなりますよ
見積書の形式は、ExcelでもクラウドでもOK
- Excel／Googleスプレッドシート
- 会計ソフト（freee、マネーフォワード など）
どれを使ってもOKです。使いやすいのを選びましょう。
私はfreeeを使っています
見積の有効期限を入れよう
金額の相場は日々変動しますし、案件内容が後から大きく変わることもあります。
見積書には必ず 【有効期限】を書いておきましょう。一年後にこの金額でやってと言われても嫌なので…。
私はだいたい1ヶ月にしています
見積もりを出したらあとは待つだけです！
※見積提出後のキャンセルは普通にあります。作業は正式に発注されてから開始しましょう。
4. 発注・契約
見積内容に合意が取れたら、ここでようやく正式発注となります。
契約書は必ず交わす（小さな案件でも）
小さい案件だと言いづらい時もありますが、フリーランスだからこそ契約書は必須。
PDFでもGoogleドキュメントでも電子契約でも問題なし。内容が明確で双方が合意していれば十分です。
作業開始は、契約締結後が鉄則です。
フリーランスの失敗あるあるなのが、
・見積OKの口頭だけで作業を始める
・ヒアリングの延長でなぜか制作を始めてしまう
ですね。過去の私です。
5. スケジュール設計（納期から逆算して進行管理しよう）
契約が完了したら、次は制作スケジュールの作成です。
フリーランスは自分自身が進行管理もするので、ここを曖昧にすると案件全体が崩れます。
逆に、スケジュールを「見える化」しておくと、クライアント側も安心です。
納期から逆算して、最低限以下の内容を盛り込みます。
- デザイン制作期間
- HTML制作期間
- 先方の確認のタイミング
- 必要であれば打ち合わせの日程
案件規模によって必要日数は変わります。
スケジュール作成は、大きな案件なら管理ツールを使いますが、小規模ならスプレッドシートで十分。
大事なのは、クライアントとスケジュール間を共有することです。
特に注意したいのは、クライアント側の確認期間は必ず遅れるという前提で余裕を持たせておきましょう。
お願いした文章・写真などの素材が全く揃わず進行が止まるのもあるあるなので、「この日までにご提出をお願いします」と早めに締切を設定しておくのをおすすめです。
【フェーズ2】制作準備（設計～デザインまで）
6.サイトマップとワイヤーフレームの作成
デザイン作業に入る前に、まず サイトの設計図 となる
- サイトマップ（ページ構成）
- ワイヤーフレーム（レイアウトの下書き）
を作成します。
サイトマップは必要なページを全部書き出して、どうつながるかを表したものです。
ワイヤーフレームは、イラストや色などデザイン要素を入れる前の、ページレイアウト・構成をラフで書いたものになります。
この2つの作成で、
「どんなページが必要か」
「トップページで一番見せたい情報は？」
「どこからどこに移動できるか」
といったサイトの骨組みを、制作側とクライアントで共有します。
ワイヤーフレームはサイトの方向性を決めるための下書きなので、最初から完璧でなくてOKです。
実務では「トップページの構成を変えたい」などの調整はよくあるので、あとから軽い修正ができることをクライアントにも伝えておくと安心です。
7.デザインカンプの作成
ワイヤーフレームでサイトの骨組みが決まったら、次はいよいよ デザインカンプ（完成イメージのデザイン案） を作成します。
デザインカンプは、デザインソフトで作ります。
以前は JPG などの画像で確認してもらう方法が一般的でしたが、最近は Figmaでそのままデモ画面（クリックできる状態）を作るケースも増えています。
デモ画面があると、ボタンを押した時の動きなど、クライアント側で完成イメージが湧きやすいというメリットがあります。
最初に提出するカンプは「最低限」でOK
最初に作るのは、次の4つ程度で十分です。
- PC版：トップページ
- PC版：下層ページ（1～2枚）
- スマホ版：トップページ
- スマホ版：下層ページ（1～2枚）
下層ページはレイアウトがほぼ共通なので、全部作る必要なし。
デザインが固まってから、残りのページを作成したり、カンプに起こさずでもサイトやHTMLで作り込んでしまうやり方もあります。
8.定期的な打ち合わせ｜進捗共有と認識合わせ
制作が始まったら、必要に応じてクライアントと進捗を共有します。
- 今どこまで進んでいるか
- 画像や文章など、クライアント側の準備状況
- デザインや仕様の修正相談
といった内容を確認しながら、認識のズレがないように進めます。
小規模案件の場合は、メールやチャットだけでやり取りするケースも多いです。
ただ、節目（デザイン提出前後など）だけでも直接話した方が、スムーズに案件が進むことが多いです。
【フェーズ3】制作（コーディング～テストアップ）
9.HTML構築・システム構築
デザインが固まったら、HTML・CSS・JavaScript を使って、実際に動くWebページへと組み立てていきます。
ここでは、
- レイアウトを再現する（HTML / CSS）
- スマホ対応（レスポンシブ）
- アニメーションや動きの実装（必要ならJS）
- 画像の最適化（読み込み速度対策）
などを行います。
クライアントが確認するのは「できあがったページ」なので、この工程は基本的に制作者が黙々と進めるパートです。
WordPressなどのCMS構築がある場合は、このタイミングで導入も行います。
10. テストサイトの用意
コーディングが完了したら、まずは、テストサイトをアップします。
テストサイトを載せるサーバー（場所）は、制作者側が用意することもあれば、クライアント側が用意することもあります。
本番のURLではなく、外部から見えないテスト環境にアップするのが基本です。
また、パスワード保護をして、クライアントだけが確認できる状態にします。
この段階で、次のような点を細かくチェックします。
- レイアウトの崩れ
- スマホ・タブレットの表示
- リンク切れ
- 文字化け
- フォーム送信のエラー
お客様に提出する前に、制作者側で徹底的にチェックしておくことが大切です。
【フェーズ4】公開・納品・請求まで
11.サーバー・ドメインの用意
サイトを公開するには、
- ドメイン（URLの住所）
- サーバー（サイトを置く家）
の2つが必要です。
リニューアルなら必要ないのですが、新規サイトには必要になります。
基本的には クライアント自身に契約してもらいましょう。
制作者名義で契約すると、後々の更新・料金トラブルにつながりやすく、責任範囲も曖昧になるためです。
サーバーとドメインの準備が難しいクライアントの場合は、
- 契約手続きのサポート
- 設定方法の案内
までに留めるのがベストです。
準備が整ったら、クライアントから
- サーバー情報
- FTP情報
- WordPressログイン情報（必要な場合）
などを共有してもらい、公開できる状態へ整えておきましょう。
クライアントの自社サーバーにアップする場合は注意
クライアントの 自社サーバー にアップする案件では、いくつか注意が必要です。
本番サーバーはセキュリティが厳しく、「リリース直前まで触れない」という環境もよくあります。
そして本番リリースしてみたら動作不良というトラブルも…。
その場合は、
- 本番サーバーと同じ条件のテスト環境を別で用意してもらう
- そこにテストサイトをアップして動作確認する
という流れが安全です。
本番とテストのサーバー条件が違うと、「テストでは動いたのに、本番で動かない」というトラブルが起きやすいため、
同じ環境を用意してもらうことが大切です。
12.クライアント検収（修正対応）
クライアントに、テストサイトにて実際の動作や内容をチェックしてもらいます。
この工程を 「検収（けんしゅう）」 と呼びます。
検収をクリアしたら、もうサイトが世に出てしまいますので、クライアント側にも「ここが最終チェックです」と伝えて、しっかり確認してもらいます。
制作側では気づけなかった細かい部分や、特定の環境で起きるエラーなど、検収では意外と多くの修正が出ることも普通です。丁寧にひとつずつ潰していけばOK。
検収では、以下のような指摘がよく出ます。
- 誤字・表記ゆれ
- 写真差し替え
- ボタンの文言変更
- スマホ表示の微調整
- 予想外のリンクミス
この程度ならいいのですが、クライアントによっては 「今更それを言う？」という大きな変更 を求められることも…。
トラブルを防ぐには、
- デザイン確定時点でしっかり認識合わせをしておく
- 契約書で「修正の範囲」「対応回数」を明確にしておく
ことがとても重要です。
それでも無理を言われることはあります…お互い不本意なサイトを世には出したくないので、最終的に必要だと判断した分は、できる範囲で寄り添うことも多いです
13. 本番公開（納品）
検収が完了し、クライアントからOKが出たら、いよいよ 納品です。
納品にはいくつかパターンがあり、案件の種類によって方法が変わります。
- 本番サーバーにテストサイトをそのまま移行して公開
- テスト環境のURLを本番URLへ切り替えて公開
- WordPressの場合：テスト環境で作ったサイトを「公開」に切り替える
- HTMLサイトの場合：ファイル一式を納品して完了
納品のやり方はいろいろあります。納品形態は、契約時にクライアントとしっかり決めておきましょう。
公開後に必ず行う最終チェック
どの納品形式でも、公開直後のチェックは必須です。
- フォーム送信が正しく動くか
- リンク切れがないか
- スマホでレイアウトが崩れていないか
- 読み込み速度が極端に遅くないか
特に 問い合わせフォームの不具合は大事故 なので必ず確認します。
クライアント側にも最終チェックを依頼し、問題がなければ納品完了です。
正直なところ…納品後の数日が一番ドキドキします。
公開後の動作チェックは念入りに！
14. 請求・入金確認
納品が完了したら、最後に 請求書を発行 します。
タイミングは、契約時に取り決めておくのが基本です。
一般的には、
- 納品後に一括請求
- 着手金＋納品後の残金請求
のどちらかが多いです。
請求書は、freee・マネーフォワード・Excel・PDFなど、自分が管理しやすいのでOK。
クライアントへ送付したら、入金日と金額を必ず確認しておきましょう。
入金確認まで終わって、案件は正式にクローズです！