バーンダウンチャートで夏休みの宿題管理をWebサービス化した話

はじめに

夏休みの宿題管理をバーンダウンチャートで可視化するWebサービス「しゅくだいぬりえシート」を作りました。

👉 https://shukudai-nurie-sheet.vercel.app/

子育ての課題：夏休みの宿題管理

夏休みといえば、多くの保護者が直面する悩みがありますよね。

「今日も宿題やってない...」
「計画的に進められているのかな？」
「このペースで夏休み終わりまでに終わるの？」

我が家でも同じ悩みを抱えていました。子どもに「宿題やりなさい」と言っても、どれくらい残っているのか、今のペースで間に合うのかが見えづらく、親子共にストレスでした。

去年の取り組み：スプレッドシートでバーンダウンチャート

そんな時、「バーンダウンチャートで子どもの夏休みの宿題をマネジメントする」という話を聞き、昨年試してみることにしました。

バーンダウンチャートとは、プロジェクト管理でよく使われる進捗管理手法で、残作業量を時間軸で可視化するグラフです。これを宿題管理に応用してみました。

スプレッドシートで作成

Googleスプレッドシートで以下のようなものを作りました：

• 宿題リストとそれぞれのポイント設定
• 夏休み期間中の理想的な進捗ライン
• 実際の進捗を記録できるグラフ

表と線はサクッと作れたのですが、印刷プレビューでは線がズレてしまうことがあり、印刷調整に苦労しました。

子どもの反応が予想以上に良かった

でも、苦労して作った甲斐がありました！

「今日は計算プリント10ページも頑張った！」

と嬉しそうにチャートに塗ってくれて、

「線より上はマグマだよ！マグマから逃げて！」

なんて言いながら、楽しそうに進捗管理していました。グラフを自分で塗りつぶしていく作業が、ゲーム感覚で面白かったようです。

今年の改善：Webサービス化

去年の成功を受けて、今年はもっと手軽に使えるようにWebサービス化することにしました。

Claude Codeでバイブコーディング

開発にはClaude Codeを使いました。アイデアがすぐに形になるのはいい体験でした！

「こんな機能がほしい」
「印刷レイアウトはこうしたい」

と思ったことを伝えると、すぐにコードが出てきて動くものが作れる感覚は本当に楽しかったです。

開発期間は5時間程度で、基本的な機能は完成しました。

スプレッドシートとの違い

Webサービス化したことで：

• 印刷の安定性: CSS @media print でレイアウトが崩れない
• 手軽さ: データを入力するだけで自動生成
• シェア可能: 他の家庭でも使える

特に印刷問題が解決されたのは大きかったです。

このサービスでできること

夏休みの期間と宿題を登録してバーンダウンチャートを生成

夏休みの開始日・終了日と、宿題のリストを入力すると、自動的にバーンダウンチャートが生成されます。

宿題ごとにポイントの重みを設定

宿題の大変さに応じてポイントを変えられます。例えば：

• 読書感想文：30ポイント
• 計算ドリル：1ページ1ポイント×24ページ = 24ポイント
• 自由研究：40ポイント

プリントなどは1ページごとに1ポイントなど、細かくポイント設定できるので、進捗が正確に把握できます。

A4サイズで印刷

印刷用に最適化されたレイアウトで、きれいに印刷できます。

運用はあえてアナログ

このサービスはあくまで「印刷用のチャートを生成する」ところまでです。

実際の運用は：

1. 生成したチャートを印刷
2. 宿題が終わったら、子どもが自分でグラフを塗りつぶす
3. 日々の進捗は手動で管理

デジタルで進捗管理するのではなく、あえてアナログにすることで、子どもが自分の手で塗り絵をする楽しさと達成感を大切にしています。

学び：Claude Codeで身近な悩みを解決

今回の開発を通じて感じたのは、Claude Codeのような技術があれば、プログラミングに詳しくなくても身近な悩みを解決するツールが作れるということです。

「こんなのがあったらいいな」というアイデアを、すぐに形にできる時代になったんだなと実感しました。

同じような子育ての課題を抱えている方や、何か身近な問題を技術で解決してみたい方の参考になれば嬉しいです。

使ってみてください！

もし良かったら、お子さんの宿題管理に使ってみてください。完全無料で、登録も不要です。

使ってみた感想や「こんな機能があったらいいな」という意見があれば、ぜひ教えてください！

子どもたちが楽しく宿題を進められて、夏休みの終盤を思いっきり楽しめることを願っています📊