はじめに
今日、息子の入園式でした。🎉
式が終わってプリントをもらったとき、正直ちょっと頭が痛くなりました。
- 毎日持っていくもの
- 登園時にやること
- お迎え後にやること
- 月曜だけ必要なもの、金曜だけ必要なもの
- 着替えは常時3セット園に置いておく…
「毎朝夫婦で確認しながらやるの、絶対どちらかが忘れる」
エンジニアとして、こういうときにツールを作りたくなるのが性というものです。
でも「アプリ作るか」「Notionに入れるか」「スプレッドシートか」と考えていたら…
こういう時は、生成AIと対話すると簡単に解決策が出てくるしイメージを実現可能にしてくれる
この記事は、その体験と実際にできたものの紹介です。
非エンジニアでも生成AIを使うと割と便利ツールが簡単にできる
「やることが多すぎる」問題
保育園から配られたプリントを整理すると、こんな感じでした。
登園時にやること
- 下駄箱横でおしりマットをセット
- 着替えをかごに入れる（名前書いた袋で！）
- 連絡帳・水筒・口拭き・エプロンをそれぞれのかごへ
- 着替えセットが常時3セット＋靴下1セットあるか確認
- ループタオル・エコバッグをマークのところへetc...
お迎え後にやること
- 毎日持ち帰るもの（エコバッグ・連絡帳・ループタオル・靴・おしりマット）
- エコバッグの中のエプロン・口拭き・汚れた衣類を洗濯
- 翌日用の着替えを補充
曜日ごとの追加タスク
- 月曜：お昼寝ふとんを持参
- 金曜：お昼寝ふとんを持ち帰る
これ、毎朝バタバタしている状態でこなせる自信がゼロでした。
「Claudeに作ってもらおう」という発想
妻はiPhoneユーザーで、私はPixelユーザーです。
「2人で使えるチェックリスト」という条件を整理して、Claudeに相談しました。
条件はこんな感じです。
- スマホで使えること（両方）
- インストール不要
- 共有が簡単
- 見た目がわかりやすい（妻がすぐ使える）
Claudeの提案は 「HTMLファイルをGitHub Pagesで公開する」 でした。
- HTMLファイル1つで動作
- URLを共有するだけで2人が使える
- インストール不要、ブックマークでOK
- Chromeで「ホーム画面に追加」でアプリっぽく使える
実際にできたもの
チェックリストの全体像
登園当日用（checklist.html）
| タブ | 内容 |
|---|---|
| 🌅 登園前 | 玄関・保育室・着替えセット・保育士へ預けるまで |
| 🏠 お迎え後 | 毎日の持ち帰り・エコバッグ補充・金曜ふとん |
| 📅 週次 | 月曜追加準備・週末タスク・連絡メモ |
前日夜・当日朝用（checklist2.html）
| タブ | 内容 |
|---|---|
| 🌙 前日夜 | 持ち物8点・連絡袋・着替えセット確認・連絡帳記入 |
| 🌅 当日朝 | 体温記録・朝食・便意・お迎えの人・水筒にお茶を入れる |
こだわりのUI
妻が「かわいい」と言ってくれた ので、デザインはかなり力を入れました。
- 丸みのあるカード型レイアウト
- オレンジとパープルの暖かい配色
- チェックするとアニメーションで✓が入る
- 全部チェックすると「🎉 いってらっしゃい！」バナーが出る
以下、一部スクリーンショットです。
着替えセットの内訳カウンター
「園に3セット、手元に1セット、合計4セット必要」という管理が地味に難しいので、専用カウンターを作りました。
タップするたびに「未確認 → 園に預け中（青） → 手元にあり（緑）」と切り替わります。
連絡帳記入サポート
体温や朝食の様子など、毎日書く項目をタップ選択式にしました。
- 体温（37.5℃以上で⚠️警告が出る）
- 朝食の食べ具合（よく食べた / 普通 / あまり食べなかった / ほぼ食べなかった）
- 便意・排便
- お迎えの人
- 子供の様子
保育園の行事カレンダー連携
保育園からもらった年間行事をCSV化してHTMLに埋め込みました。
Subject,Start Date,End Date,All Day Event,Description
[行事] 入園式,04/03/2026,04/03/2026,True,分類:行事
[定例] 幼児英語,04/15/2026,04/15/2026,True,分類:定例
...
アプリを開くと、今日と明日の予定が自動で表示されます。
| タグ | 色 | 内容 |
|---|---|---|
| 行事 | 🟠 オレンジ | 行事・式典など |
| 定例 | 🔵 ブルー | 幼児英語・リトミックなど |
| 検診 | 🟢 グリーン | 歯科・内科検診 |
| 訓練 | 🩷 ピンク | 避難訓練 |
| 休園 | 🟣 パープル | 祝日・休園日（大きくバナー表示） |
休園日は特別に大きく「🏠 今日は休園日」と表示されるので、寝ぼけていても気づけます。
「家族で共有」どうやって実現したか
最初に考えた方法と問題点
| 方法 | 問題 |
|---|---|
| ローカルファイルをChromeで開く | ホーム画面に追加できない |
| Google Driveに上げる | HTMLとして動かない（プレビューになる） |
| アプリを作る | 時間がかかりすぎる |
採用した方法：GitHub Pages
- GitHubにリポジトリを作成（public）
- HTMLファイルをpush
- Settings → Pages → Sourceを
mainに設定 -
https://ユーザー名.github.io/リポジトリ名/ファイル名.htmlでアクセス
妻はGitHubアカウント不要です。 URLを送るだけ。
Pixelなら Chrome → メニュー → 「ホーム画面に追加」
iPhoneなら Safari → 共有 → 「ホーム画面に追加」
これでアプリっぽいアイコンとして使えます。
「公開して大丈夫？」セキュリティ・個人情報の確認
GitHub Pagesはpublicなので、URLを知っていれば誰でも見られます。
「個人情報が入っていないか不安…」
なのでClaudeに確認してもらいました。
埋め込んだデータは以下の通りです。
- 行事名（「入園式」「避難訓練」など）
- 祝日名（「昭和の日」「こどもの日」など）
- 定例イベント名（「幼児英語」「リトミック」など）
園名・住所・電話番号・担任名・保護者情報は一切含まれていません。
チェックリストの入力データ（体温・食事の様子など）はlocalStorage（端末内）に保存されるので、外部には出ません。
開発からデプロイまでの時間
正直に言うと、入園式の帰り道から始めて、その日の夜には動くものができていました。
流れはこんな感じです。
入園式でプリントをもらう
↓
Claudeに「こういうチェックリスト作って」と相談（5分）
↓
プリントの内容を整理してClaudeに投げる（10分）
↓
HTMLが出てくる → スマホで確認 → フィードバック（30分）
↓
GitHub Pages にデプロイ（10分）
↓
妻にURLを送って「使ってみて」（1分）
コードを自分で書いた量はほぼゼロです。
「こういうふうにしたい」「ここが動いてない」「妻も使えるようにしたい」という会話をするだけで、Claudeが修正してくれました。
Claudeと対話しながら開発する体験
今回やってみて感じたことをまとめます。
よかった点
仕様をチャットで伝えるだけでいい
「前日にやること・当日朝にやることを分けたい」と言うだけで、タブ構成から提案してくれます。
エラーの原因も一緒に考えてくれる
「リセットが効かない」「行事が表示されない」という報告だけで、コードのどこが問題か特定して修正してくれました。
非エンジニア視点も取り入れやすい
「妻がiPhoneで使えるか」「デザインがかわいいか」という観点を伝えると、それに合わせた提案が返ってきます。
気をつけた点
動作確認は自分でやる
Claudeが出したコードが完璧とは限りません。スマホで実際に触って「ここが動いてない」と報告する作業は必要です。
意図を具体的に伝える
「かわいくして」より「オレンジと丸みのある暖かいデザインで、チェックしたらアニメーションが出るようにして」のほうが精度が上がります。
まとめ
入園式当日に「保育園やること多すぎ問題」に気づき、その日のうちに家族で使えるチェックリストアプリを作れました。
技術的なポイントまとめ：
- 単一HTMLファイル（インストール不要）
- localStorageでチェック状態を保存
- GitHub Pagesで無料公開・共有
- Google CalendarのCSVをHTMLに埋め込んで行事表示
子育て的なポイントまとめ：
- 毎朝の確認漏れがなくなった
- 夫婦どちらが送迎しても同じ手順でできる
- 休園日を朝すぐ確認できる
- 連絡帳に何を書くか悩まなくなった
同じように「保育園・幼稚園やること多すぎ…」と感じているパパ・ママの参考になれば嬉しいです！
GitHubのリポジトリは公開予定なので、「同じの使いたい！」という方はコメントいただければ共有します。
おまけ：今後やりたいこと
- 来年度のCSVが配られたら更新する仕組みを簡単にしたい
- チェックリストの項目を保護者が自由に編集できる機能（編集モード）→ すでに別バージョンで実装済み
- 夫婦間でリアルタイムにチェック状態を同期する（Google Apps Script連携）
- 「今週の行事」を週初めに通知する