Vibe Coding入門

Vibe Codingとは

Vibe Codingの定義

Vibe Codingとは、AIに自然言語で意図を伝え、コードを生成させて動くアプリを作る開発手法です。プログラミング言語の文法を覚える必要はありません。「こういうアプリが欲しい」と日本語で伝えれば、AIがコードを書いてくれます。

2025年にAndrej Karpathy氏(元Tesla AI責任者)が提唱し、瞬く間に広まりました。背景にはAIのコード生成能力の飛躍的向上があります。GPT-4oやClaude Opus 4.6は、簡単なWebアプリであれば一発で動くコードを出力できるレベルに達しています。

従来の開発との違い

%%{init:{'theme':'dark','themeVariables':{'primaryColor':'#00A5BF','primaryBorderColor':'#007A8F','primaryTextColor':'#e8e8e8','lineColor':'#00A5BF','secondaryColor':'#1a1a1a','background':'#141414','mainBkg':'#1a1a1a','nodeBorder':'#00A5BF'}}}%%
graph LR
  subgraph 従来の開発
    A1["プログラミング
言語を学習"] --> A2["設計書を
作成"]
    A2 --> A3["コードを
手で書く"]
    A3 --> A4["バグを
修正"]
    A4 -.->|繰り返し| A3
  end
  subgraph Vibe Coding
    B1["意図を
日本語で書く"] --> B2["AIが
コード生成"]
    B2 --> B3["動作を
確認"]
    B3 --> B4["修正指示を
日本語で伝える"]
    B4 -.->|繰り返し| B2
  end

従来の開発は、プログラミング言語を習得するだけで数ヶ月から数年。Vibe Codingではその学習コストがほぼゼロになります。代わりに求められるのは「自分が何を作りたいか」を明確に言葉にする力です。

ツール選択

Vibe Codingに使えるツールは複数あります。それぞれ特徴が異なるので、自分の目的と技術レベルに合ったものを選んでください。

Webブラウザだけで完結するVibe Codingツール

CursorやClaude Codeはローカルにインストールが必要ですが、Bolt.newとv0はブラウザだけで完結します。PCの環境構築が不要なので、研修やプロトタイピングの初手として優れています。

「コードが読めなくても使える」は本当か

半分本当、半分ウソです。簡単なアプリならコードを一切読まずに完成できます。AIが生成したコードをそのまま動かして、動作を確認し、気に入らない部分を日本語で修正指示するだけで回ります。

ただし、AIが間違ったコードを出すこともあります。その場合、エラーメッセージを読んでAIに伝える、あるいは「何が起きているか」を説明する必要が出てきます。コードの文法を知らなくてもいいけれど、「確認する目」と「修正指示を出す力」は求められます。

はじめてのアプリ

最初の成功体験がすべてを決める

Vibe Codingで最も大切なのは「動いた!」という体験です。複雑なものを狙う必要はありません。シンプルだけど実用的なアプリを一つ完成させること。その達成感が次への推進力になります。

なぜメモ帳アプリなのか

メモ帳アプリはシンプルに見えて、アプリの基本要素をすべて含んでいます。

• 入力 -- テキストを書く(フォーム処理)
• 保存 -- データを記憶する(データ永続化)
• 表示 -- 保存した内容を見る(一覧表示)
• 削除 -- 不要なデータを消す(データ操作)

この4つは、どんな業務アプリでも共通する基本動作です。メモ帳で学んだパターンは、顧客管理ツールにも在庫管理ツールにもそのまま応用できます。

AIへの最初の指示の書き方

初手の指示は「具体的に、でも細かすぎない」がコツです。AIに余白を残しつつ、方向性は明確に伝えます。

要件の言語化

AIの出力品質は入力の品質で決まる

Vibe Codingの成果を左右するのは、AIのモデル性能ではなく「あなたが何を伝えるか」です。曖昧な指示からは曖昧なアプリが生まれ、具体的な指示からは具体的なアプリが生まれます。

これはプロのエンジニアに開発を依頼する場合と同じです。「いい感じのアプリ作って」では誰も動けません。要件定義、つまり「何をどう作るか」の言語化は、Vibe Codingにおいて最も重要なスキルになります。

要件定義テンプレート: 5つの要素

アプリを作る前に、以下の5つを整理してください。これだけで、AIへの指示精度が格段に上がります。

良い要件 vs 悪い要件

AIに要件を整理してもらう

アイデアが漠然としている段階でも大丈夫です。ぼんやりしたアイデアをAIに投げて、要件定義の形に整理してもらう方法があります。

%%{init:{'theme':'dark','themeVariables':{'primaryColor':'#00A5BF','primaryBorderColor':'#007A8F','primaryTextColor':'#e8e8e8','lineColor':'#00A5BF','secondaryColor':'#1a1a1a','background':'#141414','mainBkg':'#1a1a1a','nodeBorder':'#00A5BF'}}}%%
graph LR
  A["ぼんやりした
アイデア"] --> B["AIに要件整理
を依頼"]
  B --> C["要件定義
(5要素)"]
  C --> D["AIにレビュー
を依頼"]
  D --> E["改善された
要件定義"]
  E --> F["AIにアプリ
生成を指示"]

HTMLプロトタイプ生成

なぜHTMLプロトタイプなのか

HTMLファイルはブラウザさえあれば誰でも開けます。特別なソフトのインストールは不要。メールに添付して送れば上司も同僚もすぐに触れます。

FigmaやAdobe XDのような専用デザインツールと違い、HTMLプロトタイプは実際に「動く」のが強みです。ボタンを押したら画面が切り替わる、フォームに入力したらデータが表示される。こうしたインタラクション(ユーザーの操作に対する反応)まで再現できるため、完成イメージの共有精度が格段に上がります。

プロトタイプの3段階

効果的なプロンプトの書き方

プロトタイプ生成時は、画面のレイアウト構造を具体的に伝えるのが効きます。「管理画面を作って」ではなく、どこに何を配置するかを指示します。

フロントエンド強化

デザイン指示の語彙を持つ

AIに「きれいにして」と言っても、AIは困ります。何をもって「きれい」とするかは人それぞれだからです。デザインの指示には具体的な語彙が必要です。

CSSフレームワークの活用

CSSフレームワークとは、よく使うデザインパーツ(ボタン、カード、テーブルなど)をあらかじめ用意してくれるツールキットです。AIに「Tailwind CSSで作って」と一言添えるだけで、プロのWebデザイナーが作ったような見た目になります。

• Tailwind CSS -- クラス名でスタイルを指定する方式。自由度が高く、現在最も人気
• shadcn/ui -- Tailwindベースの美しいUIコンポーネント集。ダッシュボードやフォームに最適

レスポンシブ対応とダークモード

レスポンシブ対応とは、画面の幅に応じてレイアウトが自動調整される仕組みです。PCでは3カラム、スマホでは1カラムといった切り替えをCSSで実現します。

ダークモードは、背景を暗く文字を明るくする表示モード。目の疲れを軽減し、バッテリー消費も抑えます。AIに「ダークモード対応もお願いします」と伝えるだけで、切り替えスイッチ付きのアプリが生成されます。

データベース連携

なぜデータベースが必要なのか

Sec02で作ったメモ帳アプリはlocalStorageにデータを保存していました。これはブラウザ内の保存領域で、同じPCの同じブラウザでしかデータにアクセスできません。別のPCからは見えないし、ブラウザのデータを消去すると消えてしまいます。

データベース(DB)を使うと、どの端末からでもデータにアクセスでき、データが安全に保管されます。複数人で同じデータを共有することも可能になります。

選択肢の比較

localStorageとSupabaseの比較

CRUDとは

アプリがデータに対して行う操作は、突き詰めると4種類に集約されます。頭文字を取って「CRUD(クラッド)」と呼びます。

• Create(作成) -- 新しいデータを追加する。メモ帳なら「新しいメモを書く」
• Read(読取) -- データを表示する。メモ帳なら「メモ一覧を見る」
• Update(更新) -- 既存データを変更する。メモ帳なら「メモを編集する」
• Delete(削除) -- データを消す。メモ帳なら「メモを削除する」

世の中のほぼすべての業務アプリは、このCRUDの組み合わせで動いています。ECサイトの商品登録も、社内の勤怠管理も、根っこは同じ構造です。

デプロイ

デプロイとは

デプロイとは、自分のパソコンで動いているアプリをインターネット上に公開し、URLでアクセスできるようにすることです。「deploy」は英語で「配置する、展開する」の意味。作ったアプリを世界中からアクセスできる場所に置く作業と考えてください。

無料デプロイ先の比較

GitHubリポジトリの基本

GitHub(ギットハブ)は、ソースコードを保管する場所です。「リポジトリ」はプロジェクトごとのフォルダのようなもの。VercelやNetlifyはGitHubのリポジトリと連携して、コードを自動的にデプロイしてくれます。

GitHubの操作が初めての方も安心してください。AIに「GitHubにコードをアップロードする手順を教えて」と聞けば、ステップバイステップで案内してもらえます。

ベンダーコントロール

プロトタイプの本当の価値

Vibe Codingで作ったプロトタイプは、社内ツールとしてそのまま使うこともできます。でも真価を発揮するのは、外部の開発会社(ベンダー)に正式なシステム開発を依頼する場面です。

動くプロトタイプがあると、ベンダーと「同じ画面を見ながら」仕様を詰められます。言葉だけのやりとりでは必ず生じる「イメージの食い違い」を、画面を指差しながら解消できるわけです。

ベンダーへの発注がうまくいかない3つの理由

動くプロトタイプは、この3つを一度に解決します。要件は画面に現れているし、操作すれば挙動が伝わるし、技術的な実装例がコードとして存在しています。

ベンダー向け説明資料の構成

ベンダーの成果物をレビューする観点

• 仕様書との整合性 -- 要件定義で合意した機能がすべて実装されているか
• UI/UXの品質 -- プロトタイプで確認した操作感が再現されているか
• セキュリティ -- 認証(ログイン)は正しく実装されているか。データの暗号化は行われているか

%%{init:{'theme':'dark','themeVariables':{'primaryColor':'#00A5BF','primaryBorderColor':'#007A8F','primaryTextColor':'#e8e8e8','lineColor':'#00A5BF','secondaryColor':'#1a1a1a','background':'#141414','mainBkg':'#1a1a1a','nodeBorder':'#00A5BF'}}}%%
graph LR
  A["要件定義"] --> B["プロトタイプ
作成"]
  B --> C["ベンダー
選定"]
  C --> D["仕様確定
(プロトタイプで合意)"]
  D --> E["開発"]
  E --> F["レビュー
(チェックリスト)"]
  F --> G["リリース"]

プロトタイプがあると見積もりはどう変わるか

ベンダーに見積もりを依頼する際、「言葉だけの要件書」と「動くプロトタイプ付き」では見積もり精度が根本的に異なります。

プロトタイプの存在で見積もりの幅が350万円から40万円に収束しています。ベンダー選定の判断材料も、価格差ではなく技術力や提案内容で選べるようになります。プロトタイプ作成に費やした数時間が、数百万円のコスト判断を左右する場面は珍しくありません。

総合ハンズオン: 業務改善Webアプリを完成させる

ゴール

業務改善Webアプリを1つ完成させ、Vercelにデプロイし、ベンダー向け説明資料まで用意します。10時間の集大成です。