筋トレと食事管理を1つにしたPWAを個人開発した【Next.js + Supabase + OpenAI】
あすけんで食事、Hevyで筋トレ…2つ使い分けるの面倒じゃない？
筋トレしてる人なら共感してもらえると思う。
食事管理はあすけんやカロミル。筋トレ記録はHevyやStrong。それぞれ良いアプリだけど、PFC(タンパク質・脂質・炭水化物)の摂取量とトレーニングボリュームの関係を見ようとすると、2つのアプリを行ったり来たりすることになる。
「今日タンパク質足りてないけど、トレーニングのボリュームはどうだっけ？」を1画面で見たい。
ないなら作ろうと思って作った。
Bodeli — 筋トレ × 食事を、ひとつに。
できること
食事記録 + AI栄養推定
食事内容をテキストで入力すると、OpenAI APIが日本食品標準成分表ベースでカロリー・PFCを自動推定する。「鶏むね肉のサラダ」と入力するだけで、手動で栄養素を調べる必要がない。
もちろん推定結果は手動で修正もできる。
筋トレ記録
種目・重量・レップス・セット数を記録。1RM(推定最大重量)を自動計算してくれるので、各種目の成長が追える。テンプレート機能で「胸・三頭の日」「脚の日」などよく使うメニューを保存しておける。
セット間にはレストタイマーも内蔵。
ダッシュボード
これがBodeliのコア。1日のカロリー収支、PFCバランス(プログレスバー)、トレーニングボリューム、週間トレンドチャートが全部1画面に収まっている。
食事とトレーニングを同じ画面で見れるから、「今日は脚の日でハードにやったけど、タンパク質まだ足りてない」みたいな判断がすぐできる。
AIフィードバック
1日の食事とトレーニングの記録を元に、AIがフィードバックを出す。「タンパク質をあと42g摂ると目標達成」「トレーニングも記録済みで、今日のボリュームは12,500kg」のように具体的な数値で教えてくれる。
技術スタック
| レイヤー | 技術 |
|---|---|
| フレームワーク | Next.js 16 (App Router) |
| 言語 | TypeScript |
| 認証・DB | Supabase (Auth + PostgreSQL) |
| AI | OpenAI API (gpt-4o-mini) |
| デプロイ | Vercel |
| CSS | Tailwind CSS v4 |
| チャート | Recharts |
| テスト | Vitest + Testing Library |
PWAとして動く
App Storeを通さず、ブラウザでアクセスするだけで使える。ホーム画面に追加すればネイティブアプリのような体験になる。
Service Workerでオフライン対応、Web App Manifestでアイコンとスプラッシュスクリーンを設定済み。
デザインへのこだわり
競合のフィットネスアプリを調査して、独自のデザインシステムを構築した。
- アンバーアクセント(#F59E0B): 競合はみんなブルーかグリーン。アンバーは「エネルギー、強度、結果」を連想させる
- Outfitフォント: 見出しと数値表示に使用。ジオメトリックでクリーン、数字が揃って読みやすい
- ダークモード: ジムでの視認性を考慮。目に優しいダークグレー(#111111)ベース
AI食事解析の仕組み
ユーザー入力: "鶏むね肉のサラダ"
↓
OpenAI API (gpt-4o-mini)
- 日本食品標準成分表ベースで推定
- 量が不明な場合は一般的な1人前で計算
↓
JSON: {"calories": 320, "protein_g": 38, "fat_g": 8, "carbs_g": 12}
↓
ダッシュボードに反映
gpt-4o-miniを使っているのでコストは1回あたり約0.1円以下。個人開発でも十分運用できる。
悪用防止のため、1日10回のレート制限とプロンプトインジェクション対策も入れている。
苦労したところ
日本語フォントのレンダリング
Noto Sans JPは日本語の読みやすさでは最強だけど、数値表示にはイマイチ。数字が等幅にならないので、PFCの数値がガタガタになる。
解決策として、見出しと数値にはOutfitフォント(tabular-nums)を使い、本文はNoto Sans JPという2フォント構成にした。next/font/googleで両方読み込んでCSS変数で切り替えている。
Supabaseの認証フロー
Supabaseのマジックリンク認証はPKCEフローで、redirect_toがSupabaseプロジェクトの設定値に固定される。ローカル開発時にlocalhost:3000にリダイレクトさせるには、Supabaseダッシュボードの「Redirect URLs」にlocalhost:3000を追加する必要がある。
テストユーザー募集中
友人に使ってもらいながら改善してきて、「これないと困る」と言ってもらえるようになった。
もっと多くの筋トレ民に使ってもらって、フィードバックをもらいたい。
Bodeli: https://bodeli.vercel.app
筋トレと食事管理を両方やっている人、ぜひ試してみてほしい。感想・バグ報告・機能リクエスト、何でも歓迎です。
Googleアカウントかメールアドレスですぐ始められます。