💡 はじめに
「今日の晩ご飯、何にしよう…」 「冷蔵庫にこの野菜が残ってるけど、レシピが思いつかない…」
こんな悩み、日常的に抱えていませんか？さらに、買った食材を使いきれず食品ロスになってしまう問題も気になるところです。
そこで今回は、そんな毎日の献立の悩みを解決するために、Webアプリ「Leftover Recipe AI（冷蔵庫レシピAI）」を開発しましたのでご紹介します！
🍳 Leftover Recipe AI とは？
Leftover Recipe AIは、冷蔵庫に残っている食材を入力するだけで、AI（Google Gemini）が創造的かつ実用的なレシピを提案してくれるWebアプリケーションです。
単にレシピを提案するだけでなく、調理時間や難易度、アレルギー食材の除外など、細かい条件設定も可能にしています。
👉 [アプリを使ってみるリンク]
✨ 主な機能：使いやすさと創造性を追求
このアプリには、使いやすさと実用性を高めるためのこだわりの機能がいくつかあります。
1. 高度なAIレシピ生成（Gemini 2.5 Flash / Pro）
Googleの最新AIモデル Gemini 2.5 Flash / Pro を使用しています。その結果、食材の組み合わせから「えっ、こんな料理ができるの？！」という驚きのレシピから、定番の安定レシピまで幅広く提案してくれます。Geminiの創造性を料理に活かしました。
2. 美しい料理画像による視覚的提案
文字だけのレシピだとイメージが湧きにくいですよね。そこで、このアプリでは Unsplash API と連携し、生成されたレシピ名に関連する高品質な料理画像を自動で表示します。視覚的にも楽しめるのがポイントです。
3. 柔軟な条件設定
細かい要望をAIに伝えるための条件設定を用意しました。
- 調理時間: 「今日は時間がないから15分で！」
- 難易度: 「料理初心者だから簡単に」
- アレルギー: 「そばアレルギーなので除外して」
これらの要望をプロンプトに組み込むことで、あなたに最適なレシピが生成されます。
🛠️ 技術スタック解説：高速動作へのこだわり
エンジニアの方向けに、今回の開発で使用した技術についても少し触れておきます。
| 項目 | 使用技術 | 採用理由とこだわり |
| フロントエンド | Vite + Vanilla JavaScript (ES6+) | あえてReactなどのフレームワークを使わず、軽量で高速な動作を目指しました。 |
| AI | Google Gemini API (@google/genai SDK) | 最新の Gemini 2.5 Flash モデルをデフォルトで使用し、応答速度を最適化しています。 |
| 画像連携 | Unsplash API | 高品質で商用利用可能な美しい画像を提供するため。 |
| データ管理 | LocalStorage | APIキーやお気に入りレシピはブラウザ内に保存されるため、セキュリティ面でも安心です。 |
💡 こだわりの UI/UX
UI/UXでは「温かみのある料理サイト」を意識したカラーパレットを採用しました。さらに、レスポンシブデザインでスマホからでも快適に使えるように設計しています。
また、APIのレート制限（使いすぎ）などのエラーハンドリングにも力を入れました。ユーザーが迷わないように親切なエラーメッセージを表示するようにしています。
📖 使い方：たった3ステップで完了
使い方はとてもシンプルです。
- APIキーの設定: 右上の設定アイコンからGemini APIキー（無料）を入力します。
- 食材の入力: 「キャベツ」「卵」「豚肉」のように余っている食材を入力します。
- レシピ生成: 「✨ レシピを生成」ボタンをクリック！
AIが考えたレシピが表示されます。詳細ボタンで作り方も確認できます。
さいごに
個人開発として作ったこのアプリですが、自分自身も毎日の料理で実際に使っています。「冷蔵庫の掃除もできて、美味しい料理も食べられる」。まさに一石二鳥のアプリになりました。
APIキーさえあれば誰でも無料で使えるので、ぜひ試してみてください！感想やフィードバックもお待ちしています。
コメント