「バイブコーディングって最近よく聞くけど、実際どうやるの？」という方に向けて、始め方から実践手順までを解説します。
この記事を読めば、今日からバイブコーディングを始められます。特別な知識は不要です。
バイブコーディングとは？30秒でわかる概要
バイブコーディング（Vibe Coding）は、AIに日本語で指示を出してコードを書かせる開発スタイルです。2025年2月にOpenAIの元研究者Andrej Karpathy氏が提唱しました。
従来のプログラミングでは、開発者がコードを1行ずつ書いていました。バイブコーディングでは「こんなサイトを作って」とAIに伝えるだけ。AIがコードを生成し、人間はディレクションと品質チェックに集中します。
従来の開発との違い
- 従来：コードを書く技術が必要 → 習得に数ヶ月〜数年
- バイブコーディング：作りたいものを言葉で伝える → 今日から始められる
バイブコーディングに必要なもの
1. AIコードエディタ「Cursor」
Cursorは、AIが内蔵されたコードエディタです。無料プランでも始められます。
- Mac / Windows / Linux 対応
- 無料プランあり（月50回のAI利用）
- Pro プラン $20/月で無制限
2. AIモデル（Claude または GPT-4）
CursorにはAIモデルが内蔵されています。特におすすめはClaude。日本語の理解力が高く、Web制作のコード品質が安定しています。
3. 作りたいもののイメージ
最も大事なのはこれです。「どんなサイトを作りたいか」「誰に向けたものか」「何を伝えたいか」を整理しておくと、AIへの指示が的確になります。
バイブコーディングの実践手順（5ステップ）
ステップ1：Cursorをインストールする
公式サイトからダウンロードしてインストール。5分で完了します。
ステップ2：プロジェクトフォルダを作る
デスクトップに新しいフォルダ（例：「my-website」）を作り、Cursorで開きます。
ステップ3：AIに指示を出す
Cursorの「Composer」機能（⌘+I または Ctrl+I）を開いて、作りたいものを日本語で伝えます。
パーソナルトレーナーのLPを作ってください。
・ヒーローセクション（キャッチコピー + 無料体験のCTAボタン）
・トレーナーの紹介（写真エリア + 経歴）
・料金プラン（月4回 30,000円、月8回 50,000円）
・お客様の声（3件）
・お問い合わせフォーム色はネイビーとゴールドを基調に。フォントはゴシック体で。
これだけでAIがHTML + CSSのコードを生成します。
ステップ4：プレビューで確認する
生成されたindex.htmlをブラウザで開くと、LPが表示されます。イメージと違う部分があれば、次のステップで修正します。
ステップ5：修正を重ねる
「ヒーローの文字をもっと大きくして」「料金プランにおすすめマークをつけて」「CTAボタンの色をもっと目立つようにして」——修正も日本語で指示するだけです。
この「指示 → 確認 → 修正」のサイクルを繰り返すのがバイブコーディングの基本です。
バイブコーディングのコツ
具体的に指示する
「かっこいいサイト」ではなく「白背景にネイビーの見出し、余白を広くとったミニマルなデザイン」のように具体的に。色はカラーコード（#1A2B3C等）で伝えるとさらに精度が上がります。
参考サイトを見せる
「〇〇のサイトのようなデザインにして」と参考URLを伝えるのも有効です。
一度に全部作ろうとしない
セクションごとに作っていくと精度が高くなります。まずヘッダー、次にヒーロー、次に料金表……という順番で。
.cursorrules を活用する
プロジェクトに.cursorrulesというファイルを置くと、AIの動作をカスタマイズできます。「レスポンシブ対応必須」「セマンティックなHTMLを使う」等のルールを書いておけば、毎回指示しなくて済みます。
バイブコーディングでどこまで作れる？
- LP（ランディングページ） — 1〜2時間で完成
- コーポレートサイト — 1〜3日で基本構成が完成
- ブログ付きサイト — WordPressテーマのカスタマイズも可能
- Webアプリ — ログイン機能やデータベース連携も指示次第で
アントワ（antoir）では、実際にすべてのWeb制作プロジェクトをバイブコーディングで行っています。このサイト（antoir.jp）自体も、Cursorを使ったバイブコーディングで制作しています。
もっと本格的に学びたい方へ
「一人でやるのは不安」「プロから直接学びたい」という方には、Viveコーディング教室がおすすめです。
- 体験ワークショップ（90分 / ¥5,000）— AIでLP1枚を作ってみる
- 入門コース（1日 / ¥39,800）— 1日でマイホームページを完成
プログラミング経験ゼロでも大丈夫。バイブコーディングで「自分で作れる力」を身につけましょう。
よくある質問
Q. バイブコーディングとプログラミングの違いは？
プログラミングはコードを自分で書きますが、バイブコーディングはAIに日本語で指示してコードを生成させます。
Q. バイブコーディングで副業はできる？
できます。LP制作1件で3〜10万円が相場です。副業の始め方で詳しく解説しています。
Q. バイブコーディングの限界は？
シンプルなWebサイトやLPには有効ですが、大規模システムにはプログラミング知識が必要です。AI駆動開発のメリット・デメリットも参考に。
関連記事
- バイブコーディングで90分でLPを作る方法｜初心者向けステップガイド
- バイブコーディングで副業を始める完全ロードマップ｜月5万円を稼ぐまでの道筋
- CursorでWebサイトを制作する方法｜AI駆動開発の実践ガイド — Cursorの使い方をもっと詳しく
- 個人事業主がバイブコーディングで自分のホームページを作る方法 — 費用ゼロで始めるHP制作
まとめ
バイブコーディングは、プログラミングの知識がなくてもWebサイトやアプリを作れる新しい開発スタイルです。必要なのはCursor（無料）と、作りたいもののイメージだけ。今日から始められます。
