「Webサイト制作の流れが知りたい」「発注後に何が起きるのか不安…」そんな疑問をお持ちではありませんか？ Webサイト制作は、大きく分けてヒアリング → 集客設計 → サイト設計 → 画面設計 → デザイン → コーディング → テスト → 公開の8つのステップで進みます。この流れをあらかじめ把握しておくだけで、担当者としての動き方が格段にスムーズになります。 この記事では、Web制作歴20年以上のプロが、Webサイト制作の全工程を担当者目線でわかりやすく解説。各フェーズで「自分が何をすべきか」「どんな落とし穴があるか」も合わせてお伝えします。
Webサイト制作の流れ：全8ステップの概要
ホームページ制作（Webサイト制作）の工程は、以下の8つのフェーズで構成されます。小〜中規模サイトなら3〜5ヶ月、大規模リニューアルでは半年〜1年以上かかることもあります。
① ヒアリング・要件定義（制作開始前）
② 集客設計（どう見つけてもらうかを決める）
③ サイト設計（ページ構成・情報設計）
④ 画面設計（ワイヤーフレーム作成）
⑤ デザイン制作
⑥ コーディング・システム開発
⑦ テスト・修正
⑧ 公開・切り替え
⚠️ 本記事の対象範囲について
本記事では、発注先（制作会社・フリーランス）が決定した後の制作工程を8ステップで解説しています。「どの業者に頼むか」「制作会社とフリーランスのどちらが良いか」といった業者選定のプロセスは本記事には含まれません。業者選定について詳しく知りたい方は、「【プロが暴露】Web制作をフリーランスに外注するメリット・デメリット。失敗しない選び方と「地雷」の見分け方」をあわせてご参照ください。
それでは、各ステップの内容と「担当者がすべきこと」を詳しく見ていきましょう。
ステップ①：ヒアリング・要件定義【制作期間の土台を決める最重要フェーズ】
制作会社への発注が決まると、最初に行われるのが「ヒアリング」です。制作側が「何を・誰のために・なぜ作るのか」を把握するためのプロセスで、このフェーズの質が完成サイトのクオリティを左右します。
担当者が事前に準備しておくべき6つの情報
（1）サイト制作の目的・達成したいゴール（例：問い合わせ数を月10件に増やしたい）
（2）ターゲットユーザー像（年齢・職種・悩みなど具体的に）
（3）参考サイトのURL（デザイン・機能の好みを伝えるために）
（4）既存サイトの棚卸し（残したいページ・削除するページの整理）
（5）ブランド素材（ロゴデータ・指定カラーコード・フォントなど）
（6）予算・スケジュールの制約（上長に確認してから臨む）
【プロのアドバイス】「何となくかっこよくしたい」だけでは制作会社は動けません。「このサイトで何を達成したいか」を具体的な数字や言葉で言語化しておくと、完成物の質が大きく変わります。
ステップ②：集客設計【誰にどうやって見つけてもらうかを決める】
サイト設計に入る前に、必ず行うべき重要なステップが「集客設計」です。「どんな人に」「どうやって」サイトを見つけてもらうかを先に設計しておかないと、完成後に「誰にも見られないサイト」になってしまうリスクがあります。
集客方法によってサイトに求められる要件が大きく変わるため、サイト構造やコンテンツ設計に着手する前にこの方針を固めておくことが欠かせません。
主な集客チャネルと特徴
【SEO（検索エンジン最適化）】
GoogleやYahoo!での検索結果に上位表示させることで、自社サービスに関心のあるユーザーを継続的に集客する方法。効果が出るまで数ヶ月〜1年かかることもありますが、広告費が不要で長期的なコスト効率が高い。
【リスティング広告（Web広告）】
検索キーワードに連動してサイトを上位表示させる有料広告。即効性が高く、短期間でアクセスを集めたい場合に有効。ただし広告費がかかり続けるため、費用対効果の管理が重要。
【SNS流入】
X（旧Twitter）・Instagram・FacebookなどのSNSからサイトへ誘導する方法。ブランド認知向上や特定ターゲット層へのアプローチに適している。
【既存顧客・名刺・紹介】
営業や展示会などで出会った相手がサイトを参照するケース。サイトの「存在証明・信頼醸成」としての役割が中心。
このフェーズで担当者が決めておくべきこと
・主な集客チャネルを1〜2つ絞り込む（「まずSEOとSNS」など）
・集客したいキーワードをリストアップする（SEO対策を行う場合）
・Web広告の予算を設定する（広告を使う場合）
・競合サイトの集客方法を調査する（どんな検索ワードで上位に来るかなど）
【プロのアドバイス】集客設計が固まると、次のサイト設計・コンテンツ作成の方向性が明確になります。「SEOで集客するなら、どのキーワードで上位表示を狙うか」を先に決めておくことで、必要なページ構成や文章量が変わってくるのです。この順番を守るだけで、完成後の効果が大きく変わります。
ステップ③：サイト設計【集客戦略をページ構成に落とし込む】
集客設計で「どう見つけてもらうか」の方針が決まったら、次はその戦略をWebサイトの構造に落とし込む「サイト設計」を行います。制作会社が中心となり、サイトマップ（どんなページを作るか・どう繋げるか）を作成します。 SEOで集客するなら「どのページでどのキーワードを狙うか」、広告なら「どのページにランディングさせるか」など、集客方針がページ構成に直接反映されます。
この段階でページ構成を確定させることが重要です。なぜなら、後のフェーズに進むほど修正コストが高くなるからです。「このページは不要だった」「カテゴリーを分けたい」といった構成変更が後から発生すると、デザイン・コーディングのやり直しが生じ、追加費用とスケジュール遅延につながります。
このフェーズで担当者がすべきこと
・集客設計で決めたキーワード・ターゲットに沿ったページ構成になっているか確認する
・必要なページがすべて含まれているかチェックする（サービス詳細・実績・採用・問い合わせ など）
・不要なページ・重複しそうなページがないか整理する
・承認したら書面やメールで確認の記録を残す
ステップ④：画面設計（ワイヤーフレーム）【ページの骨格を決める】
サイト設計でページ構成が決まったら、次は各ページの「画面設計（ワイヤーフレーム）」を行います。ワイヤーフレームとは、色やデザインを一切使わず、テキストとボックスだけでページのレイアウトや情報の配置を示した「設計図」のことです。
ここで「どの情報をどの位置に・どんな順番で置くか」を確定させることで、次のデザイン制作がスムーズに進みます。また、この段階での修正コストは比較的低いため、気になる点は積極的にフィードバックしましょう。
画面設計で確認すべきポイント
【情報の優先順位は合っているか】
最も伝えたいメッセージ・CTAボタン（問い合わせ・資料請求など）が画面の目立つ位置にあるかを確認します。
【ユーザーの動線は適切か】
訪問者がトップページから目的のページ（サービス詳細・問い合わせなど）にスムーズにたどり着けるか確認します。
【スマートフォン表示も確認する】
現在はWebアクセスの半数以上がスマートフォンからです。PC用だけでなく、スマートフォン向けのワイヤーフレームも必ず確認しましょう。
このフェーズで担当者がすべきこと
・提出されたワイヤーフレームを上司・経営者など関係者と必ず確認する
・掲載すべき情報の抜け漏れがないかチェックする
・CTAボタンの文言・設置箇所が目的に合っているか確認する
・修正点はデザイン着手前にすべて出し切る（デザイン後の構造変更は高コスト）
・承認したら書面やメールで確認の記録を残す
【プロのアドバイス】画面設計は「見た目」ではなく「伝える順序と構造」の設計です。「なんか地味だな」と感じても、それはデザインが入っていないためです。デザインが加わる前の段階では、情報の並び・優先順位・導線が正しいかどうかだけに集中してフィードバックするのがポイントです。
ステップ⑤：デザイン制作【サイトの印象を決める重要フェーズ】
画面設計（ワイヤーフレーム）が承認されると、いよいよデザイン制作に入ります。まずはトップページや主要ページのデザイン案（カンプ）が提出されます。ここで承認されたデザインがサイト全体の見た目の基準になります。
デザイン確認で押さえるべき3つのポイント
① 関係者を巻き込んで確認する
デザインは感情的な好みが入りやすいため、担当者一人で判断せず、経営者・広報担当者など必要な関係者に確認を取りましょう。
② 具体的なフィードバックをする
「何となく気に入らない」ではなく、「〇〇が△△に見えるため◻◻に変えたい」という形で具体的に伝えることが、修正の精度を高めます。
③ ブランドルールへの適合を確認する
指定カラー・フォント・ロゴの使い方など、自社のブランドガイドラインに沿っているかチェックしましょう。
【注意】デザイン確認は「スピードが命」
返答が遅れると制作スケジュール全体が後ろ倒しになり、最終的な公開日が延びます。確認依頼が来たら3営業日以内を目安に回答できる体制を整えておきましょう。
ステップ⑥：コーディング・システム開発【エンジニアが動くフェーズ】
デザインが承認されると、エンジニアがHTML・CSS・JavaScript等のコードを書き、実際にブラウザで表示・動作するWebページへと変換していきます。この工程を「コーディング」と呼びます。
WordPressなどのCMSを使う場合は、このフェーズでCMS環境の構築とページの組み込みも行われます。
このフェーズは主にエンジニアが作業するため、担当者側の動きは比較的少なめです。しかし、制作会社からコンテンツ素材の提供を求められることがあります。素材提供が遅れるとスケジュール遅延の原因になるため、早めに準備しておきましょう。
このフェーズで担当者が準備しておくべきもの
・掲載テキストの最終版（会社概要・サービス説明・スタッフ紹介文など）
・写真・画像データ（高解像度のものを用意。社内撮影の場合は日程調整も）
・サーバー・ドメインの管理情報（ログインID・パスワード・管理会社の連絡先）
・SNSアカウントのURL（フッターに掲載する場合）
ステップ⑦：テスト・修正【公開前の最終チェック】
コーディングが完了すると、テスト環境（非公開の確認用URL）で実際の表示を確認します。PC・スマートフォン・タブレットなど複数端末でレイアウトの崩れやボタンの動作不良がないか確認するのがこのフェーズです。
テスト時のチェックリスト（担当者向け）
✅ PC・スマートフォン・タブレットで表示を確認した
✅ 問い合わせフォームからテスト送信して届くか確認した
✅ 電話番号・メールアドレスが正しく掲載されているか確認した
✅ 誤字脱字・情報の誤りがないか全ページ確認した
✅ 上司・経営者など関係者への最終確認が取れた
✅ 公開日を社内に周知した
【よくある落とし穴】テスト期間に「ここも直してほしい」「あのページも追加したい」と追加修正・追加依頼が続出するケースがあります。軽微な修正は対応してもらえますが、大きな変更は追加費用・スケジュール延長の原因になります。「テスト前にすべての修正点を出し切る」という意識が重要です。
ステップ⑧：公開・切り替え【いよいよサイトが世に出るタイミング】
全確認が完了したら、いよいよ本番サーバーへのデータ移行・DNS切り替えを行い、サイトを公開します。この作業は通常エンジニアが行いますが、担当者として以下を事前に準備・確認しておきましょう。
公開前後に担当者がすべき確認事項
【公開前】
・公開日時を社内の関係者（上司・広報・営業部門など）に共有する
・公開と同時にSNSやメルマガで告知するか事前に決めておく
・旧サイトから新サイトへのリダイレクト設定を制作会社に依頼する（SEO上重要）
【公開後】
・自分のスマホ・PCで実際にアクセスして表示を確認する
・問い合わせフォーム・電話番号が正しく表示・機能しているか確認する
・公開後しばらくは問い合わせへの対応体制を整えておく
公開はゴールではなくスタート：サイト運用と継続改善の重要性
Webサイトは「作って終わり」ではありません。定期的な更新・改善を続けることで、はじめて集客・問い合わせ増加などの効果が生まれます。「サイトを作ったのにアクセスが来ない」という悩みの多くは、公開後の運用不足が原因です。
公開後に継続的に取り組みたいこと
・コンテンツの定期更新：お知らせ・ブログ・実績情報を継続的に追加する
・アクセス解析の確認：Google Analyticsなどでどのページが見られているか、どこで離脱しているかを把握する
・制作会社との改善サイクル：データをもとに「どのページを改善するか」を定期的に話し合う
・SEO対策の継続：検索順位を定期的にチェックし、必要に応じてコンテンツを更新する
費用感について詳しく知りたい方は「Webサイト制作の適切な制作発注費用の考え方」もあわせてご参考ください。また、発注先の選び方については「Web制作をフリーランスに外注するメリット・デメリット」で詳しく解説しています。
まとめ：Webサイト制作の流れと担当者のポイント
この記事では、Webサイト制作の全工程を8ステップで解説しました。改めて整理すると以下のとおりです。
① ヒアリング・要件定義：目的・ターゲット・素材を事前に整理する
② 集客設計：SEO・広告・SNSなど集客チャネルと方針を先に決める
③ サイト設計：集客戦略をもとにページ構成・情報設計を確定させる
④ 画面設計（ワイヤーフレーム）：各ページの情報配置・導線を骨格図で確定させる
⑤ デザイン制作：関係者を巻き込んでスピーディに確認する
⑥ コーディング：テキスト・画像などの素材を早めに準備する
⑦ テスト・修正：全ページを複数端末で確認し、修正を出し切る
⑧ 公開・切り替え：公開後も表示確認と関係者への周知を忘れずに
Webサイト制作は「制作会社と発注者の共同作業」です。担当者側の準備・確認・対応スピードが、完成物のクオリティと公開スケジュールを大きく左右します。この記事を参考に、自信を持ってプロジェクトを進めてください。
