Web制作のWBSテンプレート｜クライアントの確認・素材待ちまで入れたタスク一覧

コピペで使えるWeb制作のWBSテンプレート

架空の案件（株式会社サンプルのコーポレートサイト制作・10ページ・写真の撮影は外注）で作ったWBSです。メール登録やダウンロードはいりません。次の3つの手順で使えます。

1. 下の枠の中を全部選んでコピーする
2. Excelかスプレッドシートの左上のセル（A1）に貼る。列はタブで区切ってあるので、そのまま11列に分かれる
3. 「案件」と「クライアント」の列を、自分の案件と取引先の名前に書き換える

案件	クライアント	No.	工程	タスク名	担当	成果物	開始日	期日	ステータス	メモ
コーポレートサイト制作	株式会社サンプル	1	受注前	見積書を作って送る	自分	見積書	2026/10/13	2026/10/14	完了	
コーポレートサイト制作	株式会社サンプル	2	受注前	取引条件（納期・修正回数・支払期日）を確かめる	自分	条件のメモ	2026/10/14	2026/10/15	完了	
コーポレートサイト制作	株式会社サンプル	3	受注前	発注書を送る	クライアント	発注書	2026/10/15	2026/10/16	完了	
コーポレートサイト制作	株式会社サンプル	4	要件整理	キックオフの打ち合わせ	自分	議事メモ	2026/10/19	2026/10/19	完了	
コーポレートサイト制作	株式会社サンプル	5	要件整理	目的・ターゲット・ページ数をまとめた要件メモを送る	自分	要件メモ	2026/10/19	2026/10/21	確認待ち	10ページで確定待ち
コーポレートサイト制作	株式会社サンプル	6	要件整理	素材（ロゴ・写真・既存資料）を提出する	クライアント	素材一式	2026/10/19	2026/10/23	未着手	
コーポレートサイト制作	株式会社サンプル	7	要件整理	サーバー・ドメインの情報を提出する	クライアント	ログイン情報	2026/10/19	2026/10/23	未着手	
コーポレートサイト制作	株式会社サンプル	8	構成	サイトマップを作る	自分	サイトマップ	2026/10/22	2026/10/26	未着手	
コーポレートサイト制作	株式会社サンプル	9	構成	ワイヤーフレームを作る（10ページ）	自分	ワイヤーフレーム	2026/10/26	2026/10/30	未着手	
コーポレートサイト制作	株式会社サンプル	10	構成	構成（ワイヤー）を確認する	クライアント	確認の返事	2026/11/02	2026/11/05	未着手	
コーポレートサイト制作	株式会社サンプル	11	構成	構成の修正を反映する	自分	修正版ワイヤー	2026/11/06	2026/11/06	未着手	
コーポレートサイト制作	株式会社サンプル	12	原稿	原稿の割り振り表を渡す	自分	割り振り表	2026/10/30	2026/10/30	未着手	ページごとに誰が書くか
コーポレートサイト制作	株式会社サンプル	13	原稿	原稿を提出する	クライアント	原稿	2026/11/02	2026/11/13	未着手	
コーポレートサイト制作	株式会社サンプル	14	原稿	写真を撮影する	外注（写真）	写真データ	2026/11/09	2026/11/13	未着手	
コーポレートサイト制作	株式会社サンプル	15	デザイン	トップページのデザイン	自分	デザインデータ	2026/11/09	2026/11/13	未着手	
コーポレートサイト制作	株式会社サンプル	16	デザイン	トップページのデザインを確認する	クライアント	確認の返事	2026/11/16	2026/11/18	未着手	
コーポレートサイト制作	株式会社サンプル	17	デザイン	下層ページのデザイン（9ページ）	自分	デザインデータ	2026/11/19	2026/11/27	未着手	
コーポレートサイト制作	株式会社サンプル	18	デザイン	下層ページのデザインを確認する	クライアント	確認の返事	2026/11/30	2026/12/02	未着手	
コーポレートサイト制作	株式会社サンプル	19	デザイン	デザインの修正を反映する	自分	修正版デザイン	2026/12/03	2026/12/04	未着手	
コーポレートサイト制作	株式会社サンプル	20	実装	テスト環境を用意する	自分	テスト環境のURL	2026/11/19	2026/11/19	未着手	
コーポレートサイト制作	株式会社サンプル	21	実装	トップページのコーディング	自分	HTML・CSS	2026/11/19	2026/11/25	未着手	デザイン確認後に着手
コーポレートサイト制作	株式会社サンプル	22	実装	下層ページのコーディング	自分	HTML・CSS	2026/12/03	2026/12/09	未着手	
コーポレートサイト制作	株式会社サンプル	23	実装	お問い合わせフォームを作る	自分	フォーム	2026/12/07	2026/12/09	未着手	
コーポレートサイト制作	株式会社サンプル	24	実装	原稿と写真を流し込む	自分	テスト環境のページ	2026/12/09	2026/12/10	未着手	
コーポレートサイト制作	株式会社サンプル	25	テスト	表示を確認する（パソコン・スマホ）	自分	確認表	2026/12/10	2026/12/11	未着手	
コーポレートサイト制作	株式会社サンプル	26	テスト	フォームの送信テスト	自分	送信結果	2026/12/11	2026/12/11	未着手	
コーポレートサイト制作	株式会社サンプル	27	テスト	テスト環境を確認する	クライアント	確認の返事	2026/12/14	2026/12/16	未着手	
コーポレートサイト制作	株式会社サンプル	28	修正対応	修正指示を一覧にまとめる	自分	修正一覧	2026/12/16	2026/12/16	未着手	
コーポレートサイト制作	株式会社サンプル	29	修正対応	修正を反映する	自分	修正済みのページ	2026/12/17	2026/12/18	未着手	
コーポレートサイト制作	株式会社サンプル	30	修正対応	修正後のページを確認する	クライアント	確認の返事	2026/12/18	2026/12/21	未着手	
コーポレートサイト制作	株式会社サンプル	31	公開	公開を承認する	クライアント	承認の返事	2026/12/21	2026/12/22	未着手	
コーポレートサイト制作	株式会社サンプル	32	公開	本番サーバーに公開する	自分	公開したサイト	2026/12/23	2026/12/23	未着手	
コーポレートサイト制作	株式会社サンプル	33	公開	公開後の表示を確認する	自分	確認表	2026/12/23	2026/12/23	未着手	
コーポレートサイト制作	株式会社サンプル	34	公開	アクセス解析とSearch Consoleを設定する	自分	設定の控え	2026/12/23	2026/12/24	未着手	
コーポレートサイト制作	株式会社サンプル	35	納品・請求	納品物（ログイン情報・サイトのデータ一式）を渡す	自分	納品物一式	2026/12/24	2026/12/24	未着手	
コーポレートサイト制作	株式会社サンプル	36	納品・請求	検収する	クライアント	検収の返事	2026/12/24	2026/12/28	未着手	
コーポレートサイト制作	株式会社サンプル	37	納品・請求	請求書を送る	自分	請求書	2026/12/28	2026/12/28	未着手	
コーポレートサイト制作	株式会社サンプル	38	納品・請求	入金を確かめる	自分	入金の記録	2027/01/29	2027/01/29	未着手	支払期日は取引条件の日付

日付は架空の例で、すべて平日に置いています。工程ごとにかかる日数の目安ではないので、自分の案件の日数に直してください。直し方は、このあとの3つのステップで説明します。

列ごとに何を書くか

列名の「期日」「担当」「ステータス」「メモ」は、あとで表をTASKULに取り込むときに、そのまま当てはまる名前にしてあります。TASKULの取り込みでは、「開始予定日」「終了予定日」の2列があると、先に並ぶ「開始予定日」が期日として読まれることがあります。そのため、この表では「開始日」と「期日」という列名にしています。

クライアントの作業も1行ずつ入れる

1人で受ける案件では、自分の作業が終わっていても、原稿や確認の返事が届かずに次へ進めないことがあります。そこで、クライアントにお願いする作業も、担当を「クライアント」にして行に入れます。

表に並べると、「原稿（No.13）が届かないと、原稿と写真の流し込み（No.24）に入れない」のように、待ちがどの作業を止めるかが行の並びで見えます。テンプレートで担当がクライアントの行は、次の11行です。

自分が送って返事を待っている作業は、No.5の要件メモのように、ステータスを「確認待ち」にします。受注前の行で確かめる取引条件は、発注書のない依頼で受ける側が確かめる8項目の記事に書いています。

最後の検収が終わらないときの対応は、納品後の検収と支払期日の記事を読んでください。

Web制作のWBSとは？進行管理表・ガントチャートとの違い

WBS（Work Breakdown Structure）は、案件の作業を細かく分けた一覧です。Web制作なら「トップページのデザイン」「原稿を提出する」のように1行に作業を1つ書き、誰がいつまでにやるかを並べます。似た表が2つあるので、違いを表にしました。

Webディレクターの進行管理のやり方の記事に、工程ごとの進み具合と確認待ちの回し方をまとめています。期間をバーで見たい人は、スプレッドシートでガントチャートを作る手順を読んでください。

複数の案件を1行ずつ並べる台帳は、Web制作業の案件管理テンプレートの記事に載せています。

WBSに並べる作業が、受注から納品までのどの段階に当たるかは、Web制作の受注から納品までの流れの記事で12段階の表にしています。

1人で受ける10ページ前後のサイトなら40行前後

10ページ前後のサイトを1人で受けるなら、40行前後で足ります。この記事の例は38行です。

制作会社が公開しているワークフローには、100前後の作業を並べた例もあります。1人で受けると行が少なくて済むのは、ディレクション・デザイン・コーディングの間で作業を引き継ぐ行が要らないからです。一方で、クライアントにお願いする作業は、自分の作業と同じ表に行として入れます。

Web制作のWBSの作り方｜自分の案件に直す3つのステップ

テンプレートを自分の案件に合わせるときは、行を直す、期日を入れる、クライアントに伝える、の順に進めます。

①要らない行を消し、足りない作業を足す

写真を撮影しない案件なら、No.14の「写真を撮影する」を消します。CMSを入れる案件なら、実装の工程に「CMSを設定する」「更新マニュアルを作る」のような行を足します。

ページ数が違う場合は、ワイヤーフレームの行（No.9）と下層ページのデザインの行（No.17）にある「10ページ」「9ページ」の数も直してください。

あわせて、1行に作業が2つ入っていないかを見ます。「デザインを作って修正する」のように2つ書くと、どちらまで終わったのかが分からなくなるので、行を分けます。

②公開日から逆算して期日を入れる

期日は、公開日から前に向かって入れます。先に「公開」の工程の日付を決め、テスト、修正対応、実装の順に前へ置いていきます。

各作業の日数は、自分の過去の案件で実際にかかった日数を使います。前の案件の表が残っていれば、同じ作業の開始日と期日の差を見れば分かります。

クライアントが担当の行には、相手の社内で確認を回す日数も取ります。何日あればよいかは、キックオフの打ち合わせで聞いておきます。

テンプレートの日付は、予備の日を取らずに詰めてあります。自分の案件では、公開の前などに、遅れを受け止める予備の日を空けておきます。

何日空けるかは、過去の案件でどれくらい遅れたかで決めます。期日を入れたら、自分の作業が同じ日に重なっていないかも確かめます。

テンプレートでも、No.17の下層ページのデザインとNo.21のトップページのコーディングは11月19日から25日まで、No.22とNo.23は12月7日から9日まで重なっています。重ねてよいのは、両方を同じ日に進めても終わると見込める場合だけです。

③クライアント担当の行の期日を、着手前に伝える

表ができたら、作業に入る前に、クライアント担当の行の期日を伝えます。キックオフの前にWBSを求められている場合は、その打ち合わせで日付を確かめてもらいます。

WBSをそのまま見せてもかまいませんが、相手が動くのは担当がクライアントの行だけです。担当がクライアントの行だけを抜き出して、次のように送ります。

件名：コーポレートサイト制作の日程と、ご準備いただくもの

株式会社サンプル
ご担当者様

公開日の12月23日（水）から逆算して、日程表を作りました。
お手数ですが、次の日付までにご準備をお願いいたします。

・10月23日（金）ロゴ・写真・既存資料、サーバーとドメインの情報
・11月5日（木）構成（ワイヤーフレーム）のご確認
・11月13日（金）原稿のご提出
・11月18日（水）トップページのデザインのご確認
・12月2日（水）下層ページのデザインのご確認
・12月16日（水）テスト環境のご確認
・12月21日（月）修正後のページのご確認
・12月22日（火）公開のご承認
・12月28日（月）納品物のご検収

ご確認が遅れそうなときは、早めにお知らせください。
公開日をどうするか、ご相談させていただきます。

原稿をどのページから誰が書くかは、No.12の割り振り表で先に渡しておきます。

Web制作のWBSでスケジュールが遅れたときの直し方

クライアントの確認が期日を過ぎたら、その行の期日を実際に返事が届いた日に直し、その返事を待っていた行を後ろへずらします。たとえばNo.16のトップページのデザインの確認が、11月18日から2日遅れて11月20日に返ってきた場合です。このときは、デザインの確認を待っていたNo.17の下層ページのデザインとNo.21のトップページのコーディングの開始日を11月20日より後ろへ直し、期日も同じだけずらします。

後ろの行の期日をずらす順番

ずらすのは、遅れた行を待っている行だけです。表を「開始日」の順に並べ替え、遅れた行よりあとに始まる行を上から順に見て、その行が遅れた作業の結果を使うかどうかで分けます。

結果を使わない作業は、ずらさずに先に進めます。例では、No.20のテスト環境の用意は、デザインの確認を待たずに進められます。

公開日に間に合わなくなったときの相談の仕方

No.32の公開の行が12月23日より後ろにずれたら、ずらしたあとの表をクライアントに見せます。公開日を動かさない場合は、一部のページを公開後に回すなど、何を減らすかをクライアントと相談します。

動かす場合は、③で送った日付の一覧を直して送り直します。返事の期限の決め方と催促の仕方は、Webディレクターの進行管理のやり方の記事に書いています。

Web制作のWBSをタスク管理ツールに取り込む方法（TASKULの場合）

ここまでの表は、表計算ソフトのままでも使えます。ただ、期日の近い作業を毎朝探したり、確認待ちがいくつ残っているかを数えたりするたびに、並べ替えやフィルタをかけ直すことになります。

TASKULでは、この表をタスク一覧の「インポート」から1案件として取り込むと、作業ごとのステータスがタスク一覧に並び、期日は「タスクカレンダー」の月間表示で日付ごとに見られます。

取り込む手順（タスク一覧の「インポート」）

取り込む前に、表を1案件ぶんに分ける

1つのファイルに入れるのは、1つの案件の行だけにします。「案件」の列に全部同じ名前が入っていれば、TASKULではプロジェクトが1件だけ作られます。

ファイルはCSVかExcelで保存します。GoogleスプレッドシートならURLを貼って読み込むこともできます。

URLで読み込めないときは、共有の設定を「リンクを知っている全員」が閲覧できるようにするか、CSVでダウンロードしてから選びます。

取り込み画面で列の対応を確かめる

タスク一覧の「インポート」を開き、「ファイルインポート」のタブでファイルを選ぶと、「カラムマッピング」に、TASKULの7つの項目と表の列の対応が出ます。このテンプレートの列は、次のように自動で当てはまりました。違っていれば、項目ごとに列を選び直せます。

テンプレートをそのまま選ぶと、画面の上に「タスク 38件」「新規クライアント 1件」「新規プロジェクト 1件」と出ます。

取り込んだあとに、確認中の作業と期日を見る

「インポート実行」を押すと、タスク一覧に、株式会社サンプルのコーポレートサイト制作として38件が並びます。No.1〜4は「完了」、No.5の要件メモは「確認中」で入りました。

期日が入ったタスクは、「タスクカレンダー」の月間の表示で、日付ごとにも見られます。クライアントの確認の期日が同じ週に重なっていないかも、ここで確かめられます。

取り込めないものと、Freeプランで気をつけること

• No.・工程・成果物・開始日の列は入らない
• 担当は、表に書いた文字のまま入る
• 案件の列を置かずに、工程の列を「大分類」や「カテゴリ」という名前にすると、工程の数だけプロジェクトが作られる。列名を「工程」のままにしておけば、こうはならない
• Freeプランはプロジェクトが10件までで、上限に達すると取り込みはそこで止まる。1案件ずつ取り込めば、1回で使うのは1件

TASKULに移すのは毎日見る作業の一覧だけで、表計算ソフトのWBSは手元に残しておけます。次に受ける案件のWBSができたら、TASKULのFreeプランで、その表を1案件として取り込んでみてください。

Web制作のWBSについてよくある質問

WBSの作り方と使い方について、よく聞かれる6つの質問に答えます。

WBSとガントチャートはどちらを先に作りますか？

WBSが先です。作業を1行ずつ書き出して開始日と期日を入れると、その日付からガントチャートのバーを作れます。スプレッドシートでバーを付ける手順は、スプレッドシートでガントチャートを作る手順の記事に書いています。

1人で受ける案件でもWBSは要りますか？

クライアントに作業をお願いする案件なら、作っておくと進めやすくなります。自分の作業は頭の中でも回せますが、相手の作業の期日は、こちらで決めて伝えないと相手には分からないからです。WBSに入れておけば、伝える日付の一覧もそこから作れます。

WBSはExcelとスプレッドシートのどちらで作ればいいですか？

どちらでもかまいません。この記事のテンプレートは、どちらにも貼れます。TASKULへの取り込みは、CSV・Excelのファイルと、GoogleスプレッドシートのURLのどれからでもできます。

クライアントにWBSを見せてもいいですか？

見せてかまいません。ただし、メモの列に自分用の書き込みや外注先とのやり取りがあるなら、その列を消してから渡します。相手に動いてほしい行だけを伝えたいときは、担当がクライアントの行だけを抜き出して送ります。

WBSはいつ更新すればいいですか？

作業が終わったとき、クライアントの返事が届いたとき、期日を過ぎたときの3つです。終わった行はステータスを「完了」にし、遅れた行は期日を直して、その行を待っている行をずらします。

TASKULでWBSを自動で作れますか？

WBSの表を自動で作る機能はありません。この記事のテンプレートを自分の案件に直してから、「インポート」で取り込んでください。

依頼のメールの文面を「インポート」の「テキスト入力」に貼って「AIで作成」を押すと、AIがプロジェクトとタスクを作りますが、工程や成果物の列を持つWBSの形にはなりません。この操作はAIクレジットを使います。

まとめ｜Web制作のWBSは、クライアントの作業まで1行ずつ並べる

Web制作のWBSは、作業を1行に1つずつ並べ、担当と期日を入れた表です。1人で受ける10ページ前後のサイトなら、この記事の38行のテンプレートを貼り、要らない行を消して、公開日から逆に期日を入れれば作れます。

クライアントの素材・原稿・確認・承認・検収も行に入れて、期日を着手前に伝えておくと、待ちでどこが止まるかが表で見えます。表ができたら、TASKULのFreeプランで1案件として取り込み、確認中の作業をタスク一覧で、期日をタスクカレンダーで確かめてみてください。