はじめに
本記事の目的
本記事は、Web制作における「上流工程」の意味と重要性をわかりやすく伝えることを目的としています。定義や具体的なプロセス、上流と下流の違いまで順を追って解説します。
上流工程とは
上流工程はプロジェクトの初期段階で、企画から要件定義、基本設計、詳細設計といったフェーズを含みます。ここで決めたことがその後の作業量や品質、納期に大きく影響します。
なぜ重要か（具体例）
例えば新しい会社サイトを作る場合、目的や想定ユーザー、必要な機能を上流工程で明確にします。要件が曖昧だと後で手戻りが増え、時間とコストが膨らみます。
誰に向けた記事か
プロジェクトマネージャー、ディレクター、制作担当者、発注者など、Web制作に関わるすべての方に向けています。専門用語は最小限にし、具体例で補足します。
読み進め方
第2章で上流工程の全体像を説明し、第3章で4つのプロセスを詳述します。第4章で上流と下流の違いを整理します。実務で使える視点を重視して構成しています。
Web制作の上流工程とは
概要
上流工程は、Web制作の最初に行う考えるフェーズです。クライアントの要望を整理し、サイトの目的や必要な機能、全体の方針を決めます。具体的なデザインやコーディングに入る前に、何をどう作るかを明確にする作業です。建築で言えば設計図を描く段階にあたります。
上流工程の目的
主な目的は「方向性の共有」と「失敗を減らすこと」です。ゴールをチームとクライアントで揃えることで、後工程の手戻りを減らします。例として、目標を「問い合わせ数を月20件にする」と数値化すれば、必要な機能や導線が決めやすくなります。
主な作業（具体例）
- 要件整理：ヒアリングで目的、ターゲット、必須機能を明確にします。例：決済が必要、モバイル優先など。
- 情報設計：サイトマップやページ構成を作り、情報の流れを可視化します。
- ワイヤーフレーム：大まかなレイアウトを作り、UIの骨格を確認します。
- スケジュール・見積り：工数やマイルストーン、優先度を決めます。
成功のポイント
初期段階での合意形成を大切にしてください。小さな段階成果（ワイヤーや簡易プロトタイプ）で確認を重ねると、実装へスムーズに進めます。関係者との定期的なコミュニケーションも重要です。
Web制作の上流工程の4つのプロセス
はじめに
上流工程は企画、要件定義、基本設計、詳細設計の4つのフェーズで進みます。各フェーズで成果物を出して確認を重ねることで、後工程の手戻りを防げます。
1. 企画フェーズ
目的：クライアントのビジネス目標や課題を明確にします。
主な作業：ヒアリング、現状調査、競合調査、KPI設定。
具体例：ECサイトなら「購入率を3%向上させる」「問い合わせを半減」など目標を決めます。
成果物：プロジェクト方針書、ターゲット像、概算予算。
ポイント：意思決定者を早く巻き込み、目標を数値で定めます。
2. 要件定義フェーズ
目的：必要な機能や制約を確定します。
主な作業：機能の洗い出し、優先順位付け、非機能要件（表示速度、対応端末など）の整理。
具体例：会員登録、決済、検索などの要件をユーザーストーリーで整理します。
成果物：要件定義書、スコープ一覧、受入基準。
ポイント：MVP（最小限の実装）を決めて優先度を明確にします。
3. 基本設計フェーズ
目的：システムや画面の骨格を設計します。
主な作業：情報設計（サイトマップ）、画面遷移、ワイヤーフレーム、技術選定（CMS等）。
具体例：トップ→カテゴリ→商品→購入の流れを図にして、主要画面のワイヤーを作ります。
成果物：サイトマップ、ワイヤーフレーム、技術方針書。
ポイント：開発チームと早く共有し、実装性を確認します。
4. 詳細設計フェーズ
目的：プログラム単位で実装できる仕様を作ります。
主な作業：画面仕様書（要素・挙動）、API設計、DB設計、テスト項目作成。
具体例：ボタン押下時の動き、バリデーション、APIのリクエスト/レスポンス定義を細かく決めます。
成果物：詳細設計書、画面モック、テストケース。
ポイント：受入基準を明確にして、開発・テストがスムーズに進むようにします。
役割と確認の流れ
クライアント、PM、デザイナー、開発者、QAが各フェーズで確認します。各成果物に対してレビューと合意を取ることが重要です。
上流工程と下流工程の違い
概要
上流工程は思考のプロセスで、要件定義や設計、計画立案を行い、開発の方向性を決めます。下流工程は作業のプロセスで、実装やテスト、導入を担当します。上流は顧客対応やプロジェクト管理が中心で、下流は開発業務に集中します。
役割の違い
- 上流（誰がやるか）: システムエンジニアが中心になり、顧客の要望を聞き、何を作るかを決めます。
- 下流（誰がやるか）: プログラマーや開発チームが中心で、設計に基づいて機能を作りテストします。
実務の違い（具体例）
- 上流の作業例: 目的・要件の整理、機能リストの作成、ワイヤーフレームや設計書の作成、スケジュールと見積り。
- 下流の作業例: HTML/CSSのコーディング、プログラム実装、単体・結合テスト、サーバ設定と公開。
成功のための連携ポイント
上流で決めた内容を下流が理解できるように、具体的な仕様と優先順位を明示してください。仕様のあいまいさは手戻りの原因になります。したがって、早めにプロトタイプや簡易テストを作り、フィードバックを回すと効果的です。
注意点
上流と下流は役割が違いますが、分断すると品質が下がります。実装現場の意見を上流に取り入れ、変更は速やかに共有してください。
