バイブコーディングとは何か、なぜ地図が先か
バイブコーディングとは、プログラミング言語を学んで自分でコードを打つ代わりに、AI に自然言語で望みを伝えてプログラムを作らせる方法だ。「一ページの紹介サイトを作って」と言えば、AI がコードを書き、作業の過程を見せ、完成した画面のプレビューまで出してくれる。人は何を作るかを決めて方向を握り、実際のコード打ちは AI に任せる。
だが初めてコーディングに触れる人は、始める前に尻込みしがちだ。ツール名や概念が馴染みないからだ。本当の問題は、個々の概念が特別難しいことではなく、「これらがどう組み合わさって一つの完成したサイトになるのか」という全体像がないことにある。地図がなければ、各地点をいくら分かりやすく説明されても、一歩ごとに道に迷う。
だから各ツールの使い方を覚える前に、まず全体の地図を広げる。地図には三つの大きな塊がある。(1) どのツールで作るか、(2) 目に見える画面（フロントエンド）をどう作るか、(3) 画面の裏でデータを扱う部分（バックエンド）をどう埋めるか。この三つを順に押さえれば、バイブコーディングの最初から最後までが一目で見える。
LLM とコーディングエージェント：脳と手足
まず二つの言葉を区別する。LLM（大規模言語モデル）は、膨大なデータを学習した「脳」だ。ChatGPT、Gemini、Claude はいずれも LLM だ。答え、書き、コードを考えることはできるが、それ自体では自分のパソコンのファイルを直接作ったり直したりはできない。チャット画面の中に言葉として存在するだけだ。
その脳に手足を付けて実際に働かせるのが、コーディングエージェントだ。コーディングエージェントは LLM の判断を受け、あなたのパソコン上でファイルを作り、コードを直し、コマンドを実行し、結果を確かめる。考える脳（LLM）と動く手足（エージェント）——両者が合わさって初めてバイブコーディングになる。実際にインストールして使うのは、このコーディングエージェントだ。
コーディングエージェントには複数の製品があり、アプローチもさまざまだ。いろいろな LLM を差し替えたいなら Cursor のようなツールが便利だ。ただしこの地図では最も単純な道を取り、近ごろ成果の良い Claude Code を軸に説明する。
ツールのセットアップ：かつての複雑さ、今の簡単さ
以前はセットアップが複雑だった。英語のコマンドがびっしり並ぶ黒い画面——「ターミナル」——を開いて見慣れないプログラムを入れ、プレビュー用のエディタ（Visual Studio Code、略して VS Code）を別に入れ、取り消し履歴を残す Git まで、その黒い画面のコマンドで設定しなければならなかった。何かも分からず言われるまま入れる場面が多かった。
ここで用語を一つ。ターミナルは、マウスのクリックではなく打ち込んだ文字でパソコンに仕事をさせる窓だ。私たちが使う Windows や Mac のきれいな画面も、もともとこうしたコマンドで動いていたものを、見やすく覆っただけだ。初期のコーディングツールにはこの「見やすい覆い」がなく、黒い画面を直接扱うしかなかった。
今は Claude Code の PC 版がこれらすべてを単独で肩代わりする。ターミナルやエディタを別に開く必要はなく、インストールしてログインすれば、対話・コーディング・プレビューが一つの窓の中で完結する。インストールはこうだ。Google で「Claude Code」と検索して公式ダウンロードページに入り、自分のパソコン（Windows/Mac）に合ったインストーラをダウンロードして実行する。入れ終えたら起動し、Claude アカウントでログインして、窓の左上でチャットタブではなく「Code」タブを選ぶとコーディング画面が開く。対話欄に日本語（や任意の言語）で指示すればコードが書かれ、成果のプレビューまでその中に表示される。
コストはどう考えるべきか
正直に触れるべき点がある。コードを代わりに書いてくれるこの種のツールは、たいてい有料の購読を求める。Claude Code で実際のコーディング（Code タブ）を使うには、Pro 以上の有料プランが要る場合がある。
だが比較対象を変えると判断は変わる。もともとサイトを一つ作るために開発者を雇ったり外注したりすれば、最低でも数百万ウォンはかかる（動画では 200 万ウォン以上を例に挙げている）。一方、購読料はそれよりはるかに低く、その一つの購読で複数のサイトを作れる。最初は安いプランで始め、本格的にサービスを作るときに上位プランへ上げればよい。
「お金がかかる」を「外注に比べどれだけ節約するか」に置き換えれば、変化の速い時代には悪くない投資として計算が立つ。とりわけ一人でサービスを作り運営する個人ビルダーにとっては、開発者一人分の人件費をツールの購読に置き換えることになる。
Git と GitHub：セーブファイルとネット上の倉庫
ツールを入れたら、作業を保存する場所が要る。Claude Code がコードを直すたびに、その変化を保存し、失敗したら前の状態に戻せるようにしておく必要がある。ゲームのセーブファイルの役を担うのが Git だ。Mac はたいてい最初から入っており、Windows は入っていないことがあるので一度だけ自分で入れる（git-scm.com からインストーラを取り、すべてのオプションは既定のまま「次へ」を押して入れ終え、その後 Claude Code を再起動する）。
GitHub は Git に「hub（ハブ）」が付いたもので、Git で保存した記録をネット上の倉庫に上げておくサービスだ。Git が自分のパソコンの中での保存なら、GitHub はその記録がインターネットに保管される倉庫だ。つなげば、コードをオンラインでバックアップし、複数の端末で作業を続け、後でサイトをインターネットに公開するときにも使える。
つなぎ方はこうだ。GitHub で登録した後、Claude Code に戻り、入力欄の横のプラス（+）ボタンから Connect メニューを開き、GitHub を選んで先ほど作ったアカウントで認証すればよい。以後は「ここまでの作業を GitHub に上げて」と言うたびに、その時点のコードが保存される。毎瞬自動ではなく、頼んだときに保存される、とだけ覚えておけばよい。
フロントエンドとバックエンド：時計の文字盤とゼンマイ
いよいよサイトを作るが、サイトは大きく二つに分かれる。時計にたとえると分かりやすい。時計には目に見える文字盤（針や数字）があり、その裏で回るゼンマイがある。時計が動くには両方が要る。ウェブサイトも同じで、目に見える画面がフロントエンド、画面の裏でデータを保存・処理する部分がバックエンドだ。
フロントエンドは目に見える画面だ。もともと HTML・CSS・JavaScript のような言語で書き、よく使う機能をあらかじめ束ねた「フレームワーク」（React、Flutter、React Native——料理でいえばミールキット）を載せる。名前が多くて怯みやすいが、バイブコーディングではこういうものがある、と知っていれば十分だ。
肝心なのは順序だ。まず作るサービスの規模を見積もる。たとえば単純な購読型サービスなら規模は大きくなく、保存するデータも少ない。その規模を Claude Code に伝え、それに合う言語・構成で書いてと頼めば、エージェントが規模に合うスタックを選ぶ。気に入らなければ別のに替えてと言えばよい。これが大事なのは、小さなプロジェクト向けの構成で書いてしまうと、後でトラフィックが集中したときにサイトが持ちこたえられないことがあるからだ。最初から規模に合わせて書いておく——それがこの手順の意味だ。
シンプルな一ページの会社紹介サイトを作って。
どのスタックと言語を使うか先に教えて、
この小さな規模に合う軽い構成で書いて。バックエンドの壁と二人のマネージャー：Supabase と Vercel
フロントエンドはさほど苦労せず出てくる。問題はその次だ。紹介ページに会員登録や掲示板を付けるには、画面だけでは足りない——データを保存・処理するバックエンドが要る。そしてここが、コーディングを学んでいない人の多くが諦める地点だ。バックエンドには、サーバープログラム、データベース、API、デプロイ、ポートと、気を配るものが多いからだ。
会員登録一つを動かすだけでも、会員情報を収めるデータ倉庫が要り、画面と倉庫が互いにやり取りするコードも書かねばならない。かつてはそのために、Amazon Web Services のようなところでサーバー（コンピュータ）を借り、コードをそのサーバーに上げ、ウェブサーバープログラムを入れ、ドメインをつなぐ——という複雑な一連の工程を全部通す必要があった。
この工程を代わりにこなすマネージャーが二人いる。一人は Supabase——サーバー借り、データベース作り、データ収めを一度に片づける「データのマネージャー」だ。もう一人は Vercel——出来上がったサイトをインターネットに上げる「デプロイのマネージャー」だ。この二人が、かつての複雑な工程を代わりに引き受けてくれる、と理解すれば十分だ。
Supabase のつなぎ方。supabase.com で（GitHub アカウントでも）登録・ログインし、新規プロジェクト（New Project）を作る。データベースのパスワードは Generate ボタンで自動生成し、別に控えておく。地域は韓国なら Seoul を選ぶ。作成した瞬間、空のバックエンド（サーバー）が本当に出来上がる。次に上部の Connect ボタンか設定の API keys から、二つ——プロジェクト URL（あなたのバックエンドの住所）と公開鍵（鍵）——をコピーして Claude Code に貼り付け、「今作ったサイトをこの Supabase につないで」と言えば、接続コードに加え、データの表（テーブル）を作る命令文まで書いてくれる。その命令文を Supabase の SQL Editor に貼って Run すれば表ができる。鍵はパスワードと同じなので他人に公開してはいけない。安全なのは、Claude Code に鍵を入れる専用ファイルを開いてもらい、そこに登録する方法だ。
Vercel でのデプロイ。ここまで作ったサイトは自分のパソコンの中でしか動いていない（YouTube でいえば、編集は終えたがまだアップロード前の状態）。vercel.com にアクセスし「Continue with GitHub」でログインすると、あなたの GitHub 倉庫にそのままつながる。Add New から Project を押し、先ほど作ったサイトのリポジトリを読み込んで Deploy を押す。少し待つと「プロジェクト名.vercel.app」のような、誰でもアクセスできるネット上の住所が一つできる。以後は自分のパソコンが切れていても、世界中の誰もがそのサイトを見られる。さらに、今後 Claude Code でコードを直して GitHub に上げるたびに、Vercel が自動でサイトを最新版に更新する。「デプロイのマネージャー」という名はここから来ている。
地図は三行に畳まれる（そして次の地図）
ここまでがバイブコーディングの全体の地図だ。ツールのセットアップから、画面を作り、画面の裏のデータを埋め、インターネットに上げるデプロイまで、ひと回りした。あとは Claude Code に指示するだけで、サイトが作られる準備が整った。
復習は三行で足りる。一、ツールは Claude Code。二、フロントエンドは作るサービスの規模を伝え、言語とスタックを任せる。三、バックエンドは Supabase（データ）と Vercel（デプロイ）に任せる。この三行が頭にあれば、見慣れない用語が出てきても、それが地図のどの地点かをすぐに指させる。
次の地図では「作れはする」から「どうすればもっと良く作らせるか」へ進む。harness、MD（指示ドキュメント）、skill、connect、API、agent といった概念がそこで登場する。名前は難しく見えても、すでに広げた地図の上に載るものなので、順に押さえれば難しくない。本稿は Honjabs チャンネルの『一枚の地図で分かるバイブコーディング』第 1 部を、初心者向けに整理したものだ。