2026.07.10.金

「こんなのあったら便利かも」をすぐ形にできる、チャレンジラボ制度でレシピアプリを作ってみた

技術

皆さん、こんにちは!
開発部の國分です。

エンジニアであれば誰しも、「日々の業務とは別に、気になっている新しい技術を触ってみたい」「個人的にこんなアプリがあったら便利なのに」と考えたことが一度はあるのではないでしょうか。しかし、個人の時間だけでまとまった開発時間を確保するのは、なかなか難しいのが現実です。我が社には、そうしたエンジニアの技術的好奇心や挑戦をサポートする「チャレンジラボ」という制度があります。今回は、この制度を利用して私が実験的に作ってみた「レシピ&冷蔵庫管理アプリ」について、開発の背景や技術スタック、フィードバックを受けてアプリがどう進化していったかをご紹介します。

業務の1時間を使って、好きなテーマを研究して全社へ共有する仕組み

本題に入る前に、我が社の「チャレンジラボ」について簡単に説明します。

この制度は、就業時間のうち1時間を、通常業務とは異なる「自分が挑戦したい技術やテーマの研究」に充ててよいというものです。

研究内容の縛りはなく、最新技術の検証から業務効率化ツールの開発まで、それぞれのエンジニアが自由にテーマを設定できます。そして、そこで得た知見や成果物を、年に4回ある全体会議の場で全社員に向けて発表・共有するという文化があります。

今回ご紹介するアプリも、私自身が全体会議でデモを交えて発表した成果物の一つです。

開発の動機と技術スタック

今回の開発にあたり、モチベーションは大きく2つありました。

1.普段の業務で扱う技術のスキルアップ

業務で触れる機会の多い技術を使い、インフラ構築からフロント・バックエンドまで一気通貫で手を動かすことで、アーキテクチャへの理解をより深めたいと考えました。

2.身近な課題(家族の日常の悩み)の解決

我が家では、週末は「今ある食材をいかに無駄なく使い切るか」を優先して献立を考えます。この「あるものからメニューを組み立てる」プロセスを、技術の力でもっと楽しく仕組み化できないかと考えたのがきっかけです。

選定した技術スタックは以下の通りで、業務でも馴染みのある構成にしました。
インフラ: Docker(コンテナによる環境構築)
フロントエンド: Vue.js
バックエンド: PHP / Laravel
AIリクエスト: Gemini API(レシピ提案、画像読み込み)

家族のフィードバックによるアプリの進化

初期バージョンは、「冷蔵庫にある食材を複数入力すると、Gemini APIがレシピを提案してくれる」というシンプルなものでした。

これだけでも検証としては十分でしたが、実際に家族に見てもらうと、実用面でのリアルな課題が見えてきました。

※実際のアプリでは写真を使用していますが、記事内ではAIで生成したイメージ画像に置き換えて掲載しています。

1.入力コストの削減(Geminiの画像認識の活用)

「毎回食材を手動で入力するのが手間で、次第に使わなくなる」というフィードバックを受けました。
そこで、Gemini APIの画像認識を活用。食品の写真をアップロードするだけで、食材名だけでなく「賞味期限」まで自動で抽出・登録できる仕組みへ改善しました。

2.食材の賞味期限ヒートマップ機能

さらに、「冷蔵庫の中で、どれが一番消費期限が近いのかを直感的に把握したい」という要望がありました。
これに対応するため、Vue.js側でコンポーネントを設計し、賞味期限までの残り日数に応じて、画面のカードを「赤(期限間近)」「黄(やや注意)」「緑(余裕あり)」の3色に自動で分類して表示する機能を実装しました。

単なる「AIを使ったレシピアプリ」からスタートしたものが、家族の声を取り入れたことで、「冷蔵庫のフードロスを抑えるための管理システム」へと形を変えていくことになりました。

チャレンジラボという制度の良さ

このアプリを全体会議で発表したところ、他のメンバーからフィードバックをもらうこともできました。
実際にチャレンジラボを通して感じたメリットは以下の通りです。
・「動いて終わり」ではなく、人の意見を聞いてブラッシュアップする楽しさの再発見
・開発で得た知見(Gemini APIのプロンプト調整やVue.jsの設計)が、そのまま普段のメイン業務の引き出しになる

おわりに

我が社のチャレンジラボは、エンジニアとしての技術への探究心をそのまま形にでき、そこで得た知見を全社に還元するための有効な仕組みであると考えています。

「新しい技術を積極的にキャッチアップしたい」
「身近な課題を、自分の手で解決してみたい」

そうした想いを持つエンジニアにとって、非常にやりがいのある環境です。
もし私たちのカルチャーや開発環境に少しでも興味を持っていただけたら、ぜひ採用ページをのぞいてみてください。
https://www.key-p.com/recruit/