Web制作の流れを7ステップで解説｜受注から公開まで作る側がやること

デザインは少しずつ作れるようになってきたけれどクライアントワークが不安…
初めての案件を、最初から最後まで回せるか不安…

「Web制作の流れ」で調べると、依頼する側に向けた記事が多く出てきますよね。でも依頼を受ける側、つまりデザイナーが知りたいのは、

• デザインまでに何をするか
• 注意すべきポイントはどういった点か
• どこでクライアントにデザインの確認を取るか

などではないでしょうか？工程の順番と確認を取る場面が分かれば、初めての案件でも先回りしてスムーズに進められます。

この記事では、受注から公開までの7ステップを、作る側がやること・確認すること・やらかしがちな失敗に分けてご紹介します。

Web制作（ホームページ制作）の手順は？受注から公開までの7ステップ

Web制作の手順は、次の7つです。

ホームページ制作でもLP制作でも、流れの骨組みは同じです。違うのは量で、ページ数の多いホームページほど、サイト設計とデザインに手間がかかります。

各工程で作る側がやることを、1枚の表にまとめました。

工程	作る側がやること	クライアントに確認すること	できあがるもの
STEP1 ヒアリング	目的・見てほしい人・してほしい行動・ページ数・納期・素材の有無を聞く	サイトの目的と、見た人にしてほしい行動	ヒアリングのメモ
STEP2 見積もり・契約	作業範囲・修正回数・納期・報酬と支払期日をまとめる	条件をメールなどの文字で受け取る	見積書・取引条件の文面
STEP3 企画・サイト設計	ページの一覧と階層、メニューの項目を決める	ページの数と名前	サイトマップ（ページ構成表）
STEP4 ワイヤーフレーム	白黒の箱で、どこに何を置くかを描く	載せる情報と順番	ワイヤーフレーム
STEP5 デザイン	トップページから下層ページの順に、PCとスマホの見た目を作る	修正点をまとめて文字で受け取る	デザインカンプ
STEP6 実装	デザインをWebページとして組む	公開後にクライアントが自分で更新したい所	テスト用のサイト
STEP7 テスト・公開	表示・リンク・フォーム・誤字を確かめて公開する	公開日と納品物の受け取り	公開されたサイト・納品物

Webサイト制作における4つのステップは？

7ステップを大きく束ねると、次の4つの段階になります。

1. 企画（STEP1〜2）：何のために作るかと、取引の条件を決める
2. 設計（STEP3〜4）：ページの構成と、どこに何を置くかを決める
3. 制作（STEP5〜6）：見た目を作り、Webページとして組む
4. 公開（STEP7）：確かめて公開し、納品する

戻りが高くつくのは、設計を決めないまま制作に入ったときです。デザインを作り終えてから「このページも必要だった」と分かると、作り直す範囲が大きくなります。

Web制作の流れ｜作る側が各STEPでやること・確認すること

STEP1：ヒアリング（目的・見る人・してほしい行動を聞く）

最初にやるのは、クライアントの話を聞くことです。聞くことは、次のとおりです。

• サイトの目的（問い合わせを増やしたい、採用につなげたい など）
• 見てほしい人（ターゲット）
• 見た人にしてほしい行動
• ページ数と納期
• 写真・文章・ロゴデータなど、素材の有無

デザインは、クライアントの目的を達成する手段です。だから工程の起点は、好みより先に目的を聞くことになります。

あわせて、作るのがLPかホームページかも確かめます。ホームページは会社やサービスの信頼を伝えるため、LPは申し込みや購入につなげるためと役割が違い、STEP3以降の作業量も変わるからです。

聞いた内容を3C分析で整理する方法は、以下の記事で詳しく説明しています。

やらかしがちなのは、「おしゃれな感じで」といった好みの話から聞き始め、目的を聞かないまま作り始めることです。何を基準に直せばいいかが決まらないので、修正が終わらなくなります。

STEP2：見積もり・契約（作業範囲と修正回数を文字で残す）

見積もりの段階で決めるのは、次の4つです。

1. 作業範囲（何ページか、デザインだけか実装までか）
2. 修正の回数
3. 納期
4. 報酬の額と支払期日

決めた条件は、口約束にせず文字で残しておきます。

公正取引委員会のフリーランス法特設サイトによると、フリーランスに仕事を頼む事業者は、取引条件を書面またはメール・SNSのメッセージなどで直ちに明示する義務があります。口頭での明示は認められていません。

依頼を受ける側としては、「メールで構いませんので、条件を文字でいただけますか」とお願いしましょう。お願いしやすい根拠があると、言い出す気まずさも減りますよね。

口約束のまま始めると、途中で「それも含まれていると思っていた」と言われることがあります。
作業範囲と修正回数が文字で残っていれば、追加の作業として相談できるわけです。

そもそも受けてよい案件かどうかの見極め方は、以下の記事で詳しく説明しています。

STEP3：企画・サイト設計（ページ構成とメニューを決める）

ここでは、サイトにどんなページを置くかを決めます。決めることは、次の3つです。

1. ページの一覧と階層（サイトマップ）
2. 各ページの役割
3. メニュー（グローバルナビゲーション）に並べる項目

ページの数と名前は、デザインに入る前にクライアントと合意しておきます。ページ数は、STEP2で決めた作業範囲に直結するからです。

メニュー項目の選び方と並べ方は、以下の記事で詳しく説明しています。

やらかしがちなのは、構成が決まらないままデザインに入ることです。途中でページが増えて、作業量が見積もりより膨らみます。増えたページは、STEP2の作業範囲と照らして追加の相談にしましょう。

STEP4：ワイヤーフレーム（どこに何を置くかの設計図）

ワイヤーフレームは、色や写真を入れずに、白黒の箱で配置と優先順位を描いた設計図です。STEP1で聞いた「してほしい行動」に照らして、載せる順番を見直します。

クライアントには、ここで確認してほしいのは載せる情報と順番で、色や写真はSTEP5で決める、と先に伝えておきます。見た目の感想ばかりが返ってくるのを防ぐためです。

ワイヤーフレームの作り方は、以下の記事で詳しく説明しています。

やらかしがちなのは、ワイヤーフレームを飛ばして、いきなりデザインを見せることです。構成への修正と見た目への修正が同時に届き、どちらから直すかで迷います。

STEP5：デザイン（カンプ制作と修正のやりとり）

デザインカンプ（完成した見た目の見本）を、トップページから下層ページの順に作ります。スマホで見たときの形も、一緒に用意しておきましょう。

先にトップページで色・文字・写真の扱いを決めておくと、下層ページはそのルールに沿って作れます。ページごとに迷う時間が減るからです。

修正の依頼は、まとめて文字でもらうようにお願いします。回数は、STEP2の取り決めに沿って数えます。

やらかしがちなのは、1件ずつ届く修正にその都度対応して、どのデータが最新か分からなくなることです。修正をまとめてもらい、反映したデータに日付を付けておくと混ざりません。

STEP6：実装（コーディング・WordPress構築）

デザインを、ブラウザで見られるWebページとして組む工程です。HTMLとCSSでコーディングしたり、WordPressに組み込んだりします。

デザイナー自身が実装まで担当するか、コーディングを別の人に頼むかは案件によって違います。どちらになるかは、STEP2で決めた作業範囲のとおりです。

別の人に渡す場合は、次のことがデザインデータで分かるようにしておきます。

• 文字の大きさと太さ
• 余白の幅
• スマホで表示したときの並び順

これらが抜けていると、実装する人が推測で組むことになります。やらかしがちなのは、誰が実装するかを決めないまま受けて、デザインが完成した所で止まってしまうことです。

STEP7：テスト・公開（公開前チェックと公開後にやること）

公開前に確かめることは、次のとおりです。

• PCとスマホで表示が崩れていないか
• リンク切れがないか
• お問い合わせフォームが送れて、通知メールが届くか
• 誤字・脱字がないか

確認を終えたら公開し、デザインデータなどの納品物をクライアントに渡します。

フォームの通知先メールアドレスを確かめずに公開すると、問い合わせが来ていても気づけません。

公開しても、すぐ検索に出るとは限りません。Google検索セントラルによると、Search Consoleから、検索エンジン向けのサイトマップ（XMLサイトマップ。STEP3で作るページ構成表とは別物）を送信でき、Googlebotがいつサイトマップにアクセスしたかや処理エラーを確認できます。

ただし、送信してもクロールされる保証はないと説明されています。公開した日に検索結果に出なくても、慌てなくて大丈夫です。

公開後、STEP1で聞いたしてほしい行動が起きているかを見るところまでが、Web制作の仕事です。サイトは目的を達成するために作るものなので、公開した日はゴールになりません。

初めての案件で流れが崩れる3つの原因と防ぎ方

各STEPのやらかしをまとめると、流れが崩れる原因は次の3つです。

1. 決める順番を飛ばす
2. 確認を口頭で済ませる
3. 素材待ちで止まる

1、決める順番を飛ばす

Web制作は、ページの構成を決めてから配置を決め、最後に見た目を決める順番で進みます。順番を飛ばすと、前の工程で何かが変わるたびに、後の工程で作ったものが崩れます。

防ぎ方は、STEP3とSTEP4でクライアントの合意をもらってから次へ進むことです。

2、確認を口頭で済ませる

打ち合わせや電話で「それでいきましょう」と決めたことは、時間がたつとお互いの記憶がずれます。悪気がなくても起きることです。

防ぎ方は、決めたことを打ち合わせの後にメールで送り、返信をもらっておくことです。

3、素材待ちで止まる

写真や文章がそろわないと、デザインも実装も進められません。初めての案件では、作業より素材待ちのほうが長くなることもあります。

防ぎ方は、STEP1で素材を誰がいつまでに用意するかを決め、スケジュールに書き込んでおくことです。

進め方を作る側が先に示せると、クライアントも安心して任せられます。
「次はページ構成を決めましょう」と言えれば、初めての案件でも信頼を積めます。

Web制作の流れでよくある質問

Webサイト制作は初心者だと何ヶ月かかる？

Webサイト制作は初心者だと何ヶ月かかる？

制作期間は、案件の中身で決まります。期間を左右するのは、次の3つです。

1. ページ数
2. クライアントとの確認の往復回数
3. 写真や文章などの素材がそろう日

スケジュールは、納期から逆算して組みます。ワイヤーフレームとデザインの確認日を先にクライアントと押さえておくと、確認待ちで止まる期間が読めるようになります。

Webデザイナーの1日の流れは？

複数の案件を並行するときは、1日の中で「返信・確認の時間」と「集中して作る時間」を分けると進めやすくなります。返信を決まった時間にまとめれば、作る時間が細切れになりません。

案件ごとに、いまどのSTEPにいるかを一覧にしておくと、次にやることで迷わずに済みます。

まとめ

1、Web制作の流れは7ステップ。手を動かす工程は一部で、残りは決めて確認する工程
2、作業範囲・修正回数・支払期日は、作り始める前に文字で残す
3、構成、配置、見た目の順番を飛ばさないことが、修正の繰り返しを防ぐ

参考にした情報源

• 公正取引委員会「フリーランス法特設サイト」https://www.jftc.go.jp/freelancelaw_2024/（2026年11月2日確認）
• Google 検索セントラル「サイトマップの作成と送信」https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=ja（2026年11月2日確認）