Claude Code×Supabase×Vercel×Stripeで最初の1ドルを稼ぐまでの実演。Stephen G. Popeが見せた4点セット

家事と子育てのスキマで経営する3方よしAI共創コンサルタントの田中啓之、ひろくん（@passion_tanaka）です。今回は、Stephen G. Popeさんが公開した実演動画から、Claude Code×Supabase×Vercel×Stripeでアプリを一気通貫で作る手順を紹介するね。

出典: How to Build Full-Stack Apps (No Hype Masterclass)（Stephen G. Pope）

冒頭、Stephen G. Popeさんはこう宣言します（0:02）。

Stephen G. Popeさん

「これは、何時間いじっても何も残らないClaude Codeの小技動画じゃない。今日は本物を、正しいやり方で作る」（0:02〜0:09）

続けて、こう名乗ります（0:17頃〜）。

Stephen G. Popeさん

「30年以上ソフトウェアを書いてきた。今日見せるのは、人が実際にお金を払うものを作るやり方だ」（0:17〜0:18）

道具は4つだけです。Next.js（クライアントとサーバーを1つにまとめたフレームワーク）、Vercel（アプリが動く場所）、Supabase（データベースと認証）、Stripe（決済）。ホワイトボード風の手描き図で役割分担を説明します（0:33頃〜）。ブラウザ（クライアント）とバックエンドサーバーの関係。ドメインへアクセスした時に、サーバーが小さなプログラムをブラウザへ返す仕組み。DNSの役割まで、順番に描いていきます。

続けて、ローカルと本番が同じSupabaseを共有する設計にも触れています（4:01頃〜）。Node.jsのインストール、`node -v`でのバージョン確認、Mac は`brew`・Windowsは`scoop`というパッケージマネージャの違い（6:24頃〜）まで、前提知識も一つずつ丁寧に確認していました。飛ばさない姿勢が、私は好きでした。

私はこの「小技じゃない」という一言に、勝手に自分を重ねました。私は中卒フリーターでした。そこからリフォーム会社に入り、WEB集客を独学で覚えたんです。言葉と写真と導線を組み合わせました。それだけで、EC事業は月商6000万円まで伸びたんです。

技術は違います。でも「見た目だけの完成品」ではなく「実際に人が動いて、お金が動くもの」を作る、という一点は同じなんですよね。

私の仕事道具にも、動くだけのものがあります。稼げてはいません。佐野章核さんが「作ることより届け方」と言っていた記事を読んだときも、同じ痛みを覚えました。

Next.jsの雛形を作ったあと（8:22頃〜）、Stephen G. PopeさんはClaude Codeにプラグインを導入します（12:02頃〜）。SupabaseやVercel、Stripeのプラグインを、プロジェクト単位でインストールするか、ユーザー全体で使えるようにするか選べます。彼が選んだのは、プロジェクト単位でした。

理由をこう説明します（17:03頃〜）。

Stephen G. Popeさん

「プラグインが少ないほど、スキルが少ないほどいい。コンテキストを食うから。スキルが増えるほど、どれを使えばいいか分からなくなって、余計に混乱するだけなんだ」（17:03〜17:22）

渡す道具は絞る。渡した先は信じて任せる。この順番、私にも覚えがあります。

私は今もClaude Codeのチームへ、未完成のまま作業を渡す練習をしています。「委ねるOS」への第一歩です。第一歩は、いつも小さいんですよね。

渡す説明を長くするほど安心する気持ち、正直あります。でも今回の実演を見て、それは違うと分かりました。長い説明は、安心のためではありません。自分の不安を消すために積んでいるだけなんですよね。

グッドパッチの土屋社長が非エンジニア中心の組織にClaude Codeを根付かせた号令のかけ方も、この記事で紹介されていて、渡す範囲を絞る発想は共通していました。組織の規模は違います。それでも、渡す前に「何を渡さないか」を先に決める順番は、たぶんどんな規模でも同じなんですよね。

Supabase CLIをインストールし（13:29頃〜）、Claude Codeへ「このアプリ用のSupabaseプロジェクトを作って」と一言渡すだけで（17:53頃〜）、認証込みのプロジェクトが立ち上がります。

その後、実際にサインアップして確認メールを受け取り、ログインまでを実演で見せます（21:16頃〜）。ポイントは、ローカルで作ったユーザーが、あとで本番のVercel環境でもそのままログインできることです（36:28頃〜）。同じデータベースを、試作の場と本番の場が共有しているからです。

Supabase CLIのヘルプ画面には、`login`や`migration`、`secrets`、`ssl-enforcement`など、サブコマンドがずらりと並んでいました（13:29頃〜）。1つ1つの意味を全部覚える必要はありません。Claude Codeへ日本語（英語）で目的を伝えれば、必要なコマンドは向こうが選んでくれるからです。

プロジェクト作成時には、リージョンも選びます（17:53頃〜）。Stephen G. Popeさんは West（西海岸）を選んでいました。ユーザーが多い場所に近いリージョンを選ぶ、というだけの単純な判断です。単純ですが、後から変えにくい部分でもあります。最初に選ぶ価値のある判断でした。

料理に例えると、試作用の小鍋と本番の大鍋を、同じ出汁で繋いでいるようなものです。出汁は、1つでいいんです。味見のたびに作り直していたら、いつまでも本番の味にたどり着けません。

私の仕事でも、似た無駄があります。「試しに作ったもの」と「実際に使うもの」を分けすぎて、結局二度手間になっている作業がまだあるんです。今回の実演を見て、気づきました。疑うべきは「分けなくていい場所まで分けていないか」でした。

GitとGitHubの違いを説明したあと（23:36頃〜）、こう整理していました。Gitはローカルの変更履歴を残す道具です。GitHubはそれをホストして、チームで共有する場所です。ブランチを切って、変更してから、元の流れへマージする。この基本だけ押さえれば十分だと説明していました。Claude Codeへ渡した指示は一言でした（29:13頃〜）。「gitリポジトリを初期化して、.gitignoreを作って、コミットして、プライベートリポジトリを作って、プッシュして」。それだけです。

Vercelへのホスティングも同じ流れでした（32:33頃〜）。「プライベートリポジトリをデプロイしたい。手順を教えながら進めて」という指示だけで（33:44頃〜）、Vercelのリンク作成から環境変数の設定、本番デプロイまでが会話で完結します。GitHub CLIの認証も、ブラウザでログインする方式を選ぶだけでした。認証後の`ls -la`には、README.md・app・components・package.jsonといった、Next.jsプロジェクトのファイル一覧がずらりと並んでいます。

毎回同じ手順を、毎回同じ順番で、自分の手でやる。この繰り返しから抜け出せた瞬間って、地味だけど大きいんですよね。

私自身、日々の実務をAI秘書の凛ちゃんへ委ねながら、アイデアを形にする循環を回している最中です。ワクワクすることを遊び探求し、AIで形にする。今回の実演の「一言でデプロイが終わる」感覚は、まさにこの循環の一場面でした。

今、あなたが毎回同じ手順を手で繰り返している作業はどれですか。1つだけ選んで、AIへの一言指示に置き換えられないか、今日試してみてください。指示は短くて構いません。むしろ短い方が、迷いを持たせないんですよね。

決済セクションに入る前、Stephen G. Popeさんは正直な本音を漏らします（39:13頃〜）。

Stephen G. Popeさん

「決済の話になると、いつも身構える。昔は決済を動かすところまで持っていくのが、本当につらい作業だった」（39:13〜39:18）

分かります、その感覚。PCI準拠という重い規約を、Stripeがホスト型決済として引き受けてくれること。ローカル開発ではファイアウォールの都合でStripeからのWebhookが届かないため、Stripe CLIでトンネルを作る必要があること。この2点を丁寧に説明したあと（41:26頃〜）、本番と切り離した「サンドボックス」を作ります（42:51頃〜）。

サンドボックス名を付け直してCLIを再ログインする一幕もありました。うまく繋がらず、ログアウトしてログインし直す。実演でも、こういう小さなつまずきはちゃんと映るんですよね。

Claude Codeへ渡した指示も長めでした（44:37頃〜）。顧客・サブスクリプション用のテーブルをSupabaseに作ること。Stripeから商品を動的に取得して表示する価格ページを作ること。商品マスタはStripe側を正にして、アプリ側では複製しない設計にすること。この「どちらを正にするか」を先に決めておく姿勢は、決済に限らず効きそうです。

私は「安売りしない。でも囲い込まない。」を信条にしています。場は無料で開放して、価値には対価をいただく。Stripeという仕組みは、この「価値と対価の交換」を、壊れないよう小さく試せる場所を先に用意してくれるものだと感じました。

あなたの仕事で、「お金の話」を避けたまま止まっている工程はありませんか。いきなり本番で試す必要はありません。まず小さく試せる場所を、1つ思い浮かべてみてください。

顧客・サブスクリプション用のテーブルと価格ページをClaude Codeへ作らせたあと（44:37頃〜）、いよいよテストカードでの決済です（51:20頃〜）。カード名義に自分の名前を冗談交じりで入力し、決済を試す。1回目は400エラー。サーバーを再起動して再挑戦すると、200が返ってきました。

一発で通らない。そこも映していました。編集で消さずに、です。私は、それが好きでした。

400が200に変わった瞬間って、動画で見ているだけの私にも、ちょっと嬉しかったんですよね。

子どもの頃、スーパーマリオの攻略本を読み込んでいました。裏技やワープを覚えては、友達に教えていたんです。「課題を攻略するほど学べて、教えて喜ばれ、稼げる」世界を、あの頃からずっと思い描いていました。

400が200に変わる瞬間は、まさにあの攻略の感覚でした。結果が読めない。だから、通った瞬間が嬉しいんですよね。景品そのものより、クリアすることが目的でした。今回の実演も、決済を通すこと自体が目的というより、その先に「実際にお金を払ってくれる人がいる」という現実へたどり着くための、最初の関門だったんだと思います。

あなたの仕事にも、「まだ試していない最初の1回」がきっとあります。今週中に、小さく試す日を1日だけ決めてみてください。

Stephen G. Popeさんは、Claude Codeに任せることの限界にも正直でした（46:59頃〜）。

Stephen G. Popeさん

「一番大事なのは結果、欲しいものが手に入ったかどうかだ。でもクライアントのためにこれを作り続けるつもりなら、いくつかの仕組みは理解しておいた方がいい。そうしないと、いずれ必ず詰まる」（46:59〜47:10）

その言葉どおり、Claude Codeは作業を終えたあと、自分から2つの宿題を投げ返してきました（49:28頃〜）。1つはサンドボックス名の食い違い。もう1つは、Supabaseの「漏洩パスワード保護」が無効になっているという警告でした。この警告はプロジェクト全体の設定に関わるため、Claude Codeは「今回はスキップした。有効にしてほしければ言ってほしい」と自分からは変更せずに止めています。どちらの宿題も、判断はStephen G. Popeさんへ投げ返されたまま終わっています。

AIは魔法ではありません。努力が要ります。「縦に掘る」努力です。今回の2つの宿題は、まさにその場所でした。

最後にStephen G. Popeさんは、こう締めます（54:37頃〜）。本番のVercel環境で決済のround tripがちゃんと動くか、確認するのが視聴者への宿題だと。動かなければ、CLIとプラグイン経由でログを見せて直せばいい、とも言い添えていました（55:03〜55:07）。宿題を出したまま終わる。この締め方も、私は誠実だと思いました。

直近で私自身、AIから返ってきた警告や指摘を「あとで見る」と流してしまったことはないか。今回の記事を書きながら、1つ思い当たりました。今日中に、自分の目で確認しようと思います。

55分の実演を見終わって残ったのは、「AIに何を渡し、何を自分で確認するか」という、私なりの線引きでした。プラグインを絞って渡す判断。ローカルと本番を同じ土台で繋ぐ設計。デプロイを一言で終わらせる指示。ここまでは、もう確実に手が届く未来です。

でも、決済の話になると身構える気持ちも、テストカードが400から200に変わる瞬間の緊張も、Claude Codeが投げ返した2つの宿題も。ここだけは、Stephen G. Popeさんの言う通り、まだ人間が自分の手で確認する場所なんだと思うんですよね。

結果が全部、でも仕組みを理解しないと、いずれ詰まる。この一言が、今日いちばん残った言葉でした。

冒頭の「30年以上ソフトウェアを書いてきた」という一言も、最後まで見ると重みが違って聞こえます。長く続けてきた人ほど、AIに任せる場所と、自分の手を離さない場所の線引きが具体的なんですよね。

あなたの仕事の中で、AIに渡していい作業はどこで、自分が最後まで確認すべき場所はどこですか。