Vibe Coding ガイド：Claude Code で直感的に開発する技術

Vibe coding はソフトウェアを作る新しい方法です。すべての行を自分で書く代わりに、欲しいものを説明し、AI にそれを実現させます。

このガイドでは、Claude Code で効果的に vibe coding する方法を説明します。

Vibe Coding とは？

定義

Vibe coding = 自然言語でビジョンを説明し、AI に実装を任せること。

従来のコーディング：
あなた → コードを書く → デバッグ → テスト → 繰り返し

Vibe Coding：
あなた → 意図を説明 → AI が実装 → あなたがレビュー → 反復

マインドセットの転換

従来	Vibe Coding
「これをどう実装する？」	「何を作りたい？」
構文に集中	結果に集中
書いてからデバッグ	説明して改良
技術的な精度	クリエイティブなビジョン

Vibe Coding の原則

原則 1：説明する、指示しない

❌ 技術的すぎる：

useState フックを使用してカウンター状態を管理し、
インクリメントとデクリメント関数を持つ React 
ファンクショナルコンポーネントを作成し、
2つのボタンを含む div をレンダリング...

✅ Vibe スタイル：

プラスとマイナスボタンのあるシンプルな
カウンターを作って。見た目も良くして。

AI は React、フック、スタイリングを知っています。仕事を任せましょう。

原則 2：結果で考える

❌ 実装フォーカス：

JWT 認証とリフレッシュトークンを実装し、
httpOnly クッキーに保存し、保護されたルート用の
ミドルウェアを作成する必要があります...

✅ 結果フォーカス：

ユーザーがログインしてログイン状態を
維持できるようにしたい。安全に保って。

原則 3：会話を通じて反復

Vibe coding は独白ではなく対話です。

あなた：「todo アプリを作って」

Claude：[基本的な todo アプリを作成]

あなた：「ダークモードトグルを追加して」

Claude：[ダークモードを追加]

あなた：「もっとモダンに、Notion みたいに」

Claude：[スタイリングを改良]

あなた：「完璧！ドラッグ＆ドロップで並び替えを追加して」

Claude：[ドラッグ＆ドロップを追加]

各メッセージは前のものの上に構築されます。

Vibe Coding ワークフロー

フェーズ 1：Vibe を設定 🎵

全体像から始めます：

「個人財務トラッカーを作りたい。
モダンな銀行アプリのような、クリーンで
ミニマルな感じ。ユーザーは支出を追加し、
チャートを見て、予算を設定できるべき。」

Claude は：

全体的なビジョンを理解
適切な技術を選択
プロジェクト構造をセットアップ
初期実装を作成

フェーズ 2：感触を確かめる 🖐️

作成されたものをテスト：

「実行して何があるか見せて」

[Claude がアプリを実行]

「チャートがごちゃごちゃしすぎ。シンプルにして。
今月のカテゴリ別支出だけ表示して。」

フェーズ 3：Vibe を改良 🎨

実装ではなく感覚について具体的に：

「色が企業っぽすぎる。もっとフレンドリーで
パーソナルに。暖色系かな？」

「フォントが堅すぎる。もっとカジュアルだけど
読みやすいもの。」

「支出を追加したとき満足感が欲しい。
さりげないアニメーションを追加して。」

フェーズ 4：仕上げ ✨

会話を通じて最終調整：

「モバイル版をもっと良くして」
「データがないときの素敵な空状態を追加して」
「ローディングが唐突。もっとスムーズに」

効果的な Vibe Coding プロンプト

プロジェクトを始める

## ハイ Vibe スターター

「[インスピレーション] のような感じの [アプリの種類] を作って」
  例：「Bear のような感じのメモアプリを作って」

「[対象者] のための [結果] を作りたい」
  例：「家庭料理好きのためのレシピ整理ツールを作りたい」

「人々が [目標] するのを助けるものを作って」
  例：「人々が習慣を追跡するのを助けるものを作って」

デザインを説明する

## デザイン Vibes

「[形容詞] に見えるようにして」
  - 「プレミアムに見えるようにして」
  - 「遊び心があるように」
  - 「信頼できるように」

「[参照] のようなスタイルで」
  - 「Stripe のダッシュボードのようなスタイルで」
  - 「日本のデザインのように」
  - 「高級ブランドのように」

「雰囲気は [感覚] であるべき」
  - 「雰囲気は落ち着いて集中できる感じ」
  - 「雰囲気はエネルギッシュで楽しい感じ」
  - 「雰囲気はプロフェッショナルだけど親しみやすい」

問題を修正する

## Vibe デバッグ

こう言わない：「47行目に null reference error があります」
こう言う：「送信ボタンをクリックすると何か壊れる」

こう言わない：「CSS grid が正しく整列していません」
こう言う：「モバイルでレイアウトが変」

こう言わない：「API が 500 エラーを返しています」
こう言う：「保存機能が動かない」

実際の Vibe Coding セッション

プロジェクト：個人ポートフォリオサイト

あなた：ポートフォリオサイトを作りたい。
私は写真家。雰囲気はミニマルで、
写真が自分自身を語るようにしたい。
Instagram ではなく、ギャラリー展示のイメージ。

Claude：[ミニマルなポートフォリオを作成、クリーンな
グリッド、フルスクリーン画像表示、さりげないアニメーション]

あなた：いいスタート！でもグリッドが堅すぎる。
写真サイズにバリエーションが欲しい、
Pinterest のマソンリーレイアウトのようだけど
もっと洗練された感じで。

Claude：[エレガントなマソンリーグリッドを実装]

あなた：気に入った。でもホバーエフェクトが安っぽい。
もっとさりげなく。穏やかなフェードかズーム、
バウンスしないで。

Claude：[インタラクションを改良]

あなた：完璧。アバウトセクションが必要。
ミニマルのまま。私の写真、短い自己紹介、
連絡先だけ。派手なものはいらない。

Claude：[アバウトセクションを追加]

あなた：ギャラリーとアバウトの間のトランジションが
ぎこちない。スムーズにして。

Claude：[スムーズなページトランジションを追加]

あなた：🔥 これだ。

所要時間：20分結果：プロフェッショナルなポートフォリオサイト

上級 Vibe テクニック

「〜のような感じに」パターン

最も強力な vibe coding パターン：

「ログインフローを Apple のサインインのような感じに」
「ダッシュボードをコックピットのような感じに」
「設定ページを馴染みのある感じに」
「オンボーディングを歓迎する感じに」

一文で大量のデザイン決定を伝えます。

「これだけどもっと良く」パターン

反復するとき：

「これだけどもっとクリーンに」
「これだけどもっとモダンに」
「これだけど余白をもっと」
「これだけどもっとアクセシブルに」

「〜が気に入らない」パターン

欲しくないものを知る方が明確なこともある：

「ローディング中にジャンプするのが気に入らない」
「あのボタンの色が気に入らない」
「窮屈な感じが気に入らない」
「他のアプリと同じに見えるのが気に入らない」

「もっと/もっと少なく」パターン

微調整：

「もっと余白を」
「アニメーションを減らして」
「もっとコントラストを」
「視覚的なノイズを減らして」
「もっと個性を」
「企業っぽさを減らして」

Vibe Coding 用の CLAUDE.md

# プロジェクト：[プロジェクト名]

## Vibe
- 全体的な感じ：[落ち着いた/エネルギッシュ/プロフェッショナル/遊び心]
- デザインインスピレーション：[参照]
- カラームード：[暖かい/冷たい/ニュートラル/大胆]
- タイポグラフィ：[モダン/クラシック/カジュアル/テクニカル]

## アンチ Vibes（避けること）
- 汎用テンプレートのように見せない
- ごちゃごちゃした感じは避ける
- きつい色のコントラストはなし
- 遅いまたはラグのある感じはなし

## ユーザーエクスペリエンス目標
- 使用時は [形容詞] に感じるべき
- ユーザーは [アクション] するとき [感情] を感じるべき
- メインフローは [特徴] であるべき

## 技術的な好み（オプション）
- 選ぶ必要があるなら：[React/Vue/Svelte]
- スタイリング：[Tailwind/CSS/styled-components]
- 気にする場合のみ指定！

Vibe Coding が輝くとき

ベストユースケース

✅ 個人プロジェクト

サイドプロジェクトと実験
ポートフォリオ作品
新技術の学習

✅ MVP とプロトタイプ

アイデアの素早い検証
クライアントデモ
ハッカソンプロジェクト

✅ UI/UX 重視の作業

ランディングページ
マーケティングサイト
インタラクティブ体験

✅ クリエイティブプロジェクト

ジェネラティブアート
インタラクティブストーリー
ゲーム

もっと具体的にすべきとき

⚠️ 複雑なビジネスロジック

決済処理
データ検証ルール
コンプライアンス要件

⚠️ パフォーマンスクリティカル

リアルタイムシステム
大規模データ処理
最適化されたアルゴリズム

⚠️ チームプロジェクト

コード標準が重要
ドキュメントが必要
他の人が理解する必要がある

よくある Vibe Coding の間違い

間違い 1：過剰な指定

❌ 悪い：

React 18 と TypeScript strict mode を使用し、
forwardRef でコンポーネントを実装し、ランタイム
検証用に PropTypes を追加し、BEM 命名規則で
CSS modules を使ってスタイリング...

✅ 良い：

ボタンコンポーネントが必要。アクセシブルで
カスタマイズしやすくして。

間違い 2：結果の説明が不十分

❌ 悪い：

もっと良くして

✅ 良い：

カードが重すぎる。もっと薄いボーダー、
もっと丸い角、もっと柔らかい影。

間違い 3：レビューを無視

Vibe coding でも出力を見る必要があります：

あなた：[何かをリクエスト]
Claude：[実装]
あなた：[実際に見てフィードバックを与える]

完璧でないなら「完璧」と言わないで。

Vibe Coder のツールキット

必須フレーズ

こう言わない…	こう言う…
「X を実装」	「X を作って」
「バグを修正」	「…のとき何かおかしい」
「CSS を追加」	「…のように見せて」
「〜にリファクタリング」	「これを整理して」
「最適化」	「もっと速く/スムーズに」

感情的な語彙

コードについての感覚を説明することを学ぶ：

ポジティブ：クリーン、スムーズ、満足、楽しい、直感的
ネガティブ：不格好、唐突、混乱、重い、ごちゃごちゃ
方向性：よりシンプル、より大胆、より繊細、より暖かい、より冷たい

参照ライブラリ

参照できるアプリ/サイトのメンタルライブラリを構築：

ミニマル：Linear、Bear、Things
遊び心：Notion、Figma、Slack
プレミアム：Apple、Stripe、Airbnb
テクニカル：GitHub、VS Code、Vercel

Vibe Coding エクササイズ

エクササイズ 1：ランディングページ

プロンプト：「瞑想アプリのランディングページを作って。
雰囲気は落ち着いて平和。日の出をイメージ、
企業ウェルネスではなく。」

練習：CSS プロパティに言及せずに
5回の反復で改良。

エクササイズ 2：ダッシュボード

プロンプト：「シンプルな分析ダッシュボードを作って。
圧倒されるのではなく、コントロールできる感じ
にするべき。きれいなチャートだけでなく、
実際に役立つものに。」

練習：何の情報を表示するかと、
使用時にどう感じるかだけに集中。

エクササイズ 3：コンポーネント

プロンプト：「アップロードが楽で明確に感じる
ファイルアップロードコンポーネントを作って。
ユーザーは何が起きているか疑問に思うべきではない。」

練習：コードではなく、インタラクションを反復。

Vibe から本番へ

最終的に、vibe-coded プロジェクトには構造が必要：

フェーズ 1：Vibe（自由に作成）
↓
フェーズ 2：レビュー（AI が何を作ったかチェック）
↓
フェーズ 3：テスト（動作することを確認）
↓
フェーズ 4：堅牢化（適切なエラー処理を追加）
↓
フェーズ 5：ドキュメント化（将来の自分のために説明）

vibe coding で勢いを得て、その後厳密さを加えます。

主なポイント

実装ではなく結果を説明 - 何をに焦点、どうやってではなく
会話を通じて反復 - レイヤーごとに構築
感覚と参照を使用 - 「Stripe のように」は仕様の段落に勝る
AI を信頼 - 技術的な詳細は知っている
出力をレビューする - Vibe coding はノーコーディングではない

Vibe coding は怠けることではありません—AI が得意なことを活用して、人間が最も得意なこと：ビジョンを持ち創造することに集中できるようにすることです。

何かを作りましょう。見えるものを説明するだけ。✨