「家事の負担を AI で減らしたい」と思っている、僕と同じ非エンジニアの方へ。
共働き4人家族（夫婦＋小学生2人）の僕が、妻の家事負担を減らすために、AI を使って 「献立 → 買い物リスト → AEONネットスーパーのカート投入 → メール送信」 までを全自動化する Web アプリを作りました。
僕はエンジニアではありません。プログラミングの基礎知識すらほぼゼロです。それでも、Claude を相棒にして 2日で本番運用まで 持っていけました。
費用は 月500円以下。
この記事では、なぜ作ったか・どう作ったか・どう運用しているかを、できるだけ生々しく書きます。
🖼️ 『完成したアプリの扉。料理雑誌のような『週刊・台所の編集』』のスクリーンショットは続編で公開予定です。
なぜ作ったのか
毎週金曜の晩、妻はリビングの食卓で献立表を前にしてため息をついていました。
「来週、月曜は何にしよう…火曜は鶏か魚か…」
共働き、子ども2人、お弁当も毎日。1週間分の献立を考えるのは、それだけで頭脳労働です。さらに、考えた献立を AEONネットスーパーのカート に手動で投入するのも妻の役目でした。
「ここ、AI が肩代わりできるんじゃないか？」
その日の夜、僕はノートPCを開き、Claude にこう投げかけました。
「妻のために、献立と買い物を半自動化するアプリを作りたい」
48時間後、本番URLで動くアプリができていました。
できたもの（デモ）
完成したアプリは Cloudflare Workers 上で動く Web アプリで、家族（妻と僕）の2アドレスからしかログインできません。
主な機能
| 機能 | 内容 |
|---|---|
| 📅 今週の献立 | 月〜金の献立をカレンダー風に表示 |
| ✨ AIで献立を生成 | 日数を指定すると、Claude Sonnet が今週とかぶらない献立を提案 |
| 🛒 買い物リスト管理 | 数量変更・削除・カテゴリ分けに対応 |
| 🔍 キーワード追加 | 「人参」「ヨーグルト」など個別追加 |
| 🤖 金曜AM6時の自動実行 | Cowork スケジュールタスクが AEONカート投入＋メール送信 |
| 📧 欠品通知 | カゴに入らなかった商品（在庫切れ等）を本文に明記 |
デザイン
最初は自分でオレンジ系のフードアプリ風UIを作りましたが、Anthropic 公式の frontend-design プラグインを Claude Code に入れて再生成したら、料理雑誌のようなエディトリアルデザイン に変わりました。
明朝×セリフのタイポグラフィ、温かいクリーム色の紙、章立てナビ（”Chapter — Menu of the Week”）。これは僕単独では絶対作れない仕上がりです。
🖼️ 『Chapter — Menu of the Week。月〜金の献立を見渡す一面構成』のスクリーンショットは続編で公開予定です。
技術構成
社内のエンジニアにレビューしてもらった構成で、家計のクレジット情報や買い物履歴が漏れないよう、セキュリティを徹底しています。
スタック
- フレームワーク：Next.js 15（App Router）
- ホスティング：Cloudflare Workers（@opennextjs/cloudflare 経由）
- データベース：Cloudflare D1（SQLite互換、無料5GB）
- 認証：Cloudflare Access（家族2アドレスのメールのみ許可）
- AIモデル：Claude Sonnet（claude-sonnet-4-6）
- AEON操作：Chrome ブラウザ自動化（FUMIのログイン済みセッション利用）
- メール送信：Gmail Chrome 拡張
セキュリティ要件（僕のような非エンジニアでも守れる範囲）
- APIキー・パスワード・トークンは コードに書かない（Cloudflare Secrets で管理）
- AEONのログイン情報は サーバーに保管しない（自分のChromeセッションを使う）
- GitHub リポジトリは Private 限定
- Cloudflare の preview_urls は無効化（認証バイパス防止）
開発の流れ（5ステップ）
非エンジニアの僕でも辿れた手順です。
STEP 1：設計書とモックを作る（30分）
最初に、Claude に「Word の設計書」と「HTML の画面モック」を作ってもらいました。
これがあると、後のコード生成で迷子になりません。妻にも見せて「こんな画面でいい？」と確認しました。
STEP 2：Next.js アプリの実装（90分）
Claude が以下を一気に作ってくれました。
- 8テーブルの D1 スキーマ
- 11個の API エンドポイント
- 6画面のページ
- 認証ミドルウェア
- Claude API 連携モジュール
僕がやったのは「ファイル保存」と「リンクのクリック確認」だけ。
🖼️ 『「AIで編む」画面。日数と好みを入れると、Claudeが今週とかぶらない献立を組み立てる』のスクリーンショットは続編で公開予定です。
STEP 3：Cloudflare デプロイ（45分）
Anthropic で API キーを取得 → Cloudflare で D1 と Access を設定 → npm run deploy。
ここはコマンドを順番に打っていく作業で、エラーが出たら Claude に貼って直してもらう、の繰り返し。
STEP 4：既存の自動実行タスクを改修（30分）
実はこのアプリ、毎週金曜AM6時に動く Cowork スケジュールタスク とセットで運用しています。タスクの中身を「D1 から献立を読む」「結果を D1 に書き戻す」形に書き換えました。
🖼️ 『買い物リスト。金曜AM6時にここから自動でAEONカートへ流れる』のスクリーンショットは続編で公開予定です。
🖼️ 『献立に紐づかない食材は『棚に追加』から直接リスト入り』のスクリーンショットは続編で公開予定です。
STEP 5：デザイン刷新（15分）
frontend-design プラグインを Claude Code に入れて、「料理雑誌風に」と頼んだだけ。
完成。
苦労した点と、それを解決した方法
Q1. npm install が 404 エラーで止まった
最初に Claude が指定した @opennextjs/cloudflare のバージョンが、削除済みだった。
解決："latest" に書き換えて再インストール。Claude が即座に直してくれた。
Q2. ビルド時に「edge runtime は使えない」エラー
OpenNext for Cloudflare は Edge Runtime をサポートしていない。
解決：17ファイルから export const runtime = "edge" を一括削除。
Q3. Cloudflare Access を入れたら Wrangler のデプロイが失敗
"remote": true の D1 設定が、Access のせいで認証エラーに。
解決："remote": true を外す（ローカル開発でだけ使う設定）。
これらは全部、Claude にエラーログを貼って 1分以内に解決しました。
費用：月額500円以下
| サービス | 料金 | 月額目安 |
|---|---|---|
| Cloudflare Workers | 無料プラン内 | ¥0 |
| Cloudflare D1 | 無料プラン内 | ¥0 |
| Cloudflare Access | 無料（50ユーザーまで） | ¥0 |
| Anthropic API（Sonnet） | 従量課金 | ¥250〜¥450 |
献立を1回 AI で生成すると 約22円。月10〜15回試して 300円程度 で収まっています。
最初に Anthropic Console で $5（約750円） だけ事前入金しておけば、しばらく止まらず使えます。残高が無くなれば自動的にAPIが止まる仕組みなので、青天井に課金される心配はありません。
使った AI ツールまとめ
非エンジニアでも「2日で本番運用」できた背景には、複数の AI ツールを役割分担して使ったことがあります。
1. Claude Cowork mode（メイン）
最初の設計・実装・Cloudflare 設定はすべて Cowork mode で進めました。
非エンジニアにとって最大のメリットは「Claude が画面操作を代行してくれる」こと。Cloudflare の管理画面・Anthropic の API キー取得・Gmail 送信まで、ブラウザ操作を Claude にお願いできました。
2. Claude Code（途中から移行）
途中で Claude Code に乗り換えると、npm run deploy などのコマンドを Claude が自分で実行できるようになり、待ち時間が大幅に減りました。
3. frontend-design プラグイン（デザイン刷新）
Anthropic 公式のフロントエンドデザイン用プラグイン。Claude Code に入れて使うと、既存のUIを「料理雑誌風」「IKEA風」「Apple風」など指定したテイストに一気に作り変えてくれます。
僕はこれで料理雑誌風に変えてもらいました。
4. Anthropic API（本番動作）
献立生成のサーバーサイドで使用。Claude Sonnet 4.6 を採用（コストはOpusの約1/5）。
学んだこと
① 非エンジニアでも、AI と社内エンジニアレビューがあれば本番運用までいける
「セキュリティどうしよう」「データベース壊したら…」という不安は、社内のエンジニアに 構成だけレビュー してもらえば解消します。
僕の場合は「Cloudflare で公開する」「APIキーはコードに書かない」「特定メールのみ許可」のルールを最初に決めて、その範囲内で Claude に作ってもらいました。
② AI に「全部丸投げ」はリスク。「指示の上手さ」が成果を分ける
「アプリ作って」だけだと、Claude も適当に作ります。「家族4人向け」「Cloudflareで公開」「ログインは2アドレスのみ」など制約を最初に伝えると、品質が劇的に上がる。
③ デザインは AI に任せた方が早い
自分でCSSをいじる時間より、frontend-design プラグインに「こういう雰囲気で」と頼む方が10倍速い。
④ コストは「お試し → 本番」で段階的に管理する
Anthropic は事前入金制なので、$5 だけ入れて様子を見る → 月いくら使うか分かる → 必要なら増やす。月の上限額 も設定可能。
ソースコードと再現方法
ソースは Private リポジトリで管理しているため、丸ごとは公開していません。
ただ、以下を把握すれば、誰でも同じ構成を再現できます：
- Next.js 15 App Router
- @opennextjs/cloudflare で Cloudflare Workers にデプロイ
- D1 にマイグレーション流すだけでテーブル作成
- Cloudflare Access で許可メールリスト指定
将来的に テンプレート化して有料配布 することも考えています（家族向けカスタマイズ含む）。
興味ある方は X（@aigadget_pro）でリプライください。需要があれば優先します。
まとめ
家事の中で「ここに毎週時間取られてるな」と思う作業があれば、それは AI で半自動化できる可能性が高いです。
特に、
- 献立／買い物リスト
- 家計簿の自動記録
- 子どもの宿題進捗管理
- 旅行の予算配分
このあたりは、Claude と Cloudflare で、エンジニアでなくても十分に作れます。
僕のアプリも、最初の数週間は完璧じゃないかもしれません。AEONサイトの構造が変わったり、献立がワンパターンになったり。でも妻が金曜の晩にため息をつく回数が、ひとつでも減るなら、作る価値はありました。
同じように家族のために何か作りたい方の参考になれば嬉しいです。
関連記事
- AI で家事を半自動化する人のための連載（準備中）
- Claude Code 入門：非エンジニア向け（準備中）
質問・感想は X（@aigadget_pro）または記事下のコメント欄でお待ちしています。
この記事は、実際に運用中のアプリ「Weekly Aeon Shopping」の開発経験をもとに書いています。スクリーンショット・コード断片は次回の続編で公開予定です。
