減脂小豬

減脂小豬（「減量の子ブタ」）は、LINE の中だけで完結する食事記録プロダクトです。ユーザーがランチの写真を送ると、bot が料理を認識し、台湾の「六大食品群」の交換表にもとづいて量を推定し、ワンタップの確認を求め、その日の残りの目安量を返信します。アプリのダウンロードも、アカウント登録も、カロリーの手入力も不要です。

このケーススタディでは、どのようにつくったのか、そしてなぜそうしたのかを紹介します。LINE 上でのプロダクト開発を検討しているチームに向けて書いています。

なぜアプリではなく LINE なのか

台湾、日本、タイでは、人々はすでに LINE にいます。ダイエットアプリをもう一つインストールしてもらうのはハードルが高いですが、LINE で友だち追加してもらうのはそうではありません。このことがすべてのプロダクト判断を形づくっています：

• インストール不要、登録不要。 LINE のユーザー ID そのものがアカウントです。オンボーディングは「友だち追加 → 最初の写真を送る」だけ。
• 会話が UI。 いちばん速い操作は、ユーザーがもう知っている操作です。写真を送る、ボタンを押す。
• プッシュがネイティブ。 リマインダーや週次レビューは、ユーザーが毎日開くのと同じトークに届きます。通知許可のダイアログも、メールもありません。

トレードオフは、トーク画面が狭いキャンバスだということです。メッセージより豊かなもの——履歴の閲覧、記録の編集、グラフ——には別の画面が必要になります。そこで LIFF の出番です。

ユーザー体験

1. 写真 → 構造化されたログを 1 往復で

1. ユーザーが食事の写真を送る（または 紀錄 拿鐵 224克 と入力する）。
2. Webhook が画像をビジョンモデルに送り、モデルが構造化された内訳を返す：料理名、推定グラム数、食品群ごとの単位数。
3. Bot が LINE Confirm Template で返信する：短い要約と ✅ 儲存（保存）/ ❌ 取消（キャンセル）ボタン。
4. ✅ を押すと記録が保存され、bot が今日の残りの目安量を返信する：

✅ 已儲存：雞腿便當

今日還能吃：
五穀雜糧  ▓▓░░░  剩 2.0 份
豆魚肉蛋  ▓░░░░  剩 9.0 份
蔬菜      ░░░░░  剩 6.0 份
油脂堅果  ░░░░░  剩 4.0 份

この確認ステップが重要です。AI の推定は優秀ですが完璧ではありません。自分が同意していない間違った数字を見たユーザーは、プロダクトを信頼しなくなります。「仮保存してから確認」というフローなら、ワンタップのまま、ユーザーが主導権を持ち続けられます。

2. リッチメニューをアプリのホーム画面に

リッチメニューは、トーク画面の下部に常に表示されるナビゲーションバーです。コードから生成し（SVG → PNG）、Messaging API でアップロードし、一つのスクリプトでデフォルトに設定しています。メニューの変更は、管理画面での手作業ではなく、一つのコミットで済みます。

3. トークでできないことは LIFF ミニアプリで

「拍照記錄（写真で記録）」をタップすると、LINE 内で LIFF（LINE Front-end Framework）のウェブアプリが開きます。中身は普通の Next.js のページですが、ユーザーの LINE アカウントで動くため、ログイン画面はありません。提供している機能：

• 日ごとの集計と食品群のチップを表示する週ビュー
• 記録の編集と削除
• 体重の記録と推移グラフ
• 個人の栄養目標

また、端末のタイムゾーンをこっそりサーバーに送っているので、「今日」はそのユーザーにとっての今日になります。小さなことですが、旅行中や海外在住のユーザーに起きる「1 日ずれる」系のバグをまるごと防いでいます。

4. 自然言語コマンドと、任意の AI 相棒

写真以外にも、bot は普通の中国語を理解します：日記（今日のまとめ）、週報（7 日間の振り返り）、我今天還可以吃什麼（今日の残量にもとづく AI の提案）、低脂那一份來自什麼（その 1 単位がどの食事から来たか）、目標 蔬菜 5（目標の更新）。跟我聊天 で自由な AI チャットをオンにし、閉嘴 でオフにできます。呼ばれない限り、bot が自分から話しかけることはありません。

アーキテクチャ

LINE app
  └─► Messaging API
        └─► /api/line/webhook  (Next.js on Vercel, Tokyo)
              ├─ text     → command router / AI chat
              ├─ image    → vision parse → confirm card
              └─ postback → save or cancel → allowance reply

LIFF mini app ──► Next.js API routes
Cron jobs     ──► weekly review · re-engagement · D1 reminder

Everything reads and writes Supabase (Postgres + RLS).

• Next.js App Router で、webhook、LIFF アプリ、マーケティング用のランディングページ、SEO ブログを一つのコードベースから提供。
• Vercel は東京リージョンに固定し、LINE のサーバーと台湾のユーザーの近くに置いています。
• Supabase Postgres では、公開用の anon key（ブラウザ側、RLS で保護）と service-role key（サーバー専用）を厳密に分けています。スキーマは番号付きの 16 本の SQL マイグレーションで管理。
• OpenAI のモデルはタスクごとに選択：写真と修正には強いモデル、テキストのログには安いモデル。すべての呼び出しは一つのゲートウェイ関数を通り、ユーザーごとのトークン使用量を記録するので、アクティブユーザーあたりのコストは推測ではなくクエリで分かります。
• ドメイン知識をコードに。 六大食品群の分量ルールはコードとして実装し、モデルの応答後に検証しています。モデルが栄養表を覚えていると信じることはしません。

LINE ならではの学び

LINE でつまずきやすく、どのクライアント案件にも持ち込みたいポイントをいくつか：

• Reply token はすぐに失効する。 Webhook は数秒以内に応答しなければなりません。遅い処理（ビジョンモデルの呼び出し、DB 書き込み）は高速にするか、ユーザーにすぐ反応が返る構成にする必要があります。
• プッシュメッセージは通数を消費し、リプライは消費しない。 ほとんどのメッセージがユーザーの操作への返信になるようにフローを設計し、プッシュは価値の高い場面（週次レビュー、一度きりの再訪の呼びかけ）に取っておきます。
• しつこくしない。 再訪を促すジョブは、ユーザーが N 日間静かなときに一度だけ声をかけます。毎日ではありません。スパムを受けた離脱ユーザーはアカウントをブロックし、ブロックは永久です。
• テンプレートとクイックリプライは自由入力に勝る。 ボタンは入力ミスを減らし、AI のコストを下げ、bot をアプリのように感じさせます。
• Webhook の署名とシークレット。 すべてのリクエストをチャネルシークレットで検証し、サーバー専用のキーはクライアントのバンドルに絶対に含めません。

本番環境での運用

bot をリリースするのは仕事の半分です。個人開発者として健全に運用し続けるには、いくつかの自動化が必要でした：

• LINE 経由のオンコール通知。 捕捉されなかったサーバーエラーはすべてフィンガープリント化され、重複排除されます。初回の発生（およびリグレッション）は、自分の LINE アカウントに通知がプッシュされます。
• エージェントによる修正支援。 定期実行のコーディングエージェントが新しいエラーを拾い、リポジトリを調べ、修正を書き、lint とテストを実行し、ドラフトのプルリクエストを開いて私のレビューを待ちます。マージするのは人間で、エージェントはエラーから修正までの時間を短くするだけです。
• ファネルとリテンションのレポート。 最初の写真、最初の確認、再訪などのイベントを記録し、どこでユーザーが離脱しているかを把握しています。再訪の呼びかけや改善したオンボーディングメッセージは、ここから生まれました。
• すべての PR で CI。 Lint と 50 以上のファイルからなる Vitest のテスト。「今日」に依存する処理には、時間を固定したテストを用意しています。
• 集客のためのコンテンツ。 実用的なガイドのブログ（コンビニでの食べ方、火鍋、夜勤の食事、TDEE）が検索流入を LINE の「友だち追加」CTA へ導いています。

LINE プロダクトが必要なあなたにとっての意味

減脂小豬は私自身のプロダクトですが、その構成要素は多くの LINE 案件で必要になるものと同じです：

• アプリをインストールせずにお客様とやり取りしたい → LINE 公式アカウント + webhook bot
• LINE 内のフォーム、ダッシュボード、予約や編集画面 → LINE ログイン内蔵の LIFF ミニアプリ
• トーク内のブランドらしいホーム画面 → コードで生成するリッチメニュー
• 写真や自由文を理解する AI → 「保存前に確認」付きのビジョン + LLM パイプライン
• 定期的なリマインダーとレポート → 通数を意識したルールで cron から送るプッシュ
• 動き続けるという安心感 → エラー通知、CI、使用量のトラッキング

お手伝いできる典型的な案件：店舗やクリニック向けの会員・ポイント bot、予約とリマインダーのフロー、注文フォームや顧客ダッシュボードのための LIFF ミニアプリ、AI カスタマーサービスや受付 bot、既存のバックエンドと LINE の連携など。