TL;DR
- Claude Code に PM・PdM・UI/UX・マーケター・エンジニアの5エージェントを定義し、自分は「CEO」として判断だけする体制で Web アプリを作りました
- 2026/10/24 の最初のコミットから3日間で、本番公開・招待・リール動画・SEO 対策まで到達。34コミット・15PR・アプリ本体のコード約6,100行
- うまくいった鍵は、AIの賢さよりも**「勝手に動かさない仕組み」**でした
- エージェント同士の相談は人間の承認制
- 本番DBに触れない構造
- 次のセッションに記憶を渡すドキュメント運用
- 作ったのは、仲間と行った場所を地図に残して、最後に Vlog みたいなリール動画になるアプリ「ロカログ（LocaLog）」です
この記事では、エージェントの定義ファイル、CLAUDE.md の設計、実際に起きた事故と防ぎ方まで、そのまま真似できる形で全部出します。
作ったもの
ロカログは、友達グループやカップルが「行った場所」を写真とひとことで記録していく、招待したメンバーだけの地図です。
- 行った先で「ここにいる」を押して写真を1枚。ピンが地図に増えていく
- 記録は日ごとにルートでつながり、行った順にストーリーで振り返れる
- 旅の最後に、地球儀から始まる最大30秒の縦型リール動画をブラウザだけで自動生成
- LINE で招待リンクを送るだけで参加できる（登録不要・アプリのインストールも不要）
使ってみるとこんな感じ
5人で卒業旅行に行く場面で、実際の流れを紹介します。
① 出発前：LINE に招待リンクを貼るだけ
マップ名（「タイ旅行2026」など）と絵文字を決めて、招待リンクを LINE グループに貼ります。リンクのプレビューには、マップ名と招待した人が表示されます。
受け取った友達は、リンクを開いてニックネームと色を選ぶだけで参加できます。登録もアプリのダウンロードもいりません。
② 旅行中：記録は10秒で終わる
画面下の 「ここにいる」 を押すと、地図の中央にピンが立ちます。地図を少し動かして位置を合わせ、「ここで記録」を押します。
近くのお店や観光地の名前が候補に出るので、タップすればタイトルが入ります。あとは「カメラで撮る」か「アルバムから」で写真を1枚。ひとことは書いても書かなくてもOKです。
記録すると、自分の色の丸いピンに写真が入って地図に立ちます。仲間が記録したピンも同じ地図に増えていきます。
- ピンをタップすると写真が開き、絵文字でリアクションできます
- 画面の左右の端を上下になぞると、片手でズームできます（電車でつり革を持っていても使えます）
- 地図の長押しや場所の検索からも、あとから記録できます
③ 帰り道：行った順に地図をたどる
「ストーリー」タブには、行った場所が日ごとに時系列で並びます。記録は日ごとに色分けされたルートでつながります。
「ルートを再生」を押すと、Instagram のストーリーのように1か所ずつ自動で進みます。地図はスポットからスポットへ飛び、ルートが少しずつ伸びていきます。
- 画面の右側をタップすると次へ、左側をタップすると前へ進みます
- 指で押さえている間は一時停止し、そのまま指を動かすと周りの地図を見られます
- 「あ、あの店を記録し忘れた」というときは、タイムラインの**「この間に追加」**から、正しい順番に差し込めます
④ 最後に：リール動画でシェア
シェアから「リール動画を作る」を押すと、30秒ほど待つだけで縦型動画ができあがります。
地球儀が旅先まで回ってズームし、ピンが落ちます。そこから行った順に写真と地図が切り替わり、最後は旅のルート全体で締めます。
動画は共有メニューから Instagram のリールや TikTok に送れます。音楽は投稿先のアプリで付けます。写真1枚にまとめたシェア画像も作れます。
⑤ その後：同じメンバーで、地図が育っていく
マップは旅行ごとに作っても、同じグループで使い続けてもOKです。カバー写真を LINE グループのアイコンのように設定できます。
次に開いたときに、去年のピンが残っている。この**「使うほど思い出が増えていく」**感じを大事にしています。
技術スタックは Next.js 16（App Router）/ Tailwind CSS v4 / Leaflet / Supabase / Vercel です。
数字で見る3日間
| 項目 | 数 |
|---|---|
| 期間 | 2026/10/24〜10/26 |
| コミット / PR | 34 / 15 |
アプリ本体（src/）のコード |
約6,100行 |
| DBマイグレーション | 3本（RLS・RPC・ストレージ込み） |
| RLS の自動テスト | 35項目 |
| 設計判断の記録（ADR） | 5本 |
| エージェント / スキル | 5体 / 3つ |
コードはほぼすべて Claude Code が書いています。私がやったのは、決めること・実機で触ること・外部サービスのアカウント作成の3つだけです（詳しくは後述）。
チーム構成：5人のエージェント
.claude/agents/ に、役割ごとの定義ファイルを置きました。
| エージェント | 担当 |
|---|---|
pm |
タスク分解、進捗、バックログ、Git運用 |
pdm |
ビジョン、ユーザーストーリー、MVPの範囲、品質評価 |
uiux |
モバイルの画面フロー、デザインシステム、ジェスチャー |
marketer |
招待の拡散導線、OGP、SEO / LLMO |
engineer |
実装、DB、セキュリティ、デプロイ |
エンジニアの定義はこんな感じです（抜粋）。
---
name: engineer
description: LocaLog Lead Full-Stack Engineer. Use for implementing features with Next.js (App Router, TS), Tailwind, Leaflet, Supabase (Postgres, Auth, Storage, RLS), and Vercel deployment.
---
You are the Lead Full-Stack Engineer for LocaLog (ロカログ).
## Language
- Converse with the user in Japanese.
- Write code, comments, commit messages, specs, and logs in English.
## Read first / write back
- Start: `CLAUDE.md` → `docs/HANDOFF.md` → `docs/INDEX.md` → ...; check `docs/adr/` before re-deciding.
- Finish: update `CLAUDE.md`, ADRs for decisions, tests/flows in the same PR,
so the next session (or agent) can continue without this conversation.
ポイントは2つあります。
- 会話は日本語、成果物は英語。 私とのやりとりは日本語で楽に、コードやドキュメントは英語で書かせて、ツールや将来の共同開発者と相性よくしています
- 「始めに読むもの」と「終わりに書き戻すもの」を必ず決める。 これがないと、セッションが変わるたびにAIが同じ議論をやり直します
いちばん効いたルール：エージェント間の相談は「承認制」
マルチエージェントで一番怖いのは、エージェント同士が勝手に相談し合って、人間の知らないところで話が進むことです。そこで、全エージェントの定義と CLAUDE.md に次のルールを入れました。
**Handoff rule (CRITICAL):** No agent — including the main session — may consult, delegate to,
or hand over to another agent without the user's explicit approval. Stop and ask in Japanese
with this format, then wait:
【Agent Handoff Request】
Current Agent: [Role]
Requested Agent: [Role]
Reason: [Brief explanation of why this handoff is needed]
May I proceed with consulting [Requested Agent]?
たとえば PdM が品質評価の途中でマーケターの意見が欲しくなると、こう止まって私に聞いてきます。
【Agent Handoff Request】
Current Agent: Product Manager (pdm)
Requested Agent: Marketer (marketer)
Reason: 招待リンクのプレビュー文言が、ターゲット層に刺さるか確認したい
May I proceed with consulting Marketer?
一手間増えますが、「誰が・なぜ・何を決めたか」を毎回人間が把握できるようになりました。結果的に手戻りが減り、スピードも落ちませんでした。
サブエージェントはユーザーに直接質問できません。そのため、「サブエージェントはこの依頼文を最後に出力して終了 → メインセッションが人間にそのまま見せて、承認されたら起動する」というリレー方式にしています。
記憶はドキュメントに置く
Claude Code は、会話が長くなると古い内容を要約します。セッションを変えれば、基本的には何も覚えていません。そこで、記憶をドキュメントとして持たせることにしました。
CLAUDE.md ← 作り方・構成・ルール（engineer が更新）
docs/HANDOFF.md ← 今どこまで進んだか・次に何をやるか（pm が毎回更新）
docs/INDEX.md ← どのドキュメントに何が書いてあり、誰が持ち主か
docs/adr/0001〜0005 ← 「なぜそう決めたか」「何を却下したか」
docs/product/backlog.md ← 優先度つきのタスク一覧
特に効いたのが ADR（Architecture Decision Record） です。
開発の途中で「移動ルートを実際の道路に沿わせたい」という話になり、経路検索 API で道路に沿った線を引く実装を入れました。ところが、API のレート制限（429エラー）と処理の重さで体験が悪くなり、直線に戻しました。
このとき「なぜ直線なのか」を docs/adr/0004-straight-routes.md に残しておいたので、その後のセッションで AI が「道路に沿わせると良いですよ」と同じ提案を蒸し返すことがなくなりました。
「決めたこと」だけでなく、「試してやめたこと」こそ書き残すのがコツです。書いておかないと、AIは何度でも同じ提案をしてきます。
スキルで「AIに自分で確かめさせる」
.claude/skills/ には3つのスキルを用意しました。
| スキル | 役割 |
|---|---|
mobile-preview |
Playwright で 390×844（iPhone サイズ）の画面を操作してスクリーンショットを撮り、一覧画像で確認 |
ship-check |
型チェック・Lint・本番ビルド・秘密情報の混入チェック |
db-change |
ローカルでマイグレーション → テスト → PR、という DB 変更の手順 |
一番効果が大きかったのは mobile-preview です。
AI は「CSS を直しました」と言いますが、実際には崩れていることがよくあります。そこで、UI を変えたら必ずスマホサイズで画面を撮らせ、その画像を AI 自身に見せて確認させることにしました。
画面フローは、こんな小さなスクリプトで書けます。
export default async function reel({ page, shot }) {
// ...シェア画面を開く
await page.getByRole("button", { name: /リール動画を作る/ }).click();
await shot("02-reel-progress", 4000);
await page.getByRole("button", { name: /Instagram・TikTok/ }).waitFor({ timeout: 150000 });
await shot("03-reel-ready", 1500);
}
動画も「再生して」確かめる
リール動画は、スクショでは確かめられません。そこで、書き出した動画を実際に頭から再生し、指定した秒数の画面を撮るところまで AI にやらせています。
この仕組みのおかげで、ある日「リールの冒頭で地球儀が止まったまま動かない」という不具合を AI 自身が見つけました。
原因を一緒に追うと、コードの問題ではありませんでした。同じ PC で動いていたローカル DB（Docker）が CPU を食い、ブラウザの動画エンコードが間に合っていなかったのです。DB を止めて撮り直すと、正常な動画になりました。
「動いたと言うだけ」ではなく、「見て確かめた証拠」を出させることで、AI の報告を信頼できるようになります。
本番を守る安全柵
AI に任せる範囲が広いほど、「やってはいけないこと」をルールではなく構造で防ぐことが大事でした。
1. 本番DBには物理的に届かない
Supabase の無料枠の都合でクラウド上のプロジェクトは本番の1つだけにし、開発用 DB は手元の Docker だけにしました（ADR 0001）。
さらに、RLS のテストスクリプト自体が、接続先がローカルでなければ実行を拒否します。AI が間違えて本番に向けても動きません。
2. マージするのは人間
PR の作成までは AI に任せていますが、main へのマージは必ず私が押します。
ちなみに一度、Claude Code の auto モードで AI にマージさせようとしたら、「レビューなしのマージ」としてツール側に止められました。安全柵が二重にあるのは心強いです。
3. 秘密情報はチャットに貼らない
Supabase の service_role キーやアクセストークンは、チャットに貼らないルールにしています。必要な作業は、私が手元のターミナルや Vercel の画面で行います。
実際に起きた事故と、AIとの直し方
本番が真っ白になった
Vercel の環境変数で、Supabase の URL とキーを逆に設定していたのが原因です（設定したのは私です）。
AI と一緒に原因を特定したあと、設定が明らかにおかしいときはクラッシュではなく「設定エラー画面」を出すガードを入れました。人間のミスを前提にした防御です。
開発中だけ 403 が出る
React の StrictMode が effect を2回実行するため、匿名サインインが2回並行で走り、ゲストユーザーが2人作られていました。
プロフィールを書き込もうとしたユーザーと、ログイン中のユーザーがずれるので、RLS に正しく弾かれて 403 になっていたのです。並行する呼び出しを1つの Promise にまとめて解決しました。詳しくは別記事に書いています。
リール動画がカクつく
1フレームの描画が重いと、MediaRecorder は実時間で録画するのでコマが落ちます。変化しない部分を事前に描いておき、毎フレームは重ねるだけにして解決しました。これも別記事で詳しく書いています。
人間がやったこと・AIがやったこと
正直に書きます。
私（CEO）がやったこと
- 何を作るか、何を作らないかの判断（例：「道路に沿ったルートは重いので直線に戻す」）
- 実機（iPhone）で触ってのフィードバック。「Instagram のストーリーみたいにスワイプしたい」など
- Supabase / Vercel / Cloudflare / Google Search Console のアカウント作成と設定
- 環境変数やシークレットの入力、PR のマージ
AI がやったこと
- 設計、実装、DB 設計（RLS・RPC）、テスト、ドキュメント
- 画面の確認（スクショ・動画）
- PdM としての品質評価、マーケターとしての SEO 施策の提案と実装
一番の学びは、AI の出力の質は「何を任せないか」をはっきりさせたときに上がるということでした。判断の境界があいまいなまま任せると、AI は先回りして、頼んでいないことまでやってしまいます。
真似するなら、この5つから
- エージェント定義に「始めに読むもの・終わりに書き戻すもの」を書く
-
エージェント間の相談は承認制にする（
【Agent Handoff Request】の形式はそのまま使えます） -
HANDOFF.mdと ADR で、記憶をファイルに置く。 「やめたこと」も書く - UI は AI 自身にスクショを撮らせて確認させる
- 本番は「触らないルール」ではなく「触れない構造」で守る
おわりに
ロカログは、こんな使い方を想定しています。
- 卒業旅行の思い出を、仲間だけの地図に残す
- 写真だけで旅行 Vlog を作る
- サ活の記録を、サウナ仲間と共有する
- カップルで、デートの記録をふたりだけの地図に残す
無料・登録不要で、ブラウザからすぐ使えます。触ってみた感想や「こういう使い方をしたい」というコメントをいただけると、とても励みになります。
👉 https://localog-six.vercel.app/about
ロカログをつくった理由や、使ってみたときの雰囲気は note にも書きました。
技術の深掘り記事も書いています。
- Supabase の RLS と RPC で「仲間だけが見られる地図」を作る（近日公開）
- ブラウザだけで「旅のリール動画」を作る ― Canvas + MediaRecorder（近日公開）
「いいね」や「ストック」をしてもらえると、続きを書く励みになります！