あなたのアイデアを、世界中の人が使えるようにする最短ルート
- こんな人向けの講座です
- 今日お見せするもの
- 重要なことは全体像を理解するということ
- Webアプリを世の中に出すという営み
- 今日の道のり（全体像）
- 最低限必要な「3つの道具」
- ほぼ必須の「4つ目」：データベース
- 必要に応じて追加される道具
- Claude Codeを一言で言うと
- ChatGPTにコードを書かせるのと何が違うのか
- なぜ「今」Claude Codeなのか
- 率直にいくらかかるのか
- 無料枠と有料枠の境目は自分で決めない
- 料金の考え方
- フェーズ1：初回の仕様ヒアリング
- フェーズ2：仕様の議論（メッセージ機能の例）
- フェーズ3：技術スタック確定
- フェーズ4：画面設計とデザインシステム
- フェーズ5：インフラ構築（各種サービス対応をCLIで自動化）
- フェーズ6：U1〜U3 実装と初メール送信テスト
- フェーズ7：業者登録・ログイン + 案件ダッシュボード
- フェーズ8：メッセージ機能 + Pusher Realtime
- フェーズ9：テスト&確認
- フェーズ10：Githubへプッシュ＋Vercelデプロイ
- 今日あなたが理解したこと
- 今日あなたは、何者になったのか
- サービス公開できるようになったら世界変わる
こんな人向けの講座です
ひとつでも当てはまればOKです。
- ChatGPTやClaudeは触ったことがある
- バイブコーディングでちょっと作ってみたけど、ローカルで動かすところまでで止まっている
- 「デプロイ」「GitHub」「本番公開」と聞くと、正直よくわからない
- ターミナル・コマンドラインは見たことはあるけど、ちょっと怖い
- 作りたいアイデアはある、または個人開発・副業に興味がある
- エンジニアじゃないけど、自分でサービスを出してみたい
この講座は、「0から1」ではなく「0.3から1」に連れて行く講座です。
「少しだけ触ったことはあるが、公開までたどり着けない」という人を、今日ひとりで公開できる状態まで連れて行きます。
今日お見せするもの
講師が実際にClaude Codeで作ったWebアプリを題材にして、要件を伝える → 仕様を詰める → 技術を選ぶ → 実装する → 公開するの全プロセスを実演します。
題材アプリ：電気設備工事のBtoBマッチングサイト
- ユーザー（発注側）：電気設備工事を依頼したい法人
- 業者（受注側）：電気設備工事を請け負う業者
- 両者がマッチング・合意して受注契約まで成立する
今日のプロセスを自分のアプリに当てはめて、同じことが再現できるしていただきたい。 今日は「自分のアプリはこう作ればいい」という全体図を理解する。
1. Webアプリリリースの重要なポイント
重要なことは全体像を理解するということ
このAI時代もはや ・どんな言語やライブラリがあるか ・ライブラリの仕様 ・コーディングの細部 ・各サービスの詳細 把握しておく必要はない。
重要なことは ・どういうステップや流れでWebサービスは作ればいいのか ・Webサービスを作るためにはどういう部品が必要なのか ということを理解しておけば、後は全てClaudeCodeがやってくれる。
Webアプリを世の中に出すという営み
① 作る（開発）
↓
② 公開する（デプロイ）
↓
③ 直す・足す（運用）
↓
① 作る（次の機能）
- 作る：アイデアをコードに落とす。自分のPCの中で動く
- 公開する：そのコードをインターネット上に置く。世界中からアクセスできる状態にする
- 直す・足す：使ってみて気になったところを直す、機能を足す、また公開する
「作る」はよく語られますが、「公開する」と「直し続ける」がわからないから動けない、というのが一番多いパターンです。
今日の道のり（全体像）
具体的には、このステップを一気に体験します。
[ あなたのアイデア ]
↓
① 要件をClaude Codeに伝える
↓
② 仕様・技術スタック・画面構成を詰める
↓
③ 仕様書をドキュメントに保存する
↓
④ 実装 ― アカウント作成・APIキー取得・コーディング
↓
⑤ GitHubに保管
↓
⑥ Vercelでデプロイ（世界中からアクセス可能に）
↓
[ https://あなたのアプリ.vercel.app ]
この流れを一度作ると、以降「直して公開」はほぼ自動で回るようになります。これが現代の個人開発の基本形です。
2. 今日使う道具たち
最低限必要な「3つの道具」
- Claude Code：コードを書いてくれるAI。あなたの代わりに手を動かす「エンジニア」
- GitHub：コードを安全に保管する場所。コードの「金庫」
- Vercel：GitHubを監視していて、中身が更新されたら自動で世界に公開してくれるサービス。「執事」
ほぼ必須の「4つ目」：データベース
Webアプリではユーザーのデータ（アカウント情報、投稿、設定など）を保存する場所がほぼ必ず必要になります。これがデータベースです。
- Supabase：PostgreSQLベース。認証・ストレージもまとめて使える。個人開発の定番
- Neon：同じくPostgreSQL系。Vercelとの相性が良い
- Firebase：Google製。リアルタイム機能が強い
- PlanetScale / Turso：用途によって
どれを選ぶかは、Claude Codeに「今回の要件ならどれがいいか？」と聞けば選択肢を出してくれます。
必要に応じて追加される道具
作るアプリによって、以下も追加されていきます。
- ストレージ：画像・ファイルの保存（Supabase Storage / Cloudflare R2 / AWS S3 など）
- メール送信：確認メール・通知メール（Resend / SendGrid など）
- 決済：お金をもらう（Stripe が定番）
- 認証：ログイン機能（Supabase Auth / Clerk / NextAuth など）
これらも全部、「今回のアプリならどれがいい？」とClaude Codeに聞けば選択肢とメリデメを出してくれるので、知らなくても大丈夫です。
また、Skillsを酷使することも重要。 各言語やサービスのベストプラクティスをまとめたSkillが公開されていることが多いので、まずはfindskillsというskillを入れて、それで使えそうなskillを探してくるのがおすすめ。
その後、 「そのスキル名」を使って実装がベストプラクティスになっているか確認して 「そのスキル名」を使って実装がベストプラクティスな方法で実装して とか言うと、バグや手戻りが少なくなります。
Claude Codeを一言で言うと
「あなたの代わりにコードを書いて、あなたのPCの中で動かしてくれるAIエージェント」
- 従来：自分でコードを書く、またはChatGPTに書いてもらったコードをコピペする
- Claude Code：AIが自分のPCで直接ファイルを作り、実行し、修正までしてくれる
- あなたは「何を作りたいか」を日本語で伝えるだけ
いわゆる「バイブコーディング（vibe coding）」の代表的な道具です。コードを書くのはAI、人間はディレクターに回る、という時代の象徴的なツールです。
ChatGPTにコードを書かせるのと何が違うのか
| ChatGPTでコード生成 | Claude Code |
|---|---|
| コードを出してくれる | コードを出して、ファイルに書き、実行してくれる |
| コピペして自分で貼り付ける | 自分のPCのフォルダに直接反映される |
| エラーが出たら自分で聞き直す | エラーを自分で読んで自分で直しにいく |
| 1往復ずつの対話 | 長い作業を自律的に進める |
「代わりにやっておいて」が通じる、というのがClaude Codeの本質的な違いです。
なぜ「今」Claude Codeなのか
- Claudeは2026年現在、コーディング性能で業界トップレベル
- Claude Code自体も使いやすさが急激に向上している
- GitHubコミットの4%がすでにAI生成という時代
- 個人が1人でサービスを立ち上げ、収益化するのが現実的になった
「できるかできないか」ではなく「やった人が先に行く」時代になっています。
3. 料金とランニングコスト
率直にいくらかかるのか
| 道具 | 料金 |
|---|---|
| Claude Code | Anthropicの有料プランが必要。Pro（$20/月）またはMax（$100/月〜） |
| GitHub | 個人利用は無料（Privateリポジトリも無料） |
| Vercel | 個人利用（非商用）は無料 |
| データベース（Supabase等） | 無料枠あり。本格運用で$25〜/月程度 |
| ストレージ・メール等 | 無料枠あり。小規模なら無料で回ることが多い |
実質、毎月確実にかかるのはClaude Codeの費用だけです。
無料枠と有料枠の境目は自分で決めない
個々のサービスの無料枠には上限があります（ユーザー数・保存容量・メール送信数など）。
- Claude Codeに「このサービスは何ユーザーまで無料？」「何GBまで無料？」と聞く
- 無料枠を超えそうなら、その時点で有料化するか別サービスに乗り換えるか判断する
- 「無料でどこまでできるか」を最初に確認しておくのが超重要
料金の考え方
- Claude Codeに月$20〜100払うのは、AIがエンジニアとして1人働いてくれるための投資です
- 外注すれば1案件で数万円〜数十万円するものが、月$20〜100で無限に試せます
- 初めて触るなら、まずPro（$20/月）で十分。本格的に作り始めたらMaxに移行するのが一般的
- 小規模な個人開発なら、GitHub・Vercel・データベースの無料枠でほぼタダで運用できます
- ユーザーが増えたり容量が増えたら、その時に有料プランを検討すればOK
- 「公開しただけで毎月お金が飛んでいく」ということは起きません
4. 【実演】Claude Codeでの実装
フェーズ1：初回の仕様ヒアリング
👤 自分（最初の要件）
電気設備工事のBtoBマッチングサイトを作りたい。ユーザーが検索→サイト到達→相談フォーム送信、業者側は案件一覧から気になる案件にメッセージ送信、両者合意で受注契約。
🤖 Claude Code
MVPは4機能で成立します（案件投稿・案件一覧（地図＋フィルタ）・業者メッセージ・簡易認証）。最大のトレードオフは業者の登録審査。無審査＝スケール早いが品質リスク、審査制＝立ち上げ遅いが信頼性高い。
👤 自分
無審査でいい。品質はユーザーからの評価制度で担保する。
🤖 Claude Code
了解。評価制度はMVP必須として設計します。追加で4点確認：①収益モデル ②メッセージ方式 ③工種範囲 ④ユーザー登録の要否
👤 自分
① 収益：初期は無料、伸びてから検討／② メッセージ：詳しく教えて／③ 工種：電気設備のみ／④ ユーザー側：会員登録不要／業者側：メール登録必須・通知受信可
このフェーズで見えること
- 最初の要件はできるだけイメージをたくさん伝える（※音声入力推奨）
- Claude CodeがMVPで成立する機能を勝手に整理してくれる
- 重要なトレードオフ（無審査vs審査制）も自分から提示してくれる
- こちらが意思決定→Claude Codeが追加で確認を詰めにくる
フェーズ2：仕様の議論（メッセージ機能の例）
🤖 Claude Code
3案あります：A. サイト内チャット（実装重い）／B. マスキングメール転送（軽い、外部に流出）／C. ハイブリッド（推奨）＝メッセージDB保存＋通知メールでマジックリンク
👤 自分
AとBの機能比較とメリデメを教えて
🤖 Claude Code：詳細比較表を提示
👤 自分
Bのサイトユーザーの活用イメージがわからない
🤖 Claude Code：Bでの具体的なフロー（案件投稿→エイリアスメアド発行→業者からメール→普通のメールで返信）を詳細説明
👤 自分
この方法のデメリットは？案件が終了したこともわからないので、サイト上に案件が残り続ける？
🤖 Claude Code
その通り、それが最大の弱点。②評価制度が機能しない点も含めて、当初方針と矛盾します。C案に戻すのが素直。
👤 自分
じゃメッセージ機能も内製化しようか。こういうの、ライブラリとかで整理されてるやつない？
🤖 Claude Code
TalkJS／Stream Chat／Sendbird／Supabase Realtime等があります。TalkJSがBtoBマッチング向けに刺さる機能揃ってます。
👤 自分
TalkJSは無料枠はどれくらい？
🤖 Claude Code：調査の結果「無料はDevelopment mode限定、本番は月$279〜」→ 推奨撤回、Supabase自前を推奨
👤 自分
実装しているメッセージ機能はどういう方法？（既存の天井クレーン見積りサイトのパスを提示）
🤖 Claude Code：調査→「PHP+MySQLで完全自前実装、リアルタイム通信なし」と報告
このフェーズで見えること
- ClaudeCodeが選択肢を出してきて、わからない場合は**「メリデメ教えて」「イメージがわからないから具体的なフローを」「デメリットは？」と何度でも聞いていい**
- Claude Codeの推奨を使わないケースも結構ある（TalkJSが高額と判明→推奨変更）
- 既存の類似プロジェクトをパスで渡すと、読んで参考にしてくれる
フェーズ3：技術スタック確定
👤 自分
Supabase Realtime + 自前UIは月何案件まで無料？実装2〜3週間の内訳は？
🤖 Claude Code：詳細な料金試算（〜月100案件無料／Pro $25/月で2,000案件）+ Week1-3の作業内訳を提示
👤 自分
OK その方法で行きましょう
🤖 Claude Code：技術スタックをメモリ保存、次のステップ候補を提示
👤 自分
モダンUXがSupabaseの売りだったと思うが、Neon構成にしても変わらない認識であってる？
🤖 Claude Code
ユーザー体感UXは同じ、DXだけ違います（API経由で1ステップ増）
👤 自分
Supabaseはもう無料枠2つ使ってる。Neonはどう？
🤖 Claude Code：代替案として Neon + Cloudflare R2 + Auth.js + Pusher + Gmail SMTP 分離構成を提示、R2のegress無料がSupabaseの最大ボトルネックを解消する点を強調
👤 自分
Bで行く
このフェーズで見えること
- 無料枠・有料枠の閾値を具体的に聞くのが大事（「月何案件まで無料？」）
- 自分側の事情を話すと代替案を出してくれる（「Supabaseは無料枠2つ使ってる」→Neon分離構成提案）
フェーズ4：画面設計とデザインシステム
👤 自分
その前に画面構成を教えてください
🤖 Claude Code：U1〜U7（ユーザー側7画面）、V1〜V9（業者側9画面）、A1〜A6（管理側6画面）の詳細仕様を提示
👤 自分
1画面スクロールでOK／スレッドは左右ペイン／ダッシュボードはタブ式／業者トップは案件数ぼかし表示／カード登録不要
🤖 Claude Code
デザインブリーフを作ります
👤 自分
🤖 Claude Code：dev-browserで実際にサイトを読み取り、正確なカラーコードを実測（Primary #F5A623 等）、デザインシステムをメモリに保存
⇒その後、要件をClaude designに伝えるため整理してもらいます。
このフェーズで見えること
- まずは、デザイン以外の仕様をまとめる
- 参考サイトのURLを渡してざっくりしたデザインやテーマカラーを指定する
- Claude designにて作ってもらったものをClaudeCodeに返す
フェーズ5：インフラ構築（各種サービス対応をCLIで自動化）
👤 自分
OK じゃデザインはあとで指示するので、実装スタートして
🤖 Claude Code：Next.js 16 プロジェクト作成 → Drizzle スキーマで14テーブル定義 → lib ユーティリティ作成 → ビルド成功確認
👤 自分
DB接続情報は既存プロジェクトにある。その他の取得方法教えて
🤖 Claude Code：Neon / R2 / Pusher / Resend vs Gmail SMTP の取得手順を提示
👤 自分
1と2はCLIでできない？4のメールはGmail SMTPでいいんじゃない？
🤖 Claude Code：CLI手順に切り替え、Gmail SMTP採用
順次情報提供（Neon接続URL、Pusher キー、Cloudflare API Token）→ Claude Code が CLI＋Cloudflare API経由で自動セットアップ完了
👤 自分
このフォルダに入れなくても、全部上の階層に移してください。docsフォルダ作って仕様をまとめて
🤖 Claude Code：サブフォルダを解消、docs/フォルダ作成し7つの仕様書を作成
docs/
├── README.md
├── requirements.md
├── screens.md
├── database.md
├── tech-stack.md
├── design-system.md
└── setup.md
このフェーズで見えること
- 実装前に必ず「CLIでできない？」と聞く → Claude Codeが自動で環境構築
- APIキーが必要なサービス → 人間がブラウザで発行して渡すのは避けられない
- docsフォルダと仕様書の整備は、翌日以降の再開のための必須
フェーズ6：U1〜U3 実装と初メール送信テスト
Claude Design から届いたzipファイル（ワイヤーフレーム素材）を展開 → Tailwind + Next.js で本番実装。
実装された画面・API：
- U1 トップページ（ダークヒーロー + Stats Strip + 3ステップ + 対応工種 + 相談例 + 利用者の声）
- U2 相談フォーム（1画面スクロール、Zodバリデーション、React Hook Form）
- U3 受付完了ページ
- /api/cases エンドポイント
👤 自分
推奨の方法で進めて。アドレスは jun.matsubara@XXXX使っていいよ、届いたか教える
🤖 Claude Code：dev-browser で E2E テスト → #2026-0001発行成功、Neon DB保存を確認
👤 自分（📧 受付メールのスクショを添付）
メール来たよ
🤖 Claude Code
Gmail SMTP経路OK、確認完了
このフェーズで見えること
- 実メール送信の疎通確認まで Claude Code が回してくれる
- AIは自分で E2E テストまで回して動作確認をしてくる
- 人間は届いたメールのスクショを返すだけで、経路全体の疎通確認が終わる
フェーズ7：業者登録・ログイン + 案件ダッシュボード
Auth.js v5 + Credentials Provider（bcrypt パスワードハッシュ）を設定。
実装された画面：
- V1 業者向けトップ
- V2 新規登録フォーム（ログイン情報／会社情報／対応エリア47／対応工種13）
- V3 ログイン
- V4 案件ダッシュボード（フィルタサイドバー＋NEWバッジ付きカード一覧）
- V5 案件詳細
- スレッド開始API + マッチ業者への通知メール
E2Eテスト：test-vendor-1@example.com で登録 → 自動ログイン → ダッシュボード遷移 → 新規案件投稿で通知メール送信成功
👤 自分（📧 2通目のメール受信確認）
#2026-0002の受付確認メールは来たけど、本文が文字化けしてる
🤖 Claude Code
curlテストで送った文字データにShift-JISが混入したのが原因。本番フォーム経由では発生しません
このフェーズで見えること
- 不具合があればスクショや報告でOK、Claude Codeが原因特定してくれる
フェーズ8：メッセージ機能 + Pusher Realtime
👤 自分
続けて実装してください
🤖 Claude Code：
- /api/threads/[threadId]/messages GET/POST（業者セッション＋マジックリンクtoken両対応）
- <ThreadChat> 共通コンポーネント（吹き出しUI、Pusher購読、Cmd+Enter送信）
- U4 相談者側スレッド画面（/case/[caseId]?token=xxx、業者一覧＋選択中スレッド）
- V6 業者側スレッド画面
E2Eテスト：業者がメッセージ送信 → 相談者マジックリンクで確認 → 返信送信 → バグ発見（相談者投稿が vendor で保存される不具合）→ 修正（tokenがあれば常に requester 優先）→ DBの不正データもパッチ → 両側で正しく双方向表示されることを確認
フェーズ9：テスト&確認
全ユーザー操作が問題なく行えるか細かく確認するテストケースを作って、私が確認できるようにHTMLページにしてください。 ↓ 確認（問題あれば、ここに～～こういうテストケースも追加して） ↓ テスト実行して下さい。テスト結果は都度都度HTMLページを更新して反映してください。
終わったら確認する 「いったん現状で見たいのでプレビューサーバー立てて」 ⇒ローカル開発環境（http://localhost:3000）
フェーズ10：Githubへプッシュ＋Vercelデプロイ
https://github.com/XXXXXXXX?tab=repositories
プライベートでリポジトリ作ってプッシュしてVercelにデプロイして
下記のようなURLが使えるようになる https://XXXXXXXX.vercel.app
その後は、専用のドメインを取得して、Vercelのドメインに設定 私の場合は、すでに取得しているXserverのドメインのサブドメインを発行してVercelに設定して、ネームサーバーを変更しています。
5. まとめ
今日あなたが理解したこと
- 要件を伝える → 仕様を詰める → デザインする → 実装する → 公開する
- Claude Codeとの対話の仕方（ヒアリング促し、メリデメ確認、CLI活用）
- 仕様書を保存して続きからやる方法
- GitHub→Vercelで世界に公開する仕組み
- 無料枠と有料枠の付き合い方
たった数年前まで、これだけのことをやろうとしたらエンジニアを雇う必要がありました。
今日あなたは、何者になったのか
「1人でサービスを出せる人」になりました。
- あなたはもう、「作りたいものがあるが作れない人」ではありません
- アイデアを思いついた瞬間、その日のうちに世の中に出せる人です
この感覚を忘れないでください。「自分で出せる」という感覚は、一度持つと一生戻りません。
サービス公開できるようになったら世界変わる
- 自分が毎日使いたいツールを作る（これが一番続く）
- 身近な人の困りごとを1つ解決するアプリを作る
- 「こういうサービスが世の中にあったら便利なのに」を試しに作る
コミュニティ「AI LIFE」
- こちらの資料もコミュニティにて公開 https://ailife.kmccorp.jp/what-is-ai-life/
