CHAPTER 08 1 / 14
Web制作の全体の流れ
ヒアリングから公開、公開後の保守まで。Web サイト制作の大きな流れを、ぽんぽこ制作所の新人ディレクターと一緒に、地図を描くようにつかみます。会話と具体例つきで、やさしく読めます。
約6分で読めます
ひなた
虎田さん
みさき
ケンジ 
段取り教室の目次（章と記事の一覧）
1. プロジェクト管理ってなに？
2. 課題管理入門
4. ガントチャート入門
5. 見積もりとスケジュール
6. 進捗管理と報告
7. チームのコミュニケーション
8. Web制作の現場で
この記事の内容
この記事でわかること
- 7つの段階の順番がわかる
- 前の段階ほど直しやすい理由がわかる
- 段階ごとの「出口」の決め方がわかる
はじめて任された案件で、何から手をつければいいのか分からず、手が止まってしまった。そんな経験はありませんか？ まずは「全体の地図」を描くところから始めましょう。
月曜の朝、ひなたがホワイトボードの前で固まっています。パン屋「さくらベーカリー」のホームページ制作が、はじめて任されたディレクター案件です。
全体は 7 つの段階に分けられる
Web サイトの制作は、会社によって呼び方は違っても、おおむね次の流れで進みます。
| 段階 | やること | 主な担当 |
|---|---|---|
| 1. ヒアリング | お客さんの困りごとと目的を聞く | ディレクター |
| 2. 要件定義 | 作るもの・作らないものを決めて合意する | ディレクター |
| 3. 設計 | サイトマップとワイヤーフレーム（ページの骨組み図）を作る | ディレクター・デザイナー |
| 4. デザイン | 見た目を作り、確認してもらう | デザイナー |
| 5. コーディング | 画面をブラウザで動く形にする | エンジニア |
| 6. テストと公開 | 不具合を探し、本番のサーバーに載せる | 全員 |
| 7. 運用・保守 | 公開後の更新や不具合に対応する | ディレクター・エンジニア |
この図は、7 つの段階を前から後へ並べたものです。強調した「テストと公開」までが作る側の山場で、その先に運用・保守が続きます。
この順番には理由があります。前の段階で決めたことが、あとの段階の材料になるからです。
たとえば、こんな画面です。段階ごとの作業を日程の上に並べると、全体の地図になります。
- 菱形は、マイルストーン（節目の日付）です。「β版リリース」と「正式公開」が置かれています。
- 縦の線は今日です。バーが今日より左にあれば、済んだ作業です。
- チェックのついた緑のバーは、完了した課題です。
前の段階ほど、直すコストが小さい
Web サイトも同じです。要件の段階なら文章を直すだけで済むことが、コーディングが終わってからだと、デザインもコードも作り直しになります。だから序盤に時間をかけて、あとで慌てないようにします。
この図は、同じ変更を入れるときの手間の大きさを比べたイメージです。数字は目安で、右へ進むほど大きくなります。
各段階の「出口」を決めておく
段階ごとに「これができたら次へ進む」という出口を決めておくと、終わったかどうかで迷いません。
- ヒアリング: 目的と、お客さんの困りごとが文章になっている
- 要件定義: 作るページと機能の一覧に、お客さんが「はい」と言っている
- デザイン: トップページと下層ページの見本に、お客さんの承認がある
- コーディング: 全ページが画面どおりに表示される
- 公開: 本番で表示と動作を確認できた
行ったり来たりしてもいい
地図は直線に見えますが、現場では途中で戻ることもあります。大切なのは、戻ったときに「何が変わって、日程と費用にどう響くか」を、お客さんと共有することです。これは 追加依頼・仕様変更の扱い で詳しく説明します。
案件の大きさで、段階の重さを変える
7 つの段階は、どんな案件でも同じ重さではありません。5 ページの小さなサイトなら、要件定義と設計は 1 回の打ち合わせにまとめることもあります。ECサイトのように機能が多い案件では、要件定義だけで数週間かけます。段階を省くのではなく、軽くすると考えると、抜けがありません。
案件を始める前に、次の 4 つを確かめてみてください。
- 7 つの段階を、この案件に当てはめて書き出した
- 段階ごとの「出口」を決めた
- 段階ごとに、担当と日付を決めた
- 戻るときの伝え方を、お客さんと決めた
まとめ
- Web 制作は「ヒアリング、要件定義、設計、デザイン、コーディング、テストと公開、運用・保守」の流れで進む。
- 前の段階ほど、直すコストは小さい。序盤を急がない。
- 段階ごとに「出口」を決めると、終わりが見える。
- 戻ることがあっても、影響をお客さんと共有する。
akamine でやるなら
7 つの段階は、akamine ではマイルストーン（節目の日付）として置けます。段階ごとの課題を親子に分けて並べると、ガントチャートで全体の流れがひと目でわかります。流れを毎回作り直さなくて済むように、ひな型にして使い回すのもおすすめです。使い方は マイルストーン と ガントチャート の記事を見てください。
たとえば、こんな画面です。マイルストーンごとに、件数と工数の進み具合が見られます。
- 「β版リリース」「正式公開」の名前の横に、期間が出ています。
- 「件数」と「工数」の 2 本の線で、終わった分が一目でわかります。
