【個人開発】AIの力を借りて、毎日の移動を冒険にするWebサービスを開発してみた

はじめに

うつ病を患った後、毎日の通勤や買い物、とにかく外に出るのが怖くてしょうがない。たかが外出かもしれないが、自分にとってはそれは一つ冒険でした。
ならば、「この移動をゲームのようにして、楽しめないか？自分の冒険を記録できないか？」と考えたのが、このプロジェクトのきっかけです。日々の移動を**「冒険ログ」**として記録し、ダンジョン風マップで楽しめるWebサービスを個人開発しました。ただ、普段バリバリプログラムを書いているわけではないので、CursorとChatGPTを相棒に作成しました。

本記事では、開発の背景から技術スタック、AI活用の実際、困ったポイントとTipsまでまとめています。Qiitaの読者の方に「自分でも作れるかも」「ここは真似してみたい」と思っていただければ幸いです。また、実際にサービスに触ってみて楽しんでいただけると嬉しいです。

---

アプリのコンセプト

• 日常の移動を「冒険」という概念に変換
  

• 思い出したときにセーブデータを記載するように、その日のスタート地点とゴール地点を記載すると、ダンジョン風マップを自動生成して、経験値/体力ポイント/健康ポイントを割り振る
  
  

• ログを蓄積して、冒険者である自分を成長させられる
  

• PWA対応でスマホにインストール可能、オフライン耐性あり

「日々の移動をログにするだけで、RPGの冒険譚が積み上がっていく」ことを狙いました。

---

技術スタックと選定理由

フロントエンド

• React (Vite + TypeScript)：開発体験が軽快、型安全
• React Router DOM：シンプルな画面遷移管理
• Zustand：軽量な状態管理（Reduxよりシンプル）
• Tailwind CSS：デザインの試行錯誤を高速化
• Canvas 2D API：ダンジョンマップ描画
• PWA（vite-plugin-pwa）：ホーム画面インストール（オフライン対応未対応）

バックエンド / BaaS

• Supabase：認証、DB、RLSを一気に解決

  • 特にRow Level Securityを活用して「本人のみ参照可能」「削除済みユーザを即遮断」を実現

経路生成

• OSRM：ルートをCanvas描画向けに変換

デプロイ / 運用

• Vercel：プレビュー環境や環境変数管理が楽で、個人開発との相性が抜群

---

実装で役立ったAI活用シーン

開発の随所でChatGPTが登場したところは以下です。

• 全体コンセプトのブレスト：全体のコンセプトや機能に関する壁打ち
• UIデザインのブレスト：全体の雰囲気や個別のボタンのデザイン、画像の制作などで相談したり生成してもらったりしています
• 文言の表現調整：文章などの提案やブレスト、細かいニュアンスなどの壁うち相手
• Cursor用タスクファイル（基本設計）：Cursor側に理解してもらうためのコンセプトや実行するタスクをChatGPTに生成してもらう

Cursorはこのタスクファイル（基本設計）を熟読した上で、開発を進めていきました。

AIを使用してちょっと困ったこと。

1. まず、Cursor Autoモードで使用しているときある程度のチャットを超え始めると、時折壊れたように同じ事をひたすら繰り返す無限ループに入ることがありました。例えば、「プライバシーポリシーのオーバーレイとチュートリアルのオーバーレイの表示順番が違うので、先にプライバシーポリシーを表示して」みたいな指示を出したところ、
   先にチュートリアルを修正→プライバシーポリシーに影響が出る→プライバシーポリシーを戻す→チュートリアルが元に戻る→最初に戻る、ということが多発しました。

2. 作業を依頼しても、サンプルを出すだけ実装を開始しない。何度聞いても同じ事を繰り返すといったことも多発しました。

工夫、対応した方法

1. まず、「今までの会話記録などすべて忘れてください」という指示でCursorの記憶を消していました。
2. タスクの指示について、結局基本設計だけだと、足りない部分があり、詳細な設計書を作成することにしました。各指示を出すために「docs配下を熟読した上で～」という指示をしています。
3. 無限ループのような事態を防ぐ方法として、もっと明示的に示してあげる必要がありました。オーバーレイの例でいうと、表示順番、表示条件、表示内容などを細かく条件として箇条書きで渡すことで、再発しなくなったので、場合によっては自分でさっさと修正した方が早いです。
4. 作業を依頼しても、実施しない件については、最初は設定していたルールを疑っていました。削除作業や依頼していない作業は勝手に実施しないことをプロジェクトルールとして設定していたが、そのルールを削除しても同じ現象が起きています。Autoモードを解除し、gpt5など指定したところ、再発しなくなりました。これに関して、謎が多いです。

今後の展望

• クエストの実装を考えています。せっかくのステータスがあるのであれば。
• 冒険共有などの機能。SNSなどに投稿できたらと思っています。
• テストや監視の整備など…
• 有償…化（どこかで、お金をすこし）

---

もし興味があれば、ぜひベータ版を触ってみてください！フィードバックも大歓迎です 🙌