トレーニング編お疲れさまでした🙌
いよいよロードマップ編に入ります。まずは実際の案件がどのような流れで進むのか、そしてどんな心構えが必要なのかを一緒に確認していきましょう!
この後なにが起こるのか、公開までどれくらいなのかを見通して予定を立てていくのも大事な仕事です。ロードマップ編もこの流れに沿って進んでいくので、これを機にしっかりインプットしていきましょう💪
Webサイト制作案件の流れ
Webサイト制作案件の大まかな流れは次の通りです。

制作会社では分業体制が一般的ですが、フリーランスや小規模チームでは営業活動からディレクション、進行管理までを一人で担うケースも少なくありません。
こうした広範囲な業務を一貫して担うスタイルには、「作れる人がそのまま判断・調整を行う方がスムーズで、コスト面でも合理的」という大きなメリットがあります👍️
ただ、一方で「広範囲の業務を担当するのが不安…」と感じられる方も多いハズ。
ですが、これらの点を押さえておけば、たとえ担当領域が広くても柔軟に対応していくことができます!(大規模案件や開発難易度の高い案件になるとまた別ですが…!
- 案件を「業務単位」で捉える視点
- その業務ごとに誰が担うかを意識すること
- 業務単位の立ち回りのポイント
- クライアントに向き合うコミュニケーション
これらを意識することで、たとえ自分ひとりで多くを担う状況でも、無理なく案件を前に進めることが可能です。
逆に、いざ案件を受注した際、「ディレクターをアサインしたから安心」と思って丸投げしていると、肝心の実務が漏れていたり、必要な判断が現場でできなかったりすることもあるので注意してくださいね。
そのため、ロードマップ編では仮想の案件を通して案件全体のステップをひとつづつ確認していくので、しっかり押さえておきましょう!
また、案件の進行には適宜ミーティングが発生します。ミーティングの考え方も仕事を進める上で重要なポイントなので以下のコラムを参照してください👇️

以下では各工程についてもう少し詳しく見ていきます!
営業活動から納品まで責任をもって推進する担当のことを「プロジェクト担当者」として、その担当業務(大部分はディレクション業務)もあわせて記載しているので確認していきましょう👍️
ヒアリング・提案
依頼が来たらまず初めにヒアリングを行います。
ヒアリングには無防備で行くのではなく、準備して臨むようにしましょう!
理想的な流れは次のようになります。
- テキストベースで軽くヒアリングをする
- リサーチをして資料を作成する
- ヒアリング・提案をする
最初のヒアリングは直近の課題やWebサイトの必要性、構成・規模感、温度感などをすり合わせていくことがメインとなります。ヒアリングの前半ですり合わせを行い、後半で概ねの枠を提案します。受注・契約へ向けてできることを全てするというイメージですね!
- クライアントとの初回コンタクト・目的確認
- 軽いヒアリングから課題抽出・要望整理
- リサーチと提案資料の作成
- ヒアリングの場で構成提案・方向性の提示
- 受注に向けた信頼構築と調整
要件定義
ヒアリングで方向性がまとまったら要件定義を固めます。
契約前の要件定義は、後から「こんなはずじゃなかった…」を防ぐための大切な準備です。
この段階では、サイトの目的やターゲット、必要なページや機能などを整理し、「何をどこまで作るのか」をできるだけ明確にしておきましょう。特に作業量に直結する要素はしっかり確認し、曖昧にしないことがポイントです。
ここが明確でないと、制作の途中で追加・修正・変更地獄となってしまうことも…!
そのため「簡単な構成案」や「参考サイト」を用いて、イメージをすり合わせるのも効果的です。
要件定義を明文化しよう
この講座ではディレクトリマップを要件定義用のためのシートとして想定しています。

もちろん自身のやりやすい形にカスタマイズしてもらったり、別の使いやすいツールでOKですが、認識違いを防ぐために目に見える形にしておくのがベターです!
そして着手後、ここで取り決めた内容から逸脱するような変更については対応が難しい(費用が発生してしまう)といった業務範囲に関する点もきちんと説明しておきましょう。
この段階でしっかり対話し、方向性が共有できていれば、その後の制作もスムーズになります。
サイト概要で作るものをしっかり定義して、後ろの工程に響かない要件定義を作りましょう!
- サイト目的・構成・仕様の明文化
- ページ数や必要機能の洗い出し
- クライアントへの説明と合意形成
受注・契約
提案後は正式に受注・契約をするフェーズです。
クライアントから正式発注の連絡がきて、契約書を交わすという流れになります。クライアントが例えどんなにいい人だと感じていても、お互いのために必ず契約書を交わすようにしましょう!
- 契約内容・条件の確認と合意形成
- 契約書・発注書のやりとり管理
- パートナーのアサイン・業務共有とスケジュール調整
ヒアリング・リサーチ
受注が確定すれば、改めてもう一度ヒアリングをする場合も多いです。
(※契約前のヒアリングで十分に情報を収集できていれば、そのまま次工程に進むケースもありますね!)
この工程では、提案時に共有した案(要件定義)をベースに、内容をより具体的に詰めていくことが目的です。
次の「情報設計」や「デザイン作成」を見据え、漏れのないようにヒアリング(または素材確保の依頼)を実行する意識が重要です。
クライアント企業や商品・サービスについて、インタビューをする感覚で深掘りして聞いていくのがポイントです。表面的な情報だけでなく、企業の思いやこだわり、過去の取り組み、競合への認識なども重要なヒントになります。
ヒアリング後は、聞いた内容をもとに再度リサーチを実施し、業界やユーザー理解を深めましょう。
- 二次ヒアリングの実施(デザイン/コンテンツ重視)
- 業界・競合リサーチ
- 方向性・コンセプト整理
情報設計
情報設計のフェーズはトレーニング編で学習した内容そのものです。ヒアリング・リサーチ情報を基にコンテンツマップ・ワイヤーフレーム・テキストを設計していきます!
Webサイトを制作する上で間違いなくいちばん重要な作業になりますので、トレーニング編で学習したことをしっかりと活かしましょう🙌
- コンテンツマップ作成
- ワイヤーフレーム設計
- テキスト草案作成
デザイン
いよいよ制作フェーズです。
デザイン工程では文字の通り、デザインを行います。これがデザイナーの仕事です。
ここでプロジェクト担当者が行うべき仕事はデザイン前の指示出しと出来上がりのチェックになります。
- デザイン開始前の指示(参考資料・トーン&マナーなど)
- 制作進行のスケジュール管理
- ワイヤーとの整合性・コンセプトの確認
- 初稿チェックとフィードバック
- クライアントとの中間確認・調整
実装
実装フェーズではWebサイトの構築を行います。
実装者(コーダー)とのコミュニケーションがポイントになる工程です。
デザインの意図や表示挙動など、「見た目の通り作るだけでは伝わらない部分」は明確に伝えていきましょう。
※デザイナーの担当領域として考えられることが多いですが、しっかり伝達ができているかは担当として気を配ることが重要です。
- 実装要件の共有・確認
- 制作進行のスケジュール管理
- テスト環境での仮チェックサポート
検証・検収、公開・納品
最後に本番環境にアップロードを行い、再度表示などのチェックを行います。
テスト環境ではうまくいっていたのに本番環境では上手くいかないなんてこともあるので、納期に余裕を持たせて最終チェックを行いたいところです。
最終チェックを終えて公開したら納品となりますが、クライアントの方で編集が可能であるCMSを使用している場合はその説明をしたり資料を渡したりすることもあるので、最後まで責任をもってやり遂げましょう。
納品書、請求書を渡すと一連のWebサイト制作が終わります。
入金が確認できるまでは気を抜かず、またパートナーへのお支払いも忘れないようにしましょう!
- 納品前の最終確認(リンク・表示・挙動)
- クライアント確認用のチェックリスト作成
- CMSなどの使用方法の説明・資料作成
- 納品物の整理と納品書・請求書の手配
- 入金確認と関係者への報告・支払い
保守・運用
ここからは今回の講座から少し離れる部分もあるのですが、アフターサポートもクライアントとの関わり方として重要です。
サーバー面や使用している技術・ツールなどは、時間の経過と共に追加で対応が迫られることがあります。
クライアントに不利益の無いように、サポート体制を提供していきましょう!
- アフターフォローの範囲確認と提案
- トラブル時の一次窓口対応
- サーバーやCMSの更新情報の通知
- 保守契約の見直し・追加提案
スムーズに進めるための「引き出し」を増やそう
今回紹介した工程はモデルケースではありますが、実務では必ずしもこの通りに進むとは限りません。
たとえばクラウドソーシング経由の案件では、「先方が用意した要件定義・情報設計を渡されて早速制作スタート!」といったケースも多く見られます。
また、具体的な提案がない状態でも「ちょうどサイト作りたかったから依頼したい」と発注が決まってしまうこともあれば、受注までに数回の面談・提案を挟むというようなケースも存在します。
このように、実務の現場では案件ごとに状況も依頼内容も大きく異なるため、マニュアルどおりに進まないケースは珍しくありません。
そんなときでも、後工程をイメージしながら「今、自分は何を確認しておくべきか?」と逆算して考えることで、本質的な判断ができるようになっていきます!
大事なのは、工程を丸暗記することではなく、流れの全体像と目的を理解することです。
その理解があると、状況が変わっても柔軟に対応できる力が身につきます。
これからの実践ワークでは、実際の案件を想定して手を動かしながら、自分の中に落とし込んでいきましょう。
知識を“体感”に変えていくことで、きっと自信を持って提案・進行できるようになります!
実践課題の流れ
これからロードマップ編で並走する実践課題についての説明です。
課題の実施・提出方法などをまとめています!
実践課題の概要
実践課題は実際の案件と同じ流れで依頼を受けるところから納品するところまでを行います。
想定するシチュエーションはこちら👇️
先日参加した「経営者交流会」にて、株式会社みらいわーくらぼの代表・山田優花さんと話が盛り上がりました。自社のWebサイトを持つメリットやデメリット等をしっかり話し込んだ上で依頼したいとお願いされました。準備出来次第、日程調整や簡易的なヒアリングのメールを送ることを伝えています。
今回紹介した工程でいうと、「初回ヒアリング・提案」がなく、オフラインの繋がりから発注前提で依頼がきた!というようなシチュエーションです。
この想定のもと、ロードマップ編各日程の最初に課題が書かれており、ロードマップ編を進めていくと課題も進んでいきます。基本的には教材に沿って提出課題の準備を行います。
実践課題における注意点
実践課題を受ける際にいくつか気を付けておいていただきたい点があります。
課題は全部で一連の流れになっており、課題を提出しなくても次の課題を見られるようになってはいますが、課題は最初から最後までを通して最終的なフィードバックがあります。
実施する場合は全て順を追って受けていただきますようお願いいたします。
想定のスケジュール
実践課題は、数日かけて課題を仕上げることも加味しておよそ1か月で踏襲できる流れになっています。多少の前後は発生しますが、3か月サポート期間に終えられるように開始のタイミングを管理していただきますようお願いいたします。
課題の受け方
最初の課題は「ヒアリング」編に用意しており、ヒアリングを実施するための連絡(日程調整など)を実際に担当メンターに送信していただくところからスタートします!
事前のご連絡は特に必要ないので、任意のタイミングで始めてOKです!各課題の詳しい提出方法は各課題とともに説明があるので併せてご確認をお願いいたします。
課題のフィードバック
各課題のフィードバックは提出されるごとに実施され、最後の課題の後に総合的なフィードバックも行います。MTG課題については課題の後に口頭のフィードバックと、それをテキストでまとめたものをお送りします。
課題の進め方について、疑問点などありましたらSlackでお尋ねください!
それではロードマップ編に取り組んでいきましょう!
