【完全版】要件定義からWebサイト納品までの全ての工程を完全解説

2026年8月7日 18:21

Web制作の流れを、要件定義から納品・保守運用まで7つのステップに分けて分かりやすく解説しています。案件を成功させるための進め方や、実務で起こりやすいトラブルの対策も学べる内容です。

▼本記事の内容は動画でもご覧いただけます▼

【実践型プログラミングスクール】
テックエリートに興味のある方はこちら▼▼

丸山：テックエリート講師の丸山です。今回はWeb制作の案件を受けるとは具体的にどういうことをしているのか、要件定義から納品までの上流工程を7つのステップに分けてお伝えします。「Web制作の仕事に興味はあるけれど、実際何をするのか分からない」という方に向けて、実務の流れをそのまま解説していきます。

全体の流れは7ステップ

全体のステップとしては7つにまとめています。

要件定義
構成設計
デザイン
実装
テスト
納品
納品後のサポート(保守運用)

それぞれのフェーズで「誰が」「何を」「どこまで」やるのかを明確にしておくのが、プロジェクトをうまく進めるコツになってきます。ここから1つずつ具体的に説明していきますね。

ステップ1:要件定義

まず1つ目は要件定義フェーズです。目的の明確化、ターゲット設定、参考サイトの調査、コンテンツ確認、予算・納期のすり合わせといったところをやります。
これは後のワイヤー作成やデザインを起こす上で、どういうサイトにするべきかのヒアリングが必要だからです。中でも特に大事なのが「コンテンツの確認」です。テキストや画像をお客様が用意するのか、開発側が用意するのか。ここによって予算も納期も変わってきますので、誰が何をやるかをしっかり明確にしておくべきところになります。

ステップ2:構成設計

ステップ2は構成設計、サイトの骨組みを作っていきます。
ヘッダー、ビジュアル、メインページなど、どこにテキストがあって、どこに画像があるのかをここで決めます。レスポンシブの考慮もここに含まれますが、PC版だけ埋めてデザイナーにスマホ版を作っていただく場合もあれば、ワイヤーの時点でスマホ版も作る場合もあり、やり方は会社さんや個人によって様々です。

ステップ3:デザイン

ここで作られたデザインが、そのままホームページに実装されます。
よく使うツールはFigmaやAdobe XDなどですが、なるべく実際に開発する方と協議してみるのがいいかなと思っています。開発側は色やフォントサイズなど、デザインに登録されている情報を見に行くので、詳細な数字が見れない状態で共有すると開発が遅れてしまうんですね。
事前に「このツールでいいですか」とコミュニケーションを取っておくのがいいです。デザインではUI・UXも重要です。ユーザーさんがどういう導線を辿って、最終的にお問い合わせに飛ばしたいのか。そこからデザインを設計していきます。
提出時はまずトンマナ(全体の雰囲気)を見せ、キービジュアルまでのデザインで合意を取ってから、他ページの制作に進みます。
ここで大事なのが、私たちはウォーターフォール型で実装していくということです。要件定義からワイヤー、デザインと来て、基本的には戻らない。
一方通行で進めます。もし戻ってしまうと、要件定義の中の見積もりからはみ出し、追加見積もり・追加実装が必要になり、スケジュールにも影響が出ます。プロジェクトが崩れる要因になるので、PMやディレクターがしっかりお客様と合意を取りながら進める必要があります。

ステップ4:実装

実装で最初に考えないといけないのは環境です。本番環境やテスト環境がどこにあるのか、WordPressを使うのかなど、要件定義段階で決めておきます。デザイン通りにしっかり作れるかどうかが、エンジニアとして価値を出すところですね。

ステップ5:テスト

実装後はテストです。規模にもよりますが、ホームページで単体・結合・
総合テストを全部やるケースはあまり聞きません。とはいえボリュームがあれば、リンク切れや表示崩れ、管理画面の挙動などを事前に手順書に書いて、1つずつチェックしていきます。テスト後はお客様に確認していただき、修正がある場合は追加見積もりか作業範囲内での対応かを判断します。

ステップ6:納品

納品方法はHTMLデータの納品や、こちらで本番環境にアップロードする方法などがあります。ドメイン・SSL取得は納品フェーズというより、開発前や並行してやっておくのがいいです。取得やサーバー反映に時間がかかるので、直前だとスケジュールがずれる可能性があります。何をもって納品なのかは、要件定義段階でお客様としっかりすり合わせておきましょう。

ステップ7:納品後のサポート(保守運用)

公開してお客様に合意をいただいたら、保守運用フェーズが始まります。
運用してみてバグが見つかったり、修正したい要望が出てくることがあるからです。
毎回見積もり・提出・合意・実装を繰り返すと工数が増えるので、月額いくらで何時間対応します、というサブスクのような形でサポートを継続する場合が多いです。保守を契約いただいている方が、あらかじめエンジニアの稼働時間を確保できる分、対応がスムーズで安くなることが多いですね。

よくあるトラブルの対処法

最後に、現場でよくあるトラブルについてもお話しします。

素材が遅れる問題：お客様側の準備が間に合わないことがよくあります。要件定義段階でスケジュールを切り、「間に合わなければ全体が遅れます」としっかり合意しておくことが大事です。

フィードバックが遅い・多すぎる問題：「いつまでにどれくらい対応するか」をお客様と合意しておきます。特にデザインは修正回数を決めたり、細かい部分は実装段階で直すなど柔軟に対応します。

納品後に修正を求められる問題：バグはもちろん直しますが、方針変更によるテキスト修正などはきりがありません。量が多い場合は納品後の対応とするなど、臨機応変な交渉が必要です。

対策の基本は、契約書で作業範囲・納期を明文化することと、密なコミュニケーションです。そしてもう1つ大事なのが「受け身にならない」こと。エンジニアもデザイナーもPMも、全員が違和感を積極的に声に出す体制がないと、気づいた時にはスケジュールが遅れている、ということがよく起きます。1人が優秀でも、プロジェクト全体はうまくいかないことがあるので、1人ひとりの意識が大切です。

おわりに

Web制作には大きく7つのステップがあり、それぞれお客様との合意形成とメンバー1人ひとりのビジネススキルが関わってきます。要件定義からデザイン、実装、納品、保守運用まで、この流れを1人で完結できるようになれば、フリーランスとしても重宝される人材になれると思います。
私が講師を務めるテクリートのプログラミングスクールでは、8週間で実務に入れる人材を育成するカリキュラムを提供しています。興味のある方は、LINE登録のうえ、無料の個別説明会にぜひお気軽にご参加ください。