このドキュメントは、経験豊富なコーダーだけでなく、非エンジニアの方でも「Vibe Coding」を使ってアプリやサービスを開発できるように設計されたガイドです。コーディング経験が少ないジュニア開発者やプランナーの方でも、この手順に従うことで安定した成果を生み出すことができます。
核となる原則: AI にいきなりコードを書かせるのではなく、開発を始める前にまずドキュメント (Design.md、ToDo.md) を作成させる方が良い結果が得られます。
0. 全体の流れの概要
[1] Concept.md の作成を依頼
↓
[2] Design.md を作成 (UI/UX 参考ドキュメント)
↓
[3] 技術スタックを決定 (以下の判断ツリーを参照)
↓
[4] ToDo.md を作成 (モジュールレベルの技術仕様 + 開発計画)
↓
[5] GitHub リポジトリを作成し、初期コミット
↓
[6] アプリの説明 + Design.md + ToDo.md を Claude Code または Grok Build に渡して開発開始
↓
[7] 繰り返し: モジュールごとに実装 → テスト → commit/push
1. Concept.md — シンプルなアイデアから始めるためのプロンプト
まず、作りたいアプリやサービスについて、頭に浮かんだままを 2〜3 行で簡単に説明します。「こんなものを作りたい。実装するための手順と方法を詳述した Concept.md ドキュメントを作成してください。」という形式で依頼します。
生成されたドキュメントをダウンロードし、Concept.md として保存します。
2. Design.md — UI/デザインの参考ドキュメントを先に作成する
アプリに UI がある場合は、Design.md を先に書く のが良いです。つまり、参考にしたいサービスやアプリがある場合、または自分で UI をデザインする方法がわかっている場合は、Figma などで作成したデザインの画像を提供して依頼することができます。
方法
- 自分が気に入っている実際にデプロイされている Web サイト を 1 つ選びます (例: linear.app、stripe.com、toss.im など)。
- Claude または Grok に「そのサイトのレイアウト構造、カラーパレット、タイポグラフィ、マージン/スペーシング、コンポーネントスタイルを分析し、Design.md にまとめてください」と指示します。
プロンプト例
https://linear.app のデザインを分析し、Design.md ドキュメントを作成してください。 以下の項目を必ず含めてください: 1. 全体的なレイアウト構造 (Header/Sidebar/Body/Footer の配置) 2. カラーパレット (Primary、Secondary、Background、Text の色を HEX コードで) 3. タイポグラフィ (フォントの種類、サイズシステム、ウェイト) 4. マージンとスペーシングのルール (スペーシングスケール) 5. ボタン、カード、入力フォームなどの主要コンポーネントのスタイル 6. ダークモードのサポートとカラーマッピング
ヒント
- デザインセンスがある場合、生成された Design.md の内容はすべて自然言語で記述されているため、それを読んで自分が望む方向に直接修正/改良することができます。このドキュメントが、以降のすべての UI 実装の基準となります。
- 「このサイトみたいにして」とだけ言うと、毎回結果が異なります。一貫性を保つためにドキュメントで固定する必要があります。
2. 技術スタック決定の推奨判断ツリー
作成しようとしているサービスの種類に基づいて、最初にスタックを決定します。
一般的なサーバー (バックエンド) の原則
- どのローカル環境でも CLI から直接インストールして実行できる 必要があります。
- 言語/ランタイムは Node.js または Python にします。
- パッケージ/実行環境には、すべての OS で安定したデプロイとサポートが確認されているツールを使用します:
- Python → uv
- Node.js → npm
データベース選択基準
詳細なプロンプト手順 (開発知識がある場合)
このプロジェクトは Web アプリです。フロントエンドは React で構成し、ローカルで
npm run devですぐにテストでき、安定してデプロイできる構造にしてください。バックエンドは Node.js で構成し、リレーショナル DB が必要なため MariaDB を使用します。ローカル開発環境で CLI から直接インストール/実行できるセットアップスクリプトを含めてください。この内容と Concept.md ドキュメントを確認し、詳細な技術実装のための ToDo.md ドキュメントを作成してください。
- このプロンプトと一緒に Concept.md ドキュメントを添付するか、Concept.md ドキュメントの内容をコピー＆ペーストして進めてください。
でも、上記のことがわからない非エンジニアの場合はどうすればいいですか？
次のように統合的な指示を与えてください:
このプロジェクトの実行方法がわからないので、方法を推奨してください。Web アプリが良いか、開発中に確認しやすい OS インストール方法が良いか、モバイルアプリとして構築するのが良いかを推奨してください。Web ブラウザで表示できる場合はフロントエンドを React で構成し、モバイルアプリとして提供する必要がある場合はフロントエンドを Flutter で構成してください。ローカルにインストールする必要がある方法の場合は、CLI 経由で簡単にデプロイおよびインストールできる npm または uv を使用して構成してください。安定してデプロイできる構造を設定してください。バックエンドが必要かどうかはわかりませんが、Node.js またはデプロイ/インストールのための安定した構造を設定してください。DB が必要な場合、リレーショナル DB が必要なら MariaDB を使用し、単なるキーバリュー DB であれば、開発にはローカルで AWS DynamoDB を使用し、AWS に簡単にデプロイできるように構成してください。ローカル開発環境で CLI から直接インストール/実行できる形式の場合は、すべてのセットアップスクリプトを含めてください。このような詳細な技術スタックを推奨し、この内容と Concept.md ドキュメントを確認して、詳細な技術実装のための ToDo.md ドキュメントを作成してください。
3. 管理ダッシュボード — サーバーがある場合に必須
サーバーがあるサービスかどうかはわからないかもしれませんが、開発者がアプリ全体の動作状況や進捗を把握できるように、通常は構築しておくことをお勧めします。
- サーバーがあるプロジェクトには、管理ダッシュボードの実装をデフォルトで含めてください。
- ダッシュボードに含める最小限の項目:
- サーバーのヘルスチェック
- 主要データの状況 (登録者数、処理件数などのコアメトリクス)
- 最近のエラー/ログ
- 主要タスクの処理進捗 (バッチ、キューなど)
プロンプト例
このサービスにサーバーが含まれる場合は、開発計画に管理ダッシュボードを含めてください。ダッシュボードでは、サーバーステータス、コアメトリクス、最近のログ/エラーを確認できるようにしてください。デフォルトの管理者アカウントは 'admin'、パスワードは '12345' に設定し、管理ダッシュボードでパスワードを変更できる機能を含めてください。ToDo.md を確認し、必要と判断された場合はこれを開発計画に含めてください。
4. ToDo.md の最終化 — モジュールレベルの開発計画
プログラミングの基本はモジュール化です。 コードを書く前に ToDo.md にモジュールに細分化する内容を追加すると、将来のメンテナンスに適した優れたアーキテクチャを作成できます。
プロンプト例
ToDo.md ドキュメントを確認し、以下のガイドに従って適切に記述されているか検証し、不足している部分があれば修正/補足してください。 ToDo.md の要件: 1. システム全体をオブジェクト指向設計でモジュール化するように設計してください。 2. 各モジュールの役割、入出力、データ構造を明確に指定し、カプセル化を最大限に高めてください。 3. 実装順序をチェックボックスリストとして作成してください (依存関係のないモジュールから開始)。 4. DB スキーマ設計を含めてください。 5. 非技術者がいつ、どのように簡単にテストできるかを説明してください。
完成した ToDo.md で確認すべき項目:
- プロジェクト概要 (1 段落)
- 確定した技術スタック (ステップ 2 の判断ツリーの結果)
- モジュールリストと各モジュールの詳細な技術仕様 (非技術者には理解が難しい場合があります)
- モジュール名と役割
- 入出力 (API エンドポイントとリクエスト/レスポンス形式)
- 使用するデータ構造 / DB テーブル (またはコレクション) の設計
- 他のモジュールとの依存関係
- 実装順序 (チェックボックス形式、依存関係の順)
- 各テスト方法が自分でも理解できるレベルで記述されているか確認する。
重要
- 生成された ToDo.md を自分で読んでレビューする必要は必ずしもありません。 完璧に準備すればうまくいくように思えますが、Vibe Coding の核心は、まず結果を作成し、それを徐々に修正して思い通りのものにしていくプロセスにあります。それが最も価値があり、楽しい部分です。
実践編: 環境セットアップ → GitHub → Claude Code 開発の開始
開発ツールを初めてインストールする方でも迷わず進められるように書かれています。
- それでも複雑すぎて、なぜ使うべきかわからず退屈で仕方ないという方は、まず以下のリンクの無料講義を聴きに行ってください。
https://nomadcoders.co/git-for-beginners
5. 開発環境の準備 (2 つだけインストール)
2 つのものをインストールします。
そして GitHub アカウント が必要です。https://github.com で無料登録してください (メール認証まで完了)。Claude Code または Grok Build を使用するには、Claude の有料プラン (Pro/Max/Team) または Grok の有料アカウント が必要です。
5-1. 🪟 Windows ユーザー向けインストール手順
① Git のインストール
- ブラウザで https://git-scm.com/download/win にアクセス → 自動的にダウンロードが開始されます。
- ダウンロードしたインストーラーを実行します。
- 多くのインストールオプションが表示されますが、すべてデフォルト値のまま「Next」をクリックし続けてください。
- ただし、「Choosing the default editor」画面が表示されたら、「Use Visual Studio Code as Git's default editor」を選択する と良いでしょう (VS Code をまだインストールしていない場合は、デフォルトのままで問題ありません)。
- インストールの確認: スタートメニューから PowerShell を起動し、次のように入力します:
git --version
→ git version 2.xx.x のようなバージョンが表示されれば成功です。表示されない場合は、PowerShell を閉じて開き直してみてください。
② VS Code のインストール
- https://code.visualstudio.com にアクセス → Download for Windows をクリックします。
- インストーラーを実行 → 「Next」をクリックし続けます。ただし、オプション画面で以下の 2 つにチェックを入れてください:
- "Add to PATH"
- "Add 'Open with Code' action to file/directory context menus"
- インストール後に VS Code を実行します。最初の画面で 日本語 language pack のインストール 通知が表示されたら、インストールしても構いません。
5-2. 🍎 Mac ユーザー向けインストール手順
① Git のインストール
- ターミナル を開きます: Cmd + Space → 「Terminal」と入力 → Enter。
- 次のように入力します:
git --version
- すぐにバージョンが表示されれば、すでにインストールされています → ② に進みます。インストールガイドのポップアップ ("Command Line Developer Tools...") が表示されたら、「インストール」 をクリックして待ちます (これが Git のインストールです)。
- 完了後、再度
git --versionで確認します。
② VS Code のインストール
- https://code.visualstudio.com にアクセス → Download for macOS をクリックします。
- ダウンロードしたファイルを解凍し、Visual Studio Code.app をアプリケーションフォルダにドラッグ します (重要! ダウンロードフォルダから直接使用しないでください)。
- アプリケーションフォルダから VS Code を実行します。
5-3. (共通) Git に自分の名前を登録する — 初回のみ
この設定は、コミットに「誰が作業したか」の記録を残すためのものです。PowerShell (Windows) またはターミナル (Mac) で:
git config --global user.name "あなたの名前" git config --global user.email "あなたの-github-メール@example.com"
GitHub への登録に使用した同じメールアドレス を入力してください。
6. GitHub リポジトリの作成と VS Code での PC への接続
「リポジトリ」とは、1 つのプロジェクトを保持するクラウド上のフォルダ と考えてください。流れは次のとおりです: GitHub の Web サイトで空のリポジトリを作成 → VS Code で自分の PC にクローン → 企画ドキュメントをアップロード → そのリポジトリを Claude Code Web に接続します。
6-1. GitHub の Web サイトでリポジトリを作成する
- https://github.com にログインします。
- 右上の + ボタン → New repository をクリックします。
- 次のように入力します:
- Repository name: プロジェクト名 (英語、スペースの代わりにハイフンを使用。例: my-first-app)
- Private を選択します (会社のプロジェクトは必ず Private にしてください!)
- 「Add a README file」チェックボックスにチェックを入れます ✅ ← 初心者は必ずチェックしてください。これにより、次のステップ (クローン) が簡単になります。
- Create repository をクリックします。
- 作成されたリポジトリページで、緑色の <> Code ボタンをクリック → HTTPS タブのアドレスをコピーします。
6-2. VS Code で自分の PC にクローンする
- VS Code を実行します。
- Ctrl + Shift + P (Mac は Cmd + Shift + P) → コマンドパレットが開きます。
cloneと入力 → 「Git: Clone」 を選択します。- コピーしたリポジトリのアドレスを貼り付け、Enter キーを押します。
- または 「Clone from GitHub」 を選択することもできます → ブラウザが開き、GitHub のログイン/認証 を求められたら承認します (初回のみ)。
- プロジェクトを保存する場所を選択します (例: Documents/Projects フォルダを作成しておくと良いでしょう)。
- クローンが完了すると、右下に 「開く」 通知が表示されます → クリックします。
- 左側のファイルエクスプローラーに
README.mdが表示されれば成功です! 🎉 このフォルダが、自分の PC と GitHub の間で接続された作業フォルダになります。
6-3. 企画ドキュメントのアップロード — Concept.md、Design.md、ToDo.md
Claude Code Web は リポジトリ内のファイルを読み取ることができます。 そのため、企画ドキュメントをリポジトリに置くことは、「ドキュメントをアップロードする」ことと同じです。
- VS Code のファイルエクスプローラーの空いているスペースを右クリック → 新しいファイル → 名前を
Concept.mdと入力します。 - 用意したアプリの説明を貼り付け、保存します (Ctrl+S / Cmd+S)。
- 同様に
Design.md(UI がある場合) とToDo.mdファイルを作成し、挿入します。 - 次に、GitHub にアップロードします (commit & push) — 6-4 の方法を使用します。
6-4. VS Code でのコミットとプッシュ — マウス操作のみ
- ファイルを保存すると、VS Code 左側のブランチアイコン (ソース管理) に数字のバッジが表示されます。
- そのアイコンをクリック → 変更されたファイルのリストが表示されます。
- 上部のメッセージ入力ボックスに、何をしたかを 1 行で書きます (例: 企画ドキュメントを追加)。
- ✔ Commit ボタン をクリック → 自分の PC に保存が完了します。
- 「ステージングされていない変更があります」というポップアップが表示された場合は、「はい」 をクリックしてすべてコミットします。
- 次に Sync Changes ボタン をクリック → GitHub へのアップロード (プッシュ) が完了します。
- GitHub の Web サイトでリポジトリを更新すると、アップロードした
Concept.mdが表示されます。これで Claude Code Web もこのドキュメントを読み取ることができるようになります。
プル (ダウンロード) も同じ画面で行います: Claude がクラウドにアップロードした変更がある場合、Sync Changes ボタンがダウンロードとアップロードの両方を処理します。
7. リポジトリを Claude Code Web に接続して開発を開始する
次に、ブラウザで Claude Code Web を開き、作成した GitHub リポジトリを接続します。
7-1. Claude Code Web ↔ GitHub リポジトリの接続 (初回のみ)
- https://claude.ai/code にアクセス → Claude アカウントでログインします。
- 初回アクセス時に、Connect GitHub ガイドが表示されます → ガイドに従います。
- GitHub のページに移動し、Claude GitHub App のインストール 画面が表示されます:
- GitHub アカウント (または Organization) を選択します。
- アクセス範囲を選択します: 「Only select repositories」 を選択し、6-1 で作成したリポジトリを指定することをお勧めします。
- Install / Authorize をクリックします。
- Claude に戻ると接続が完了します。環境設定画面が表示された場合は、デフォルトのまま にしておいてください。
- 新しいセッション (タスク) を開始するときに、リポジトリ選択リスト から自分のリポジトリを選択し、プロンプトを入力してタスクを開始します。
7-2. Claude Code と Grok Build Web の仕組みを理解する (重要!)
Claude Code と Grok Build Web は、自分の PC ではなく、クラウド上の仮想コンピュータ で動作します。流れは次のとおりです:
① 私がプロンプトを入力
↓
② Claude Code/Grok Build がクラウド上で私のリポジトリをクローンし、コードを記述
↓
③ 結果を「新しいタスクブランチ」として GitHub にプッシュ
↓
④ 私はそのブランチを自分の PC にプルしてテストするか、GitHub 上で Pull Request を介して変更を確認
↓
⑤ 気に入ったら、main にマージします。
- メインブランチに直接触れることなく、常に新しいブランチに結果をアップロードする ため、既存のコードが壊れる心配はありません (Grok Build は main ブランチで動作しますが、元に戻すことができるので、間違えても心配する必要はありません)。
7-4. 開発開始プロンプト
3 つのドキュメント (Concept.md / Design.md / ToDo.md) が main に準備できたら、いよいよ新しいセッションで開発を開始します。
このプロジェクトを開発してください。リポジトリ内の以下のドキュメントに基づいて進めてください: - Concept.md: 作成するアプリの説明 - ToDo.md: モジュールレベルの開発計画 (この順序で実装) - Design.md: デザイン基準 (すべての UI はこのドキュメントに従う)
作業ルール: 1. ToDo.md の実装順序に従って、一度に 1 つのモジュールずつ進めてください。 2. テスト可能な単位が完了したら、README または応答で、自分のローカル PC でどのように実行/テストするかを教えてください。私は非エンジニアなので、初心者に教えるように丁寧に説明してください。 3. 完了した項目は ToDo.md にチェックマークを付けてください。 4. タスクブランチ名を教え、覚えやすいコミットメッセージでプッシュしてください。 5. 不明な点がある場合は、推測せずに私に質問してください。
7-5. 開発中に繰り返されるサイクル
① Web Claude Code がタスクブランチで 1 つのモジュールを実装 → push
↓
② そのタスクブランチを自分の PC (VS Code) にプルし、直接実行/テスト
↓
③ 問題がある場合 → エラーメッセージ全体をコピーして Web セッションに貼り付け
問題がない場合 → 「良いです。次の開発を続けてください」
↓
次のモジュールのために ① に戻る
↓
④ すべての機能が完了し、テストに合格したら
→ Pull Request を介して main ブランチにマージ
→ デプロイは常に main をベースに行う
8. ブランチ — タスクブランチでテストし、main にマージしてデプロイ
8-1. ブランチとは？
- main ブランチ = 常に正常に動作する完成品の展示です。デプロイは常に
mainをベースに行います。 - タスクブランチ (例:
claude/feature-login) =mainをコピーして作った工事現場です。ここでは好きなだけ構築したり壊したりできます。mainは安全です。
Claude Code Web は常に新しいタスクブランチを作成し、結果をプッシュします。 したがって、知っておく必要があるのは次の 3 つだけです:
- 自分のフォルダが現在どのブランチにあるかを確認する方法。
- Claude がプッシュしたタスクブランチを自分の PC にプルしてテストする方法。
- 完了したらmain にマージしてデプロイする方法。
8-2. 現在のブランチを確認する
- VS Code 画面の左下隅にあるステータスバー を見てください。ブランチアイコンの横にブランチ名が表示されています (例:
mainまたはclaude/feature-login)。
8-3. Claude Code/Grok Build が作成したタスクブランチを自分の PC にプルしてテストする
Web Claude Code が「OO ブランチにプッシュしました」と言ったら、そのブランチを自分の PC に取り込んでテストします。Grok Build には Web 画面の右上に 'Push to Github' ボタンがあるので、これを押してプッシュします。
VS Code の場合 (マウス操作のみ):
- 左下のブランチ名 をクリック → ブランチリストが開きます。
- 新しいブランチが表示されない場合は、ソース管理タブで ... メニュー → Fetch を実行し、もう一度試してください。
- リストから origin/claude/... で始まる Claude のタスクブランチを選択 → フォルダがそのブランチの状態に変わります。
8-4. 完了したら main にマージする — Pull Request
タスクブランチで機能が完了し、テストに合格したら、GitHub の Web サイトで Pull Request (PR) を介して main にマージします。
- GitHub で自分のリポジトリにアクセス → Pull requests タブ をクリックします。
- Claude が作成した PR をクリックします。ない場合は、New pull request → base:
main、compare: タスクブランチを選択 → Create pull request。 - Merge pull request → Confirm merge をクリック →
mainに反映されます! - 自分の PC の main を最新の状態に更新します:
- VS Code 左下のブランチをクリック →
mainを選択 → ソース管理タブで Sync Changes。
9. プロンプティングのヒント (共通)
Vibe Coding の品質は、プロンプトの品質に比例します。
- やってはいけないことを指定する — 「私が承認するまでコードを勝手に変更しないでください」「ライブラリを追加しないで、既存のスタックのみを使用してください」
- 一度に 1 つのモジュール — 1 つのプロンプトでアプリ全体を依頼すると品質が低下します。ToDo.md の順序に従って、小さな単位で依頼してください。
- エラーはそのまま貼り付ける — エラーメッセージを要約せず、ターミナルの出力全体をコピーしてください。
- 不明な点は Claude に質問させる — 「不明な点がある場合は、推測せずに私に質問してください」をプロンプトに含めてください。
- ドキュメントに基づいてコミュニケーションする — 「前に言ったように」❌ → 「Design.md の設計によると」✅。リポジトリ内のドキュメントは、会話の記憶よりもはるかに安定しています。
以上です。
古代のモーフィアスが言ったように:
「ネオ。私は君にドアを示すことしかできない。君は自分でそのドアをくぐらなければならないんだ。」
