「アイデアはあるのに、コードが書けない」——そんな人が今、Vibe Coding で動くプロダクトを生み出しています。

Vibe Coding は「コードを書く」技術ではなく、「やりたいことを伝え、AI と一緒に作る」技術です。本記事では Claude Code を使って今日中に動くものを作るための具体的な手順を解説します。

Vibe Coding の概念・定義から知りたい方は Vibe Coding とは？を先に読むことをおすすめします。

1. Vibe Coding を始める前に知っておくこと

1-1. 必要なもの

Vibe Coding を始めるのに必要なものは最小限です。

必要なもの	詳細	費用目安
PC / Mac	Windows / macOS どちらでも可	—
Claude Code	Anthropic 公式の CLI エージェント	無料プランあり
Node.js	Claude Code のインストールに必要	無料
アイデア	作りたいものの概要（箇条書き程度でOK）	—

プログラミング言語の知識は不要です。「コマンドを 1 行コピペできる」レベルで十分スタートできます。

1-2. 「完璧な指示」より「動かしながら直す」

Vibe Coding の最大の勘違いは「完璧な指示を最初に書かなければいけない」という思い込みです。

実際はその逆です。

大まかな指示を出す（「メモアプリを作って」）
AI が動くものを出力する
「ここを直して」と感覚で修正する
繰り返す

この「出す → 見る → 修正」のループが Vibe Coding の本質。最初の指示は荒削りで構いません。

2. Claude Code のインストールと初期設定（5分）

2-1. Node.js のインストール

まず Node.js をインストールします（すでにある場合はスキップ）。

# macOS の場合（Homebrew 使用）
brew install node

# Windows の場合は公式サイトからインストーラーをダウンロード
# https://nodejs.org/

2-2. Claude Code のインストール

Node.js がインストールされたら、以下のコマンドを実行します。

npm install -g @anthropic-ai/claude-code

インストール完了後、以下で動作確認します。

claude --version
# 例: claude-code 1.x.x

2-3. 初回ログイン

claude

コマンドを実行すると、ブラウザが開いて Anthropic アカウントへのログインが求められます。無料プランでも利用できます（利用量の上限あり）。

詳細なセットアップ手順は Anthropic 公式ドキュメントを参照してください。

3. 最初の Vibe Coding セッション

3-1. プロジェクトフォルダを作る

mkdir my-first-vibe-project
cd my-first-vibe-project
claude

これだけで Vibe Coding の環境は完成です。

3-2. 最初のプロンプトを書く

Claude Code が起動したら、作りたいものを日本語で伝えます。

シンプルなメモアプリを作ってください。
要件：
- メモを入力して保存できる
- 保存したメモの一覧が見られる
- メモを削除できる
- ブラウザで動く（HTMLファイル1つでOK）

Claude Code がコードを生成し、ファイルを自動で作成します。

3-3. 動かして確認する

生成されたファイル（例: index.html）をブラウザで開いて確認します。

# ファイルを確認する
ls -la

# ブラウザで開く（macOS）
open index.html

「いい感じ！でもここを変えたい」という発見があれば、そのまま Claude Code に伝えます。

メモの一覧を日付の新しい順に並べてください。
また、メモに色のタグ（赤/黄/青）を付けられるようにしてください。

これがVibe Coding の「ループ」です。

4. プロンプトを上手く書くコツ

4-1. 目的（Why）から始める

❌ 悪い例：「ボタンを追加して」
✅ 良い例：「データを CSV でダウンロードできるようにしたい。ダウンロードボタンをテーブルの上に追加して」

何をしたいか（目的） を先に伝えることで、AI がより意図に沿ったコードを生成します。

4-2. 制約を明示する

# 制約を明示した良いプロンプトの例
ToDoリストアプリを作ってください。
制約：
- ライブラリは使わない（バニラ JavaScript のみ）
- ローカルストレージに保存する
- スマホでも使いやすいデザインにする
- 日本語対応

「何を使わないか」「どこで動かすか」「誰が使うか」を明示すると精度が上がります。

4-3. 段階的に詳細化する

最初からすべてを詰め込まないのが Vibe Coding のコツです。

まず最小構成で動かす
動作を確認してフィードバック
機能を追加・改善していく

「一回の指示で完成形を作ろう」とすると、複雑になりすぎて意図から外れやすくなります。

4-4. エラーはそのままコピーして渡す

エラーが出たときは、エラーメッセージをコピーして Claude Code に渡すだけです。

# エラーが出たときの対処
下記のエラーが出ました。修正してください：

TypeError: Cannot read properties of undefined (reading 'map')
    at App (index.js:15:25)

自分でデバッグする必要はありません。

5. ツール別・Vibe Coding の使い分け

Claude Code は万能ですが、目的によって使い分けると効果的です。

5-1. Claude Code（ターミナル型）が向いているもの

業務システムの改修・自動化
データ処理・スクリプト作成
API 連携・バックエンド開発
継続的な改善・維持管理

5-2. v0 が向いているもの

UI のプロトタイピング
デザインを先に決めたいとき
React コンポーネントの生成

5-3. bolt.new が向いているもの

フルスタックアプリの試作
アイデアを数時間で MVP にしたいとき
デプロイまで一気にやりたいとき

詳しい比較は Vibe Coding ツール 5 選のピラー記事を参照してください。

6. よくある失敗とその対処法

6-1. 指示が抽象的すぎる

症状: AI が的外れなものを作ってしまう。

原因: 「いい感じにして」「使いやすくして」など、AI が解釈できる具体性がない。

対処法: 「誰が、何を、どうしたいか」を 1 文で書く。

# 悪い例
いい感じのダッシュボードを作って

# 良い例
営業担当者が毎日の売上をグラフで確認するダッシュボードを作って。
データはCSVで読み込む。グラフは折れ線と棒グラフの2種類。

6-2. 一度に求めすぎる

症状: コードが複雑になりすぎてエラーが増える。

対処法: 機能を 1〜2 個ずつ追加する。「最小限で動くもの → 機能追加」のサイクルを守る。

6-3. うまくいかないときに諦める

対処法: 違うアプローチを試す。「もっとシンプルな方法で実装し直して」「一から作り直して」と指示するのも有効です。

7. 次のステップ：Vibe Coding を深める

最初の Vibe Coding 体験ができたら、次は以下を試してみましょう。

7-1. CLAUDE.md でコンテキストを与える

プロジェクトのルートに CLAUDE.md を作成し、Claude Code にプロジェクトの概要・ルール・技術スタックを記述しておくと、毎回の説明が不要になります。

# プロジェクト概要
社内の在庫管理システムの改善プロジェクトです。

## 技術スタック
- フロントエンド: React + TypeScript
- バックエンド: Node.js + Express
- DB: PostgreSQL

## ルール
- 日本語でコメントを書く
- 関数は 50 行以内に収める

7-2. Claude Code のガイドを読む

Claude Code 完全ガイドでは、Hooks・Skills・MCP 連携など、より高度な使い方を解説しています。業務システムへの本格適用に進む方はこちらを参照してください。

7-3. コミュニティで情報交換する

同じように Vibe Coding を実践している人と情報交換することで、プロンプトのコツや事例を学べます。Claude Code Media では無料ニュースレターで最新の実践事例を定期配信しています。

まとめ：今日から Vibe Coding を始める

Vibe Coding を始めるのに必要なのは、完璧なプログラミング知識ではなく「やりたいことを言語化する力」です。

Claude Code をインストールする（5分）
作りたいものを日本語で伝える
動かしながら修正を繰り返す

まずはシンプルなメモアプリ、ToDoリスト、家計簿など「自分が使いたいもの」から始めてみましょう。Vibe Coding の醍醐味は、アイデアが動くものになる瞬間の驚きにあります。

Vibe Coding の概念をさらに深く理解したい方は Vibe Coding 入門ピラー記事をご覧ください。

本記事は Claude Code Media 編集部が執筆時点（2026年6月）の情報を基に作成しました。Claude Code のバージョンアップにより仕様が変わる場合があります。最新情報は Anthropic 公式ドキュメントでご確認ください。

この記事の著者

claude-code-media 編集部／ Claude Code 専門編集チーム

Claude Code の非エンジニア向け業務効率化メディア『claude-code-lab.jp』を運営。フリーランス・中小企業・個人開発者向けに、実装テンプレ・業務自動化テクニック・Vibe Coding 入門を配信。

Claude Code 完全ガイドVibe CodingAI 業務効率化非エンジニア向け AI 教育MCP（Model Context Protocol）

運営: 株式会社AIKNOW著者プロフィールを見る →無料ニュースレターを購読 →

Vibe Coding の始め方：Claude Code で今すぐ動くものを作る