07. Web制作における工程と成果物の完全ガイド
Web制作の流れって、なんとなく分かってきたけど…実際に何を作ればいいの？
各工程にはちゃんとした「成果物（アウトプット）」があるんだよ！
✴️ 工程ごとの成果物まとめ
✅ 1. ヒアリング・要求定義フェーズ
| 成果物 | 説明 |
|---|---|
| ヒアリングシート | クライアントの要望・目的・ターゲット・参考サイト・希望機能などを整理するシート。Word/Excel/フォームなど形式自由 |
| 要求定義書 | クライアントの「こうしたい」「こうなってほしい」をまとめたドキュメント。抽象的な内容も含めて記録する |
✅ 2. 企画・設計フェーズ
| 成果物 | 説明 |
|---|---|
| 企画書 | サイトの目的・ターゲット・コンセプト・競合調査・ページ構成案などをまとめた資料（提案書とも） |
| サイトマップ | 全体のページ構成図。親子関係や階層を図や表で整理したもの |
| 要件定義書 | 要求をもとに、実際に作る機能や仕様を具体的に記述した資料（CMS導入有無、対応ブラウザ、デザイン仕様など） |
| スケジュール表 | 工程ごとの予定日・納期を可視化（Excelやガントチャートツールなど） |
✅ 3. ワイヤーフレーム作成フェーズ（構成設計）
| 成果物 | 説明 |
|---|---|
| ワイヤーフレーム | ページごとのレイアウト構成案。テキスト配置やボタン位置などを線画で表現（手書き／Figma／XD／PDFなど） |
| 画面遷移図 | 各ページがどのように遷移・連携するかを図示したもの（ユーザーの動線設計） |
| UI設計書 | 各UIパーツ（ボタン・ナビなど）の仕様・動作・ラベル名称などを記載した文書 |
✅ 4. デザインフェーズ
| 成果物 | 説明 |
|---|---|
| デザインカンプ | 実際のデザイン見本。完成イメージに近い状態で作成し、配色・フォント・レイアウトを確認できる（Figma／XD／Photoshop） |
| デザインガイドライン | 色・フォント・ボタンなどのルールをまとめた設計指針。再利用・複数人作業で統一感を保つために重要 |
| 素材ファイル | ロゴ、写真、アイコン、イラストなどの画像データ（形式はPNG/JPG/SVGなど） |
✅ 5. コーディングフェーズ
| 成果物 | 説明 |
|---|---|
| コーディング仕様書 | HTML/CSS/JSのルール、命名規則、フォルダ構成、使用ライブラリなどを記載した文書 |
| HTML/CSS/JSファイル | 実際のコードファイル。命名や構造が整理されていることが重要 |
| 画像・フォントファイル | 使用されるビジュアル素材を適切なサイズ・形式で格納 |
| 動作確認チェックリスト | 対応ブラウザ・端末・リンク・UI挙動の確認リスト（テスト工程と兼用可） |
✅ 6. テスト・納品フェーズ
| 成果物 | 説明 |
|---|---|
| 検収シート／納品チェック表 | 納品物が仕様通りであるかをチェックするための表（リンク切れ・表示崩れなど） |
| マニュアル・操作説明書 | CMSや更新操作の手順を記載した資料（PDFや動画） |
| 納品ファイル一式 | ソースコード、デザイン素材、ドキュメントをまとめたフォルダ |
✴️ 成果物を作るメリット
- 情報の見える化 → チームやクライアントとの認識ズレ防止
- トラブル回避 → 後戻り・やり直しのリスクが減る
- 品質の均一化 → 誰が見ても分かる状態になる
- スムーズな引き継ぎ → 他のメンバーや後続チームにも安心
🌟 まとめ：各工程に“かならず成果物”を！
| 工程 | 成果物例 |
|---|---|
| ヒアリング | ヒアリングシート、要求定義書 |
| 企画・設計 | 企画書、サイトマップ、要件定義書、スケジュール表 |
| ワイヤーフレーム | ワイヤー、遷移図、UI設計書 |
| デザイン | デザインカンプ、ガイドライン、素材 |
| コーディング | 仕様書、ソース一式、動作チェックリスト |
| テスト・納品 | 納品チェック表、マニュアル、納品一式 |
こんなにあるんだ…！でも、ちゃんと作れば安心して進められそう！
うん！成果物は「後で見返せる記録」としても大切なんだよ♪