バックオフィスから経営を強くする

新規登録
  1. 「マネーフォワード クラウド」
  2. 業務効率化の基礎知識
  3. Web制作に役立つWBSテンプレート！作り方やタスク変更の注意点を解説
  • 更新日 : 2024年12月12日

Web制作に役立つWBSテンプレート！作り方やタスク変更の注意点を解説

Web制作にあたって、プロジェクトマネージャーやWebディレクターはWBSやガントチャートを作成します。タスク漏れを防ぐことや役割分担が明確になること、スケジュール・進行管理を共有できることなどが、主なメリットです。

本記事では、Web制作におけるWBSの作り方や、無料でダウンロードできるテンプレートなどを紹介します。

web制作 wbsのテンプレート

web制作 wbsのテンプレートを無料で提供しています。ぜひご自由にダウンロードして活用ください。

無料でダウンロードする

Web制作におけるWBSとは？

WBSとは、Work Breakdown Structure（作業分解構成図）を略した言葉で、プロジェクト全体を細かな作業に分解した構成図のことです。Web制作の現場では、プロジェクトに必要な作業を洗い出すために、プロジェクトの計画段階でプロジェクトマネージャー（PM）などがWBSを作成します。

タスクの内容把握や共有に使われる点では、WBSもガントチャートも同じです。ただし、WBSがタスクを細分化して作業内容をリスト化したものであるのに対し、ガントチャートはWBSに基づく項目を横グラフで示してわかりやすく示したものである点が異なります。

ガントチャートの作成には、まずWBSを作成することが欠かせません。

Web制作にWBSを活用するメリット

Web制作においてWBSを活用する主なメリットは、以下のとおりです。

  • プロジェクトの進行状況が一目で把握できる
  • プロジェクトの見通しが共有できる
  • タスク漏れを防ぐ
  • 役割分担が明確になる
  • プロジェクトの品質を保つ

ここから、各メリットを解説します。

プロジェクトの進行状況が一目で把握できる

Web制作の現場でWBSを用いれば、リーダーやプロジェクトマネージャーがプロジェクトの進行状況を一目で把握できる点がメリットです。

WBSでプロジェクトに必要な作業を明らかにしてからガントチャートを作成しておけば、どの作業がどれくらい進んでいるのか、横グラフですぐに確認できます。たとえば、作業Aの横グラフが80％まで進んでいるにもかかわらず作業Bが20%しか進んでいないことが判明すれば、遅れの理由を担当者に尋ねたり、対策を講じたりできるでしょう。

プロジェクトの見通しが共有できる

WBSを作成することで、プロジェクトの見通しをメンバー間で共有できる点もメリットです。

WBSには、各作業の期日や残り日数を表示します。そのため、メンバーは次の作業に移るまでにどれくらいの期間がかかりそうか把握できるでしょう。自分の作業とほかの作業の関連を意識することにより作業の重複を防ぎ、業務効率化にもつながります。

タスク漏れを防ぐ

タスク漏れを防ぐことも、Web制作でWBSを作成するメリットです。

WBSは、各タスクを挙げてからその作業内容を細かく分解していきます。大きな事柄から考えて段階的に細かく分類していくことにより、作業の抜け漏れが生じにくくなるでしょう。よりわかりやすく・具体的に内容が記載されていることも、漏れを防ぐ理由です。

役割分担が明確になる

メンバーの役割分担が明確になることも、WBSを活用するメリットです。

WBSには、タスクや期日だけでなく担当者名も記載します。プロジェクトのメンバーはそれぞれの役割をWBSで確認できるため、都度担当者や責任者に確認する手間を省けるでしょう。

また、責任の範囲・所在も明確になる分、メンバーはどこまで自分が作業すべきなのか頭を悩ませる必要がありません。

プロジェクトの品質を保つ

プロジェクトの品質を保てることも、Web制作でWBSを活用するメリットとして挙げられます。プロジェクトの品質とは、成果物のクオリティを向上させるために求められるマネジメントの品質のことです。

プロジェクトの品質を保つためには、進捗状況を把握することや作業の漏れがないようにすることが欠かせません。ここまで紹介してきたように、WBSを使えばプロジェクトの進捗を把握したり、タスクの漏れを防いだりしやすくなります。

Web制作に役立つWBSテンプレート-無料ダウンロード

Web制作でWBSに使用するテンプレート・ひな形は、以下ページより無料でダウンロードできます。

web制作 wbsのテンプレート

web制作 wbsのテンプレートを無料で提供しています。ぜひご自由にダウンロードして活用ください。

無料でダウンロードする

1から作成するよりも楽に作成できるので、ぜひお気軽にご活用ください。

Web制作におけるWBSの作り方

一般的に、WBSを作る際の流れは以下のとおりです。

  1. プロジェクトの方向性を確認する
  2. 作業内容を洗い出す
  3. 洗い出した作業に優先順位をつける
  4. 作業を構造化する（ツリー構造を作る）
  5. 各作業に担当者を設定する

ここから、WBSに記載した内容に沿ってWeb制作を進める流れを紹介します。Web制作の流れは主に以下のとおりです。

  1. プロジェクトの目標を明確にする
  2. 掲載内容を選定する
  3. 全体の構想と設計を進める
  4. デザイン制作を行う
  5. 開発環境を整える
  6. 実際の制作とコーディングを行う
  7. 公開に向けた準備と検証を進める

ここから、各作業の内容やWBSの記載内容を解説します。

①プロジェクトの目標を明確にする

Web制作にあたって、プロジェクトの目標（どのような制作物を目指すのか）を明確にしましょう。

WBSでは、フェーズ1の「​キックオフミーティング」「要件定義」「目標設定」などが該当します。キックオフミーティングとは、プロジェクトの関係者が一堂に会してチームの認識を統一したり、各自が抱える疑問を解消したりする作業のことです。

②掲載内容を選定する

プロジェクトの目標・目的にあわせて、Web制作における掲載内容を選定します。選定時には、魅力のある掲載を意識することも大切です。

WBSでは「スコープの確認」が該当します。スコープとは、プロジェクトの目標や要件を考慮して必要な作業や成果物を定める作業のことです。

なお、①と②の作業を終えたら「初期リソースの割り当て」作業もあります。

③全体の構想と設計を進める

掲載内容を決めて初期リソースを割り当てたら、全体の構想と設計を進めます。WBSの記載例は、フェーズ2の「サイトマップ作成」「ワイヤーフレーム作成」「デザインコンセプト策定」「UX設計」「コンテンツ戦略策定」「SEO戦略策定」です。

たとえば、「サイトマップ作成」の詳細には、「Webページ全体の構成を決める」などと記載するとよいでしょう。

④デザイン制作を行う

WBSにおけるフェーズ2の「デザインコンセプト策定」の作業結果に基づき、デザイン制作を進めます。WBSで該当する部分は、フェーズ3の「デザイン作成」「モックアップ作成」「フィードバック/修正」「最終デザインFIX」です。

なお、モックアップとは、動作はつけず見た目だけ完成品と同様のものをイメージした「模型」を指します。

⑤開発環境を整える

コーディングにあたって、まずは開発環境を整えます。WBSで該当する部分は、フェーズ4の「開発環境の構築」「技術要件の確認」「技術スタックの決定」「データベース設計」です。

たとえば、「開発環境の構築」の詳細には、「専用のフォルダを作成する」「ブラウザを用意する」「HTMLファイルやCSSファイルを作成する」などと記載するとよいでしょう。

⑥実際の制作とコーディングを行う

完成したデザインをHTMLやCSSなどでコーディングしてWeb上に表現します。

WBSで該当する部分は、フェーズ5の「HTML/CSSコーディング」や「JavaScript開発​​」です。JavaScript開発は、HTMLやCSSだけでは表現できない動作や機能を加える際に実施します。

また、パソコンでもスマートフォンでも適切に表示できるようにするためには、「レスポンシブデザイン実装」も必要です。

⑦公開に向けた準備と検証を進める

①〜⑥の作業が完了したら、公開に向けた準備と検証を進めます。

WBSで該当するのは、フェーズ6の「クロスブラウザテスト」です。クロスブラウザテストでは、アプリケーションが複数のブラウザで正しく表示されるかを検証します。

そのほか、完成した制作物をユーザーに使用してもらい、感想や評価をもとに修正する作業も必要です。

Web制作におけるスケジュールの決め方

Web制作でスケジュールを決めるには、まずWBSの期日を定めることがポイントです。WBSのツリー構造を決めてから、各担当者に作業を割り当てて期日を確定しましょう。

また、細かいタスクの内容や作業にかかる期間は各担当者のほうが理解している可能性があります。プロジェクトマネージャーなどのWBS作成者がすべての期日を決めるのではなく、担当者に相談することも必要です。

作業の期日が決まったら、「同時並行できる作業」と「前の作業が終わってから始める作業」を意識して、現実的なスケジュールを組み立てていきます。余裕を持たせたスケジュールを設定しておけば、万が一いずれかの作業に遅れが生じた場合でも大幅な変更をせずに進められるでしょう。

Web制作に必要な期間の目安

Web制作でスケジュールを決める際は、サイトの規模によって必要な期間が異なることを理解しておきましょう。ここから、LPや小・中・大規模Webサイトに分類し、Web制作に必要な期間の目安を紹介します。

LP（ランディングページ）

LP（ランディングページ）とは、Web広告や検索エンジンなどから流入してきたユーザーが最初に目にするページのことです。商品やサービスの申し込みに誘導するための1ページのWebサイトに限定して、LPと表現する場合もあります。

LPページには、1か月程度の期間がかかることが一般的です。打ち合わせに10日前後、要件定義や設計・制作に1週間程度、実装やテストに10日程度かかります。

小規模Webサイト・Webページ（～10ページ程度）

10ページ以内に収まる小規模Webサイト・Webページの制作には、1か月半から2か月程度かかることが一般的です。打ち合わせに2週間程度、要件定義や設計・制作に10日前後、実装やテストに20日程度かかります。

小規模Webサイト・Webページの具体例は、企業が一時的な宣伝で立ち上げるキャンペーンサイトなどです。

中規模Webサイト・Webページ（30ページ程度）

30ページ程度の中規模Webサイト・Webページの制作には、2〜3か月程度かかることが一般的です。打ち合わせに2〜3週間程度、要件定義や設計・制作に3週間程度、実装やテストに3週間程度かかります。

中規模Webサイト・Webページの具体例は、企業が求職者向けに自社の情報をアピールする採用サイトなどです。

大規模Webサイト・Webページ（100ページ程度）

100ページにわたる大規模Webサイト・Webページの制作には、6〜9か月程度かかることが一般的です。打ち合わせに3週間程度、要件定義や設計・制作に2か月程度、実装やテストに3か月程度かかります。

大規模Webサイト・Webページの具体例は、企業の基本情報を示したコーポレートサイトです。

なお、いずれのサイトも掲載するコンテンツによって目安を上回ることもある点に注意しましょう。

Web制作途中にWBSに変更があった場合は？

Web制作の途中でWBSを変更する必要が生じたとしても、慌てる必要はありません。

そもそも、WBSは随時修正するツールです。当初から、タスクやスケジュールに変更があった場合は柔軟に修正することを想定してWBSを作成しましょう。

ただし、メンバーの理解を得られない修正を繰り返すと、チームの団結を乱しかねません。そこで、あらかじめプロジェクトのメンバーにWBSは変更が生じる可能性があることを伝えておくことが大切です。

また、予定外の事象が発生するたびに変更するのではなく、事前に決めた基準に該当する場合のみWBSを変更します。トラブルが生じても、メンバーの協力で対応できそうな場合はあえてWBSを変更する必要はないでしょう。

Web制作にWBSを活用してタスク漏れを防ごう

WBSとは、プロジェクト全体を細かな作業に分解した構成図のことです。Web制作にWBSを活用することで、プロジェクトの見通しをメンバー間で共有したり、タスクの処理漏れを防いだりできます。

WBSを作成する際は、担当者に具体的な作業内容や実現可能な期日を確認し、無理のないスケジュールを立てることを心がけましょう。


※ 掲載している情報は記事更新時点のものです。

  • 監修：青井 真吾（AOIS Consulting株式会社代表取締役）

    大学卒業後はIT企業に入社。システムエンジニアとして大手企業向けのERPシステム開発を経験。その後ITコンサルタントとして独立。人材派遣会社の基幹システムの開発、不動産会社の商業施設での販促システムの導入、自動車メーカーでコネクティッドカー開発のプロジェクト管理、SIerでのSalesforceの導入、ファッション業界の企業でのDX推進プロジェクトを経験。現在はAOIS Consulting株式会社を設立し、コンサルティングの傍らIT記事の監修および執筆を手掛ける。

※本サイトは、法律的またはその他のアドバイスの提供を目的としたものではありません。当社は本サイトの記載内容（テンプレートを含む）の正確性、妥当性の確保に努めておりますが、ご利用にあたっては、個別の事情を適宜専門家にご相談いただくなど、ご自身の判断でご利用ください。

関連記事

  1. 「マネーフォワード クラウド」
  2. 業務効率化の基礎知識
  3. Web制作に役立つWBSテンプレート！作り方やタスク変更の注意点を解説