1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

献立決めが苦痛すぎるので、AIに悪魔的レシピを提案させるアプリを爆速で作った話

1
Posted at

📌 はじめに

  • 毎日の献立決めの苦痛を解消するため、自分好みに特化したAI献立アプリを自作しました。(妻に要望された)
  • 単なるレシピ提案ではなく、「Youtuber風の味付け」「おつまみセット」など、個人のニッチな要望をAIに学習させました。
  • AIペアプログラミング(Gemini)を活用することで、React + PWAのアプリ開発が驚くほどスムーズに進みました。

実装時間として、動くものができたのが10分ほど、そこから色々カスタマイズをして2,3時間程度です!!

😫 背景(抱えていた課題)

「今日何食べよう?」が人生最大のストレス

毎日仕事から帰ってきて、冷蔵庫を開けて、そこにある食材で何が作れるか考える……。この時間が苦痛で仕方ありませんでした。
妻からも夜に何作ろうというLINEが届くことが多く、退勤後にレシピを考えるということに、2人ともストレスを抱えていました。。
既存のレシピアプリも優秀ですが、以下のような「わがままなニーズ」には応えてくれません。

  • 「冷蔵庫の余り物で作りたいけど、味気ない節約料理は嫌
  • 「今日は白米をガッツリ食べたい気分(ダイエット度外視)」
  • 「夕飯はいらない。ビールに合うツマミだけが数品欲しい」

💡 解決策(作ったもの)

「AI献立プランナー」
冷蔵庫の中身と「今の気分」を入力するだけで、AIが最適な献立を提案してくれるWebアプリ(PWA)です。
スクリーンショット 2026-02-15 230357.png
スクリーンショット 2026-02-15 230511.png
スクリーンショット 2026-02-15 230622.png
スクリーンショット 2026-02-15 230637.png

こだわりの機能

  1. 「食事スタイル・ジャンル」選択
    「がっつり」「ダイエット」「筋トレ」など、その日のコンディションに合わせて提案内容を変えられます。また、和食、中華、洋食などのモード選択で気分に合わせた献立提案をしてくれます。

  2. 「おつまみ」モード
    これを選ぶと、ご飯や味噌汁の提案が消え、「枝豆・唐揚げ・冷奴」のような晩酌セットが提案されます。(我が家では、夜ご飯がビールから始まることが多く、白米を食べないことが多いので我が家のスタイルに合わせたモードになります。)

  3. 好みの味付け(YouTuber風)
    ここが最大の特徴です。AIへの指示(プロンプト)に**「好きなYoutuber、中毒性のある味付け」**を指定。
    これにより、優等生的なレシピではなく、ニンニクやうま味調味料を効かせた「ご飯泥棒」なレシピが出てくるようになります。

  4. 「いらない日の」選択
    私たち夫婦は毎日料理をする訳ではなく、週1,2日は予定があり、夜ご飯を共に食べない日もあるので、いらない日の設定を行えるようにしました。アプリ上は月から日曜日、朝・昼・夜で計21の献立表があるので、事前に登録しておくことで、特定の表だけ献立を埋めてくれるようになっています。

🛠️ 技術スタック

  • Frontend: React, Vite
  • Language: JavaScript
  • AI: Antigravity, Google Gemini API (gemini-2.5-flash)
  • Hosting: Vercel
  • Storage: LocalStorage(会員登録不要で夫婦間のみで使うため)
  • PWA: vite-plugin-pwa(ホーム画面に追加してアプリとして使うため)

💻 実装のポイント

1. AIへの「人格」の植え付け

単に「レシピを考えて」と言うだけでは、面白みのない普通の献立しか出てきません。
そこで、system prompt(役割設定)に以下のような指示を組み込みました。

// geminiService.js(イメージ)
const prompt = `
あなたは優秀な料理研究家です。
特に「○○」や「○○」のような、
ご飯やお酒が進む、しっかりとした味付け(うま味、ニンニク、スパイスなどを効かせたもの)を得意としています。
「悪魔的」「中毒性がある」と表現されるような、満足感の高いメニューを提案してください。
...
`;

これにより、AIが提案するレシピの「質」が劇的に変わりました。

2. 「おつまみモード」のロジック

「おつまみ」が選択された場合、通常の「主食・主菜・副菜」というフォーマットを無視させる必要がありました。
これも条件分岐でプロンプトを差し替えることで実現しています。

const snackInstructions = isSnack ? `
【重要:おつまみモード】
定食形式(ご飯・汁物)は不要です。
お酒に合うおつまみ(小鉢、揚げ物など)を2〜3品、1つのセットとして提案してください。
` : '';

3. AIペアプログラミングによる爆速開発

今回、コードの多くはAntigravityとのペアプログラミングで書きました。
特に便利だったのが以下の点です。

  • 環境構築: vite の初期設定やPWA化の設定など、ボイラープレート的な作業を一瞬で完了できました。
  • エラー修正: 「カロリー計算がおかしい」と伝えれば、即座にロジックを見直して修正案を出してくれます。
  • アイデアの壁打ち: 「よく使う食材を入力するのが面倒」と相談すると、「じゃあボタン(タグ)にしましょう」とUI案まで出してくれました。

🚀 結果

自分専用のアプリが完成したことで、毎日の献立決めのストレスが激減しました。
「今日は何作ろう?」ではなく、「AI、今日の冷蔵庫はこれ!あとは頼んだ!」と言える開放感は素晴らしいです。献立を作ってもらう経験はありましたが、一週間の献立表を作ってくれる経験はないし、アプリ化されていないこともあって使い勝手が悪かったのでUIを自分好みにでき最高です。

また、「自分好みの味付け」をAIが理解してくれているので、出てくるレシピへの信頼感が違います。「そうそう、こういうのが食べたかったんだよ!」という体験が得られます。

カスタマイズで色々時間を使いましたが、特に詰まった点は今回ありませんでした。強いて言うならGeminiのAPIの使い方くらい?

📝 まとめ

AI APIを使えば、プログラミングスキル(とAIへの指示力)次第で、自分のかゆいところに手が届く」アプリが簡単に作れる時代になりました。
Antigravityは無料で使えます!!!!やばすぎ!!!!
皆さんもぜひ、自分だけの「最強アプリ」を作ってみてください!

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?