個人開発で3Dの食事管理ゲーム「カロリークエスト」を作った全記録（技術・構成・費用）

公開日 2026年10月18日

カロリークエストとは

食事管理を「ゲーム」にしたWebアプリです。

正直に言うと、ダイエットは楽しくありません。

食事を毎回記録するのはめんどくさいし、結果が出るまでの道のりは長い。最初はやる気があっても、モチベーションを保ち続けるのが一番難しいと感じていました。

そこで、食事管理そのものを楽しくできないかと考えたのが始まりです。減らしたいカロリーを「モンスターのHP」に置き換えて、毎日のカロリー赤字で少しずつダメージを与えていく。長い道のりも、1体ずつ倒していくゲームなら続けられるのでは、と思って作りました。

目標体重から敵の総HPを決める：脂肪1kgをおよそ7,200kcalとして、減らしたい体重分のHPを計算します
1体10,000kcalのモンスターに分割：大きな目標を、倒せるサイズの敵に分けています
1日のダメージ＝消費カロリー − 摂取カロリー：消費カロリー（TDEE）は Mifflin-St Jeor の式に活動係数をかけて計算し、運動の分を足します。判定するのは食事を記録した日だけです
食べ過ぎた日はモンスターが回復する：倒したモンスターは復活しません
ステージごとに世界観が変わる：はらぺこ草原（ポップ）、暴食の古城（ダーク）、ネオン・ジャンクシティ

役割	使ったもの
フロントエンド	Vite + React + React Three Fiber（3D表示）
ホスティング・API	Cloudflare Pages + Pages Functions
AIの写真推定	Cloudflare Workers AI
認証	Clerk（Supabaseと連携）
データベース	Supabase
アクセス解析	PostHog
メール	Resend（モンスター討伐の通知）
決済	Stripe（準備中）

選んだ理由はシンプルで、無料で始められるからです。

個人開発は、お金になるかどうか分からない段階で作り始めます。最初から毎月お金がかかると続けにくいので、どのサービスも無料枠から始められるものを選びました。

一番苦労したのは、料理の写真からカロリーを推定するAI機能の精度です。

写真を送るだけでカロリーが分かれば記録の手間が大きく減るので、「めんどくさい」を解決するための大事な機能でした。ところが、最初はなかなか思ったような数字が出ませんでした。

精度を上げるためにやったこと：

中でも効いたのは、食事の写真データを取り入れて、料理を判別しやすくしたことです。 AIに「この写真は何の料理か」を見分けやすくする手がかりを与えることで、推定がぶれにくくなりました。

かかった費用は、月3,000円ほど。中身は、開発に使ったClaude Code（AI）の利用料です。

ホスティング、データベース、認証などのサービスは、無料枠から始められるものを選びました。

項目	費用
Claude Code（開発に使ったAI）	月3,000円ほど
ホスティング・データベース・認証など	無料枠で利用

作り始めてから形になるまで、約2週間でした。

このアプリは、ほぼClaude（AI）と一緒に作りました。

やり方はシンプルで、やりたいことをひたすら伝えるだけです。「こういう画面にしたい」「この数字はこう計算したい」と日本語で伝え、分からないところは質問して、Claudeを壁打ちの相手にしながら少しずつ形にしていきました。

一人で調べながら作っていたら、2週間では到底終わらなかったと思います。

一番の学びは、座学より、自分で作って体験したほうがいいということです。

本や動画で知識を入れるだけでは分からなかったことが、実際に作ってみると次々に出てきます。写真推定の精度のように、やってみて初めて「ここが難しいのか」と分かることばかりでした。

これからプログラミングを学ぶなら、まずは小さくてもいいので「自分が欲しいもの」を1つ作ってみるのがおすすめです。 AIに相談しながらなら、最初の一歩のハードルはかなり下がっています。