🤖 AIと1週間でWebポータルを作った記録 — Day 3: ブログ機能と収益化（Stripe + 広告）
はじめに — Day 3のテーマは「稼ぐ仕組み」
Day 1でプロジェクトを立ち上げ、Day 2で核となるツールを作った。Day 3のテーマは「これをどうやってお金に変えるか」です。
具体的には以下の3本柱:
- ブログ機能の構築（集客の入り口）
- Stripe決済の導入（有料ツールの課金基盤）
- 広告の設置（パッシブ収入）
「個人開発で収益化」は多くの人が挫折するポイントですが、AIの力を借りれば1日で全部できる。その過程を包み隠さず記録します。
📝 ブログ機能 — Markdownから静的HTMLへ
なぜ「既存のブログサービス」を使わなかったのか
WordPressやはてなブログなど選択肢はいくらでもありましたが、以下の理由でポータル内にブログ機能を組み込む判断をしました:
- SEOの一元管理 — 同一ドメイン内にコンテンツがある方が検索エンジンに有利
- デザインの統一 — ダークテーマの世界観を壊したくない
- 将来のデータ連携 — ブログ記事からツールへの導線を自由に設計できる
ブログ生成パイプライン
Antigravityに「MarkdownファイルからHTMLを生成してJSONとして配信したい」と伝えたところ、以下のパイプラインが構築されました:
content/blog/*.md
↓ compile-blog.mjs (gray-matter + remark)
public/blog-data.json
↓ Next.js ServerComponent
ブログ一覧・記事ページ
↓ Blogger API
Bloggerにも自動投稿ポイントはBlogger APIとの連携。メインのブログはポータル内に置きつつ、Google検索でのリーチを広げるためにBloggerにも自動投稿する二刀流体制です。
ただし、後にBlogger APIで連続投稿した際にレート制限を食らうという失敗も経験しました。1投稿ごとに35秒以上の間隔が必要だと身をもって学びました。
⚡ Vercel Proへのアップグレード — 商用利用の壁
Hobbyプランでは商用利用NG
Day 1でVercel Hobbyプラン（無料）にデプロイした時点では個人の趣味プロジェクト扱いでした。しかし、Stripe決済を組み込んで有料ツール（¥580/月）を販売するとなると話が変わります。
Vercelの利用規約を確認すると、Hobbyプランでは商用利用が認められていないことが判明。無料で使い続けられると思っていたのに、収益化するならProプラン（$20/月）へのアップグレードが必須でした。
$20/月は「投資」か「コスト」か
月額$20——日本円で約3,000円。独立直後の自分にとっては決して小さくない固定費です。しかし、冷静に計算すると：
- 有料ツールの月額¥580 × 6人が登録すれば元が取れる
- 広告収益も加われば、さらに早く黒字化できる
- 何より、Proプランなら商用利用が堂々とできる安心感
「お金を稼ぐためにお金を使う」——これは商売の基本です。ここでケチって規約違反のまま運用するリスクを取るよりも、正しく投資する方が長期的に得策だと判断しました。
教訓: サービスの利用規約は必ず確認しろ。「無料プランで十分」と思い込んでいると、商用利用の壁にぶつかる。収益化を見据えるなら、規約チェックは設計段階で行うべきです。
💳 Stripe決済 — ¥580/月の値段設定
なぜStripeなのか
決済サービスの選定もAIに相談しました。候補に挙がったのは:
| サービス | 手数料 | 特徴 | 判定 |
|---|---|---|---|
| Stripe | 3.6% | 開発者フレンドリー、サブスク対応 | ✅ 採用 |
| PayPal | 3.6%+¥40 | 知名度高いが固定費あり | ❌ |
| Square | 3.25% | 対面向け、Web決済は弱い | ❌ |
Stripeの決め手は「開発者向けのドキュメントが充実している」こと。AIがStripeのAPIを熟知しているため、実装がスムーズでした。
実装の流れ
npm install stripe @stripe/stripe-js- Stripe Dashboardで商品・価格を作成（¥580/月 サブスクリプション）
/api/checkoutAPI Routeを作成（Checkout Session生成）/api/webhookでWebhook受信 → Supabaseにサブスクリプション状態を書き込み- ツールページで
checkPaymentStatus(userId)を呼び出し、課金済みかチェック
¥580/月の根拠
価格設定は最も悩んだポイントです。AIに市場調査を依頼した結果:
- 競合のパチンコ攻略ツール: ¥300〜¥1,980/月
- カジュアルユーザーの心理的壁: ¥500前後
- Stripeの手数料を考慮すると、¥500だと手取りが¥482
¥580は「ワンコイン+α」の心理的ラインを狙いました。月に1〜2回パチンコに行く人なら、1回の投資額（数千円〜数万円）と比べて圧倒的に安い。この「相対的な安さ」がコンバージョンの鍵になると考えました。
📢 広告設置 — 忍者AdMaxとAmazon Associate
AdSense申請を見送った理由
最初はGoogle AdSenseを検討しましたが、パチンコ関連コンテンツはGoogleのギャンブルポリシーに抵触するリスクがあることが判明。審査で落ちるだけならまだしも、アカウント停止のリスクを考えて見送りました。
忍者AdMaxの選定
代替として選んだのが忍者AdMaxです:
- 審査がゆるく、パチンコ関連サイトでもOK
- クリック型＋表示型のハイブリッド収益
- 導入が簡単（JavaScriptタグ1行）
Amazon Associateとの合わせ技
ブログ記事に関連商品のAmazonリンクを設置。記事の内容に応じて自動的に商品が切り替わる仕組みを実装しました:
- AI/開発記事 → プログラミング技術書
- パチンコ記事 → 攻略本・確率論入門
- Uber配達記事 → 配達グッズ
🔧 Webhook地獄 — 決済連携の闇
Stripe Webhookの実装は、Day 3で最も苦労したポイントです。
何が起きたか
- 署名検証の失敗 — Webhook Secretの設定ミスで全リクエストが400エラー
- テスト環境と本番環境の混在 — テストモードのWebhookが本番DBに書き込まれる事故
- イベントの重複処理 — 同じ
checkout.session.completedが複数回飛んでくる問題
解決策
Antigravityが提案してくれた解決策:
- Webhook Secretは環境変数を本番/テストで厳密に分離
- 冪等性キー（イベントID）でDB書き込みの重複を防止
stripe listen --forward-to localhost:3000/api/webhookでローカルテスト
教訓: 決済関連のバグは「お金が絡む」ため、最も慎重にテストすべき領域。AIに任せっきりにせず、自分の目でStripe Dashboardの決済ログを確認することが重要です。
📊 Day 3のまとめ
| 項目 | 結果 |
|---|---|
| 作業時間 | 約8時間 |
| 完成したもの | ブログ機能、Stripe決済、広告設置、Blogger自動投稿 |
| 収益化基盤 | 有料ツール（¥580/月）+ 広告（忍者AdMax + Amazon） |
| 最大の苦労 | Stripe Webhookの署名検証とイベント重複処理 |
| 手で書いたコード | ほぼ0行（AIが生成→レビュー→修正の繰り返し） |
💡 Day 3の学び
1. 収益化は「最初から」組み込め
「まずは無料で公開して、ユーザーが増えてから収益化」という考えは個人開発では危険。収益化の仕組みを最初から設計に入れておくことで、後からの大幅な改修を避けられます。
2. 決済は「テストモード」で必ず検証
Stripeにはテストモードが用意されています。テスト用のカード番号（4242 4242 4242 4242）で実際にチェックアウトの全フローを通すことが必須。「動くはず」は通用しません。
3. 広告は「ユーザー体験を壊さない配置」が鍵
広告を貼りすぎるとサイトの品質が下がります。実装後にスマホで実際に読んでみて、コンテンツの邪魔にならないか確認することが大切です。
📌 シリーズ予定
- Day 1: 構想とNext.jsセットアップ
- Day 2: パチンコ期待値計算ツールの実装
- Day 3: ブログ機能と収益化（Stripe + 広告） ← 今ここ
- Day 4: AIの記憶の限界 — コンテキストウィンドウとの戦い
- Day 5: AIが暴走した日 — ルール違反と信頼の再構築
次回 Day 4 では、AIとの長時間セッションで直面した「コンテキストウィンドウ」の壁について。AIが前の会話を忘れ始めた時、どうやって対処したのか。お楽しみに！