目次

Web版WBS作成ツール

概要

Excel/VBAで作られていたWBS(進捗管理表)を、サーバー・インストール不要のHTMLファイル1枚に移植したツールです。
CSVファイル(スケジュール)を読み込むだけで、階層構造付きのWBS表とガントチャートを自動描画します。
予定・実績を分けて入力すると、進捗率・遅れ/先行の状況・進捗ズレを示す稲妻線まで自動で計算されます。

データはすべてCSV(スケジュール・オプションの2種類)で管理するため、ツール本体とデータが完全に分離しています。Gitでの差分管理もそのまま使えます。

サンプル

Web版WBS作成ツール下の二つを読み込んでみてねっ!
スケジュールのCSV 簡易エラーチェックを見せる為、項番や日付間違いのCSVにしてます。
オプションのCSV

画面イメージ

メイン画面

左側がWBS表(項番・項目・予定/実績/進捗・担当・状況・備考)、右側がガントチャートです。項番をクリックすると、左右の同じ行がハイライトされます。M行(親)の項目名の左にある▼/▶アイコンで、配下の行を折りたたみ/展開できます。

スケジュール編集

Excelライクなグリッドで、スケジュールCSVを直接編集できます。セルのドラッグ選択・コピペ(Excel対応)・行の挿入/削除に対応しています。

オプション編集

表示期間・報告日・担当者ごとの色・特別休暇/出勤日・各種配色を、表形式で編集できます。


主な機能

📊 階層構造付きWBS + ガントチャート

- M(マイルストーン/親)行とW(実タスク)行の2種類。子タスクの日付・進捗は親に自動集計されます。
- 項番は「1」「1.1」「1.1.1」のように、階層に応じて自動採番。
- Daily(1日1列)/ Monthly(1ヶ月を分割数で按分)の2モード。

📂 行の折りたたみ・階層別表示

- 子を持つ行(Type/M・Wを問わず、さらに深いLevelの行がぶら下がっている行)には▼/▶アイコンが付き、クリックで配下を折りたたみ/展開できます。
- 折りたたんでいても、%・状況・実績/予定などの集計データは配下も含めて正しく計算されたままです(見た目を消しているだけ)。
- 「表示Lv」プルダウンで、Excelのアウトライン機能と同じ感覚で「Lv0のみ」「Lv1まで」のように一括表示レベルを指定できます(最大Lv7まで)。一括指定した後、気になる枝だけ個別にクリックしてさらに展開することも可能です。

📈 進捗の自動判定と可視化

- 状況列は「完了 / 遅れ〇日 / あと〇日 / 先行〇日 / 実行中」を、予定日・実績日・報告日の比較だけで自動判定。
- 親(M)行の状況は、配下タスクの平均ではなく一番遅れている子(ボトルネック)を採用します。他のタスクが終わっていても、1つでも詰まっているタスクがあればその深刻さがそのまま親に反映されます。
- 親(M)行の実績/予定は「配下の末端タスク(W)の完了数/総数」で表示され、%もこの数値から計算されます(平均按分はしません)。報告の場で「親を見て何個中何個終わっていないか把握→詳細を子で確認」という流れにそのまま使えます。
- 稲妻線(ジグザグの線)が、状況の判定結果と完全に連動して報告日ラインからズレて表示され、遅れ/先行が一目でわかります(状況テキストの日数と、線のズレ幅は常に一致します)。「カミナリ線」チェックボックスでON/OFFを切り替え可能です。
- 「進捗率考慮」をONにすると、%の進捗ぶんだけ遅れ日数・稲妻線のズレを割り引いて表示します。

📅 日本の祝日を自動判定(祝日設定)

- 外部通信を使わず、天文計算(春分・秋分の日)とハッピーマンデー制度のルールで日本の祝日を計算します。
- 振替休日(祝日が日曜なら翌平日を休みに)・国民の休日(祝日に挟まれた平日)にも対応。
- 「祝日設定」をONにすると、状況の日数計算・稲妻線・自動日数計算すべてに祝日が反映され、カレンダー上も特別休暇と同じ色で表示されます。

⚠️ 簡易データエラーチェック

- Level番号の飛び(例: Lv0の次にいきなりLv2)を検知すると、該当行の項番が赤字で表示されます(ホバーで理由を確認可能)。
- 開始日が終了日より後になっている(日付の逆転)を検知すると、該当の日付セル自体が赤字で表示されます。
- ツールバーに「〇件のデータエラー」とサマリー表示され、ホバーで全エラーの一覧(項番・項目名・理由)を確認できます。折りたたんで隠れている行のエラーも件数に含まれます。

📝 Excelライクなスケジュール編集

- セルのドラッグ範囲選択、Ctrl+クリック/Shift+クリックでの複数行選択に対応。
- コピー&ペーストはExcelとの相互貼り付けに対応(タブ区切りテキスト)。
- 行の挿入は「選択行の下に挿入」、削除は選択行をまとめて削除。
- 日付列は<input type="date">のカレンダーピッカー、項目・備考列は自動でインデント/左揃え。
- 実ks/予ks・Level列に全角数字やスペースなどが入力/貼り付けされても、自動で半角の数値だけに変換されます。

⚙️ オプション機能

- 表示開始/終了・報告日をオプションCSVで保存・共有可能。
- 担当者ごとに文字色を設定(担当欄が自動で色分け)。
- 特別休暇(通常の平日を休みにする)・特別出勤(土日を稼働日にする)をカレンダーに反映。
- Daily/Monthlyそれぞれのセル幅、Monthlyの分割数もオプションとして保存・共有可能。
- マイルストーン(M行)・予定バー・実績バー・カミナリ線・基準線の色を、それぞれ個別に指定可能。配色プリセットを切り替えても、これらの個別指定は維持されます。
- 表示期間から完全にはみ出るタスクは、ガントチャート上には描画されません(表の枠外に飛び出て表示が乱れるのを防止)。

🎨 配色プリセット(4パターン)

- ダーク/ライト/ミニマル/カラフルの4種類から選択可能。背景・文字・罫線・土日色まで含めて一括切替。
- 日付ピッカーなどのブラウザ標準部品も、選んだ配色に合わせて明暗が切り替わります。
- バーなどの色をオプションで個別に指定している場合、配色プリセットを切り替えてもその指定が優先されます。

💾 CSVでの保存・共有

- 「スケジュール保存」「オプション保存」で、現在の内容をCSVファイルとしてダウンロード。
- 「スケジュール読込」「オプション読込」で、CSVファイルを選択して復元。
- ツール自体はアップデートしても、CSVはそのまま使い回せます。


基本操作

スケジュールCSVの列構成

Type,Level,項目,予定日数,予開,予終,実開,実終,実ks,予ks,担当,備考
列 内容
——
Type M(マイルストーン/親)またはW(実タスク)
Level 階層の深さ(0が最上位)。M/Wどちらでも、さらに深いLevelの子行を持てる
項目 タスク名
予定日数 参考値(実際の表示日数は予開・予終から自動計算)
予開/予終 予定開始日・終了日(YYYY-MM-DD)
実開/実終 実績開始日・終了日。両方入力されると自動的に「完了」扱い
実ks/予ks 実績値・予定値(この2つの比率が進捗%になる)。M行は自動で「配下の完了タスク数/総タスク数」に上書きされる
担当 担当者名(オプションの担当色と連動)
備考 自由記述

状況(進捗)は自動計算のため、CSVへの入力項目はありません。

オプションCSVの種別

種別 キー 値
———
表示開始/表示終了/報告日 日付 (空欄)
担当色 担当者名 カラーコード(例: #ff6b6b)
特別休暇 日付 (空欄。通常の平日をその日だけ休みにする)
特別出勤 日付 (空欄。土日をその日だけ稼働日にする)
Dailyセル幅 数値(px) (空欄)
Monthlyセル幅 数値(px) (空欄)
Monthly分割数 数値 (空欄。1ヶ月を何列に分割するか)
マイルストーン色 (不要) カラーコード。M行の矢羽根の色
予定バー色 (不要) カラーコード。予定バーの色
実績バー色 (不要) カラーコード。実績バーの色
カミナリ線色 (不要) カラーコード。稲妻線の色
基準線色 (不要) カラーコード。報告日の基準線の色

これらは表示開始/表示終了/報告日と同じ扱いで、「+行挿入」で種別を選んで値を入れれば保存・読込できます(自動では追加されないため、必要な行は手動で足してください)。

新規に作り始める場合

1. 「スケジュール編集」を開き、+行挿入で1行ずつ追加、またはExcelから複数行まとめて貼り付け
2. Type列にMかW、Level列に階層を入力
3. 「適用してWBS描画」でメイン画面に反映
4. 表示開始・表示終了・報告日を設定
5. 必要に応じて「オプション編集」で担当色・特別休暇/出勤日・配色などを設定
6. 「スケジュール保存」「オプション保存」でCSVとして保存しておく

進捗を更新する場合

1. 「スケジュール編集」で該当タスクの実開・実終・実ks・予ksを入力
2. 「適用してWBS描画」を押すと、状況・進捗%・稲妻線が自動更新される

報告時の使い方

1. 表示Lvを「Lv0のみ」や「Lv1まで」に絞って、まず全体像を把握する
2. 親(M)行の実績/予定の数字(完了数/総数)と状況(ボトルネックの遅れ)を確認する
3. 遅れている親があれば、そのMの▼アイコンで配下を展開し、どのタスクで詰まっているか詳細を確認する


トラブルシューティング

Q. 状況(遅れ/あと)の日数が思っていた数値と違う

- 「休日考慮」がONの場合、稼働日(土日・特別休暇を除く)だけを数えます。カレンダーの土日・特別休暇/出勤の色分けと突き合わせて確認してください。
- 「祝日設定」がONの場合、日本の祝日(振替休日・国民の休日を含む)も稼働日から除外されます。GW・年末年始をまたぐタスクは、ON/OFFで日数が変わるので確認してください。
- 「進捗率考慮」をONにすると、遅れ日数は(1-進捗率)倍に割り引かれます。未着手(進捗0%)のタスクは、ONでもOFFでも同じ数値になります(0%を掛けても変わらないため)。
- 親(M)行の遅れ日数は、配下タスクの中で一番遅れているものがそのまま採用されます(平均ではありません)。

Q. 稲妻線が報告日の位置で一直線のまま動かない

- 「カミナリ線」チェックがOFFになっていないか確認してください。
- 状況が「完了」「あと〇日」「実行中(進捗率考慮OFF)」の場合は、仕様として稲妻線は報告日ラインの位置のままになります。
- 「遅れ」「先行」であれば、稲妻線は必ず該当の予定日を指してズレて表示されます。動かない場合は状況列の表示も合わせて確認してください。

Q. 日付を手入力/貼り付けしたら表示がズレた

- 日付はハイフン区切り(YYYY-MM-DD)・スラッシュ区切り(YYYY/M/D)のどちらで入力しても構いません。スケジュール編集を一度「適用」するか、ファイルを読込/保存すると、日付は自動的にハイフン区切りへ統一されます。

Q. タスクを登録したのにガントチャートにバーが出てこない

- そのタスクの予定期間が、表示開始〜表示終了の範囲から完全にはみ出していないか確認してください。範囲外のタスクは意図的に描画されません(表の外に飛び出て表示が乱れるのを防ぐため)。表示開始/表示終了を広げれば表示されます。
- 折りたたみで配下が隠れているだけの可能性もあります。「表示Lv」を「全展開」に戻すか、該当行の▼/▶アイコンを確認してください。

Q. 担当者名を入れたのに色が付かない

- オプションCSVの「担当色」に、スケジュール側の担当欄と完全に一致する名前で登録されているか確認してください(表記ゆれがあると色が付きません)。

Q. スケジュール編集で日本語入力(IME)がうまく変換できない

- セルを選択した直後にそのまま日本語を打とうとすると、IMEの変換が崩れることがあります。Enterキーまたはダブルクリックで編集モードに入ってから入力してください。

Q. 項番が赤字/日付が赤字になっている

- 項番が赤字の場合は、Level番号が飛んでいる(例: Lv0の次にいきなりLv2)可能性があります。ホバーすると詳細が確認できます。
- 日付セルが赤字の場合は、開始日が終了日より後になっている可能性があります。同じくホバーで詳細を確認できます。

Q. 配色プリセットを切り替えたら、オプションで指定した色が消えるor戻る

- 発生しません。配色プリセットとオプションの個別色指定は別レイヤーで管理されており、プリセットを切り替えてもオプションの指定が優先されます。もし色を変えたい場合は、プリセットではなくオプション側の該当項目を編集してください。


開発情報

- 形式: 単一HTMLファイル(サーバー・インストール不要、ブラウザで開くだけ)
- データ形式: CSV(スケジュール・オプションの2種類、UTF-8)
- 対応環境: モダンブラウザ全般(Chrome / Edge / Firefox)
- 元になったツール: Excel VBAで自作していたWBS管理ツール
- 生成AI: Claude

更新履歴

- 簡易データエラーチェックを追加(Level番号の飛び、日付の逆転を検知し、該当セルを赤字表示)
- 行の折りたたみ機能を追加(▼/▶アイコンでの個別開閉、「表示Lv」での一括レベル指定、Lv7まで対応)
- マイルストーン・予定バー・実績バー・カミナリ線・基準線の色をオプションで個別指定できるように追加。配色プリセット切替時も維持される
- 「カミナリ線」ON/OFFチェックボックスを追加(進捗率考慮とは独立)
- 親(M)行の実績/予定を「配下の完了タスク数/総タスク数」に変更し、%もこの数値から計算するよう統一(報告時の会話フローに合わせた設計)
- スケジュール編集の実ks/予ks・Level列で、全角数字やスペース混入を自動で半角数値に正規化
- Daily/Monthlyのセル幅・Monthlyの分割数をオプションに追加(保存・共有可能に)
- 横スクロール時にヘッダーとガントチャート本体がズレる不具合を修正(縦スクロールバーの有無による見た目の横幅の違いが原因)
- 日本の祝日を自動判定する「祝日設定」を追加(振替休日・国民の休日にも対応、外部通信なしのオフライン計算)
- 親(M)行の状況判定を「配下タスクの平均」から「一番遅れている子(ボトルネック)」方式に変更。状況テキストと稲妻線のズレ幅も完全に一致するよう修正
- 表示期間から完全にはみ出るタスクをガントチャートに描画しないよう修正(枠外に飛び出す不具合の解消)
- 矢羽根(M行)のラベルがはみ出しても読めるよう、文字に縁取りを追加
- 月表示で分割数0を指定できてしまう不具合、矢羽根の形が負の幅で反転する不具合を修正
- スケジュール編集で日付をダブルクリックすると消える不具合を修正(日付形式の違いが原因)。あわせて、読込・保存・編集適用のすべてで日付をハイフン区切りに統一
- 状況(遅れ/先行)の判定ロジックと稲妻線の位置を統一し、按分計算(進捗率考慮)の反映も一致させた
- 稲妻線・基準線の基準点(セル左端/右端)を統一し、日数表示とのズレを解消
- 日付のハイフン/スラッシュ混在によるタイムゾーン起因の日付ズレを修正
- カレンダーの列幅が自動計算で押し縮められる不具合を修正(表の幅を明示指定)
- 配色プリセット(ダーク/ライト/ミニマル/カラフル)を追加、既定をライトに変更
- スケジュール編集・オプション編集のUIをExcelライクな操作性に刷新(ドラッグ選択・Ctrl/Shift複数選択・行挿入/削除)
- 項番クリックによる左右の行ハイライト機能を追加
- 状況(進捗)列を完全自動計算化し、CSVへの直接入力を廃止
- 要員欄を備考欄に変更