プログラミング経験がなくても、データベースとログイン機能を備えた業務アプリを自分の手で作れる時代になりました。私自身、コードをほぼ書いたことがない非エンジニアの経営者ですが、この構成で動くアプリを作って運用しています。この記事では、その最短手順と、非エンジニアが最初に押さえるべきセキュリティの下限をまとめます。
前提: Vibe Codingの正確な定義
この進め方は「Vibe Coding（バイブコーディング）」と呼ばれます。2025年2月にAI研究者アンドレイ・カルパシー氏が提唱した言葉で、作りたいものを自然言語でAIに伝え、生成されたコードを一行ずつ精査するのではなく、動作を確かめながら対話を重ねてアプリを形にしていく開発スタイルを指します。Claude Code・Codexのような実行型のAIエージェントが前提です。
もともと試作・プロトタイプ向けの手法として広まった言葉なので、「コードを理解しなくていい」という話ではありません。最初は誰でも中身が分からない——だからまず動くものを作り、詰まったら必要な箇所に降りて学ぶ入口として使うのが現実的な位置づけです（後述）。
ツールの役割分担
| 役割 | ツール |
|---|---|
| AIエージェント本体（実装担当） | Claude Code |
| データベース＋ログイン機能 | Supabase |
| コードの保存・履歴管理 | GitHub |
| 公開用ホスティング | Vercel |
技術スタック（言語やフレームワーク）はClaude Codeが選んで書いてくれるので、事前に決める必要はありません。
手順: 対話で進める6ステップ
- 作業フォルダを用意する — 新しいフォルダを1つ作り、ターミナルでそこに移動
-
Claude Codeを起動する —
claudeと打ってアカウント認証（利用には月額22ドルのProプラン以上が必要） - 作りたいものを言葉で伝える — 「顧客管理アプリを作りたい。ログインした人が自分の顧客だけ登録・閲覧できる」のように具体的に。AIが計画を立てて実装を進める
- データベースとログインをつなぐ — AIの案内に沿ってSupabaseのプロジェクト作成・接続設定を1つずつ進める
- ローカルで動作確認する — まず手元で動かし、直したい点を日本語で伝えて修正のループを回す
- 公開する — GitHubにコードを保存し、Vercelと接続。初回だけVercel側で「つなぐ」操作が必要で、2回目以降はGitHubに保存（push）するたびに自動で公開が更新される
進め方のコツは、AIの提案を盲目的に全部承認しないことです。提案の内容と、動いた結果を一つずつ確かめながら対話で前に進める。「動作を確かめる」がVibe Codingの品質担保そのものです。
もう1つ、仕上がりを大きく左右するのが完成イメージのインプットです。作りたいジャンルの既存アプリのスクリーンショットを貼って「この画面構成に近づけて」と頼むと、ゼロから言葉で説明するより一気に精度が上がります。
セキュリティの下限（ここだけは最初から）
公開する以上、最低限のラインがあります。
-
APIキーや接続情報をコードに直接書かない — キーは環境変数（
.envなど）に置き、コードからは変数を読むだけにする - AIへのチャットやターミナルにキーを直接貼らない — 入力履歴に残る可能性がある。設定ファイルに自分で貼る
- GitHubリポジトリはプライベートにする — パブリックのままだとコードが誰でも見られる。「プライベートリポジトリに変更して」と頼めば直せる
- 本人のデータだけ見られるように制限する — SupabaseのRLS（行レベルセキュリティ）で、ログイン中の本人のレコード以外を読み書きできないようにする
これはあくまで出発点です。顧客の個人情報や決済を扱う本番運用に進むなら、要件の確認と専門家への相談を強くおすすめします。
詰まったら「その場所だけ」学ぶ
全部理解してから作ろうとすると、まず挫折します。順番は逆です。先に動くものを作ると、「自分にも作れた」という手応えから「もっとちゃんと知りたい」という気持ちが湧いてくる。その時点で、詰まった箇所（環境変数とは何か、RLSはなぜ要るのか）にピンポイントで降りて学べばいい。私はこれを、必要になった地点に直接降りる「パラシュート学習法」と呼んでいます。学ぶ意欲は、動くものの後からついてきます。
まとめ
- Claude Code＋Supabase＋GitHub＋Vercelで、DB・ログイン付きアプリが対話だけで公開まで行ける
- AIの提案は内容と動作を確かめながら承認する。完成イメージは既存アプリの画面で渡す
- 環境変数・プライベートリポジトリ・RLSは最初から。本番運用は専門家に確認
- 理解は後から。まず動くものを作り、詰まった箇所に降りて学ぶ
非エンジニア向けの解説版はブログに書いています: Vibe Codingとは｜非エンジニアが「動く業務アプリ」をAIに作らせる始め方
この構成を使った制作例として、私はCodexと「AIチャットつくーる」を開発しました。教材やマニュアルをもとに質問に答えるAIを作り、リンクで受講生やチームへ共有するアプリです。認証・データ保存にはSupabase、公開にはVercelを使っています。
実際に作ったアプリの画面と使い方は、AIチャットつくーるのHPで確認できます。