Web制作の流れ:6つの工程

制作会社に頼んでから公開するまでは、おおむね次の6つの工程で進みます。ホームページ制作の流れも同じです。

  1. 相談・見積もり:作りたいものを伝え、見積もりと工程ごとの日程を出してもらう
  2. 企画:何のために、誰に向けて、何を作るかを決める。何をどこまで作るかを具体的に決め、文書にまとめる作業を「要件定義」と呼ぶこともある
  3. 設計:サイトマップ(サイトにどのページを置くかの一覧)と、ワイヤーフレーム(各ページに何をどの順で載せるかを示す骨組みの図)を作る
  4. デザイン:ワイヤーフレームをもとに、色や文字、写真の配置を決めた見本(デザインカンプ)を作る
  5. 実装:見本どおりにページを作り、CMS(管理画面から文章や写真を更新できる仕組み。WordPressなど)に組み込む
  6. テスト・公開:公開前に確かめるための場所(テスト環境)で表示や動きを確かめ、本番に公開する

ここで言うサイトマップは、ページの一覧のことです。公開したあとGoogleに送る「XMLサイトマップ」とは別のものです。

工程の分け方は制作会社によって違い、4つにまとめる会社も、8つに分ける会社もあります。ただ、中身の順番は、大きくは変わりません。

Web制作の6つの工程と、各工程の終わりにできるもの 1 相談・見積もり 見積もりと日程 2 企画 目的と範囲のまとめ (要件定義) 3 設計 サイトマップと ワイヤーフレーム 4 デザイン 見本 (デザインカンプ) 5 実装 ページと、 更新の仕組み(CMS) 6 テスト・公開 公開したサイト 各工程の終わりに、決まったことを自社で確かめる
図1:Web制作の6つの工程と、各工程の終わりにできるもの。工程の分け方は制作会社によって違う。

この順番には理由があります。私は制作の仕事で、企画からワイヤーフレームまでを受け持ってきました。ページの構成が固まる前にワイヤーフレームを作ったり、ワイヤーフレームの内容に合意する前にデザインに入ったりすると、文字や写真をどこに置くかで迷い、直しが増えて時間がかかります。前の工程で決めたことが、次の工程の土台になるからです。そのため、各工程の終わりには、依頼する側が「ここまでで決まったこと」を確かめる場面が来ます。

制作会社に頼むか、ホームページ作成サービスを使うか、自社で作るかをまだ決めていない場合は、先に作り方の選び方を確かめておくとよいでしょう。3つの作り方の違いと、選ぶ前に確かめることは、会社のホームページの作り方の記事で解説しています。

関連記事会社のホームページの作り方は?3つの方法と、選ぶ前に確かめること

工程ごとに、自社が決めること・用意するもの

6つの工程のうち、手を動かして作るのは制作会社です。ただ、どの工程にも、依頼する側でなければ決められないことと、依頼する側が用意しないと進まないものがあります。工程ごとに分けると、次のようになります。

工程制作会社自社が決める・用意するもの
相談・見積もり話を聞き、見積もりと工程ごとの日程を出す何のために作るか・誰に見てほしいか・載せたいページを希望として伝える。予算と公開したい日を伝える。原稿と写真を誰が用意するか(第3章)と、最後に決める人・確認する人(第4章)を決める
企画希望をもとに、目的と範囲を詰めて文書にまとめる制作会社と詰め、まとめを読んで、最後に決める人が了承する
設計サイトマップとワイヤーフレームを作るどのページを作るか、ページごとに何を載せるかを確かめる(第6章)
デザイン見本を作り、意見を受けて直す見本を確かめ、意見をまとめて返す(第4章)
実装ページを作り、CMSに組み込む原稿と写真を渡す
テスト・公開テスト環境で確かめ、本番に公開するテスト環境で、文章・電話番号・問い合わせフォームを確かめる

表で見ると、自社が決めることは最初の2つの工程に集まっています。ただ、その中にも、見積もりの前に決めてから持っていくものと、希望として渡して企画の工程で詰めるものがあります。

決めてから持っていくのは、原稿と写真を誰が用意するか(第3章)、最後に決める人と意見を返す期限(第4章)、公開したい日です。どれも、決まっていないと見積もりや日程が出せないか、あとで出し直しになります。

何のために作るか、誰に見てほしいか、載せたいページは、見積もりの前に決めきれていなくてかまいません。いまの考えを希望として文章にして渡せば、企画の工程で制作会社と詰められます。ただし、設計に入るまでには決めておきます。

私が受け持ってきた仕事では、設計に入るまでに「誰に、何を、どんな順番で伝えたいか」が決まっていた案件ほど、ワイヤーフレームはほとんど直さずに通りました。反対に、ここが決まらないまま設計に入ると、ワイヤーフレームを見た段階で目的の話に戻ることになり、そのぶん日程が後ろにずれます。

表の中で、日程にいちばん響くのは、原稿と写真の用意と、社内の確認です。それぞれ誰が受け持ち、いつまでにやるかを、次の2つの章で説明します。

原稿と写真は、誰が用意するかを見積もりの前に決める

原稿は、ページに載せる文章のことです。原稿と写真を用意する方法は、大きく3つあります。

原稿と写真を用意する3つの方法 自社で用意する 制作費:抑えられる 期間:社内で書く・ 選ぶ時間しだい 自社の手間: ページごとに書く・選ぶ 制作会社に頼む 制作費:増える 期間:取材・撮影の ぶん延びる 自社の手間:取材を受け、 できた原稿を確かめる 自社と制作会社で分ける 例:文章は自社、 写真の撮影は頼む 制作費・期間: 頼んだぶん増える 自社の手間:ページごとに どちらが用意するか決める どれにするかを、見積もりを頼む前に決める
図2:原稿と写真を用意する3つの方法と、それぞれの費用・期間・自社の手間。

自社で用意すれば制作費は抑えられますが、社内で書いたり選んだりする時間がかかります。制作会社に頼めば、取材や撮影のぶん制作費がかかり、その日程も見込むことになります。自社は取材を受け、できあがった原稿を確かめます。自社と制作会社で分ける場合は、ページごとに、原稿と写真をどちらが用意するかを決めます。

どれを選ぶかで、見積もりの金額も日程も変わります。だから、見積もりを頼む前に決めておきます。決めないまま見積もりを取ると、あとから「原稿もお願いしたい」となったときに、見積もりと日程を出し直すことになります。

自社で用意するときは、ページごとに、誰がいつまでに書くかを決めます。原稿がそろわないとページを作り進められないので、原稿の締め切りは公開日に大きく響きます(第5章)。デザインの見本は仮の文章で作ることが多いので、原稿を実際に渡すのは実装の工程です(第2章の表)。

写真や画像は、サイトに載せてよいものかを、渡す前に確かめます。

以前あるサイトを作ったとき、「この図に合わせて作ってほしい」と参考の画像を渡されたことがあります。出どころをたどると、その会社が作ったものではなく、取引先の会社が作った資料の1ページで、ほかの会社のロゴがいくつも入っていました。そのまま載せることも、ロゴごと描き写すこともできないので、構成だけを参考にして描き起こし、ロゴは載せないことにしました。同じ件で、渡された資料と、私の手元にあった資料とで、載っている名前が食い違っていたこともあります。調べると、渡された資料のほうが新しい版で、手元の資料が古いままでした。

社内で集めた資料や画像を渡すときは、誰が作ったものか、いつのものかを1行添えておきます。出どころが分かれば、制作会社はそのまま載せてよいかをすぐ判断でき、いつのものかが分かれば、ほかの資料と食い違ったときにどちらを採るかを決められます。

確認する人と、意見を返す期限を最初に決める

第2章の表で、自社がやることのもう1つは「確かめて意見を返す」でした。設計、デザイン、テストの各工程の終わりに、制作会社が作ったものを自社で確かめ、意見を返します。ここで止まると、制作会社は次の工程に進めません。

確かめる人が多いと、意見が集まるまでに時間がかかります。困るのは時間だけではありません。私が担当したあるサイトでは、トップページの最初の部分を、1画面に収まる高さで設計していました。ところが、いくつかの部署が順に確認するうちに、それぞれの担当する部分について「もっと書いてほしい」という要望が出る一方、削る意見は誰からも出ませんでした。その部分の高さは、最後には設計の約2倍になりました。要望を出した側も、「最初の部分を細かくしすぎるのは避けたい」と書き添えていたのにです。一つひとつの意見は正しくても、確認を重ねると、足す方向に働きやすくなります。

そこで、見積もりを頼む前か最初の相談で、次の3つを決め、制作会社にも伝えておきます。

  • 最後に決める人を1人決める
  • 誰が確かめるかと、1回の確認で何日以内に返すかを決める
  • 意見は、確認のたびに決める人がまとめ、1回で返す
社内の確認と、意見の返し方 決める人がいない 部署A 部署B 部署C 制作会社 意見がばらばらに届き、 足す意見が積み上がる 決める人がいる 部署A 部署B 部署C 決める人 制作会社 確認のたびに、まとめて返す 決める人と、1回の確認で何日以内に返すかを、最初に決める
図3:社内の確認と、意見の返し方。決める人がいないときと、いるとき。

決める人がいれば、足す意見が出たときに、設計の段階で決めたこと(このときなら「1画面に収める」)と比べて、採るか断るかを社内で決めてから返せます。部署ごとの意見が食い違ったときも同じです。意見がばらばらに届くと、制作会社はどれに従えばよいか分からず、確かめ直すための往復が増えます。

期間:公開したい日から逆算する

制作の期間は、ここまでの2つの章で見た原稿と写真の用意と、社内の確認にかかる時間でも変わります。

小さな会社のサイトなら、相談から公開まで1〜3か月ほどが目安です。取材や撮影、原稿の作成まで頼むと、半年ほどかかることもあります。

※期間の幅は、Web制作会社が公開している資料をもとにまとめたもの(2026年10月4日時点)。実際の期間は、ページ数と頼む範囲で変わる。

制作会社の作業には、だいたいの日数が見込めます。見込みにくいのは、原稿と写真がそろうまでの時間と、確かめて返すまでの時間です。どちらも自社がやることで、そこが延びると、制作会社も次の作業に進めなくなります。

工程ごとの日数は、見積もりと一緒に制作会社に出してもらいます。公開したい日が決まっているなら、見積もりを頼むときにその日を伝え、間に合うかを聞きます。

そのうえで、日程は公開したい日から逆算して組みます。まず公開日を置き、制作会社が出した日数をもとに、テスト、実装、原稿の締め切り、デザインの確認、設計の確認の日を、さかのぼって順に置きます。社内で確かめる期間には、第4章で決めた「何日以内に返すか」を当てます。

公開したい日から逆算して、日程を組む 公開したい日から、さかのぼって日を置く 設計の 確認 デザインの 確認 原稿の 締め切り 実装 テストで 確かめる 公開日 自社の作業 制作会社の作業 日数が読みにくいのは自社の作業。その日を先に決める
図4:公開したい日から逆算した日程。赤い枠が自社の作業。

公開日に理由があるなら、それも最初の相談で伝えます。新年度に合わせたい、展示会で配る資料にアドレスを載せたい、採用の募集を始める前に出したい、などです。理由が分かれば、制作会社は、公開日までに間に合わせるページと、公開したあとで足すページを分ける案を出せます。

あとから変えにくいもの:デザインに進む前に確かめる

自社が確かめることの中には、日程だけでなく、公開したあとの直しやすさに響くものがあります。デザインに進む前に決まる、次の3つです。

  1. どのページを作るか(どんなキーワードで検索した人に来てもらうか)
  2. ページのURLの形
  3. 使う仕組み(CMS)

ページは、公開したあとでも足せます。ただ、サイトマップの段階で入っていなかった種類のページ(たとえばサービスのページを1つ増やす)を足すと、メニューやページどうしのつながりも見直すことになり、そのぶん費用と期間がかかることがあります。URLは、公開したあとに変えると、古いURLから新しいURLへの転送を設定し、Googleが新しいURLをたどり直すのを待つことになります。すでにあるサイトでURLが変わるときの進め方は、ホームページリニューアルの記事で解説しています。CMSを替えると、デザインや仕組みを作り直すことになります。

あとから変えにくい3つと、デザインに進む前に確かめること 変えにくいもの デザインに進む前に確かめること 公開してから変えると どのページを作るか 検索しそうなキーワードに 合うページがあるか確かめる メニューやページの つながりも見直すことがある URLの形 サイトマップに、各ページの URLを書いてもらう 古いURLから転送し、 Googleがたどり直すのを待つ 使う仕組み(CMS) 自社で更新したいページを、 管理画面で更新できるか聞く デザインや仕組みを 作り直す デザインに進む前に、3つを確かめる
図5:あとから変えにくい3つと、デザインに進む前に確かめること。

Googleも、SEOの専門家に相談するのに向いた時期として、新しいサイトを計画しているときを挙げています。資料「SEO 業者の利用を検討する」には、次のように書かれています。

たとえば、サイトの再構築を検討しているとき(早ければ早いほどよい)、または新しいサイトの開設を計画しているときが、SEO 業者の利用を開始するのに最適なタイミングです。このタイミングなら、最初から検索エンジンとの相性を考慮してサイトを設計できます。

Googleの文は専門家に頼む時期の話ですが、理由に挙げている「最初から検索エンジンとの相性を考慮してサイトを設計できる」は、専門家に頼まない場合にも当てはまります。依頼する側は、3つについて次のことを確かめます。

1つ目は、お客さんが検索しそうなキーワードに合うページが、サイトマップにあるかです。設計に入る前に、自社のお客さんが探すときに検索窓に打ちそうなキーワードを書き出し、Googleで検索して、どんなページが出てくるかを見ます。上位に並ぶのが会社のサービスのページか、説明の記事かを見ると、そのキーワードで探す人がどんなページを求めているかの見当がつきます。そのうえでサイトマップを見て、そのキーワードで探した人に答えるページがあるかを確かめます。たとえば「〇〇 修理 費用」と探す人が多そうなのに、サイトマップに修理のページが無ければ、作るページを見直します。

2つ目は、サイトマップの各ページにURLが書いてあるかです。私はサイトマップを作るとき、ページの名前だけでなくURLも書くようにしています。名前だけだと、URLは実装の工程で決まることになり、依頼する側がそれを見る場面がありません。作らないと決めたページも書き添えます。載っていないだけでは、検討して外したのか、検討していないのかを、依頼する側が見分けられないからです。URLが書いてあれば、「/service/repair/」のように、何のページか分かる形になっているかを、設計の段階で確かめられます。

3つ目は、使う仕組み(CMS)です。CMSの種類は見積もりの段階で決まっていることが多いので、デザインに進む前に、そのCMSで自社が更新したいページを更新できるかを確かめます。お知らせや実績のように自社で足していきたいページを伝え、そのページを管理画面から更新できるかを聞きます。

ドメイン(「〇〇.co.jp」のような、サイトのアドレスに使う名前)は、これとは別に、見積もりか契約の段階で確かめます。ドメインは、登録した人の名義で管理されます。制作会社に「ドメインとサーバー(サイトのデータを置いておく場所)を誰の名義で契約しますか」と聞き、自社の名義にしてもらいます。名義が相手のままだと何が困るかは、会社のホームページの作り方の記事にまとめています。

SEOの施策のうち、どれがサイトを作るときに決まり、どれが公開したあとでも直せるかは、SEO対策の記事で解説しています。

関連記事SEO対策の全体像と、施策が決まる順番

公開したら、最初に確かめること

公開すると、制作の工程は終わります。ただ、検索から人が来るのは、Googleがページを見つけて登録してからです。公開した週に、次のことを確かめます。

確かめることどこで誰が
サイトを登録し、XMLサイトマップを送るSearch Console(Googleの無料の管理画面)自社のアカウントで登録する。制作会社が登録した場合も、自社で見られるようにしてもらう
自社名で検索して、サイトが出てくるかGoogleの検索自社
検索に出さないための設定が残っていないか各ページのnoindex・robots.txt・CMSの設定制作会社に外してもらい、自社でも確かめる
問い合わせフォームから送って、届くか自社のサイトのフォーム自社

1つ目のXMLサイトマップは、Googleにクロールしてほしい(読みに来てほしい)ページを伝えるファイルです。WordPressのように自動で作るCMSもあるので、どこにあるかを制作会社に聞いて、Search Consoleから送ります。

表の3つ目は、公開前のテスト環境で使うことがある設定です。テスト環境のページが検索に出ないように、noindex(このページを検索結果に出さないでほしいとGoogleに伝える指示)やrobots.txt(検索エンジンがサイトのどこを読んでよいかを書くファイル)で止めておくことがあります。その設定が本番に残ると、公開しても、検索結果に出さない指示がかかったまま(noindex)になったり、Googleがページを読めなかったり(robots.txt)します。自社で確かめるときは、Search Consoleの画面の上にある検索窓(URL検査)に、トップページのURLを入れます。登録されていなければ、結果の中の「ページのインデックス登録」の部分に理由が出るので、そこにnoindexやrobots.txtが出ていないかを見ます。出ていたら、その画面を制作会社に見せて外してもらいます。

2つ目の自社名の検索は、公開してすぐに出てこなくても、1週間ほどは待ちます。Googleがページを見つけて登録するまでに時間がかかるからです。

1週間たっても出てこないとき、どこから確かめればよいかは、Google検索に表示されないときの記事で解説しています。

関連記事Google検索に自分のホームページが表示されないのはなぜ?確かめる順番と待つ期間

公開したあとの管理(ドメインやサーバーの契約を切らさないこと、CMSなどの仕組みを新しくしておくこと)は、ホームページの管理の記事にまとめています。

ARROWSのホームページ制作

第1章で、前の工程で決めたことが、次の工程の土台になると書きました。ARROWSのホームページ制作では、デザインから、コーディング、サーバーの設定と公開までを、同じチームが手がけます。設計で決めたキーワードや会社の情報を、同じチームがデザインにもコードにも入れます。

制作のスケジュールは、ARROWS Logで共有します。共有のリンクを開けば、いまどの工程まで進んでいて、いつまでに何を決めればよいかを確かめられます。第5章で公開したい日から日程をさかのぼって置くときも、工程ごとの日程をここで見られます。

確認用のサイトができてからは、ARROWS Reviewを使って、直してほしい箇所を選び、そのままコメントを書き込めます。どのページのどこの話かで迷わず、直したかどうかも同じ画面で確かめられます。第4章で決めた人が社内の意見をまとめてから書き込めば、1回で返せます。

まとめ

Web制作の流れは、どの制作会社に頼んでも大きくは変わりません。公開の時期と、あとから作り直すことになるかを左右するのは、依頼する側が決めることと用意するものです。

まずは見積もりを頼む前に、1枚の紙を作ります。原稿と写真を誰が用意するか、最後に決める人と確認に返す日数、公開したい日とその理由は、決めて書きます。何のために作るかと載せたいページは、いまの希望として書きます。それを制作会社に渡すところから始めてみてください。