o3 × v0 で量産する “Small Product Studio” の全体像

2025/04/30

o3 × v0 で量産する “Small Product Studio” の全体像

目的
AI と自動化パイプラインを駆使し、月 1 万円 × 20 個 のニッチ Web ツールを作り続けて Google AdSense 収益を積み上げる。

1. 使っている主なツール

ツール	役割	補足
o3（OpenAI o3）	アイデア創出 / 要件定義 / Prompt Engineering	GPT-4o 比で推論速度◎・コスト◎
v0 (Vercel)	Next.js + Tailwind UI のワンショット生成	GUI でバリエーション提案 → コードコピー
GitHub Actions	ビルド & デプロイ自動化 / Bot 処理	Alpha Vantage → JSON 化 → commit
Cloudflare Pages	無料ホスティング & カスタムドメイン	`tools.r109.com/<slug>/` に統合
Supabase	Optional に分析用 DB / Auth	匿名計測 & 将来拡張に備える

2. 全体アーキテクチャ

flowchart TD
  subgraph Idea→Deploy (24h)
    A[o3 Prompt<br>「ニッチ計算ツール案」] --> B[v0 One-shot<br>Next.js 生成]
    B -->|PR| C[GitHub Repo<br>(rrih/<slug>)]
    C --> D[GitHub Actions<br>⬇︎ Build & Test]
    D --> E[Cloudflare Pages<br>自動デプロイ]
    E --> F[公開URL tools.r109.com/<slug>/]
  end
  G[Supabase: PageView_log] --- F

3. プロダクト開発フロー

市場リサーチ
- o3 に「Web フロント完結 / 競合弱い / 長時間利用」条件で 20 個アイデアを出させる
- low / medium / high ボリュームでスクリーニング
プロンプト精緻化
- o3 で v0 用プロンプト を生成 → 「日本語 UI」「ダークモード」「レスポンシブ」必須
v0 で UI 雛形生成
- ベストバージョンのコードをコピー → pages_router.tsx 1 ファイルに集約
ローカル微調整
- Tailwind クラス統一、アクセシビリティ & SEO meta 追加

リポジトリ作成 & 自動デプロイ

gh repo create rrih/<slug> --public --template=template-nextjs
echo "<slug>.pages.dev" > CNAME
git push origin main

自動収益化
- _app.tsx に Google AdSense コンポーネント挿入
- Supabase → Cloudflare Workers KV で簡易 PV 収集

4. o3 Prompt Engineering Tips

You are a product strategist. Generate 20 niche tools that meet:
- Front-end only (Next.js / TS)
- No DB, or localStorage only
- Evergreen, habit-forming utility
- Weak competition in JP, OK overseas competitor
Return markdown table: [slug | 12-word pitch | UI core | closest competitor | differentiator | volume | adsense]

テンプレ化しておくと 5 分で新アイデア候補を量産可能
o3 の System に「出力は必ず日本語」、User に条件を羅列

5. v0 活用ノウハウ

フェーズ	コツ
プロンプト入力	画面構成を箇条書き + 必須ライブラリ列挙
バリエーション選定	PC/スマホ両方プレビュー → クラス名の重複を避ける
Export	`pages_router.tsx` 方式に統合しやすいレイアウトを選択
削減	不要な依存 (prop-types, fs, …) を即削除してビルドサイズ 1 MB 未満に

6. これまでの成果

公開日	URL	内容	月間 PV	推定 AdSense (¥)
2025-04-29	`index-future-navigator.r109.com`	S&P 500 モンテカルロシミュレータ	7k	~4,200
2025-04-26	`tierflow.r109.com`	Tier 表メーカー	4k	~1,800
2025-04-20	`idx.r109.com`	株価指数比較ヒートマップ	3k	~1,200

累計: 月 ¥7,200 相当 → 目標 20 万まで 残 27 プロダクト 🌱

7. 直近の課題 & 対応策

課題	原因	対策
Cloudflare Edge Function サイズ 1 MB 制限	`node_modules` 過多	`next.config.js` で `webpack externals` / dynamic import
`prop-types` / `fs` 依存ビルドエラー	サーバー専用ライブラリ混入	`next/dynamic` + polyfill 削除
PV → CTR 最適化	広告配置が単調	in-content AdSense & ダーク/ライト両対応広告スタイル

8. 今後のロードマップ

Bot 化の徹底
- o3 Prompt → create-pr.yml で自動 PR 作成
- PR マージ後に Supabase schema migration も自動
パフォーマンス最適化
- next export & Edge Cache = HIT 率 95 % を狙う
マネタイズ拡張
- AdSense 以外に Affiliate Links を A/B テスト
- 高 PV ツールは PWA 化 & Push 通知でリピート強化
Exit 戦略
- 月収 ¥30 万を超えたタイミングで アプリ売却 or SaaS 化 を検討