Claudeで vibe coding：Claudeチャット、Claude Code、Claudeからのアプリ開発

Claudeでの vibe coding には3つの方法があります。Claudeチャットは、小さな単一ページのアプリを会話の中でそのまま作ります。Claude Codeは、手元のマシンまたはクラウド上の実際のプロジェクトを編集するエージェントで、コードベースに慣れた人向けです。そしてClaudeとMCP経由のアプリビルダーを組み合わせると、Claudeの会話を離れずに、データベース付きのフルスタックアプリを構築、プレビュー、公開できます。どれが合うかは、作るものと、どこまでセットアップを自分で持ちたいかによります。

このガイドでは3つすべてを、プロンプトと限界とともに紹介します。全体の考え方は、vibe coding とはをご覧ください。

方法1：小さなツールにはClaudeチャット

通常のClaudeアプリでは、インタラクティブなものを頼むと、Claudeが会話のすぐ横で動くコードとして書いてくれます。計算機、単語カードの練習、小さなゲーム、貼り付けたデータからのグラフなどです。変更は返信で頼みます。

ここでの良いプロンプトは、それだけで完結しています。

支出のリスト（1行に1件、「金額, カテゴリ」）を貼り付けると、カテゴリ別の円グラフと合計を表示するインタラクティブなツールを作ってください。すぐに動くように、サンプルのリストも入れてください。

**得意なこと：**自分で使う、またはリンクで共有する手早い単一ページのツール、そして学習。Claudeにすべての部分を説明してもらえるからです。

**限界：**これらはClaudeの環境の中で動きます。自分用の永続的なデータベース、ユーザーアカウント、独自ドメイン、サーバーを動かす場所はありません。アイデアが1ページに収まらなくなったら、次の2つの方法が必要です。

方法2：実際のコードベースにはClaude Code

Claude CodeはAnthropicのコーディングエージェントです。ターミナル、VS CodeやJetBrainsなどのエディタ、デスクトップアプリ、Web上で動きます。普通の言葉でタスクを渡すと、プロジェクトを読み、ファイルを編集し、コマンドやテストを実行し、何が変わったかを示します。執筆時点では、Claudeの有料プランに含まれ、APIでも利用できます。現在のプランはAnthropicのサイトでご確認ください。

典型的な vibe coding のセッションは、次のようになります。

/bookingsページを追加して、現在のユーザーの予約を新しい順に一覧表示してください。クラスの開始2時間前を切ったらキャンセルボタンを無効にします。既存の認証ヘルパーを使ってください。終わったらテストを実行してください。

**得意なこと：**すでにプロジェクトがあり、技術構成を完全に制御したく、実行とデプロイを自分でも行える開発者や技術系の創業者。複数ファイルの変更や、コードベースにすでにある規約に従うことが得意です。

**手間が増える点：**開発環境が必要で、Claude Codeは何もホスティングしません。データベース、シークレット、デプロイ、ドメインは自分で用意します。他の開発者向けツールとの比較は、Cursor vs Windsurf vs Claude Codeをご覧ください。

Claude Codeでうまくいく習慣

• 大きな変更の前に計画を頼む。「手順と触れるファイルを書き出して、待って。」
• **プロジェクトのメモファイルを置く。**Claude Codeはプロジェクトのメモリファイル（CLAUDE.md）から規約を読むので、毎回繰り返さずに済みます。
• **差分を確認する。**vibe coding でも、認証、決済、ユーザーデータを扱う部分のような重要な箇所は、変更点にざっと目を通しましょう。
• **こまめにコミットする。**小さなコミットなら、悪い一手を取り消すのが簡単です。

方法3：MythexでClaudeから構築して公開する

Claudeで作業するのが好きで、最終的にデータベース、ログイン、ファイルストレージ、公開URLのある本物のアプリが欲しいなら、MCP（Claudeが外部でホスティングされたツールを使えるようにするプロトコル）を通じて、ClaudeをAIアプリビルダーにつなげます。（MCPとはで、分かりやすく説明しています。）

MythexはMCPサーバーを運営しています。接続すると、ClaudeがMythexのプロジェクトを作成し、プライベートなクラウドのサンドボックスでコードを書き、ライブプレビューを開始し、データベースとファイルストレージを接続し、アプリを公開できます。どの結果にも、Mythexでプロジェクトをライブで見られるリンクが付きます。

接続の手順

1. Mythexでアカウント設定を開き、MCPのURLhttps://mcp.mythex.ai/mcpをコピーします。
2. Claudeで設定 → コネクタ → カスタムコネクタを追加を開き、URLを貼り付けて接続をクリックします。
3. Mythexのページが開きます。必要ならサインインし、アクセスを許可を選びます。コピーするAPIキーはありません。
4. Claudeに戻って、やりたいことを頼みます。

接続はどのプランでも誰でもできます。サンドボックスのツールにはMythex Pro（月額$25）が必要です。Claudeの利用はお使いのClaudeプランの範囲内で、サンドボックスの時間、プレビュー、ホスティングはMythexのクレジットから使われます。全手順は、Claude、Cursor、CodexからMythexアプリを作るにあります。

最初に試すプロンプト

Mythexを使って、新しいプロジェクトを作ってください。小さなデザインスタジオ用のシンプルなCRMです。連絡先には、名前、会社、メールアドレス、電話番号、ステージ（リード、進行中、過去）、メモがあります。ステージごとのボード表示で連絡先を列の間でドラッグでき、検索ボックスも付けてください。データが残るようにデータベースを追加し、私だけが見られるようにログインを付けてください。プレビューを開始し、動いたらリンクを送ってください。

そのあとは、同じ会話の中で、1つずつ変更していきます。

Mythexのプロジェクトで、連絡先に「次のフォローアップ」の日付を追加し、ホーム画面に今週期限のフォローアップの一覧を追加してください。プレビューで確認してください。

CRMを公開して、ライブのURLを教えてください。

**得意なこと：**Claudeで考えるのが一番はかどり、サーバーを設定せずに、データベース付きでホスティングされた成果物が欲しい人。同じプロジェクトなので、Claudeで始めてMythexのチャットで続けることも、その逆もできます。

どれを使うべき？

Claudeで特に重要なプロンプトのコツ

Claudeは詳細な指示を忠実に守るので、良くも悪くも指示の書き方が効きます。

• 変えないものを伝える。「レイアウトと色はそのままで、フォームの入力チェックだけ変えて。」
• 完了の定義を渡す。「完了とは、新しい連絡先が保存され、ボードに表示され、更新しても残ること。」
• **自分の作業を確認させる。**Claude Codeならテストの実行、Mythexならライブプレビューの確認やブラウザテストの実行です。
• **変更が分からないときは、普通の言葉での説明を頼む。**アプリが何をしているかを知る最短の方法です。

vibe coding プロンプト集には、3つのどの環境でも使える30個のプロンプトがあります。

3つに共通する安全面の注意

• 本物のAPIキーやパスワードを、Claudeの会話に貼らないでください。Mythexでは、シークレットはプロジェクトのシークレット設定に入れ、Claudeが見られるのは名前だけで、値は見られません。
• 公開する前に、誰が何を見られるかを確認しましょう。「ログイン中のユーザーが、他のユーザーの記録を開けますか？」が最初に聞くべき質問です。
• 重要なコードはレビューしましょう。Claudeは優秀なコーダーですが、vibe coding では全行を読まないので、大事な行を選んで確認します。vibe coding は安全？をご覧ください。

ChatGPTも使っているなら、姉妹編のChatGPTとCodexでの vibe codingをご覧ください。セットアップを丸ごと省きたい場合は、AIアプリビルダーを開いて、そこでアプリを説明してください。

よくある質問