← 一覧に戻る

メシテロ — 食品入力UXリデザイン

2026年2月27日 15:07 更新

📌 一言でいうと

食品入力を3つに整理し、バーコード連続スキャンを実装する

🎯 なぜこれが必要なのか

現在の食品入力には3つの問題がある:

🏗️ 何をするのか

Baby Steps（少しずつ確実に進める方法）で3段階に分けて実装する。各ステップ完了後にテストして動作確認してから次に進む。

1 「記録メニュー」バグ修正

命令メニューを報告したとき、食べた食品の名前が保存されていなかった。データベースに保存する際に食品名を一緒に記録するよう修正する。

修正前

  • 履歴に「記録メニュー」と表示
  • 何を食べたか分からない

修正後

  • 履歴に「サラダチキン、おにぎり」等の食品名が表示
  • 食べたものが一目で分かる
2 連続バーコードスキャン

画面を上下に分割する。上半分はカメラ（バーコードを読み取る）、下半分はスキャン済み商品のリスト。バーコードをかざすたびにリストに追加されていく。

スキャン画面のイメージ

┌─────────────────────────────┐ │ ← 閉じる │ ├─────────────────────────────┤ │ │ │ 📷 カメラ（上半分） │ │ バーコードをかざすだけ │ │ │ ├─────────────────────────────┤ │ スキャン済み (3品) │ │ ✓ カップヌードル 349kcal ✕ │ │ ⟳ 読み込み中... ✕ │ │ ⚠ 未登録品 (4902...) ✕ │ │ │ │ [ 完了 ] │ └─────────────────────────────┘

各商品の右にある ✕ ボタンで、間違ってスキャンしたものを削除できる。「完了」を押すと結果一覧に切り替わる。

結果一覧画面のイメージ

┌─────────────────────────────┐ │ スキャン結果 │ ├─────────────────────────────┤ │ カップヌードル │ │ 349kcal P11g F10g C50g │ │ [登録] │ ├─────────────────────────────┤ │ 不明な商品 (4902102...) │ │ 成分情報なし │ │ [提供] │ ├─────────────────────────────┤ │ ※すべて登録すると戻ります │ └─────────────────────────────┘
3 未登録品の撮影 + 手入力フォーム

「提供」をタップすると、まず栄養成分表を撮影、次にパッケージを撮影する。AIが読み取った情報がフォームに自動入力される。足りない情報だけ手で入力すればOK。

撮影フロー

前回実装したOCR並列化（成分表の読み取りとパッケージ撮影を同時に行う仕組み）をそのまま活用する。

  1. 成分表ラベルを撮影 → AIが栄養データを読み取り開始（バックグラウンド）
  2. 待ち時間なしでパッケージを撮影 → AIが商品名とメーカーを認識
  3. 両方の結果を合わせて、編集フォームに自動入力

入力フォームのイメージ

┌─────────────────────────────┐ │ 食品情報を入力 │ ├─────────────────────────────┤ │ 商品名 │ │ [カップヌードル シーフード] │ │ │ │ メーカー・店舗名 │ │ [日清食品 ▼] │ │ ├ 日清食品 │ │ ├ 日清オイリオ │ │ └ + 新しく追加 │ │ │ │ カロリー P(g) │ │ [349] [11.2] │ │ │ │ F(g) C(g) │ │ [9.8] [49.5] │ │ │ │ [この内容で登録] [やめる] │ └─────────────────────────────┘

緑色の部分はAIが自動入力した値。読み取れなかったフィールドは空欄になるので、手で入力する。全フィールドを編集できる。

メーカー・店舗名は選択式: 過去に登録されたメーカーのリストから選ぶ。文字を入力するとリストが絞り込まれる。リストにない場合は「新しく追加」で新規登録できる。毎回手打ちする必要はない。

📊 全体の流れ

食品の入力方法が3つの明確なパターンに整理される:

パターン1: テキスト入力

「カップヌードル」等と入力 → AIが栄養を推定 → 確認して登録

パターン2: バーコードスキャン

連続スキャン → 完了 → 既存品は「登録」/ 未登録品は「提供」で撮影+入力

パターン2-3: 修正（小さい文字）

バーコードで見つかった商品の情報が間違っている場合の修正導線。目立たない配置にして、気になる人だけ使う

💡 ポイント

Baby Steps で安全に進める: Step 1（バグ修正）はたった1行の変更。まずこれを確認してから、Step 2の大きな変更に取りかかる。一度に全部変えると壊れた時の原因特定が難しい。

前回の成果を活用: Step 3 のOCR撮影フローは、前回実装した「成分表+パッケージの同時撮影」の仕組みをそのまま使う。車輪の再発明はしない。

連続スキャンの体験: レジの会計のように、商品をどんどんかざしていくだけ。スキャン中に1品ずつ確認する必要がなく、最後にまとめて処理する。

📝 質問モード — テキストを選択してね
✓ 質問を送信しました