無料で使えるWebガントチャート「MoguChart」を作った ─ 個人開発で追求した"ちょうどいい"プロジェクト管理UX

TL;DR

• ブラウザだけで使えるガントチャートWebアプリ MoguChart (moguchart.jp) を個人開発しました
• 3つの表示モード（時間単位/日単位/月単位）で、数時間の作業計画から数年の長期プロジェクトまで対応
• ドラッグ＆ドロップ中心の直感操作、リアルタイム共同編集、PDF/Excel エクスポートなど、実務で「ほしい」と思った機能を詰め込みました
• Googleアカウント不要のゲストログインで今すぐ試せます

なぜ作ったのか

コアライブラリである moguchart-core を自作したことが、すべての始まりでした。

当初は「Web Components製のガントチャートライブラリ」としてライブラリ単体での公開を目指していましたが、開発が進むにつれて 「どれだけ優れたライブラリであっても、実際にプロダクトに組み込まれた姿を見せなければ、その真価は伝わらないのではないか」 と考えるようになりました。

そこで、ライブラリの「究極のデモ」として、そして自分自身が「本当に実務で使いたい」と思えるプロジェクト管理アプリを目指して開発したのが、この MoguChart です。

世の中には数多くのプロジェクト管理ツールが存在しますが、多機能すぎて学習コストが高かったり、逆にシンプルすぎてガントチャートとしての表現力が足りなかったりすることが多々あります。これまでの業務で培った Firebase などの技術知見をフルに活かし、「ガントチャートだけを徹底的に、かつ直感的に使えるWebアプリ」という、ちょうどいいニッチを埋めるプロダクトを目指しました。

こだわったUXポイント

1. 🕐 3つの表示モード ─ プロジェクトの粒度に合わせる

MoguChart では、プロジェクト作成時に表示の粒度を選べます。

モード	最小単位	使いどころ
時間単位	分	1日のイベントスケジュール、短期の作業計画
日単位	日	一般的なプロジェクト管理（デフォルト）
月単位	月	年間ロードマップ、長期プロジェクト

「日単位だと粗すぎるけど、時間で管理したい作業がある」
「3年計画だから月レベルで俯瞰したい」

そんなニーズに、1つのアプリで応えられるようにしました。

2. 🖱️ ドラッグ＆ドロップですべて完結

タスク管理の操作は、可能な限りマウス操作だけで完結するようにしています。

タスク操作

操作	やり方
タスクの移動	バーをドラッグ
期間の変更	バーの端をドラッグ
行の移動	行ヘッダーをドラッグ
依存関係の作成	バー端のハンドルを他のタスクへドラッグ
テンプレートからタスク作成	サイドバーからチャートへドラッグ
複数タスクの一括移動	Cmd/Ctrl+クリックで複数選択 → ドラッグ

「右クリックメニュー」と「ダブルクリックで編集」の2つさえ覚えれば、ほぼすべての操作にアクセスできます。

右クリックメニュー

チャートの空白エリアやタスクバーを右クリックすると、その場所に応じたコンテキストメニューが表示されます。

• 空白エリア: 新規タスク作成 / ペースト / Undo / Redo
• タスクバー: 編集 / コピー / 削除 / コメント
• 行ヘッダー: 行の追加 / 編集 / 非表示 / 削除

3. 🎨 タスクバーの見た目を細かくカスタマイズ

「色分けしたい」は当然として、MoguChart ではさらに踏み込んだ見た目の設定ができます。

カラーパレット

プロジェクトごとにカラーパレットを定義し、各パレットに名前を付けられます。「進行中」「レビュー待ち」「完了」のように意味のある名前を付ければ、チーム内でバーの色の意味が統一されます。

パターン（13種類）

タスクバーの背景に重ねるパターンを設定できます。

diagonal-stripe / diagonal-stripe-thin / diagonal-stripe-thick / diagonal-stripe-reverse / vertical-stripe / horizontal-stripe / checkerboard / dots / dots-dense / triangle / circle / grid / diagonal-grid

「仮タスクはストライプ」「保留中はドット」のように、色＋パターンの組み合わせで状態を視覚的に区別できます。

枠線スタイル

実線（細/太）、破線（細/太）、点線（細/太）から選べます。パターンと組み合わせることで、印刷時にも区別しやすいバーが作れます。

バーの影

ドロップシャドウの強さを4段階（なし / 小 / 中 / 大）で調整できます。影を付けるとバーが浮き上がって見え、情報量の多いチャートでも視認性が上がります。

4. 🏁 マイルストーンで節目を可視化

プロジェクト全体の節目（リリース日、デッドラインなど）を縦線＋バッジで表示します。マウスオーバーでハイライトされるので、「この日までに何を終わらせるか」が一目でわかります。

5. 📊 進捗率のプログレスバー

タスクごとに 0〜100% の進捗率を設定でき、バー上にプログレスバーとして表示されます。毎日の朝会で「今どこまで進んでる？」の確認がチャートを見るだけで済みます。

6. 🔗 依存関係の矢印表示

「タスクBはタスクAが完了してから」という依存関係を、矢印付きの曲線で可視化できます。

• バーの端にある接続ハンドルをドラッグして、依存先のタスクにドロップ
• 右→左方向の依存関係はS字カーブで自動的に見やすく描画

7. 🔒 「うっかり操作」を防ぐ機能

タスクロック

確定済みのタスクに対して「ロック」をかけると、ドラッグでの移動・リサイズ・削除が禁止されます。「このタスクは動かさないで！」をシステムで担保できます。

読み取り専用モード

表示設定メニューから ON にすると、すべての編集操作が無効化されます。「報告用に画面を見せたいけど、操作はさせたくない」といったシーンで便利です。

8. 📸 スナップショットで「あの時の状態」に戻れる

スナップショットは、プロジェクトの状態をまるごと保存する機能です。

機能	説明
手動保存	任意のタイミングでスナップショットを作成
自動保存	5分〜24時間の間隔で自動保存（保持期間も設定可能）
復元	過去のスナップショットの状態にワンクリックで復元
閲覧	スナップショットを読み取り専用で閲覧
ダウンロード	スナップショットをファイルとして保存

「昨日の時点ではどうなってたっけ？」を即座に確認でき、「やっぱり戻したい」にもワンクリックで対応できます。

9. 👥 リアルタイム共同編集

同じプロジェクトを複数人で同時に開くと：

• アクティブユーザー表示: 誰が今見ているかがアバターでわかる
• 変更履歴パネル: リアルタイムで他のメンバーの操作が表示される
• 未読バッジ: 見逃した変更件数が通知される

変更履歴パネルでは、ログ内のタスク名をクリックすると該当タスクにフォーカスし、ダブルクリックで編集ダイアログが開きます。「誰が何を変えたのか」を追跡しながら作業できます。

10. 📤 多彩なエクスポート

形式	用途
CSV	他ツールへのデータ連携
Excel (.xlsx)	報告書に添付、Excelユーザーへの共有
PNG	スライドやドキュメントへの貼り付け
PDF	印刷・メール添付
ZIP	プロジェクト全体のバックアップ

CSV/Excel エクスポートには、行名・タスク名・開始日・終了日・日数・ラベル・説明が含まれます。ラベルフィルタを適用中なら、表示中のデータだけがエクスポートされるので、レポート作成にも使えます。

「地味だけど便利」な機能たち

期間スライド

プロジェクトの開始日が変わったとき、全タスク・全マイルストーンの日付をまとめてスライドできます。新しい開始日を指定するだけで、プロジェクト期間を維持したまま全体が自動でずれます。進捗率のクリアオプション付き。

プロジェクト複製

既存プロジェクトを複製する際、プロジェクト詳細ダイアログの「複製モード」で以下の設定が行えます。

1. プロジェクト名: デフォルトで「（元のプロジェクト名）のコピー」と入力され、任意の名前に変更が可能です。
2. 日付の連動スライド: 開始日を変更すると、元のプロジェクト期間を維持したまま終了日が自動でスライド（調整）されます（終了日入力欄は非活性になります）。これに伴い、全タスクやマイルストーンの日付も自動的にスライドします。
3. 進捗率のクリア: 「進捗率をクリアする」チェックボックス（デフォルトON）が用意されており、複製時にタスクの進捗率をリセットするかどうかを選択できます。

カラーパレット、ラベル、マイルストーン、権限設定なども元のプロジェクトからそのまま引き継がれるため、「前期のプロジェクトをベースに今期を作る」といった作業が非常にスムーズに行えます。

タスクテンプレート

よく使うタスク設定（名前・色・ラベル）をテンプレートとして保存し、サイドバーからドラッグ＆ドロップでチャートに配置できます。「毎週のルーティンタスク」を一瞬で配置できます。

🏷️ ラベルで「分類」と「絞り込み」を両立

タスクや行が増えてくると、「このタスクはどのカテゴリ？」「フロントエンドの作業だけ見たい」といったニーズが出てきます。MoguChart のラベル機能は、こうした「分類」と「絞り込み」を一つの仕組みで実現します。

ラベルの定義（プロジェクト設定）

ラベルはプロジェクト単位で管理します。プロジェクト詳細ダイアログで、名前と色を指定してラベルを自由に追加できます。

例えば、以下のようなラベルセットを作れます。

ラベル名	色	用途
フロントエンド	🟦 青	UI・画面の実装タスク
バックエンド	🟩 緑	API・DB関連のタスク
デザイン	🟪 紫	デザイン作業
レビュー待ち	🟧 オレンジ	レビューが必要なタスク
緊急	🟥 赤	優先度の高いタスク

タスク・行へのラベル付与

定義したラベルは、タスクと**行（グループ）**の両方に付与できます。

• タスク: タスク編集ダイアログで、ドロップダウンから複数のラベルを選択
• 行（グループ）: 行編集ダイアログで同様にラベルを選択

1つのタスク・行に複数のラベルを同時に付与できるので、「フロントエンド」かつ「緊急」のように複合的な分類が可能です。

バー上のラベル表示

タスクバーにラベルが付与されていると、バー上にカラーチップとして表示されます。タスク名の横にラベル名が色付きで並ぶため、チャートを見るだけでタスクのカテゴリが一目でわかります。行ヘッダーにもラベルチップが表示されるので、行レベルの分類も視覚的に把握できます。

2種類のラベルフィルタ

ラベルの真価はフィルタリングで発揮されます。MoguChart では2種類のラベルフィルタを用意しています。

フィルタ	対象	操作場所
タスクラベルフィルタ	特定のラベルを持つタスクだけ表示	ツールバー
行ラベルフィルタ	特定のラベルを持つ行だけ表示	コーナーセル

どちらのフィルタにも**「ラベルなし」**の選択肢があり、ラベルが未設定のタスク・行を絞り込むことも可能です。「すべて選択」「選択解除」のワンクリック操作にも対応しています。

エクスポートとの連携

ラベルフィルタを適用した状態で CSV / Excel エクスポートを実行すると、表示中のデータだけがエクスポートされます。各タスクに付与されたラベル名もエクスポートデータに含まれるため、「バックエンドのタスクだけ抜き出してレポートに添付」といった使い方ができます。

タスクテンプレートとの連携

タスクテンプレートにもラベルを含めて保存できます。「毎週のフロントエンド定例」のように、ラベル付きのテンプレートをドラッグ＆ドロップするだけで、分類済みのタスクが一瞬で配置されます。

プロジェクト複製時の引き継ぎ

プロジェクトを複製すると、ラベル定義もそのまま引き継がれます。「前期のプロジェクトをベースに今期を作る」際に、ラベルを一から作り直す必要はありません。

フリーワード検索＋ラベルフィルタ

タスクが増えてきたときの「探す」をサポート。

• フリーワード検索: タスク名にマッチするバーがハイライト表示
• タスクラベルフィルタ: 特定のラベルを持つタスクだけ表示
• 行ラベルフィルタ: 特定のラベルを持つ行だけ表示

コメント機能

タスク・行・プロジェクトの3レベルでコメントを残せます。プロジェクトコメントは画面右端のサイドバーで管理でき、幅の調整や開閉状態がプロジェクトごとに保存されます。

キーボードショートカット

MoguChartでは、マウス操作だけでなくキーボードによる操作も充実しています。

チャート操作・フォーカス移動

ショートカット	動作
↑ / ↓ / ← / →	フォーカスを上下左右のタスクに移動
Home / End	現在の行の最初 / 最後のタスクにフォーカス
Enter / Space	フォーカス中のタスクを選択（Cmd / Ctrl を押しながらで複数選択のトグル）
Shift + ← / Shift + →	選択中のタスクを左 / 右に移動（スナップ単位）
Delete / Backspace	選択中のタスクを削除
Esc	選択・フォーカスのクリア / ドラッグやリサイズ操作のキャンセル

編集・コピー＆ペースト

ショートカット	動作
Cmd+C / Ctrl+C	選択中のタスクをコピー
Cmd+V / Ctrl+V	コピーしたタスクをペースト
Ctrl / Alt + ドラッグ	タスクをコピー（複製）して配置（ドラッグ時のコピーモード）
Cmd+Z / Ctrl+Z	元に戻す（Undo）
Cmd+Shift+Z / Ctrl+Y	やり直し（Redo）

ダイアログ・入力

ショートカット	動作
Cmd+Enter / Ctrl+Enter	コメントを送信
Enter	行名編集時の確定 / ダイアログでの決定
Esc	行名編集時のキャンセル / ダイアログを閉じる

権限管理 ─ チームでの運用を考えた設計

MoguChart は3段階の権限モデルで、チームでの運用を想定しています。

操作	オーナー	編集者	閲覧者
チャート閲覧	✅	✅	✅
タスク・行の編集	✅	✅	❌
プロジェクト設定	✅	❌	❌
スナップショット作成	✅	✅	❌
コメント追加	✅	✅	❌
プロジェクト削除	✅	❌	❌
エクスポート	✅	✅	✅

メールアドレスで権限を付与する方式で、過去に入力したアドレスは自動補完候補として保存されます。

テーマ対応

ライト / ダーク / システム連動の3モードに対応。チャートを開いたまま表示設定メニューからワンクリックで切り替えられます。

バーの高さも5段階（極小 / 小 / 中 / 大 / 特大）で調整できるので、タスク数が多い場合は「極小」で俯瞰、少ない場合は「大」でゆったり表示、と使い分けられます。

ゲストログインで今すぐ試せる

MoguChart では、「アカウント作るほどじゃないけど、ちょっと試したい」という方のために、ゲストログインを用意しています。

• Googleアカウント不要
• ワンクリックで即使い始められる
• 作成したデータは約24時間後に自動削除

気軽に触ってみて、使えそうだと思ったらGoogleアカウントで本登録すればデータは永続的に保存されます。

開発の裏側（ちょっとだけ技術の話）

レイヤー	技術
ガントチャート描画	自作 Web Components (Lit) → npm パッケージとして公開
フロントエンド	Vue 3 + Vuetify 4 + Pinia
バックエンド	Firebase Cloud Functions + Prisma + MySQL
リアルタイム	Firestore (プレゼンス・編集イベント)
ホスティング	Firebase Hosting

ガントチャートの描画エンジン（@mogura/moguchart-core）はフレームワーク非依存の Web Components として別途開発しています。Vue だけでなく React や Angular でも使えるので、「自分のアプリにガントチャートを組み込みたい」という方にも活用いただけます。

技術的なアーキテクチャの詳細は、別記事「個人開発で本格ガントチャートWebアプリ「MoguChart」を作った話 ─ 自作Web Components × Vue 3 × Firebase のアーキテクチャ全解剖」で解説しています。

また、ガントチャート描画ライブラリの詳細については、別記事「フレームワークに縛られないガントチャートを作った — Web Components製「moguchart-core」の紹介」をご覧ください。

おわりに

MoguChart は「ガントチャートだけをちゃんとやる」をコンセプトに開発しています。

余計な機能で煩雑にならず、でも「これが欲しかった」という機能はしっかり揃えている ─ そんな"ちょうどいい"ツールを目指して、これからもアップデートを続けていきます。

ご意見・ご要望があれば、コメントでお気軽にお寄せください！