Biz向けガイド

バイブコーディングを
してみよう

エンジニアじゃなくても、Webアプリは作れる

今日話すこと

🍽️

基礎知識

Webアプリの仕組みを
レストランで理解する

🧩

構成パターン

7つのパターンから
自分に合うものを選ぶ

🛠️

ツール選び

レイヤーごとに
1つずつ選ぶだけ

🚀

作り方

Claude Codeに
URLを渡すだけ

2
SECTION 01

Webアプリの基礎知識

レストランに例えて理解しよう

3

Webアプリとは

ブラウザで動くアプリのこと。URLにアクセスすれば使える。

Googleスプシ

表計算

Notion

ドキュメント

Slack

チャット

Figma

デザイン

インストール不要。URLを共有するだけで誰でもすぐ使える

だから新しいサービスを素早く届けたいときはWebアプリから作るのが定石

4

Webアプリ = レストラン

フロントエンド 🍽️ ホール お客さんが直接触る部分 画面・ボタン・入力フォーム HTML / CSS / JavaScript レゴのように部品を組み合わせる 注文伝票 （APIと呼びます） バックエンド 👨‍🍳 キッチン 見えないところで処理する データの保存・取得・計算 API（窓口）で注文を受ける 24時間、注文を待ち受ける 問い合わせ （SQLという言語で） データベース 🗄️ 食材倉庫 すべてのデータを保管 数億行でも高速検索 同時アクセスに対応 テーブル同士を関連付けられる
5

API（エーピーアイ）とは？

他の人が作った機能を、自分のアプリから呼び出す仕組み

自分のWebアプリ 🖥️ APIを呼ぶだけで高度な機能が使える 🔐 Googleログイン 💳 Stripe決済 🗺️ Google Maps 🤖 Claude API 📧 メール送信 📊 分析
6

ボタンを押してから表示されるまで

👤 ユーザー フロント バックエンド DB ① ボタンを押す ② APIリクエスト（問い合わせ） ③ データ問い合わせ ④ データ返却 ⑤ 整形して返す（JSON形式） ⑥ 画面に表示 ここまで全部で 約0.3秒
7
SECTION 02

構成パターン

世の中のWebアプリは、だいたい7パターン

8

7つの構成パターン

1

静的サイト

Zenn, note, LP

月額 ¥0

2

Next.js 1本完結

ChatGPT Web版, 管理画面

月額 $0〜50

3 推奨

Supabase + Next.js

メルカリShops的な構成

月額 $0〜70

4

記事管理サービス連携

（Headless CMS）

ZOZOTOWN, クックパッド

月額 $0〜50

5

スプシ / Notion

まず試す用（MVP）, 社内FAQ

月額 ¥0

6

リアルタイム同期型

（BaaS + SPA）

Figma, Discord, Slack

月額 $0〜25

7

超軽量・エッジ型

（Cloudflare Workers）

Linktree, lit.link

月額 $0〜5

迷ったら
パターン3がおすすめ

9

どのパターンを選ぶ？

何を作りたい？ ブログ・LP 更新頻度が低い メディア・EC Bizが記事更新 会員制サービス ログイン・課金あり まず試したい まず試したい 社内ツール ダッシュボード等 パターン1 静的 パターン4 記事管理 パターン3 推奨 パターン5 スプシ パターン2 Next.js 迷ったらパターン3（Supabase + Next.js） AI連携 × バイブコーディングに最も強い構成
10
SECTION 03

ツールを選ぼう

役割ごとに1つずつ。メニューから選ぶだけ

11

ツールメニュー — 役割ごとに1つ選ぶ

ホスティング （アプリの置き場所） Vercel ★ Cloudflare Pages フレームワーク （アプリの骨格） Next.js ★ Astro データベース （データの保管庫） Supabase ★ Neon D1 認証 （ログイン機能） Supabase Auth ★ Clerk NextAuth UIコンポーネント （見た目の部品集） shadcn/ui ★ MUI ストレージ （画像・ファイル置き場） Supabase Storage ★ Vercel Blob ★ = 推奨の組み合わせ Vercel + Next.js + Supabase + shadcn/ui バイブコーディング最強構成
12

なぜこの組み合わせ？

バイブコーディングで一番大事なのは「Claude Codeの出力がそのまま動く確率が高い」こと

1

学習データが最多

Next.js+Supabaseはドキュメントもナレッジも世界最大級。Claude Codeが正しいコードを一発で出す確率が最も高い

2

Vercelはハマらない

Next.js公式の置き場所なので、公開（デプロイ）時に謎エラーが出にくい。git pushするだけで完了

3

ワンストップ

Supabase 1つでDB+認証+ストレージ。3つを別々に選ぶ手間がゼロ。管理画面でデータも直接見える

4

AI連携が最強

SupabaseのDBはAIツールとの接続に対応済み。将来AIにデータ操作させるとき最もスムーズ

5

構成を統一できる

全員が同じ構成なら、誰かがハマったポイントが全員のナレッジになる。教える側も楽

13

コスト感

個人開発・検証

$0

Vercel Hobby + Supabase Free
DB 500MB / 月5万ユーザーまで

法人（5〜20人）

$45〜70

Vercel Pro $20
+ Supabase Pro $25〜50

成長期（100人〜）

$70〜350

Vercel $20〜150
+ Supabase $50〜200

開発〜検証は完全無料。法人で本番運用しても月1万円程度

14
SECTION 04

セキュリティの基本

認証と認可 — 2つの「にんか」を区別しよう

15

認証と認可

🔐

認証

あなたは誰？

Google OAuth → 社内ツール向け

メール+パスワード → 顧客向け

マジックリンク → パスワード不要

🛡️

認可

何ができる？

役割で分ける（RBAC） → 管理者/編集者/閲覧者

行単位で制御（RLS） → 自分のデータだけ見える

会社ごとに分離（マルチテナント） → A社⇔B社で見えない

16

安心ポイント — マネージドサービスが守ってくれる

自動で守られる

✅ HTTPS通信 — Vercel/Cloudflareなら設定不要

✅ SQLインジェクション対策 — Supabase Clientで自動防御

✅ バックアップ — Supabase日次自動バックアップ

意識すること

⚠️ シークレット管理 — APIキーはコードに書かない

⚠️ リージョン選択 — 日本向けなら東京リージョン

⚠️ 最小権限の原則 — 必要な人に必要な分だけ

17
SECTION 05

さあ、作ろう

Claude Codeにやりたいことを伝えるだけ

18

Claude Codeへの指示テンプレート

以下をコピペして【】を書き換えるだけ

以下のページを参考に、Webアプリを作ってください。

参考: Notionページを開く ↗

【作りたいもの】

（例: 社内の勤怠管理ツール）

【使う人】

（例: 社員20人。Google Workspaceアカウントあり）

【必要な機能】

- Googleログイン

- 出退勤の打刻

- 月次の勤務時間集計

19

Claude Codeがやってくれること

STEP 1 パターン選定 ページを読んで 最適な構成を選ぶ 🤔 STEP 2 プロジェクト生成 DB・認証・UI込みの 雛形を自動作成 ⚡ STEP 3 基本実装 ログイン、一覧、 フォーム等を実装 🛠️ STEP 4 会話で育てる 「色を変えて」 「機能追加して」 💬 あなたがやるのは「何を作りたいか」を伝えることだけ
20

まとめ

1

Webアプリは
3要素でできている

フロントエンド
バックエンド
データベース

2

ツールを
組み合わせるだけ

推奨構成:
Supabase + Vercel
+ Next.js + shadcn/ui

3

作りたいものを
Claude Codeに伝える

ページURL +
やりたいこと
= プロジェクト完成

MVPから始めよう。データが溜まったら、AIエージェントが自律的に動く世界が待っている。

21

Thank you!

詳細はNotionページで

Notionページを開く ↗

22
1 / 22