MOARU

みんなで共有する買い物リストアプリ。SNSや雑誌で見つけたレシピも、写真1枚から材料をまとめてリストに追加できます。企画からUX設計、デザインシステム、Flutterでの実装まで、1人で手がけている個人開発プロダクトです。

SNSで見つけたレシピも、写真から一瞬でリストへ

気になったレシピはスクリーンショットで残しても、材料を1つずつ打ち直すのが面倒で、結局買い忘れる。そこで写真を選ぶだけで、材料をまとめて買い物リストに追加できるようにしました。

読み取るのは「材料」の段だけ。投稿の時刻・いいね数・作り方の文章は除外します。結果は確認シートに並び、読み違いをその場で直してからワンタップで追加。文字認識は端末の中だけで行い（iOS Vision / Android ML Kit）、写真は外に送りません。

課題

買い物リストを共有しても、「家にあるのに買ってしまう」「切れているのに誰も買わない」が起きる。一方で在庫を記録するアプリは手間が大きく、続かない。

在庫リストをやめる、という判断

最初は「買い物リスト」と「在庫リスト」を同じ規則で行き来させる設計でした。自分で実際に使ってみると、個数を持たないので複数ストックの物を表せず、在庫が長くなるほど「使い切った物を探して戻す」より打ち込むほうが早い。人が動くのは「なくなったとき」で、そのとき開くのは買い物リストでした。

そこで在庫リストを廃止し、買い物リスト1本に絞りました。チェックすると購入の記録が残り、次に打ち込むときの候補になります。アプリが覚えるのは「家にあるか」ではなく「いつ買ったか」です。

打ち込む手間を減らす

「牛」と打てば、30日以内に買った牛を含む物が最近買った順に出る。ひらがなの読みも覚えているので、「しょうゆ」と打てば醤油に当たる。空欄のときは、2回以上買った「よく買うもの」を出します。

デザインシステム

Figmaを唯一の正本として、色・文字・余白をトークンで定義し、35のコンポーネントを揃えました。色の組み合わせは Light / Dark の両方で、コントラスト基準（WCAG AA）を満たすか検証しています。

Figmaから実装まで

Figma MCPでFigmaの変数を書き出し、スクリプトでFlutterのトークンを生成。トークンのコードは手で編集せず、ウィジェットはFigmaのコンポーネントと1対1で対応させています。仕様を変えるときも、まずFigmaで固めてから実装します。

アプリを開かなくても使える

ホーム画面・ロック画面のウィジェットと Apple Watch から、その場でチェックできます。

使っているツール

Figma（Variables / Components）、Claude Code、Codex、Figma MCP、Flutter、Firebase（Auth / Firestore）