Module 6 — AI駆動開発 & バイブコーディング

AI駆動開発で
自分のプロダクトを公開しよう

「アイデアはある。でもどうやって形にすればいいかわからない」——
Claude Code × Vercelで、3時間後にはURLが手元にある。

3h
集中講座
4名
少人数制
7枚WS
ワークショップ
¥16,500
税込
予約・お支払いへ進む カリキュラムを見る

こんな人におすすめ

アイデアはあるけど、プロダクトとして形にする方法がわからない バイブコーディングで「アイデア→動くアプリ→公開」を3時間で一気に体験します。
Claude Codeに指示を出しても、期待通りのコードが返ってこない バイブコーディング5ステップで「概念→命令」に変える指示力を身につけます。
作ったアプリをデプロイして公開する方法がわからない git push → Vercel自動ビルド → 本番URL取得まで、デプロイの全工程を体験します。
副業や個人事業で、AI搭載のWebアプリを自分で作りたい AIアドバイザーアプリを完成させ、プロダクト開発設計書（WS-7）を持ち帰れます。

講座の進め方

画面共有のライブ授業で、講師と一緒に手を動かしながら学びます。

1
解説パート
フロント/バック/DB・デプロイの全体像を講師が画面共有でわかりやすく解説します。
2
ライブコーディング
Claude Codeを使ってAIアドバイザーアプリを一緒に実装。バイブコーディングをリアルタイムで体験します。
3
デプロイ実践
git push → Vercel自動ビルド → 本番URL取得。自分のアプリがインターネットに公開される瞬間を体験します。
4
設計書作成
WS-7「マイ・プロダクト開発設計書」を完成させ、次に作るプロダクトの設計を持ち帰ります。

カリキュラム

アイデアを形にして、インターネットに公開する。
3時間でその全工程を体験します。

PART 1 AI駆動開発の全体像を掴む（50分）
①
AI駆動開発の全体像 & 今日のゴール
Sam Altman「開発コスト$100,000→$1」の予測から始まる時代の転換点。「作れること」の価値が下がり「何を作るか」の価値が上がる——その新しいルールを理解します。WS-1「プロダクト構造設計シート」で自分のアプリを設計。
AI駆動開発バイブコーディング指示精度WS-1
②
フロントエンド / バックエンド / DB の役割分担
「レストランの喩え」でWebアーキテクチャの3層構造を直感的に理解。ブラウザ→フロント→バック→DBのデータフローを図で描き、今日作るアプリの全体像を把握します。
3層アーキテクチャデータフローHTML/CSS/JSAPI
③
サーバー・ドメイン・デプロイの概念
昔のFTPから現代のgit push自動デプロイまで、Webアプリ公開の進化を理解。ドメイン・DNS・HTTPSの仕組みとVercelを使ったモダンデプロイの全体像を掴みます。WS-2「デプロイ計画シート」を記入。
VercelCDNHTTPSWS-2
PART 2 DB理解 & Claude Code入門（55分）
④
データベース基礎 + Supabase入門
データの「保存・検索・更新」を担うDB。SQL vs NoSQL・テーブル設計・リレーションの基本を学び、WS-3で自分のプロダクトにDBが必要か判断します。Supabaseの使い方も紹介。
SQLテーブル設計SupabaseWS-3
⑤
休憩 & 中間振り返り（KPT）
前半を振り返るKPTセッション。Keep（よかったこと）/ Problem（困ったこと）/ Try（次に試すこと）を整理して、後半の実装パートに臨みます。
KPT振り返り後半プレビュー
⑥
Claude Code入門 & バイブコーディング手法
Claude Codeのインストールから実践まで。CLAUDE.md（AIへの仕様書）の書き方、/planコマンド、バイブコーディング5ステップを習得。WS-4「Claude Code指示テンプレート」を3パターン作成。
Claude CodeCLAUDE.md/planWS-4
PART 3 プロダクト実装・デプロイ・設計書作成（75分）
⑦
プロダクト実装実践（バイブコーディング本番）
Claude Codeを使ってAIアドバイザーWebアプリを実装。HTML+Tailwind CSSのフロント＋Vercel Serverless FunctionsのバックエンドをバイブコーディングでLive実装します。WS-5「実装ログシート」で進捗管理。
バイブコーディングTailwind CSSServerlessWS-5
⑧
Vercelデプロイ実践
GitHub連携→Vercelインポート→環境変数設定→本番デプロイの全手順を実践。自分のアプリが https://xxxx.vercel.app で公開される瞬間を体験します。WS-6「デプロイ完了シート」で動作確認。
GitHubVercel環境変数WS-6
⑨
GOAL — まとめ & WS-7 マイ・プロダクト開発設計書
AIコーディングツール比較・技術ロードマップを確認し、今後の学習方針を固めます。WS-7「マイ・プロダクト開発設計書」（プロダクト概要＋Claude Code指示テンプレート集＋開発プラン）を完成させて持ち帰ります。
ロードマップWS-7完成設計書次のステップ

受講後1ヶ月のチャットサポート付き

講座終了後も安心。1ヶ月間のチャットサポートで、デプロイのトラブル・機能追加・次のプロダクト相談にお答えします。
バイブコーディングを自走できるようになるまで、しっかり伴走します。

質問し放題
コードレビュー・デバッグ支援
Vercelデプロイサポート

3時間後、あなたの
プロダクトがネットに公開される。

Webアーキテクチャを理解できる
フロント/バック/DBの役割分担を人に説明でき、自分のプロダクトの設計図が描けるようになります。
バイブコーディングで作れる
Claude Codeにプロダクト仕様を指示し、AIと一緒にWebアプリを実装できるようになります。
マイ・プロダクト開発設計書
WS-7で完成させた開発設計書（概要＋指示テンプレート集＋ロードマップ）が、次のプロダクトの武器になります。

講師紹介

「AIで仕事を自動化し、
人間は本来やるべきことに集中しよう。」

東京都出身、バリ島在住。AIプロダクトの開発と、AIで仕事を自動化する仕組みづくりを専門とする。自身もClaude Codeを日常的に活用し、複数のプロダクトを開発・運用中。

「誰もが"作る側"になれる世界」を目指し、AutoMatesを運営。初心者がつまずくポイントを熟知した、実践重視の講義スタイル。

上山 翔太
AutoMates 主宰 / AIエンジニア・起業家

AutoMatesメンバーの声

AI駆動開発&バイブコーディング講座を受講した仲間のリアルな声を紹介します。
(画像はAI生成のイメージです)

長谷川さん（28歳）
長谷川さん（28歳）
会社員（非エンジニア）
Claude Codeのバイブコーディングで初アプリをVercel公開
CLAUDE.mdに仕様を書いて/planコマンドで進めるバイブコーディング5ステップが衝撃でした。フロント・バックエンド・DBの3層構造を理解した上でAIに指示を出せるので、出力の質が全然違います。
上田さん（32歳）
上田さん（32歳）
フリーランスデザイナー
Supabaseでデータベース連携、Vercelでデプロイまで完走
Supabaseでテーブル設計からデータ取得まで体験できたのが大きいです。Vercel Serverless Functionsでバックエンドも動かし、GitHub連携→本番デプロイまで3時間で完走できたのは感動でした。
木村さん（46歳）
木村さん（46歳）
スタートアップ経営者
外注なしでAIアドバイザーWebアプリを自社で構築
「何を作るか」の価値が「どう作るか」を超えるというSam Altmanの話に納得しました。Claude Codeで自然言語→実装の流れを体験し、外注で数十万かかっていたプロトタイプ開発を自分で回せるようになりました。

※ メンバーのプライバシー保護のため、お名前は仮名です。成果は個人差があります。

開催日程・申し込みの流れ

開催日次回日程調整中確定次第、優先案内します
時間3時間多少伸びることもございます
形式オンライン（Zoom）PC・音声・カメラ推奨
定員4名少人数制
料金¥16,500税込 / 1名

申し込みの流れ

STEP 1
フォーム送信
必要事項を入力して送信
STEP 2
決済（Stripe）
安全な決済ページでお支払い
STEP 3
Zoom URL配布
開催日前日にメールでお届け
STEP 4
当日開催
URLをクリックしてスタート！

よくある質問

できます。「動いた！」をまず喜び、「なぜ動くか」をClaude Codeに聞きながら理解を深めるスタイルです。全部理解してから書くのではなく、書きながら理解する——そのマインドセットがあれば十分です。
PC（MacまたはWindows）とインターネット接続環境があれば大丈夫です。Claude Code・Node.js・GitHubアカウント・Vercelアカウントの事前セットアップ手順をお送りします。Claude APIの料金（数百円程度）は別途必要です。
AIチャットボット・LP・フォーム＋通知・テキスト変換ツールなどがすぐ作れます。3〜6ヶ月の学習を積めば、ユーザー認証付きSaaSや業務自動化ツールも可能です。講座ではまず「動く最小版」を作り、そこから拡張する考え方を学びます。
原因の8割は「環境変数の設定漏れ」です。Vercelダッシュボードで環境変数を確認→再デプロイが基本の対処法。講座中にトラブルシューティングも一緒にやるので、詰まっても安心です。
1週目：今日のアプリに改善を加える、2週目：WS-7の計画を実行、3週目：次のプロダクトのアイデアを相談、4週目：Supabase連携の最初の一歩——このペースで使うと最も効果的です。

準備はいい？
自分のプロダクトを公開しよう。

フロント/バック/DB/デプロイの全体像からバイブコーディング実践まで。
3時間後にはあなたのWebアプリがインターネットに公開されている。

予約・お支払いへ進む

※ Stripeによる安全なオンライン決済

3h 集中講座
4名 少人数制
7枚 ワークショップ
¥16,500 税込