アプリ
個人制作
チーム
UIUXデザイナー(2人)・エンジニア(1人)
ツール
Figma, Lavable, Github, Supabase
役割
UIUXデザイナー
期間
3ヶ月 (2025年5月~7月)
プロジェクト概要
AIが注目される中、「デザイナーが開発工程にどこまで関われるのか」をテーマに取り組みました。日々の献立管理に悩む友人と共同で献立管理アプリを開発を通じて AIコード生成ツール（Lovable）を活用しデザインから実装までを迅速に実現。 バックエンドはエンジニアの協力を得てSupabaseで構築しました。 このプロジェクトを通じてAIツールを活用した開発プロセスとチームでの協働を経験しました。
問題提起
ユーザーインタビューやリサーチを通して以下の課題を発見しました
日々の献立を考えるのがストレス
レシピ登録が不便
買い物リストを作るの面倒
忙しい日々を過ごす社会人や子育て世代の人たちが持つストレスを解決するためのアプリ開発が必要であると理解しました。
ゴール
課題解決のために、以下の点を目指しました。
チャット形式でレシピ登録が簡単にできる
登録したレシピをもとにAIが献立を自動提案
作成した献立から自動で買い物リストを作成
このように、AIを活用することで時間をかけずに献立管理〜買い物リストまで作成できるサービスができました。
リサーチ
ユーザーインタビュー
ターゲット層は30〜40代の独身や子育て世代
ターゲット層を子育てまたは独身の30、40代に絞り、仕事や子育てで時間がない中で実際にどのようなところで献立管理につまづいているか調査した。
子供がいる女性２名（30代）にインタビューを敢行。ユーザーから収集したペインポイントをカテゴリーごとに分類し、それぞれに対してどのような解決策が考えられるかをチームでブレインストーミングを行いました。
競合調査
日本国内外の4つの献立アプリを分析
レシピが豊富に登録されている料理初心者向けのアプリから、自分のレシピを登録できる上級者向けのものまで多様なサービスを提供していることがわかった。
特にAIの自動献立生成を要するアプリはAIを活用するサービスを目指している私たちにとってどのようにして独自の価値を生み出せるのかを考えるきっかけとなった。
ペルソナ
社会人・子育て世代のペルソナを作成
リサーチをもとに社会人・子育て世代両方のペルソナを作成することによって、ユーザーの行動パターンや課題を明確化し「誰のための機能か」を常に意識した開発を可能にした。
ユーザーフローの作成
ユーザーからのペインポイントを元に、ユーザーがどのような流れでアプリを利用したらいいかチームで話し合い、ユーザーフローを作成した。
解決策
01
チャット形式で自分のレシピ登録
チャットで会話するようにレシピを登録。レシピ名はもちろん、画像やサイトURLを送るだけで、AIが自動的にレシピカードを作成します。レシピは編集・保存が可能。
02
献立自動作成
保存したレシピを元に献立を自動作成が可能。
03
買い物リストの自動作成
作成した献立から自動で買い物リストの作成を可能にしました。
デザイン
実装
Lovableでの実装
AIコード生成ツールを利用し自然言語で指示
はじめに完成したワイヤーフレームをLovableに落とし込みました。UI自体は整っていましたが、この段階では多くの機能がまだ動作していませんでした。例えば、Google Gemini APIを設定しておらず、AIによるレシピ生成や献立作成は行えませんでした。その後、APIを統合し、プロンプトを繰り返し改善していくことで、実装を意図したユーザーフローにより近づけることができました。
Lovableの実装画面
Supabaseの導入
ユーザー情報・レシピデータの体系的な管理
実装を進め、エンジニアとのミーティングを重ねる中で、ユーザー情報をデータベースにリンクし保存する必要性が明確になりました。そこで、Supabase を導入し、レシピ・献立・ユーザー情報を体系的に保存できるスキーマを設計。これにより、アプリがユーザーに最適化されたデータを提供できる基盤を構築しました。
また、バグの修正が出た時にGithubを利用し常にお互いにアップデートする体制を作りました。
Supabaseの画面
テスト
ユーザビリティテスト
6つのタスクの結果から改善の道を模索
リモートで３名にユーザーテストを実施。タスクを事前に用意し、実際に利用してもらった。多くのフィードバックやペインポイントを収集した。
主なフィードバックやペインポイント
改善
01
写真・画像選択アイコン設置
写真のアップロード、カメラ起動をよりわかりやすくするためにチャット画面下部にアイコンを設置。
02
オンボーディングの設置
オンボーディングからチュートリアルスライド→サインアップ・サインイン→ホーム画面→ツールチップによる説明に変更することでユーザーの導線を遮らないようにした。
03
ローカライゼーション対応
英語だけでなく、日本語への言語設定もできるようにし、より幅広いユーザーが利用しやすいようにした。
