Web制作の仕事の流れ：工程の間に渡すものを決めよう

「ヒアリング、設計、デザイン、実装、納品」と順番を覚えても、どこで何を決めるかは残ります。Web制作の仕事の流れを学ぶときは、各工程の間を移動する資料に注目してみましょう。前の作業が終わったという報告だけで、次の担当が作り始められるかを考えます。

この記事は編集部による模擬課題です。架空の地域交流室の紹介ページを、一人で制作すると仮定します。実案件の報告や標準的な契約手順ではなく、制作前に決めた目的を最後まで引き継ぐ練習として使ってください。

工程名の下に、受け取るものと渡すものを書く

紙に五つの枠を描き、それぞれに工程名を書きます。その下に「受け取る情報」「作って渡すもの」「未確定のこと」の三欄を置きます。担当者が一人でも、翌日の自分が読んで再開できる記録にします。

今回の目的は「初めて来る人が開室日時と入口の位置を調べられること」です。問い合わせ機能は作らず、文章と案内図の一ページに絞ります。範囲を広げる相談が出たら、元の目的と追加の作業を別の欄へ残します。

ヒアリングで受け取るのは、運営者から聞いた開室日時や入口の情報です。次へ渡すものは会話の全文だけでなく、掲載する事実を整理した原稿にします。入口の写真が未確認なら、その状態も記してください。

設計から実装へ、同じ情報をたどれるようにする

設計では原稿を受け取り、情報の順序を示す配置案を作ります。今回なら「施設の紹介」「開室日時」「入口の案内」を置き、配置案の横へ対応する原稿の見出しを書きます。写真待ちの枠には、何を示す写真が必要かを残します。

デザインでは、その配置案を基に画面案を作ります。実装へ渡すときは画像一枚だけで済ませず、使う文章や画像の保存先、狭い画面での配置案も一組にします。この模擬課題では、原稿を別の版へ勝手に書き換えないことを確認項目にしてください。

実装後には動くページと確認記録を残します。「完成しました」だけでなく、どの版の原稿を使い、どこまで確認したかを書きます。完成条件を先に決める記事は個々の合否を整理する方法です。ここでは、その条件と結果を次の工程へ渡すことに注目します。

途中の変更を、影響する資料へ戻す

画面ができた後に「入口は東側ではなく北側でした」と訂正が届いた場面を考えます。表示中の一文だけ直すと、案内図や元の原稿に東側という情報が残るかもしれません。

この場合は、訂正内容を掲載原稿へ反映し、配置案や画面案に同じ説明がないかを探します。その後でページと図を照合します。全部の工程を最初からやり直すのではなく、同じ事実を使う成果物をたどる作業です。

変更メモは「入口の方角を北側へ訂正／対象は原稿・図・ページ／入口の実際の位置は運営者へ確認」とします。確認前の推測で図を確定扱いにしないでください。まだ返事がない項目は、未確定欄から消しません。

入口の訂正を受けた後の受け渡しメモは、次のように書けます。確認結果ではなく、模擬案件でこれから行う作業の例です。

資料	直す箇所と確認先
掲載原稿	入口の方角。運営者の訂正内容と照合する。
案内図・画面案	入口の印と説明。原稿の北側という記述に合わせる。
実装したページ	文章と表示中の図。更新した二つの資料と見比べる。

図の修正が済む前に、ページ全体を確認済みにはしません。

納品時には、次に使う人の入口を残す

この課題で最後に渡すものは、公開するページ一式、確認した版の記録、更新する場所のメモです。実際の依頼で何を納品するかは事前に確認する必要があります。ここで挙げた三つが、すべての仕事に共通する納品条件という意味ではありません。

「開室日時を変えるとき、どの原稿とページを直すか」を一行で示し、未確認の項目も同じ場所へ残します。詳しい更新手順を作る段階では、引き継ぎメモの記事へ進めます。制作中の受け渡し表と、更新担当者が読む操作手順は使う場面が違います。

入口の訂正を、原稿・図・ページへ反映する

五つの枠に成果物を一つずつ書き、「入口の変更」がどの枠に影響するか矢印で結びます。各矢印の先で、直す場所と確認する相手を言えるか試してください。

完成物は工程名の暗記表ではなく、変更がどの資料へ伝わるか分かる一枚です。練習用のページを用意するなら無料のHTMLレッスンを使い、原稿から実装への矢印一つに絞って記入しても構いません。