Claude Code で週末MVP開発 — 48時間で作って初売上を立てるまでの全工程

claude code --project weekend-mvp "
あなたは個人開発者です。以下のアイデアについて、
 
1. 競合他社（既存プロダクト）は誰か
2. 差別化ポイントは何か
3. 最初のターゲット（Who）は誰か
4. 月額課金か買い切りか、その理由
5. 月20時間の保守で続けられるか
 
これを整理してください：
 
アイデア：「YouTubeの長尺動画を2分の要約に。AIで自動生成、テキスト・音声・ビジュアルは全カスタマイズ可」
" 

claude code "
上記の分析から、金曜夜〜日曜夜の48時間でMVP化するなら、
以下のうちどれに絞るべきか？
 
A. テキスト要約のみ実装。YouTube短編化は来月
B. デモ動画を事前制作。ユーザーは「仕様書提出→翌日納品」モデル
C. テキスト要約 + 静止画スライドショー化。動画化は外部ツール併用推奨
 
プロダクト化の観点からアドバイスしてください。
"

mkdir weekend-mvp && cd weekend-mvp
claude code /init

# YouTubeGlance — Rapid Development
 
## Priority 1（金土日で実装）
- [ ] Next.js プロジェクト + Tailwind
- [ ] YouTube 動画ID取得（入力フォーム）
- [ ] OpenAI API で字幕抽出・要約
- [ ] 要約テキストの表示ページ
- [ ] Stripe Checkout 統合
- [ ] Supabase ユーザー認証（Google OAuth）
- [ ] Vercel デプロイ
 
## Priority 2（来週以降）
- [ ] ダッシュボード（過去の要約履歴）
- [ ] Midjourney or DALL-E で自動画像生成
- [ ] スライドショー動画出力
- [ ] ユーザーサポート機能

claude code "
Next.js アプリの初期スケルトンを作ってください。
- pages/index.tsx（ランディング + 入力フォーム）
- pages/auth（Supabase Google OAuth）
- pages/api/summarize（YouTube URL → 要約API）
- pages/dashboard（ユーザーの過去の要約一覧）
- components/StripeCheckout.tsx
- lib/openai.ts（要約ロジック）
- lib/stripe.ts（決済ロジック）
 
実行可能な Next.js TypeScript プロジェクトにしてください。
"

npm install
# 必要なパッケージ：next、react、typescript、@supabase/supabase-js、stripe、tailwindcss

// lib/openai.ts
import OpenAI from "openai";
 
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});
 
export async function summarizeYouTubeContent(
  videoId: string
): Promise<string> {
  // 実運用：youtube-transcript API で字幕取得
  // MVP：ダミーテキスト（実装すると30分かかる）
  
  const dummyTranscript = `
    [00:00] こんにちは、今日はClaudeについて話します
    [00:30] Claude Code を使うことで開発速度が...
    [02:15] 実際のコード例をお見せします
    [05:00] このようにして24時間でプロダクト化が可能です
  `;
 
  const response = await openai.chat.completions.create({
    model: "gpt-4o-mini",
    messages: [
      {
        role: "user",
        content: `以下の動画の字幕を300字以内に日本語で要約してください。見出し3つ、箇条書き形式で\n\n${dummyTranscript}`,
      },
    ],
  });
 
  return response.choices[0].message.content || "";
}

// pages/index.tsx
import { useState } from "react";
import StripeCheckout from "@/components/StripeCheckout";
 
export default function Home() {
  const [content, setContent] = useState("");
  const [summary, setSummary] = useState("");
  const [isLoading, setIsLoading] = useState(false);
 
  const handleSummarize = async () => {
    setIsLoading(true);
    try {
      const response = await fetch("/api/summarize", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content }),
      });
      const data = await response.json();
      setSummary(data.summary);
    } catch (error) {
      console.error("Error:", error);
    } finally {
      setIsLoading(false);
    }
  };
 
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 p-8">
      <div className="max-w-2xl mx-auto">
        <h1 className="text-4xl font-bold text-white mb-4">YouTubeGlance</h1>
        <p className="text-gray-300 mb-8">
          動画コンテンツを2分で要約。次のアイデアを見つけるために
        </p>
 
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="動画の内容やトランスクリプトを貼り付けてください"
          className="w-full h-40 p-4 rounded-lg bg-slate-700 text-white placeholder-gray-400 mb-4"
        />
 
        <button
          onClick={handleSummarize}
          disabled={isLoading}
          className="w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-bold py-3 px-4 rounded-lg mb-6"
        >
          {isLoading ? "要約中..." : "要約する"}
        </button>
 
        {summary && (
          <div className="bg-slate-700 p-6 rounded-lg mb-8">
            <h2 className="text-xl font-bold text-white mb-4">要約結果</h2>
            <p className="text-gray-200 whitespace-pre-wrap">{summary}</p>
          </div>
        )}
 
        <StripeCheckout />
      </div>
    </div>
  );
}

// pages/api/checkout.ts
import Stripe from "stripe";
 
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
 
export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).end();
  }
 
  try {
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items: [
        {
          price_data: {
            currency: "jpy",
            product_data: {
              name: "YouTubeGlance Pro — 月額プラン",
              description: "無制限の動画要約 + Slack 連携（近日対応）",
            },
            unit_amount: 2900, // ¥2,900
          },
          quantity: 1,
        },
      ],
      mode: "subscription",
      success_url: `${req.headers.origin}/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${req.headers.origin}/?canceled=true`,
      customer_email: req.body.email,
    });
 
    res.status(200).json({ sessionId: session.id });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

// components/StripeCheckout.tsx
import { loadStripe } from "@stripe/js";
 
export default function StripeCheckout() {
  const handleCheckout = async () => {
    const email = prompt("メールアドレスを入力してください");
    if (!email) return;
 
    const response = await fetch("/api/checkout", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email }),
    });
 
    const { sessionId } = await response.json();
    const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY!);
    await stripe?.redirectToCheckout({ sessionId });
  };
 
  return (
    <button
      onClick={handleCheckout}
      className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg"
    >
      月額 ¥2,900 で今すぐ始める
    </button>
  );
}

// pages/success.tsx
export default function SuccessPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-green-900 to-green-800 flex items-center justify-center p-8">
      <div className="max-w-md text-center">
        <h1 className="text-4xl font-bold text-white mb-4">
          ✓ 登録完了です
        </h1>
        <p className="text-green-200 mb-8">
          これからは無制限に動画を要約できます。
        </p>
        <a
          href="/"
          className="inline-block bg-white text-green-800 font-bold py-3 px-6 rounded-lg hover:bg-gray-100"
        >
          要約を始める
        </a>
      </div>
    </div>
  );
}

vercel deploy --prod

// pages/landing.tsx
export default function Landing() {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero */}
      <section className="bg-gradient-to-br from-blue-600 to-blue-800 text-white py-20 px-8 text-center">
        <h1 className="text-5xl font-bold mb-4">YouTubeGlance</h1>
        <p className="text-xl mb-8">
          長尺動画を2分の要約に。毎日の学習を効率化する。
        </p>
        <button className="bg-white text-blue-700 font-bold py-3 px-8 rounded-lg hover:bg-gray-100">
          今すぐ試す（無料）
        </button>
      </section>
 
      {/* Features */}
      <section className="py-20 px-8 max-w-5xl mx-auto">
        <h2 className="text-3xl font-bold mb-12 text-center">3つのメリット</h2>
        <div className="grid md:grid-cols-3 gap-8">
          {[
            {
              title: "AI が要約",
              desc: "OpenAI の最新モデルが、動画の本質を3行に",
            },
            {
              title: "1秒で完成",
              desc: "貼り付けて、クリック。複雑な設定は不要",
            },
            {
              title: "月額 ¥2,900",
              desc: "無制限に要約。毎月 1 本の有料 note より安い",
            },
          ].map((item, i) => (
            <div key={i} className="text-center">
              <h3 className="text-xl font-bold mb-2">{item.title}</h3>
              <p className="text-gray-600">{item.desc}</p>
            </div>
          ))}
        </div>
      </section>
 
      {/* CTA */}
      <section className="bg-blue-50 py-16 px-8 text-center">
        <h2 className="text-3xl font-bold mb-6">はじめての方へ</h2>
        <p className="text-gray-600 mb-8">
          初月は全機能を無料で試せます。キャンセルはいつでも。
        </p>
        <button className="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700">
          月額 ¥2,900 で登録
        </button>
      </section>
    </div>
  );
}