「AIでアプリが作れる」という話は毎日のように流れてきます。でも、実際に運用まで回っている個人開発サービスの中身が見えることは意外と少ないままです。
この記事では、いま読んでいるこのサイト — 個人開発アプリの紹介プラットフォーム AppVillage — を題材に、Claude Codeでどこまで作れたのか、どう進めているのか、何に失敗したのかを運営者本人がまとめます。
この記事で分かること
- Claude Codeで作った個人開発Webサービスの実際の技術構成
- 仕様出し→実装→確認→リリースの具体的なループの回し方
- 実際に起きたトラブルと対処（画像最適化のクォータ枯渇・OGP画像のタイムアウトなど）
- これから真似する人向けの、費用感と始め方
結論: 「コードを書く時間」はほぼゼロになった
先に結論です。
- AppVillageのコードは100% Claude Codeが書いています。人間がエディタでコードを直接書いた行はありません
- 一方で、企画・文言・デザインの好み・本番反映の判断は毎回人間がやっています
- 「AIが勝手に作ってくれる」ではなく、「実装が一瞬で終わる共同開発」が実態に近い
開発を始めてから最初の公開までは、1ヶ月かかっていません。公開後も「思いついた機能をその日のうちに本番へ」というペースで少しずつ育てています。
AppVillageの技術構成
すべて実物の構成です。個人開発の定番スタックに寄せています。
| レイヤー | 採用技術 | 補足 |
|---|---|---|
| フレームワーク | Next.js 15（App Router）+ React 19 | TypeScript |
| スタイル | Tailwind CSS 4 | レタープレス風の独自デザイン |
| 認証・DB | Supabase | GitHub / Google OAuth |
| ホスティング | Vercel | main への push で自動デプロイ |
| 分析 | Google Analytics 4 | 送客クリック等の独自イベントを実装 |
| 記事・コンテンツ | リポジトリ内の Markdown / TS ファイル | DBを使わない「git = CMS」運用 |
選定理由はシンプルで、情報が多く、無料枠で始められて、Claude Codeが正確に書ける技術だからです。マイナーな構成にするほどAIの精度は落ちます。
Claude Codeとの開発の進め方
AppVillageの開発は、ほぼこのループの繰り返しです。
- やりたいことを日本語で伝える（「アプリ投稿のアイコンを必須にしたい」くらいの粒度）
- Claude Codeが関連コードを調査して実装する
- ローカルでブラウザ確認（
npm run dev） - OKならコミットしてもらい、pushでそのまま本番へ
- 違ったら日本語でフィードバックして手直し
ポイントは1回の依頼を小さく保つことです。大きな機能も「今日はここまで」と刻んで、毎回動く状態で本番に出しています。
CLAUDE.md にプロジェクトの「取扱説明書」を書く
リポジトリ直下に CLAUDE.md というファイルを置くと、Claude Codeが毎回それを読んでから作業してくれます。AppVillageでは技術構成・コーディング規約・よく使うパターンを書いています。
## アーキテクチャ
- クライアント側認証: @/lib/supabase の createClient()
- サーバー側認証: @/lib/supabase-server の createClient()
## よくあるタスク
新しいページルートの追加:
1. src/app/[route-name]/page.tsx を作成
2. 認証が必要なら 'use client' を使用
3. 背景スタイルを適用: #FDF6ECこれを整備してから、「前と違う書き方をされる」ことが激減しました。AIとの開発では、コードよりも先にこの「説明書」に投資する価値があります。
ドキュメントもClaude Codeに書かせる
AppVillageには docs/ ディレクトリに設計・DB・運用手順のドキュメントが10本あります。すべてClaude Codeに書かせて、人間はレビューだけ。次の開発セッションでAI自身がこれを読むので、書いたドキュメントがそのままAIの精度になる構造です。
実際にハマったこと
うまくいった話だけでは実例になりません。実際に起きたトラブルを3つ。
1. Vercelの画像最適化クォータが枯渇した
Next.jsの <Image> は便利ですが、無料枠には画像最適化の回数制限があります。ユーザー投稿のスクリーンショットをすべて最適化に通していたら、ある月にクォータを使い切りました。
対処: Supabase Storage配信の画像は unoptimized を付けて素のまま配信するよう切り替え。
<Image
src={avatarUrl}
alt={name}
fill
unoptimized={isSupabaseStorageUrl(avatarUrl)}
/>気づいたきっかけは、ある日突然、サイトの画像が表示されなくなったこと。コードは何も変えていないのに画像だけが消えるので、原因がVercel側のクォータだと特定するまで肝が冷えました。
2. X（Twitter）カードが表示されない
OGP画像を毎回動的生成していたら、Xのクローラーのタイムアウトに間に合わずカードが出ない問題が起きました。対処は生成結果を1日キャッシュするだけ。原因の切り分け（Card Validatorでの確認）もClaude Codeに手伝ってもらいました。
3. 開発ツール側の相性問題
Next.jsの新しいバンドラー（Turbopack）は互換性問題があり、AppVillageでは無効化してWebpackを使っています。「最新機能を全部オンにする」より「安定して動く構成を守る」方が個人開発では大事です。
かかった期間と費用
| 項目 | 実際 |
|---|---|
| 開発期間 | 開発開始から最初の公開まで1ヶ月未満 |
| Claude Code | Maxプラン（まずはProプラン・月額$20からでも始められます） |
| Vercel | 無料枠（画像最適化クォータにだけ注意 — 前述） |
| Supabase | Proプラン $25/月（無料枠は2プロジェクトまで。複数プロジェクト運用のため課金。AppVillage単体なら無料枠で足りる規模感） |
| ドメイン | 年3,000円前後（.jp） |
固定費の中心はClaude Codeのプラン代。インフラ側は、複数プロジェクト共通のSupabase Proを除けば無料枠に収まっています。
個人開発で真似できるポイント
- 定番スタックを選ぶ — Next.js + Supabase + Vercel はAIの学習データが厚く、精度が出やすい
- CLAUDE.md を最初に書く — 規約・構成・確認手順。AIの「性格」はここで決まる
- 小さく作って毎回デプロイ — 1依頼=1機能。動かない大きな仕掛かりを持たない
- 判断は人間に残す — 文言・デザイン・本番反映。ここを手放すと「自分のプロダクト」でなくなる
メリット・デメリット
メリット:
- 実装スピードが桁違いに上がり、「作りたい気持ちが冷める前に」形になる
- エラー調査・SEO対応・アクセス解析の実装など、後回しにしがちな作業も同じテンションで頼める
- コードを書かない時間で、企画やコンテンツに集中できる
デメリット:
- 確認を怠ると「動くけど意図と違うもの」が積み上がる
- AIに任せきりだとコードベースの土地勘が育たず、トラブル時に困る
- 月額コストはかかる。ただ「実装時間をお金で買っている」と考えると、外注と比べるまでもなく、自分の可処分時間の価値と比べても十分に元が取れている感覚です
こんな人におすすめ
- 作りたいものはあるのに、実装時間が確保できない社会人・副業開発者
- デザインや企画は好きだが、コードを書く速度がボトルネックな人
- 逆に「コードを書くこと自体が楽しい」人には、任せすぎると物足りないかもしれません
まとめ
AppVillageは「AIがすごい」ことを証明するために作ったサイトではなく、個人開発アプリに光を当てる場所を作りたくてClaude Codeを使いました。道具が変わっても、個人開発の中心が「作りたいもの」であることは変わりません。
村だよりでは今後も、AI駆動開発を実際に試した記録を公開していきます。あなたの個人開発アプリも、ぜひ村で紹介してください。
