Chromebookとスマホだけで冷蔵庫管理アプリを作ってみる第1回：-構想編-

Last updated at 2026-09-04Posted at 2026-09-04

はじめに

一人暮らしの成人男性なら、一度はこう思ったことがあるはずです。

「調味料って、なんで『適量』で売ってないんだろう？」

料理を始めようと張り切って醤油、みりん、オイスターソース、豆板醤……と一通り買い揃えてみるものの、結局仕事が忙しかったりして自炊は習慣化せず、気づいた時には冷蔵庫の奥で賞味期限が数ヶ月過ぎている。

そもそも、自炊が続かない最大の原因は「管理の手間」です。何が冷蔵庫に残っていて、どれがヤバいのかを把握するのが面倒くさすぎる。

そこで今回、「レシートを1枚撮るだけ」「消し込みはワンタップ」「スーパーで本当に確認したい食材だけを目立たせる」という、ズボラな自分でも絶対に続く完全無料のスマート冷蔵庫管理アプリを個人開発しようと思い立ちました。

この記事はまだ完成報告ではなく、「これから作る」宣言と設計メモです。作りながら詰まったところや工夫したところは、追って裏話編としてまとめていく予定です。

正直に言うと、賞味期限管理アプリを実際に使ったことは一度もありません。「欲しいな」とは思いつつ、既存のアプリをちゃんと調べたこともありませんでした。

そんな中、良い機会だと思って、ちょっと遊びで自作してみることにしました。

今回のアプリで狙っているのは、この4つです。

1️⃣ レシートの写真を撮って記録
入力はレシート撮影の1アクションのみ。商品名・金額・購入日をAIに読み取らせて自動登録する。

2️⃣ 商品名からおおよその賞味期限を算出
外出先（スーパーの中）で見たときに「これはまだ大丈夫」「これはそろそろヤバい」がひと目で分かるようにする。

3️⃣ 撮ったレシートから家計簿を自動作成
食費の集計に加えて、廃棄した食材の金額も可視化し、「今月の食品ロス額」として見える化する。

4️⃣ 期限が近い食材を使ったレシピ提案
冷蔵庫の中身を消費しきるための後押しとして、期限が近いものを使ったレシピをAIに提案させる。

役割	技術
フロントエンド／サーバー	Next.js（Vercelに無料デプロイ）
データベース	Supabase（無料枠）
レシート読み取り・レシピ提案	Gemini API（無料枠）
コード管理	GitHub
PWA化	manifestとservice workerでホーム画面追加対応

今回は入門編的な位置づけの個人開発なので、できるだけ無料で構成できた方が気軽に真似しやすいはず、という考えでこの構成にしています。

普通この手の記事は「ローカルにNode.jsを入れて〜」から始まりますが、今回は開発機がChromebookとスマホしかないという前提で進めます。

そこで、開発の考え方を丸ごと切り替えることにしました。

「ローカル環境を用意してからスマホで確認する」のではなく、「push したら即スマホで見られる」という前提に振り切れば、Chromebook + スマホだけでも進められるはず、という見立てです。

思いついたので、まずはこの流れで手を動かしてみようと思います。

① 環境構築：Chromebookとスマホだけで、GitHub Codespaces上にNext.jsの開発環境を作り、Vercelに自動デプロイされる状態にする
② レシート解析API：Gemini APIに画像を送り、商品名・カテゴリ・金額・即食/保管の分類をJSONで返すAPI Routeを実装する
③ データベース保存：Supabaseにproductsテーブルを作成し、Geminiの解析結果をそのまま保存する
④ エラーハンドリング：Gemini APIの混雑エラー（503）が出たときに、利用者に分かりやすいメッセージを表示する

まずはこの4つで、「レシートを1枚撮るだけ」の入力ゼロ化が実現できるかを検証します。「入力ゼロ」「ノイズレス」を掲げている以上、機能を盛りすぎて結局続かないアプリにならないよう、優先順位はここに絞ります。

というわけで、この計画で進めてみます。実際にやってみてどうなったか（と、案の定出てきた詰まりポイント）は続編にまとめます。

続きはこちら：