６ヶ月でVibe Codingの達人になる方法、これを見れば十分です
原文タイトル：6ヶ月でエキスパートのバイブコーダーになる方法（フルコース＋リソース）
原著者：Avid
翻訳：Peggy、BlockBeats
Editor's Note: Vibe Coding は単なる「AI にコードを書かせる」ではなく、アイデアから展開済みの製品までの包括的な構築方法です。効果的な方法は、曖昧な要件を繰り返し入力し、モデルが「魔法」を起こすのを待つのではなく、最初に計画し、次にプロンプト、次にレビュー、最後にデプロイすることを学ぶことです。
このロードマップは、Vibe Coding を 6 つの月に分割しています：まず最初に Web、Git、および基本的なテックスタックを修正し、次に Cursor、Claude Code などのツールをマスターします。その後、プロンプトワード、コンテキストエンジニアリング、MCP、RAG、テスト、セキュリティ、および本番デプロイメントを学びます。そのコアは初心者が従来のプログラマーになることではなく、製品のアイデアを持つすべての人が、AI を使用してアイデアをより体系的に実際に利用可能なアプリケーションに変換するのを支援することです。
初心者にとって最も重要なアドバイスは次の通りです：チュートリアルだけを見るのではなく、継続的に実践することです。毎月、実行可能でアクセス可能でイテレーション可能な小さなプロジェクトを完了すべきです。真の進歩は「どれだけのコースを修了したか」からではなく、本当に製品をリリースしたかによって得られます。
以下はオリジナルの文章です：
Vibe Coding は、Twitter の小規模な実験から、最も注目される構築者のスキルの1つになりました。
私はさっき、前 1% のアジェンティック・コーダーになる方法を解説しました。
早期参加のチャンスは今でも残されていますが、それは本当に何かをやり遂げる人々にのみ与えられます。
問題は、ほとんどの初心者が何をすべきかさえわかっていないことです。彼らは通常、Cursor をダウンロードして、曖昧なアイデアを入力し、その後生成された結果がめちゃくちゃであることに驚きます。数え切れないほどの YouTube のチュートリアルを見ていますが、本当に何かを作ったことはありません。複雑なツールに直接飛び込んでいますが、プロンプトワードをどのように構成し、コンテキストを管理し、デプロイを完了するかを理解していません。
結果は通常、同じです：中途半端なデモ、続々と発生する「バグを修正して新しいバグを作成する」デススパイラル、そして本当に展開された製品は一つもありません。
このガイドは、この問題を解決するために作成されました。これは、月ごとに進行する詳細なロードマップであり、2025年から2026年にかけて検証されたリソースが含まれており、完全なゼロから始めて、リアルな製品を提供できるようになるために必要な各スキルを網羅しています。各月には1つのマイルストーンがあり、各スキルにはリソースへのリンクがあります。
始める前にたった一つのルールがあります：全ては自らの手で行うこと。
関連コンテンツを読むのでもなく、他人が作業するのでもなく、本当にツールを開いて、手順に従って操作し、何かを壊し、それを修理し、最後にそれをリリースするのです。
Vibe Coding とは？
「Vibe Coding」という用語は、AI 研究者の Andrej Karpathy によって提唱されました。彼はこれを、完全に AI に任せたプログラミングスタイルを表すために使用しました：AI の提案をすべて受け入れ、コードを手動でレビューせず、最終結果の記述に注意を集中し、ロジックを自分で書くのではなくします。
現実の操作では、これは自然言語でソフトウェアが欲しいと述べ、それから AI にコードを生成し、反復し、テストし、修正してもらうことを意味します。
しかし、多くの初心者が見落としがちなことは、Vibe Coding は受動的な待ちではなく、魔法でもないということです。それは構造化されたプロセスセットであり、本質的には人の意図を実行可能なソフトウェアに変換するものです。
出力の品質はほぼ完全に入力の品質に依存します：あなたのヒントワード、コンテキストファイル、計画能力、AI 出力コンテンツをレビューする能力。これらの入力をマスターすることが、ゲーム全体のキモです。
2026 年までに、Vibe Coding ツールは大まかに2つのタイプに分かれます：
AI アプリビルダー：たとえば Lovable、Bolt、Replit など。これらのツールは、説明文に基づいて完全なフルスタックアプリケーションを生成し、ホスティングやデプロイメントを含む。非技術ユーザーや迅速なプロトタイプ開発者向けであり、ローカル環境の設定が必要ありません。
AI プログラミング IDE：たとえば Cursor 3.0、Claude Code、Windsurf など。これらのツールは開発環境に組み込まれており、開発者がコードの記述、デバッグ、反復を支援します。一定の技術的基盤が必要ですが、本格的なプロダクション開発ではより高度なコントロールと能力の上限を提供します。
以下のロードマップは、これらの2つの世界に足を踏み入れさせます：まずすべてのツールがより効果的に機能するようにするための基本的なスキルから始め、徐々に専門化していきます。
第1ヶ月：すべての Vibe Coder がマスターすべき基本的な能力
この月の目標は：コンセプトレベルでソフトウェアがどのように動作するかを理解し、AI によって生成されたコードがブラックボックスのように見えなくなり、より賢く指示できるようにすることです。
初心者の Vibe Coder が最もよく犯すエラーは、その月をまったくスキップすることです。彼らはツールを開き、あいまいな手がかりを書き留め、生成された結果に困惑し、そしてコミュニティの中でよく言われる「デッド ループ」に陥ります：AI にバグ修正させ続け、AI は新しいバグを作り続け、悪循環が続きます。
このループから抜け出せる人々は、通常、十分な基礎知識を持っています。彼らは単に AI の出力に反応するのではなく、それを読み取り、導くことができます。
プログラマーになる必要はありません。賢い質問をする能力と明白なエラーを見つける能力さえあれば十分です。
Web の仕組み
任意の Web 製品を構築する前に、自分がどのようなインフラストラクチャの上で開発を行っているかを理解する必要があります。ほとんどの Vibe Coding 製品は Web アプリケーションです。つまり、基本的なクライアント—サーバーモデル、ブラウザがバックエンドとどのように通信するか、URL が実際に何を行っているか、および API が何であるかを理解する必要があります。
リソース：
MDN Web Docs：How the Web Works（無料）
リンク：https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works
これは、ブラウザ、サーバー、および HTTP について最も明確で権威ある説明の1つであり、Mozilla が管理しています。
MDN：HTTP Overview（無料）
リンク：https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview
GET と POST の違い、ステータスコード（200 OK、400 Bad Request、401 Unauthorized、404 Not Found、500 Server Error）の説明、アプリケーションで問題が発生した場合に表示される理由について説明しています。
REST API チュートリアル（無料）
リンク：https://restfulapi.net/
内容は短くて実用的であり、直接適用可能です。このチュートリアルを終えると、Vibe Coding を使用して作成された各バックエンドが「API を呼び出す」ときに実際に何が起こっているのかが理解できます。
理解する必要がある内容：
URL を入力したときからページがレンダリングされるまでに何が起こるか。
フロントエンドとバックエンドの違い：フロントエンドはユーザーが見るインターフェースであり、バックエンドはサーバーのロジックとデータベースです。
API とは何か、リクエストとは何か、レスポンスとは何か。
HTTP ステータスコードの意味と、アプリケーションのデバッグ時にそれらが表すもの。
「環境変数」とは何か、そしてなぜ鍵を直接コードに書いてはいけないのか。
Git と GitHub：あなたのタイムマシン
これはこのガイド全体で最も重要な実用的スキルです。真剣な Vibe Coder はみんな Git を使います。
Git がなければ、1回の悪い AI の提示ワードが数時間の作業を台無しにする可能性があり、元に戻る方法がありません。Git があれば、各正常に動作する状態はいつでも戻れるチェックポイントになります。
Git は選択肢ではありません。それは、製品を効率的に構築しているか、AI が失敗したたびに最初からやり直しているかを決定します。
学習方法：コマンドを暗記しようとせず、まずそのモデルを理解してください。Git はファイルの変更を時間の経過とともに追跡し、この履歴の中で前後に移動できます。このポイントを理解したら、コマンドは自然になります。
リソース：
Git for Vibe Coders: 重要なのは実際のものです（YouTube、無料）
リンク：https://www.youtube.com/watch?v=ADEFvP5Gw5c
Vibe Coder 向けに特別に作成されました。実際の Next.js プロジェクトを通じて、git add、git commit、git push、git pull、ブランチ、ロールバックについて説明します。
バイブコーダーのための Git と GitHub（無料ガイド，DeepakNess.com）
リンク：https://deepakness.com/blog/git-for-vibe-coders/
このガイドは特に2025年末のAI補助開発者を対象としており，Vibe Coderの日常的なGitワークフローをカバーしています。これには15〜20分ごとのコミットと，AI生成変更を受け入れる前に変更をgit diffでチェックすることが含まれます。
Learn Git Branching（無料，インタラクティブ）
リンク：https://learngitbranching.js.org/
ブランチとマージを理解する最高のビジュアルツールの1つであり，ブラウザーで直接実行でき，環境の設定は不要です。
GitHubスキル（無料，インタラクティブ）
リンク：https://skills.github.com/
GitHubが公式に提供するインタラクティブなコースで，GitHub内で直接完了できます。
重点：
git init、add、commit、push、pull、status、diff；
新しい機能を開始する前に，まず新しいブランチを作成してください；
履歴を表示するにはgit logを使用し，変更を安全に取り消すにはgit revertを使用してください；
.gitignoreファイルを作成し，最初のプッシュの前に.envファイルを追加してください；
AIを使用して実験を行う場合は機能ブランチを使用してください：まずブランチを作成し，ブランチ内でVibe Codingを行い，テストが合格したらマージしてください。
ルールは次のとおりです：今後行うプロジェクトはすべてGitHubリポジトリに置かなければなりません。例外はありません。
基本的 HTML、CSS 和 JavaScript 素养
你不需要成为前端开发者。你只需要能够看懂 AI 生成的组件，大致理解什么是 div、button、onClick 和 useState。
这大约需要一周时间，但在你需要指挥 AI 修改界面某个具体部分时，会节省大量时间。
资源：
The Odin Project: Foundations（免费，自学）
链接：https://www.theodinproject.com/paths/foundations
互联网上最好的免费全栈基础课程之一。只需要学习 HTML Foundations、CSS Foundations 和 JavaScript Basics 这几个部分即可。中等速度下大约需要 1–2 周。
freeCodeCamp: Responsive Web Design（免费，互动式）
链接：https://www.freecodecamp.org/learn/2022/responsive-web-design/
基于浏览器练习，不需要配置环境。可以作为 Odin Project 的补充。
JavaScript.info（免费参考资料）
链接：https://javascript.info/
目前最清晰的 JavaScript 文档之一。当 AI 生成你看不懂的代码时，可以把它当作参考资料使用。它相当于 JavaScript 解释版的 MDN。
重点关注：
HTML：元素、属性、嵌套关系，以及页面结构；
CSS: セレクタ、Flexbox、およびなぜ特定のスタイルが表示されるのか；
JavaScript: 変数、関数、配列、オブジェクト、および async/await の意味；
React Basics: コンポーネントとは何か、props と state とは何か。
あなたのテックスタックを選択し、それを貫く
初心者が最もよく犯す間違いの1つは、フレームワークを何度も切り替えることです。
AI モデルはオープンソースのコードでトレーニングされます。マイナーなテックスタックと比較して、人気のあるドキュメントが充実したテックスタックでは性能が明らかに向上します。テックスタックがより一般的に使用されるほど、関連するチュートリアル、事例、トレーニングデータが多くなり、AI の出力品質も向上します。
2026 年、Vibe Coder 初心者に推奨されるテックスタック：
フロントエンド: React、Next.js（App Router）を使用；
スタイル: Tailwind CSS；
データベース + 認証: Supabase（Postgres データベース、認証、ストレージ、すべて API 経由で利用）；
デプロイ: Vercel；
言語: TypeScript を優先し、JavaScript を使用することもできます。
このテックスタックは初心者向けであり、完全にホストされており、AI を補助して開発しやすく、データベースからオンラインの URL まで、サーバーインフラストラクチャを管理せずに完全なフルスタック製品をリリースできます。
これは現在、最も一般的な Vibe Coding テックスタックの1つでもあり、そのため AI ツールはこれに非常に精通しています。
リソース：
Next.js 公式コース：Learn Next.js（無料、インタラクティブ）
リンク：https://nextjs.org/learn
公式のインタラクティブコースで、完全なダッシュボードアプリを段階的に構築します。App Router バージョンは2024年に更新されましたが、現在でも有効です。
Tailwind CSS ドキュメント（無料）
リンク：https://tailwindcss.com/docs
Tailwind は utility-first の CSS フレームワークです。そのドキュメントの品質は非常に高く、トレーニングデータの密度が高いため、AI による Tailwind コードの生成効果は通常、他のほとんどのスタイルシステムよりも優れています。
Supabase ドキュメント：はじめに（無料）
リンク：https://supabase.com/docs/guides/getting-started
Supabase は、Postgres データベース、ロー レベルのセキュリティ ポリシー、認証（メール、ソーシャル ログイン、ワンタイムパスワード）およびファイル ストレージを提供し、すべての機能は簡単な JavaScript SDK を介して呼び出すことができます。
Vercel ドキュメント：はじめに（無料）
リンク：https://vercel.com/docs/getting-started-with-vercel
GitHub リポジトリを Vercel に接続すると、プッシュする度に自動的にデプロイされます。設定全体は約 5 分しかかかりません。
1 か月目のマイルストーン
この月の終わりまでに、次のことができるはずです：
API とは何か、およびブラウザからリクエストを送信する際に何が起こるかを説明できる；
Git リポジトリを作成し、コードをコミットし、ブランチを作成し、GitHub にプッシュできる；
AI によって生成された React コンポーネントを読み取り、その概要を理解できる；
基本的な Next.js プロジェクトを作成し、npm run dev を使用してローカルで実行できる；
GitHub リポジトリに接続し、静的ページを Vercel にデプロイできる。
2 か月目：ツールのマスタリング、Cursor 3.0、Claude Code、ビルダー エコシステム
この月の目標は：コア Vibe Coding ツールを本当にマスターし、さまざまなツールがどんなシーンに適しているかを理解し、最初の完全なプロジェクトを完了することです。
この月から、Vibe Coding は本格的な実戦段階に入ります。2026 年には利用可能なツールはすでに非常に強力ですが、ツールの使用方法を知っている人が報われ、ツールを「魔法」として扱う人は継続的に罰せられます。
フルスタックツールレイヤーの理解（2026年）
2026年までに、Vibe Codingエコシステムは明確に成熟しています。以下は、2026年5月時点での価値ある主要ツールの現状です。
AIプログラミングIDE
半技術者から技術者向け。
Cursor 3.0
オールインワンのAIファーストエディター。無料版/Pro版は月額20ドル。Agents Window、パラレルクラウドエージェント、Composer 2、Marketplace、組み込みブラウザをサポート。
Claude Code
エージェント重視のプログラミングとフルコードベースの推論に長けています。使用量ごとに課金され、Claude Proを月額20ドルで使用することもできます。現在、CLI、VS Code拡張機能、デスクトップアプリ、Web版をサポート。
Windsurf
企業ユーザーや予算の制約のある開発者向け。無料版/Pro版は月額15ドル。Cascade Agentを搭載し、2025年にGoogleによって24億ドルで買収されました。
GitHub Copilot
どんなIDEでも日常的な支援を提供するのに適しています。無料版/Pro版は月額10ドル。VS Code、JetBrains、Neovim、Xcodeなどの開発環境をサポートしています。
Cline
オープンソースの上級ユーザー向け。ツール自体は無料で、APIトークンで支払います。Claude、GPT-5.5、Gemini、またはローカルモデルに接続できるVS Codeプラグインです。
Google Antigravity
複数のエージェントの並行ビルドに適しています。価格は未定。2025年11月、Gemini 3とともにリリースされ、並行エージェントを管理するための「Manager View」を提供します。
No-Code / フルスタックアプリビルダー
完全な初心者ユーザーや迅速なプロトタイプ開発者向け。
Lovable
非技術系創業者やReact UI構築に最適です。無料版/Pro版は月額25ドル。完全なReact + Supabaseフルスタックアプリを生成し、非プログラマーに最適です。
Bolt.new
Web アプリを迅速に生成するための適切な選択肢で、ローカル構成は必要ありません。無料版 / Pro 版は月額 29 ドルです。ブラウザ内で完全に実行され、初心者向けに素早く始められます。
Vercel v0
UI コンポーネントを生成するのに適しています。無料版 / 月額 20 ドル。開発者向けであり、GitHub 同期および Vercel への直接デプロイをサポートしています。
Replit
ビルドとホスティングを統合したプラットフォームです。無料版 / 月額 20 ドル。機能は最も豊富で、Agent 3 はブラウザ内でアプリのビルド、実行、デプロイが可能です。
Base44
コードレスの内部ツール開発に適しています。無料版 / 月額 20 ドル。テクニカルでないビルダー向けであり、AI サポートアプリとバックエンド能力を提供しています。
選択の提案
完全にテクノロジーに精通していない初心者の場合は、Lovable または Bolt.new から始めることができます。
開発者であり、既存のワークフローに AI を統合したい場合は、Cursor 3.0 または GitHub Copilot を選択できます。
ターミナルの使用に慣れており、完全なコードベース制御機能を必要とする場合は、Claude Code を選択できます。
予算に敏感な開発者の場合は、月額 15 ドルの Windsurf を選択できます。
チームと協力してエンタープライズ向けアプリを構築したい場合は、Google に買収された Windsurf を検討してください。
リソース
roadmap.sh：2026 年のベストバイブコーディングツール（無料ガイド）
リンク：https://roadmap.sh/vibe-coding/best-tools
これはコミュニティによって管理されている 2026 年の最高のツールランキングです。
BuildMVPFast：2026 年のベストバイブコーディングツール（無料ガイド）
リンク：https://www.buildmvpfast.com/blog/best-vibe-coding-tools-2026
完全な意思決定ツリーや各ツールの詳細を提供し、価格情報は 2026 年の状況に基づいて検証されています。
2026 年 Vibe 编码工具比较（無料、Technically.dev）
リンク：https://technically.dev/posts/vibe-coding-tool-comparison
Replit、v0、Lovable、および Bolt についてプロジェクトごとにテストした比較。
Vibe Coding：なぜ私たちは Windsurf を Lovable と Bolt よりも好むのか（無料ガイド、Koncile）
リンク：https://www.koncile.ai/en/ressources/best-vibe-coding-tools-windsurf-vs-lovable
実際の Web プロジェクトに基づいて、4 つのツールをチームで評価し、2026 年 4 月に公開。
Cursor 3.0：一度に完全なリファクタリング
Cursor 3.0 は 2026 年 4 月 2 日にリリースされ、これは 2023 年に Anysphere が VS Code からフォークした後、最も重要な更新です。
これは単なる「ファイルエディタに AI 機能をオーバーレイする」ツールではなく、ソフトウェアを Agent で構築する統合ワークスペースに変わりました。
Cursor 3.0 の新機能
Agents Window
Cmd/Ctrl + Shift + P → Agents Window でアクセスできる、複数の AI Agent を並行して実行できる新しい独立したインターフェース。Agent はローカルマシン、クラウド環境、SSH、Git worktrees のいずれかで同時に実行できます。
Composer 2
Cursor が独自に開発した最先端のプログラミングモデルで、複数ファイルのコード編集と反復トレーニングに特化しています。
Cloud Agents
リモートクラウドサンドボックスで実行される Agent。タスクを開始して後で結果を確認できます。企業が自社でホストするクラウド Agent は 2026 年 3 月 25 日にローンチされました。
内蔵ブラウザ
統合ブラウザにより、Agent は実際のレンダリングを直接表示し、修正結果をテストできます。ユーザーが手動でスクリーンショットを撮る必要はもうありません。
Cursor Marketplace
1 クリックでプラグインをインストールし、Skills、Subagents、MCP サーバー、Hooks、Rules をまとめたものです。使用可能なプラグインには、AWS、Figma、Linear、Stripe、Vercel、Datadog、Snowflake などがあります。
Design Mode
ブラウザでレンダリングされた UI 要素を直接クリックしてドラッグ & ドロップでき、AI が対応部分を正確に編集できます。どこにコンポーネントがあるかをテキストで説明する必要はもうありません。
Automations
この機能は 2026 年 3 月 5 日にリリースされました。これは外部イベントによってトリガーされるペルマネント Agent であり、定期的なタスク、Slack メッセージ、Linear イシュー、GitHub イベント、PagerDuty アラートなどが含まれます。Agent はクラウドサンドボックスを起動し、構成した MCP を使用してタスクを実行します。
New Diffs View
のサポートにより、単語レベルの変更レビュー、ステージング、プルリクエストの作成が可能になり、全体プロセスを Agents Window 内で完了できます。
/worktree Command
Git worktree 内でタスクを実行し、Agent がメインブランチを汚染するのを防ぎます。
/best-of-n Command
同じタスクを複数のモデルで実行し、最適な結果を返します。
リソース
Cursor Changelog: 3.0（Official, Free）
リンク：https://cursor.com/changelog/3-0
Cursor 3.0 の公式リリースノート。
DataCamp：カーソル 3 とは？（無料ガイド）
リンク：https://www.datacamp.com/blog/cursor-3
Cursor 3.0 の各新機能について最も包括的な解説の一つ。2026年4月7日に発表。
カーソル 3 がエージェンティック コーディングを変革する（YouTube、無料、Scrimba）
リンク：https://www.youtube.com/watch?v=HTKGyLar8AU
実際のプロジェクトで Agents Window、Composer 2、組み込みブラウザ、並列エージェント、およびマーケットプレイスを完全にデモ。
カーソルチュートリアル 2026：15 分で AI コーディングを学ぶ（無料ガイド、NXCode）
リンク：https://www.nxcode.io/resources/news/cursor-tutorial-beginners-2026
初心者向けのステップバイステップガイドで、Composer、Agent Mode、Cloud Agents をカバー。
AI で素早く開発：カーソル 3 vs Google Antigravity（無料ガイド）
リンク：https://www.buildfastwithai.com/blogs/cursor-3-vs-antigravity-ai-ide-2026
Cursor 3.0 と Google の新しい AI IDE Antigravity の機能を実用的に比較。
Claude Code：コードベース全体を理解できるエージェンティックコーディングツール
Claude Code は、Anthropic がリリースした端末ネイティブのエージェンティックプログラミングツールです。
主に開いているファイルに焦点を当てた IDE ツールとは異なり、Claude Code はコードベース全体を読み取り、複数のファイルをまたがって推論し、コマンドを実行し、Git 操作を処理し、複数段階のタスクを自律的に実行します。各ステップであなたの承認を求めながら。
現時点では、4 種類の環境で使用できます：端末 CLI、VS Code プラグイン、JetBrains IDE、およびデスクトップアプリ。
はじめ方
まず、月額 20 ドル以上の Claude Pro サブスクリプションが必要です。また、macOS、Linux、またはWindows 11 上の端末を使用する必要があります。
npm を使用してインストール：
npm install -g @anthropic-ai/claude-code
プロジェクトフォルダに移動：
cd ~/projects/my-app && claude
探索性のプロンプトから始める：
このプロジェクトは何を行っていますか？
これにより、Claude はコードベースを変更する前にプロジェクトを分析します。
コアワークフロー：Explore → Plan → Code → Commit
Explore：探索
2 回 Shift + Tab キーを押して Plan モードに入力します。Claude はファイルを読み取り、質問に答えますが、コンテンツは変更しません。このモードでは、プロジェクトのアーキテクチャを理解し、データフローを追跡し、コードベースの構造を整理できます。
Plan：計画
Plan モードでは、Claude に実行計画を作成させます。この計画をレビューし、詳細化し、異議を唱える必要があります。確認後に「進めてもよい」と言う必要があります。
Code：コーディング
通常モードに切り替えます。Claude は計画に従って機能を実装し、差分を表示し、各ステップであなたの承認を求めます。
Commit：コミット
変更のレビューを行い、テストを実行し、明確なコミットメッセージでコミットを完了します。
CLAUDE.md とは何ですか？
CLAUDE.md は、プロジェクトのルートディレクトリに配置される Markdown ファイルであり、次の情報を Claude Code に提供します：
プロジェクトの実行方法；
遵守すべき規約；
実行すべきコマンド；
変更してはいけないコンテンツ。
次のコマンドを実行できます：
claude /init
これにより、初期バージョンが生成され、プロジェクト固有の設定に従ってカスタマイズできます。
リソース
builder.io：Claude Code の使用方法（初心者ガイド、無料）
リンク：https://www.builder.io/blog/how-to-use-claude-code
2026年4月に公開された主要な Claude Code 初心者向けチュートリアルの1つで、インストール、Plan Mode ワークフロー、CLAUDE.md の設定、ベストプラクティスが取り上げられています。
非技術者向け完全な Claude Code チュートリアル（YouTube、無料）
リンク：https://www.youtube.com/watch?v=bqJzIWAEn40
プログラミング経験は不要。ゼロからアプリを構築するための段階的ビデオチュートリアルが2026年4月に公開されました。
Claude Code 完全コース；4時間（YouTube、無料）
リンク：https://www.youtube.com/watch?v=QoQBzR1NIqI
製品の設定からリリースおよび販売までのフルプロセスを網羅した、現在最も包括的な Claude Code 動画コースの1つです。
初心者向け Claude Code チュートリアル 2026（無料ガイド、dev.to）
リンク：https://dev.to/ayyazzafar/claude-code-tutorial-for-beginners-2026-from-installation-to-building-your-first-project-1lma
インストールから最初のプロジェクト構築までをカバーするテキストチュートリアル。
Claude Code はじめの一歩：研究者のセットアップガイド（無料ガイド）
リンク：https://paulgp.substack.com/p/getting-started-with-claude-code
「具体性が必要」という原則、コンテキストウィンドウ管理、および反復的プロンプト手法を理解するのに特に適しています。
OpenSaaS.sh：2026 年の SaaS を共にコードで振る最良の方法（無料ガイド）
リンク：https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/
2026 年の優れた SaaS Vibe Coding 構成を紹介します：Claude Code + 構造化された SaaS テンプレート + LLM に優しいドキュメント（llms.txt）。バックエンド開発サーバーの実行方法、Claude にリアルタイムログを表示させる方法、および Chrome DevTools MCP を使用したブラウザ自動化方法も説明されています。
第2个月里程碑
到这个月结束时，你应该能够：
为不同项目类型选择合适的工具；
使用 Cursor 3.0 的 Agents Window 通过云端 Agent 执行任务；
在写任何代码之前，先用 Claude Code 的 Plan Mode 进行规划；
为任意项目设置一个 CLAUDE.md 文件；
构建并部署至少一个完整项目，也就是一个可以正常运行，并拥有真实线上 URL 的 Web 应用。
第3个月：提示词的艺术，上下文、结构与稳定输出
这个月的目标是：掌握 Vibe Coding 最核心的能力，也就是写好提示词、管理好上下文，让 AI 能够稳定地在第一次尝试时，就做出你真正想要的结果。
在整个 Vibe Coding 技术栈里，提示词是杠杆最高的一项技能。如果你的提示词很模糊，工具本身几乎不重要。一个普通工具配上优秀提示词，永远会胜过一个顶级工具配上模糊提示词。
好的 Vibe Coding 提示词到底如何工作
新手提示词和高手提示词之间的区别，几乎完全在于结构。
新手会说：
添加一个登录页面。
高手会说：
在 app/login/page.tsx 中创建一个登录页面，使用 lib/supabase.ts 中现有的 Supabase auth client。表单样式沿用 app/signup/page.tsx。包含邮箱和密码输入框、提交按钮，并处理无效登录凭证的错误提示。不要修改其他任何文件。
前者可能生成一个能用的组件，也可能破坏其他文件，或者引入与当前代码库不一致的模式。后者则更可能生成一个真正可运行、且符合项目结构的组件。
良いプロンプトには通常、以下の 4 つの部分が含まれています：
目標：この機能は具体的に何を達成する必要がありますか？
コンテキスト：どのファイルに関連していますか？現在のプロジェクトには既に何がありますか？
制約：何を変更してはいけないのでしょうか？既存のパターンに従う必要がありますか？
出力形式：最終的な出力はどのようになる必要がありますか？
リソース
Anthropic：対話型プロンプトエンジニアリングチュートリアル（無料、GitHub）
リンク：https://github.com/anthropics/prompt-eng-interactive-tutorial
この 9 章のインタラクティブコースには、演習が含まれており、Jupyter ノートブックで Claude API を使用して実行されるよう設計されています。これは現時点で最高の実践的プロンプトエンジニアリングコースの 1 つです。
PromptingGuide.ai（無料）
リンク：https://www.promptingguide.ai/
基本的なプロンプト、マインドチェーン、few-shot 例からエージェンティックプロンプト技術まで幅広くカバーし、継続的な更新が行われています。
r/PromptEngineering：究極のバイブコーディングガイド（無料、Reddit）
リンク：https://www.reddit.com/r/PromptEngineering/comments/1kyboo0/the_ultimate_vibe_coding_guide/
活発な Vibe Coder による 18 の実践的な経験を含みます。AI のオフセットの処理方法、複数の機能間での一貫性の維持方法、および「一般的な AI の間違い」ファイルの作成方法などが含まれています。
Roadmap.sh：Vibe Coding ベストプラクティス（無料ガイド）
リンク：https://roadmap.sh/vibe-coding/best-practices
2026 年の状況に基づき、Vibe Coding ツールから安定した結果を得るための10の実践ルールが提供されています。
Appwrite：Complete Vibe Coding Guide 2026（無料ガイド）
リンク：https://appwrite.io/blog/post/the-complete-vibe-coding-guide-2025
Vibe Coding とは何か、クリアな提示語を書く方法、およびビルダーとしてコントロールを保ち、ツールの乗客にならない方法について完全な説明がされています。
PRP Framework：Plan First, Prompt Later
最も一般的な「デス・スパイラル」が発生する原因は、何も計画せずに直接機能開発を始めることです。
AI がコードを生成し、何かが壊れました；それを修正させると他の部分がまた壊れました；そしてそのプロセスが繰り返される。
解決策は非常に単純です：コード提示語の前に、まず計画を立てます。
PRP Framework：Product Requirements Prompt
Vibe Coding ツールを開く前に、文書内で次の三つの質問に答えます：
誰が使用するのか？
ターゲットユーザーは誰ですか？彼らの技術的な快適さはどのくらいですか？
何の問題を解決していますか？
コアバリューを一文で明確に述べてください。
成功はどのように見えますか？
具体的でテスト可能な基準を記述してください。
そして、この文書をクロードや ChatGPT に提出し、完全な製品要件ドキュメント（PRD）に展開させます。この PRD は、Cursor や Claude Code での立ち上げ提示語となります。
この習慣は、「実際に製品をリリースできる人」と「死のループに陥る人」の分かれ道です。
特にClaude Codeでは、どんな実装よりもまずPlan Modeに入るためにShiftキーを2回押してください。Claudeに、どのファイルが作成または変更されるか、どの関数が導入されるか、どの境界条件やアーキテクチャの決定を考慮する必要があるかを説明させてください。この計画を見直し、疑わしい部分に異議を唱え、そして、確認できた後にのみ「go ahead」と言ってください。
llms.txt：AI向け可読文書の標準
Vibe Codingでは、最も過小評価されているスキルの1つがllms.txtです。
それは、ライブラリ、フレームワーク、またはプロジェクトのルートディレクトリに配置される純粋なテキストMarkdownファイルであり、AIツールがプロジェクトを正しく使用するために必要な正確なコンテキストを提供します。
これが解決する問題は、ほとんどのライブラリのドキュメントが人間向けに書かれており、ブラウザでの閲覧に最適化されていることです。AIモデルは、HTMLや大量のJavaScriptが含まれるドキュメントやナビゲーションメニューを処理する際に効果がありません。llms.txtはこれらの邪魔をすべて取り除き、モデルにクリーンで構造化された焦点の当てられたAPIリファレンス資料を提供し、コンテキストウィンドウに収めることができます。
llms.txtがどこにあるか、およびその使用方法
現在、ほとんどの主要なライブラリはllms.txtを公開しています。例：
https://docs.supabase.com/llms.txt
このURLをClaude Code、Cursor、またはChatGPTに貼り付けて、「このドキュメントを先に読んでから、このライブラリを使用して機能を構築してください。」と言ってください。
llms.txtのないライブラリには、自分で生成することもできます：このライブラリのAPIドキュメントをコピーし、Claudeに貼り付けて、「このドキュメントをきちんと整理して、わかりやすいllms.txt形式にしてください：クラス、メソッド、必須パラメータ、および例を含めます。トークン数は5000以下に制限してください。」と言ってください。
OpenSaaSテックスタック、つまりClaude Code + Open SaaSボイラープレートは、ボイラープレートとWaspフレームワークの両方でllms.txtを使用しています。これは、他のどのテックスタックと比較しても、この構成ではClaude Codeがより安定したコードを生成できる理由の1つです。
リソース
llms.txt 公式標準（無料）
リンク：https://llmstxt.org/
すべての公開済み llms.txt ファイルのライブラリとフレームワークがリストされている公式仕様書。
OpenSaaS：2026 年に SaaS を Vibe Code する最良の方法（無料ガイド）
リンク：https://docs.opensaas.sh/blog/2026-03-16-best-way-to-vibe-code-saas-2026/
これは、llms.txt、SaaS ボイラープレート、および Claude Code がどのように組み合わさり、2026 年における最も安定した Vibe Coding 構成の一例を示した実際のケーススタディです。
Cursor Rules と CLAUDE.md：AI への長期的な命令
Cursor Rules と CLAUDE.md ファイルは、Vibe Coding において最も低い使用率を示すが、最も高いリターンをもたらす実践の一つです。
これらは永続的な命令ファイルであり、AI は各セッション開始時にそれらを読み込みます。これらはプロジェクト、規約、テクノロジースタック、および AI が絶対に行ってはならないことを定義しています。
2026 年の Cursor 設定
Cursor は現在、.cursor/rules/ ディレクトリを使用し、過去の単一の .cursorrules ファイルに代わり、個別の .mdc ファイルでルールを管理しています。
ルールには 4 つのアクティブ化モードがあります：
Always Apply
コンテキストに関係なく、各セッションでロードされます。
Auto Attached（グロブ）
ファイルパターンに一致する場合に自動的にアクティブ化されます。たとえば、*.tsx ファイル。
Agent Requested（記述に基づく）
AI はタスクの記述に基づいていつ適応すべきかを判断します。
Manual（@rule-name）
明示的なプロンプト内でのみ参照される場合にのみ読み込まれます。
適切なルール設定には何が含まれるべきか
.cursor/index.mdc ファイル、プロジェクトの概要、テクノロジースタック、一般的な規約を説明するために使用され、推奨行数は 100 行以下です；
.cursor/rules/ には、特定のコンテキストに対応する複数の独立した .mdc ファイルが作成されます。例：認証、データベーススキーマ、UI コンポーネントなど；
プロジェクトのルートディレクトリに CLAUDE.md ファイルを配置し、同じ情報を Claude Code で使用できるようにします。
リソース
Vibe Coding Academy：Cursor Rules Complete Guide + 15 Templates（無料ガイド）
Link：https://www.vibecodingacademy.ai/blog/cursor-rules-complete-guide
これは 2026 年における Cursor Rules に関する最も詳細なガイドの1つであり、.mdc フォーマット、4つのアクティブモード、および15の一般的なテクノロジースタックのコピー可能なテンプレートが含まれています。
CLAUDE.md と Cursor Rules：Multiple Levels（YouTube、無料）
Link：https://www.youtube.com/watch?v=Ia54BXaci5o
Cursor と Claude Code に複数のレベルのルールを設定する方法について詳しく説明し、実際のケーススタディも含まれています。このビデオは2025年に公開されましたが、現在でも完全に有用です。
How to Create and Use SKILLS.md in Cursor（YouTube、無料）
Link：https://www.youtube.com/watch?v=DfLL5_zbWGc
2026年2月に公開された、Cursor のスキルシステムについて紹介しています。.cursor/skills/ ファイルを作成し、エージェントがスラッシュコマンドを介して呼び出せるようにする方法についてカバーしています。
Cursor Directory（無料、コミュニティ版）
リンク：https://cursor.directory/
コミュニティによるルールファイルのディレクトリで、さまざまなテクノロジースタックをカバーしています。技術スタックに合ったルールファイルを選択し、カスタマイズを行ってください。
Awesome CursorRules（無料、GitHub）
リンク：https://github.com/PatrickJS/awesome-cursorrules
フレームワーク別に整理され、定期的に更新される高品質なルールファイルの選り抜きリポジトリです。
Sync Coding Rules: Cursor、Claude Code、および Windsurf（無料ガイド）
リンク：https://www.concret.io/blog/sync-coding-standards-across-cursor-agentforce-vibes-claude
より高度なアプローチ：ハードリンクを使用して、1 つのメインルールファイルをすべての AI ツールに自動的に同期させます。
Spec-Driven Development：Vibe Coding の専門化アップデート
Spec-Driven Development、または仕様駆動開発、略して SDD は、Vibe Coding が実際のプロジェクトに参入し、拡張が必要になった際に現れる専門化された手法です。
この手法は JetBrains が 2026 年に DeepLearning.AI コースで公式に提唱しました。それは、どの Agent にもコードを書かせる前に、システムが何をすべきかを構造化された仕様ドキュメントで定義し、それらのドキュメントを直接コードリポジトリに配置することを重視しています。
Vibe Coding は通常、プロジェクトが約 3 か月経った辺りで壁にぶつかります。モデルは以前の決定と矛盾するコードを生成し始め、コンテキストが蓄積され続け、衝突パターンが現れ始め、デッドロックが訪れます。
Spec-Driven Development は、この問題に取り組もうとします：プロジェクトの事実上のソースは、ヒントワードではなく、仕様書であるべきです。
SDD ワークフロー
仕様書の作成
コードが登場する前に、システムの振る舞いを正確に記述します：この機能は外部から見て何を行うのか、その入力、出力、境界条件、制約事項は何か。ここで書かれるのは実装の詳細ではなく、観察可能な振る舞いです。
要件の生成
仕様書を AI エージェントに渡し、構造化された要件文書を生成させます。その後、レビューを行いましょう：すべての内容がカバーされていますか？承認や修正が必要ですか？
設計文書の作成
承認された要件を技術的計画に変換し、具体的なコード、テスト、ドキュメントのタスクを含めます。最初のコードを書く前に、この計画をレビューする必要があります。
実装
AI は仕様書に基づいてコードを記述します。あいまいなヒントワードではなく、リトライロジック、冪等処理、タイムアウト挙動などは仕様書で決定し、モデルの想像に委ねるべきではありません。
テストの生成と実行
仕様書がすでに入力、出力、および境界条件を明確にしているため、テストケースも直接仕様書から生成できます。
SDD を本当に有効なドキュメント構造にする
mission.md
構築中の内容とその根拠を説明します。
tech-stack.md
主要な技術的決定を記録します。
roadmap.md
実装順にプロジェクト段階を分割します。
specs/[feature-name]/plan.md
その機能の指示されたタスクグループ。
specs/[feature-name]/requirements.md
その機能の範囲、重要な意思決定、およびコンテキスト。
specs/[feature-name]/validation.md
成功基準とマージ承認条件。
SDD と純粋な Vibe Coding の使い分け
プロトタイプ、実験、コンセプトの検証、またはロードマップの第3-4ヶ月で方向性を探る場合は、Vibe Coding を使用できます。
特定機能が長期間メンテナンスされる必要がある場合や、プロジェクトに第二の貢献者が参加している場合、または機能の振る舞いがビジネス上や法的に影響する場合は、SDD を使用する必要があります。
折衷案は以下のとおりです：SDD で「憲法」、つまりミッション、テクノロジースタック、およびアーキテクチャを管理します。これらの境界内で、Vibe Coding を使用して具体的なタスクを実行します。
リソース
Toward Data Science: From Vibe Coding to Spec-Driven Development（無料ガイド）
リンク：https://towardsdatascience.com/from-vibe-coding-to-spec-driven-development/
現時点で最も詳細な SDD 実践者ガイドの1つで、完全な文書構造、plan → implement → validate サイクル、および spec ワークフローを Claude Code スキルに自動化する方法が含まれています。
GitHub Spec Kit（無料、オープンソース）
リンク：https://github.com/github/spec-kit
GitHub 公式のオープンソースの仕様駆動開発ツールキットです。テンプレート、specify CLI、Claude Code、GitHub Copilot、Gemini CLI と連携可能な構造化されたコマンド（/specify、/plan、/tasks など）を提供し、30 を超えるコーディングエージェントをサポートしています。
GitHub ブログ: Get Started with Spec-Driven Development（公式無料ガイド）
リンク：https://github.blog/ai-and-ml/generative-ai/spec-driven-development-with-ai-get-started-with-a-new-open-source-toolkit/
GitHub 公式による Spec Kit の使用方法に関する紹介で、Specify → Plan → Tasks → Implement の4つの段階、specify CLI のインストール方法、および /speckit.constitution を使用してプロジェクトガバナンス原則を確立する方法について説明されています。
JetBrains コース：Spec-Driven Development with Coding Agents（DeepLearning.AI 無料コース）
リンク：https://www.deeplearning.ai/courses/spec-driven-development-with-coding-agents/
この方法論を形式化するためのコース。全体の計画、実装、検証ループ、そして Claude Code で SDD ワークフローを再利用可能なスキルに自動化する方法に焦点を当てています。
Test Collab：From Vibe Coding to Spec-Driven Development（無料ガイド）
リンク：https://testcollab.com/blog/from-vibe-coding-to-spec-driven-development
特定のツールに縛られない SDD 解説記事で、実際の事例を含み、CLAUDE.md、Cursor Rules、GitHub Copilot PRD ワークフローが同じ基礎パターンをどのように実現するかを説明しています。
Red Hat：Vibes, Specs, Skills, and Agents; The Four Pillars of AI Coding（無料ガイド）
リンク：https://developers.redhat.com/articles/2026/03/30/vibes-specs-skills-agents-ai-coding
より高度なフレームワーク：vibe で探索し、spec で正確性を確保し、skill で再利用可能な Agent 機能をカプセル化し、agent でタスクを実行します。これは、専門的な AI 補助開発を理解するための比較的完全な心的モデルの一つです。
すべてのエキスパート・Vibe Coder が使用している 18 のベストプラクティス
これらの実践は、r/ClaudeAI および r/PromptEngineering コミュニティから直接取得され、2025年から2026年の実践者の経験と組み合わせて検証されています。
詳細なビジョンから開始する
どんなツールを開く前に、やりたいことを完全に書き出しておきます。
Git とブランチを頻繁に使用する
各機能実験ごとに新しいブランチを作成します。
instructions フォルダーをメンテナンスする
/docs または /instructions ディレクトリを作成し、Markdown ファイルを使用してアーキテクチャ、コンポーネント、および意思決定を記録します。
機能を複数の段階に分割する
AI に完全な機能を一度に要求しないでください。3–5 つのヒントワードに分割して段階的に完成させます。
コンテクストが長すぎる場合は新しい対話を開始する
長い会話は出力の品質を低下させます。新しい機能を開発する際は、新しい会話を開始するのが最善です。
各ヒントワードは特定のファイルを参照する
AI に特定のファイルを参照するよう明確に指示してください。
過剰なコンテクストを避ける
最も関連性の高いファイルのみを提供し、すべてのコンテンツを詰め込まないでください。
既存のコンポーネントを参照する
新しいコンポーネントの作成を要求する際は、スタイルの参考として既存のコンポーネントを指定してください。
Gemini 3.5 Pro をセカンドオピニオンとして使用する
生成されたコードを Gemini にコピーして、セキュリティ脆弱性や悪いパターンをチェックさせます。
常にサーバーサイドでデータを検証およびクリーンアップする
クライアントが提出したデータを絶対に信頼しないでください。
キーをサーバーに保存する
環境変数を使用し、API キーをフロントエンドコードに組み込まないでください。
エラーを明示的に処理する
コンソールからエラーメッセージをコピーし、AI に貼り付けてください。
修正が3回失敗したら、ヒントワードを見直す
問題のあるヒントワードで4回目の試行を AI に要求しないでください。
AI にログを追加する
デバッグ時には推測に頼らず、重要な地点で AI に console.log の追加を要求してください。
スコープを明示する
各ヒントワードに「変更を要求していない場所は変更しないでください」と追加してください。
「共通的 AI 错误」文档维护
记录 AI 经常犯的错误，并在启动新功能时引用它。
首先进行规划，不要直接编写代码
始终让 AI 先提出计划，在您批准后再开始实施。
让 AI 解释陌生代码
不要接受您完全看不懂的代码。在继续之前，请让 AI 先解释清楚。
第 3 个月里程碑
到本月结束时，您应该能够：
编写结构化提示，并在首次尝试时获得稳定输出；
使用 PRP 框架，在构建任何应用程序之前完成规划；
为任何项目设置光标规则和 CLAUDE.md；
习惯性应用上述 18 条专业实践；
维护一个可用的「共通的 AI 错误」文件用于您的项目。
第 4 个月：构建真实项目，从理念到上线产品
本月的目标是：构建 2-3 个完整项目，从理念推进到真实的在线 URL。这些项目将成为您的作品集。
教程演示和真实产品之间的差距往往是大多数 Vibes 编码者永远无法逾越的障碍。真实产品有用户，会以意想不到的方式出现问题，需要数据库和身份验证，还必须能够在移动设备上正常运行。本月的重点是填补这一差距。
1、真正值得构建的项目
忘记习惯追踪器，忘记天气应用。最好的 Vibe Coding 项目往往范围很窄，非常专注，并且能够解决特定人群的明确痛点。
以下是一些真实的理念：其中一些已经被 2026 年的独立开发者用于盈利，而其他一些实际上已经有人制作出来。它们都不是平凡的模板项目。
初级：先真正开始动手（第 3-4 个月）
这些项目具有单一的流程，清晰的边界，具备真实的使用场景，通常可以在一个周末内完成，并且不仅仅是演示，而是真正有用。
Reddit Diss Track Generator
このツールは、PRAW（Python Reddit API Wrapper）を使用してReddit APIに接続し、任意の投稿からコメントを取得し、その中で最も見事な皮肉や攻撃的な表現を特定し、それらをLLMを使用して歌詞に編集し、最後にテキストを音声に変換し、基本的なオーディオ編集で.wavファイルを出力します。
これは奇妙で楽しく、広めるのにとても適しており、Twitterで注目を集めやすいプロジェクトです。
学べること：サードパーティAPIの統合、LLMチェーンコール、オーディオファイルの生成。
AI Meeting Brief Generator
会議開始前に、ユーザーが企業名と会議目的を入力します。ツールはその企業の公式ウェブサイトとLinkedIn情報を取得し、相手との最後のメールのやり取りを読み取り（Gmail APIを介して）、そして会議の概要ページを生成します。話題のポイント、主要リスク、提案される質問が含まれます。
学べること：複数ソースのデータ取得、ヒントワードリンク、API認証。
Monetization: アドバイザーと顧客マネージャーを対象に、月額19ドル。週に5回以上の顧客電話を行う人に特に適しています。
AI Changelog Writer
このツールは、GitHub APIを使用してGitHubリポジトリに接続します。毎週最新のコミットを読み取り、変更内容を抽出し、クリアで顧客向けの更新ログに自動的に書き出します。
開発者は通常、changelogを書くのが好きではありませんが、このツールを使用すると自動化できます。
学べること：GitHub API、構造化LLM出力、定期タスク。
ターゲットユーザーは非常に明確です：独立系起業家と開発チーム。
Freelance Invoice Chaser
これは、フリーランサー向けに設計されたツールで、彼らが未払い料金を追跡したくない問題を解決します。
Stripeを統合するか、手動で入力された請求書データを使用できます。システムは、事前に設定されたスケジュールに従って、礼儀正しく段階的に強化された支払いリマインダーメールを自動的に送信します。請求書が期限切れになるほど、トーンは厳しくなり、すべての操作が記録されます。
あなたは次のことを学ぶことができます：Resend/Nodemailer を使用したメールの送信、cron ジョブ、Stripe webhook の処理。
これはフリーランサーが一目見て欲しくなるツールの一つです。
StickyCanvas: Notion のようなノートツールではありません
これは実際のプロジェクトであり、作成者が毎日使用しています。
これはシンプルなキャンバスであり、ユーザーはノートを自由にドラッグアンドドロップできます。フォルダーもなければ、タグもなく、階層構造もありません。その全ての価値主張は「十分にシンプルであること」です。
メニューもなければ、コマンドもなく、Notion のような複雑さもありません。ただキャンバスといくつかのノートだけです。
あなたは次のことを学ぶことができます：ドラッグ&ドロップインタラクション、キャンバスインタラクション、ローカルストレージ。
このプロジェクトは週末で立ち上げることができます。
中級：注目を集めるポートフォリオプロジェクト（第4–5か月）
これらのプロジェクトにはデータベース、ユーザー認証、リアルなデザインが必要であり、あなたのプロダクト思考を示すことができます。
特定業界向けの垂直AIチャットボット
これは汎用のチャットボットではなく、特定の業界知識ベースに適用されたチャットボットです。
特定の業界を選択します：歯科医、自動車修理店、不動産仲介業者、ヨガスタジオ。予約に関する質問、価格に関する質問、一般的な質問に答えるチャットボットを構築し、そのサービスをこのような事業主に販売します。
いくつかの独立開発者のフィードバックによると、このような垂直プロジェクトは1つの細分市場から1か月に850〜3200ドルの収入を得ることができます。
あなたは次のことを学ぶことができます：RAG Pipeline、Supabaseベクトル検索、埋め込みウィジェット、マルチテナントアーキテクチャ。
Proposal Version Tracker
これはフリーランサーとエージェンシー向けのツールであり、顧客に送信された提案の各バージョンを追跡するためのものです。
どのバージョンが開かれたか、顧客が提案を見た時間などを表示でき、顧客が提案を再び開いた際に通知を送信します。顧客が提案を再び開くことは、彼らが再び真剣に考え始めたことを意味することが多いです。
あなたはこれを理解することができます：提案のために特別に作られた DocuSign の分析。
学習できること：PDF アップロードと保存、メール開封追跡、リアルタイム通知、Supabase データベース設計。
Screenshot を React コンポーネントに変換するツール
ユーザーが任意の UI スクリーンショットをアップロードし、ランディングページ、競合アプリケーションのインターフェース、または切り取られた Figma デザインなどを提供します。
ツールはスクリーンショットをビジュアルモデル（GPT-5.5 または Claude など）に送信し、元のレイアウトとスタイルに可能な限り近いクリーンな React + Tailwind コンポーネントを生成します。
学習できること：ビジュアルモデル API、画像アップロード、マルチモーダルモデルの構造化された出力。
このツールは開発者に本当に役立ち、月額 25 ドルの価格設定を簡単に支持します。
水道パイプライン / インフラ地図ツール
これは Vibe Coding subreddit で誰かが実際に行ったプロジェクトです：都市管理部門や公共事業団体が水道管や流域を描画し、メンテナンス履歴、コスト、保守ログを追加し、日付や位置で検索やフィルタリングができるインタラクティブ地図ツールです。
このようなカスタム運用ツールにはいくつかの特徴があります：垂直性、やや退屈な印象、しかし非常に有用です。B2B バイヤーはこのようなツールに支払いをしてもためらいません。
学習できること：Mapbox または Leaflet を使用した地図のレンダリング、Supabase に地理空間データを保存、フォーム UI の再設計、ファイルアップロード。
家族向けゲーム化された家事アプリ
このプロジェクトの作者は最初、リリースするつもりはなかったが、家族が必要だったため、1 週間末に作成しました。1 か月後、100 以上の家族が使用していました。
このアプリは家事を家族のメンバーに割り当て、タスクを完了するとポイントを獲得し、親が設定した報酬をアンロックできるようにします。技術スタックは FastAPI + PostgreSQL + PWA です。
その教訓は非常にシンプルです：実際に直面した問題に基づいて製品を構築します。
このようにして開発すると、製品をより迅速にリリースし、より現実的にします。自分自身がユーザーであり、他の現実のユーザーもそれを見つけやすくなります。
上級: 実力を証明する複雑なプロジェクト（第5-6ヶ月）
これらのプロジェクトは非常に複雑であり、適切なアーキテクチャ、コンテキスト工学、そして複数セッションの構築が必要です。それぞれがデモではなく本物の製品になり得ます。
VC インベスター CRM
これはリスク投資家やエンジェル投資家向けに設計された取引追跡 CRM です。
これにより、スタートアップの取引を追跡し、関係履歴を管理し、会話を自動要約し、LLM でカスタム投資 thesis に基づいて企業に評点を付けることができます。
重要な洞察は、Salesforce、HubSpot などの既製の CRM は販売チーム向けに設計されており、投資家向けには設計されていないということです。両者のメンタルモデルは完全に異なります。
既存のツールが見落としている特定のユーザータイプ向けに製品を開発することは、収益を生む最も可能性の高い経路の1つです。
バスケットボール経営シミュレーションゲーム
完全なブラウザーベースのバスケットボール経営シミュレーションゲームで、実際のプロジェクト例は azario.floot.app です。
プレイヤーは自分のバスケットボールチームを育成し、トレーニングプランを通じて選手の能力を向上させ、他のプレイヤーと取引し、リアルタイムのスコアロジックで試合をシミュレートします。
学べること: 複雑な状態管理、ゲームシミュレーションアルゴリズム、マルチユーザーのリアルタイムデータ、リーダーボード。
このようなプロジェクトは、真のエンジニアリングの野心を示すことができます。
AI 搭載音声療法アプリ（Aphasio）
これは中風後の失語症患者向けの iPhone アプリで、Cursor を使用して構築されています。
アプリは AI による言語トレーニングコンテンツを提供し、ユーザーは単語や文章を読み上げ練習し、アプリがリスニングして発音を評価し、パフォーマンスに応じて難易度を動的に調整します。
クリエーターがこのプロジェクトを行う理由は、家族が本当にそれを必要としているからです。
学べること: 音声認識 API、適応型練習生成、モバイルアプリ構築（React Native）、進捗追跡とクラウドストレージ。
これは本当に意義のあるプロジェクトの一つです。
視覚障がい者向けの PDF アクセシビリティツール
これは、任意の PDF を視覚障害者にとって本当にアクセス可能なバージョンに変換する AI ツールです。
これは単なる基本的なテキスト抽出ではなく、複雑な表やグラフを簡潔な言葉で説明し直し、埋め込み画像に alt テキストを生成し、適切な読み取り順序を追加し、アクセス可能な HTML または EPUB バージョンを出力します。
学べること：PDF 解析（PyMuPDF または pdfplumber）、多モード AI を用いたグラフの記述、アクセス可能な HTML 出力。
このプロジェクトには、SaaS 収益化の可能性があるだけでなく、助成金や機関からの購入を受ける可能性もあります。
プロジェクト発見リソース
r/vibecoding：Show Me Your Awesome Projects（無料、Reddit）
リンク：https://www.reddit.com/r/vibecoding/comments/1rl5ccj/show_me_your_awesome_vibe_coded_projects/
実際のコミュニティによる展示で、すべてが既にオンライン化された Vibe Coding プロジェクトです。インスピレーションを見つけるのに適しており、プロジェクトの範囲と難易度を実際に確認できます。
r/vibecoding：What Is Your Most Unique Vibe Coded Project?（無料、Reddit）
リンク：https://www.reddit.com/r/vibecoding/comments/1rxjc3u/what_is_your_most_unique_vibe_coded_project/
ここには、本当に奇妙で創造的なプロジェクトがいくつかあります。これには diss トラックジェネレーターやPDF アクセシビリティツール、30 日以内に作成された地理空間データベースなどが含まれます。
Dodo支払い：2026年の30の利益をもたらすマイクロSaaSアイデア（無料ガイド）
リンク：https://dodopayments.com/blogs/micro-saas-ideas-2026
市場規模、MRRポテンシャル、スタートアップコスト、収益化ルートを含む30の検証済みのマイクロSaaSアイデアを提供。各プロジェクトは独立した開発者向けに適しています。
SuperFrameworks：Vibe Codingが転換点に到達（無料ガイド）
リンク：https://superframeworks.com/articles/vibe-coding-tipping-point-what-founders-need-to-know
具体的な7つのニッチ市場をリストしました。独立した開発者がVibe Codingプロダクトで月間500〜3200ドルの収入を得ており、実際の収入数字が添付されています。
IdeaProof：2026年の個人創業者向けの50のマイクロSaaSアイデア（無料）
リンク：https://ideaproof.io/lists/micro-saas-ideas
各アイデアには、技術的難易度評価、見積もりスタートアップコスト（1000〜15000ドル）、および具体的な市場ギャップ分析が含まれています。現在のところ、最も実用的なアイデアリストの1つです。
Cursorフォーラム：2025年にCursorで作成されたもの（無料、コミュニティ）
リンク：https://forum.cursor.com/t/built-with-cursor-in-2025-share-your-projects/147737
Cursor公式フォーラムのプロジェクト展示スレッド。すべて実際のプロジェクト、実際のビルダーであり、どこに困難があるかを率直に共有します。
2、Plan-Review-Fix サイクル: プロフェッショナルな構築方法
ほとんどの新人 Vibe Coder が採用しているのは、「ヒント → 受け入れ → 再ヒント → 再受け入れ」というサイクルです。
これは 20 行のコードには役立つかもしれませんが、実際の製品内の実際の機能になると、壊滅的な失敗となります。
プロフェッショナルは Plan-Review-Fix サイクルを使用し、3つの異なる役割があります: あなた、コーディング エージェント、そして独立した AI レビュワーです。
ワークフロー
計画.
任意のコードを書く前に、AI に以下をリストアップさせてください: 作成または変更されるファイル、追加される関数、必要な依存関係、および境界条件。
コードを書かず計画のみを表示するよう、はっきりと指示してください。
次に、計画をレビューし、修正を行います。
実装.
計画が承認された後、AI にコードを書かせます。
レビュー.
生成されたコードをコピーし、新しい Gemini 3.5 Pro セッションに貼り付けます。それは非常に大きなコンテキストウィンドウを持っているため、選択しました。安全エンジニアおよびコードレビュワーとして機能し、バグ、セキュリティホール、生成されたパッケージ名の幻覚、および悪いパターンを確認します。
修正.
レビュワーの発見をコーディング エージェントにフィードバックし、クリーンな結果を得るまで継続的に反復します。
リソース
ProductTalk: Vibe Coding ベストプラクティス; Avoid the Doom Loop（無料ガイド）
リンク：https://www.producttalk.org/vibe-coding-best-practices/
「デス ループ」や Plan-Review-Fix サイクルに関する最も詳細なガイドの1つで、実用的なケーススタディが含まれています。
2026 年に実際に製品コードをリリースするための 5 つの Vibe Coding ワークフロー（無料ガイド、dev.to）
リンク：https://dev.to/dohkoai/5-vibe-coding-workflows-that-actually-ship-production-code-in-2026-1nmn
デモではなく、実際のプロダクションコードを配信するための Claude Code、Cursor、および Windsurf の使用法について紹介しています。内容は、テスト駆動開発手法、コンテキストローディングパターン、実際のコストデータをカバーしています。
3、すべての Vibe Coder が習得すべきセキュリティ基礎
AI が生成したコードには、予測可能なセキュリティの問題が繰り返し発生します。セキュリティ専門家になる必要はありませんが、これらのパターンが存在することを認識し、製品を展開する前に常にチェックする習慣を身につける必要があります。
Vibe Coder セキュリティチェックリスト
APIキーとシークレットキー
すべてのキーは .env.local に配置する必要があります。このファイルは初回のプッシュ前に .gitignore に追加する必要があります。例外はありません。
サーバーサイドの検証
常にサーバーサイドですべてのユーザー入力を検証およびクリーンアップしてください。AI はこのステップを頻繁にスキップします。
認証パターン
Supabase はデフォルトで認証を適切に処理します。カスタム認証を行う場合は、十分に検証された成熟したライブラリを使用してください。
CORS 設定
AI が生成した CORS 設定とその理由を説明させてください。誤った CORS 設定は AI の一般的な問題です。
依存関係の監査
デプロイ前に、AI に既知の脆弱性のある依存関係が存在するか、または幻想的なパッケージ名が表示されていないかを確認させてください。AI は時折、存在しないパッケージ名を作り出します。
Prompt Injection
あなたのアプリケーションがユーザー入力をLLMに渡す可能性がある場合、ユーザーはシステムのプロンプトワードを乗っ取ろうとするかもしれません。OWASP ガイドを読む必要があります。
リソース
OWASP Top 10 for LLM Apps: Prompt Injection（無料）
リンク：https://genai.owasp.org/llmrisk/llm01-prompt-injection/
これはプロンプトインジェクションに関する信頼性のある参照情報であり、LLMアプリケーションにおける最大のセキュリティリスクです。直接および間接的なインジェクション攻撃と防御パターンをカバーしています。
OWASP API Security Top 10（無料）
リンク：https://owasp.org/API-Security/
APIセキュリティのトップ10リスト。ユーザーデータを受け入れる製品を展開する前に、これらの内容を理解する必要があります。
Clarifai：Vibe Coding ベストプラクティスとセキュリティ（無料ガイド）
リンク：https://www.clarifai.com/blog/vibe-coding-explained
AI 生成コード向けのステップバイステップセキュリティチェックリスト。具体的なヒントと戦略を提供し、AI 構築をより安全にします。
Cycode MCP サーバー：リアルタイムでの安全な AI コード（無料）
リンク：https://cycode.com/blog/introducing-cycodes-mcp-server/
Cycode の MCP サーバーは、Cursor と Windsurf に直接統合でき、Vibe Coding ワークフローから外れることなく、AI 生成コードをチェックします。
4、Supabase：あなたのフルスタックバックエンド
Supabase は、Vibe Coder が実際の製品を構築する際に最も重要なインフラストラクチャの1つであるため、個別に取り上げる価値があります。
Postgres データベース、認証、ファイルストレージ、およびリアルタイムサブスクリプションを提供し、すべての機能は JavaScript SDK を介して呼び出すことができ、サーバーの管理は必要ありません。
リソース
Supabase：環境に関する Vibe Coder ガイド（公式無料ガイド）
リンク：https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments
この記事は、Vibe Coder のために特別に作成されています。開発環境と本番環境の設定方法、データベース移行、および初心者の最も深刻な間違いである、実際の本番データでの直接テストについてカバーしています。
Supabase YouTube チャンネル：クイックスタートガイド（無料）
リンク：https://www.youtube.com/@Supabase
各主要機能には、認証、データベース、ストレージ、リアルタイム機能などの短い実用的なビデオガイドがあります。各ビデオは約 5–10 分です。
Supabase マイグレーション ドキュメント（公式無料）
リンク：https://supabase.com/docs/guides/deployment/database-migrations
各データベーススキーマの変更をマイグレーションとして扱い、データベースを直接編集せずに行います。これは災害的なデータ損失を防ぐための重要な手段です。ガイドにはロールバックスクリプトも含まれています。
5、コーディングエージェントの 9 つの失敗モード：プロジェクトがどこで問題を抱えるか
コロンビア大学 DAPLab の研究者は、これまでで最も厳格な Vibe Coding 失敗モードの研究を発表しました。彼らは Cline、Claude、Cursor、Replit、および v0 を同じタスクで分析し、最終的に 9 つの主要な失敗モードを特定しました。
その中で最も一般的であり、最も危険なのは次の 2 つです：
サイレントな失敗
コードは実行されるように見え、エラーも表示されませんが、実際には要求された動作が完了していません。ターミナルに赤いエラーは表示されず、プログラムはクラッシュしません。単に望む挙動が起こらず、通常は長い時間が経ってから気付かれるか、さらには既に本番環境に展開されている可能性があります。
ビジネスロジックの失敗
モデルは特定のメカニズムを正しく実装していますが、実際の意図を誤解しています。たとえば、連続したログインのカウンターが、あなたが明示的に指定を忘れていた条件でリセットされたり、請求書の合計に所定の税金が含まれていなかったりします。この種のエラーは実際の製品に対して壊滅的です。
研究者が特定した他の 7 つのモードには、次のものがあります：
エラーハンドリングの欠落
try {... } catch (e) {} のような文法が見られ、完全にエラーが無視されており、ログも記録されていません。
過剰な編集範囲
エージェントがあなたが動かして欲しくなかったファイルを編集し、他の機能が壊れました。
古いコンテキストドリフト
会話が長くなるにつれて、モデルは徐々にプロジェクトの規約を忘れていきます。
セルフレイシングテストモック
テストは、AIが自分で作成したモックをテストするだけであり、実際の振る舞いをテストしていません。その結果、テスト合格率は100％ですが、実際のカバレッジはゼロです。
ジャイアントコンポーネントの蔓延
1つのファイルが600行を超え、10以上のuseStateを含んでおり、ほぼメンテナンス不可能です。
ルールの盲点
エージェントは、あなたの制約をルールではなく好みとして扱います。それはその制約に従いますが、従わない理由が見つかるまでそれを守り続けます。
透明性のギャップ
何かが失敗したとき、現在のツールではエージェントが本来何をしようとしていたのか、どこで間違ったのかをほとんど見ることができません。
ルールの盲点に対する研究の提案された修正方法は、あなたのCLAUDE.mdとルールファイルを強制的な契約として扱うことです。提案される修正方法は強制契約としてあなたのCLAUDE.mdとルールファイルを扱うことです。これは提案ではなく、強制的な契約として扱うべきです。
次のような明示的な失敗条件を追加する必要があります：
このテーブルにRLSポリシーがない場合、実行を停止して質問することなく続行しないでください。
6、テスト：多くのVibe Coderが後で後悔するであろうスキル
構造化されたQAプロセスがない場合、Vibe Codingアプリケーションは通常のソフトウェア開発の約3倍の速度で技術的負債を蓄積します。この結論は、ICSE 2026が101のAI支援開発に関連するソースからメタ分析を行った結果です。
現実の結果は、「動作する」と見えるVibe Codingアプリケーションでも、専門的なリファクタリングが必要な場合、費用は通常5,000〜30,000ドルに達するということです。
解決策はAIの使用を停止するのではなく、AIに機能を作成する際にテストを書かせることです。
テスト優先のVibe Codingアプローチ
機能コードを書く前に、AIに期待される振る舞いのためのテストを書かせます。これにより、機能の振る舞いをより正確に定義するよう迫られ、すぐに機能コードの品質が向上します。テストを実行し、それが失敗するのを見ます。その後、AIにテストに合格するコードを書かせます。大規模な変更のたびに、AIにnpmテストを実行させます。失敗したテストは、リグレッションを防ぐフィードバックループです。
70/30 ルール
これは、どの作業が AI に最適化されているかを判断するための実践的なガイドラインです。
70% は AI のサポートに適しています：
テンプレートコード、CRUD 操作、フォームの検証、既存のコードに対するテストの作成、ドキュメントの作成、明確なパターンに基づいたリファクタリング、フォーマット変換（JSON → TypeScript）、正規表現、ワンオフのスクリプト。
30% は人間がリードすべきです：
システムアーキテクチャの決定、セキュリティに関わる重要なコード（認証、暗号化、支払い）、複雑な競合条件、新しい問題領域、パフォーマンスに重要なアルゴリズム、法的および規制関連ロジック。
もし AI に 95% を任せると、おそらくバグが発生します。AI を使って 20% のみ完了した場合、あなたは生産性を大幅に浪費していることになります。
リソース
Testomat：Vibe Coders 向けの 8 つの最高の AI テスティングツール（無料ガイド）
リンク：https://testomat.io/blog/best-ai-testing-tools-for-vibe-coders/
これは、Vibe テスティングツールに関する 2026 年最も包括的なガイドの1つであり、Vitest、Playwright、AI ネイティブ QA ツールを網羅しています。
Playwright + MCP による Vibe テスト（無料ガイド、Tim Deschryver）
リンク：https://timdeschryver.dev/blog/vibe-testing-with-playwright
これは、プレイライトの MCP サーバーを使用した Vibe テストについての紹介であり、自然言語でブラウザーテストを記述および実行する方法が述べられています。Playwright のエラーラベル内の「copy as prompt」ボタンを使用すると、失敗したテストを AI エージェントに直接貼り付けることができます。
地下室笔记编码 AI 振动（無料ガイド、素晴らしいテスト）
リンク：https://www.awesome-testing.com/2025/04/ai-vibe-coding-notes-from-the-basement
これは TDD-first Vibe Coding に関する最も詳細な実践者ガイドの1つです。内容には o1 プランニングの使用、Cursor + Sonnet 4.6 の実行、フィードバックループとしての継続的なテスト実行、および gitingest を使用してコードベースをフラット化し、推論モデルに提供する内容が含まれています。
Playwright Codegen（公式無料）
リンク：https://playwright.dev/docs/codegen
実行：
npx playwright codegen
次に、通常どおりにブラウザでアプリをクリックします。Playwright は各クリックを記録し、Playwright テストファイルを自動生成します。これはブラウザテストを素早く作成する最も速い方法の1つです。
Vitest 公式ドキュメント（無料）
リンク：https://vitest.dev/
これは 2026 年の Vite プロジェクトの Next.js プロジェクトの標準ユニットテストフレームワークです。速く、Jest に対応しており、TypeScript をネイティブでサポートしています。
第4か月のマイルストーン
この月の終わりまでに、次のようなものを持っているはずです：
2–3 つの完全かつ展開済みのプロジェクト。これらはすべて実際のオンライン URL を持っています；
少なくとも1つのプロジェクトはユーザー認証と Supabase データベースを備えています；
すべての重要な機能には、テストが事前に作成または同期しています。
Plan-Review-Fix ワークフローは、あなたのビルド習慣にすでに組み込まれています。
セキュリティレビューは、デプロイの前に常に標準の手順となっています。
GitHub のホームページには少なくとも 3 つの実際のリポジトリがあります。
第5か月：コンテキストエンジニアリングとMCP、「優れた」技能と「卓越した」技能の違いを区別する
今月の目標は、コンテキストエンジニアリングをマスターすることです。つまり、適切なタイミングで、AIに適切な情報を提供し、それによって継続的に高品質で一貫した結果を生み出すことができるようにすることです。
コンテキストエンジニアリングは、普通のVibe Coderと優れたVibe Coderを区別する鍵です。前者は混沌で整合性のないコードベースを作ることがよくあります。後者はクリーンでメンテナンス性の高い製品を構築できます。プロジェクトの規模が拡大するにつれて、コンテキスト管理は最も重要な能力となります。
1. コンテキストエンジニアリングとは何ですか？
コンテキストエンジニアリングとは、各プロンプトの前および実行中に、AIのコンテキストウィンドウに情報を意識的に整形して入力することです。
これは単一のテクニックではありませんが、システム全体です。このシステムには、ルールファイル、プロジェクトの文書構造、プロンプトで使用されるファイル、コードベースの構成方法、AIのコンテキスト制限の処理方法が含まれます。
コンテキストが不足しているAIは、不整合な、時代遅れの、さらには相互に矛盾するコードを生成します。一方、コンテキストが優れているAIは、完全にプロジェクトパターンに準拠したコードを生成し、アーキテクチャを理解し、既知のエラーを回避できます。
2026年のコンテキストエンジニアリング技術スタック
.cursor/rules/ + CLAUDE.md
プロジェクト全体の長期命令、3か月目で説明済み。
/docs または /instructions フォルダ
主要なアーキテクチャの意思決定、コンポーネントパターン、サードパーティとの統合をMarkdownファイルで記録します。
機能仕様書
各主要機能に対するMarkdownファイルで、その機能が何を行い、システムの他の部分とどのように連携し、制約があるかを説明します。
サンプルファイル
既存のコンポーネントをプロンプトで参照し、スタイルの参考とします。
バックエンド開発サーバー
npm run dev をバックグラウンドで実行し、AI がビルドプロセス中にコンパイルエラーやサーバーログをリアルタイムで表示できるようにします。
MCP を使用したブラウザー自動化
Chrome DevTools MCP や Vercel のブラウザーエージェントなどを使用して、AI がスクリーンショットを撮らずに実際のレンダリング効果、コンソールエラー、ネットワークリクエストを表示できるようにします。
リソース
NXCode: エージェンティック・エンジニアリング；AI ファーストソフトウェア開発の完全ガイド（無料ガイド）
リンク：https://www.nxcode.io/resources/news/agentic-engineering-complete-guide-vibe-coding-ai-agents-2026
2026 年初に Karpathy が提唱した「agentic engineering」という用語は、カジュアルな Vibe Coding から専門の AI 支援開発への進化を表しています。このガイドでは完全な PEV サイクル、つまり Plan → Execute → Verify、コンテキストアーキテクチャ、品質ゲートを網羅しています。2026 年 3 月に発表されました。
Vibe Coding をマスターするための GitHub リポジトリ 10 選（無料ガイド、KDnuggets）
リンク：https://www.kdnuggets.com/10-github-repositories-to-master-vibe-coding
コンテキストエンジニアリング、ワークフローテンプレート、ルールブックの設定など、最も役立つ GitHub リポジトリを厳選しました。
素晴らしい Vibe Coding（無料、GitHub）
リンク：https://github.com/filipecalegario/awesome-vibe-coding
現在までの最も包括的な Vibe Coding の参照資料、ツール、ガイド、リソースの選り抜きリストの一つ。
2、MCP: モデルコンテキストプロトコル
MCP は、Anthropic によって作成されたオープンスタンダードであり、AI ツールがデータベース、API、リアルタイムデータ、外部ドキュメント、およびサードパーティサービスなどの外部データソースに接続できるようにするためのものです。
現在、MCP は Cursor 3.0、Claude Code、Windsurf でネイティブサポートされています。そのうち Cursor 3.0 は Marketplace を介して利用可能です。
MCP を理解することは、Vibe Coding の次のレベルに進むことを意味します：エージェントはもはやコードを書くだけではなく、リアルデータをクエリしたり、リアルタイムでドキュメントを検索したり、サードパーティサービスとやり取りしたり、外部システムで操作を実行したりできるようになります。
MCP は実際の使用例ではどのように機能するのでしょうか？
Stripe MCP サーバー
Agent が Stripe の請求書を読み取りおよび作成できるようにします。
Supabase MCP
Agent が開発中にリアルタイムデータベースをクエリできるようにします。
Figma MCP
Cursor Agent があなたのデザインファイルを読み取り、それに基づいてコンポーネントを実装できるようにします。
GitHub MCP
Agent が課題を作成したり、PR をオープンしたり、ワークフローを管理したりできるようにします。
Qdrant MCP
Agent がベクトルデータベースにアクセスし、RAG をサポートするアプリを構築するために使用できるようにします。
リソース
MCP 公式紹介（Anthropic 公式無料ドキュメント）
リンク：https://modelcontextprotocol.io/introduction
Model Context Protocol の公式ドキュメントと仕様。
「Vibe Coding」を使用して最初のMCPサーバーを構築する（無料ガイド）
リンク：https://www.qpython.com/building-your-first-mcp-server-with-python-and-vibe-coding-pk/
Cursorを使用して、AIが外部ソースからリアルタイムコンテキストをフェッチできるようにする最初のMCPサーバーの実践的チュートリアル。
「Vibe Coding」を使用して5分でMCPサーバーを構築する（無料ガイド、Claranet）
リンク：https://www.claranet.com/uk/blog/build-your-mcp-server-just-5-minutes-using-vibe-coding-kiro/
最も迅速なMCPサーバーのハンズオンチュートリアルの1つ。
QdrantのMCPサーバーとVibe Coding RAG（無料、Qdrant）
リンク：https://qdrant.tech/blog/webinar-vibe-coding-rag/
QdrantのMCPサーバーを使用して、CursorとClaude Codeがベクトルデータベースに直接アクセスできるようにする方法の紹介。
Cursorマーケットプレイス（アプリ内）
リンク：https://cursor.com/marketplace
AWS、Figma、Linear、Stripe、Vercel、Datadogなどの事前構築済みMCPサーバープラグインを表示およびインストールでき、Cursor 3.0でワンクリックでインストール可能。
3、Figma からコードへ：プロの Vibe Coder が使用するデザインワークフロー
製品を単なる「使用可能」から、見た目も洗練されたものにしたい場合、Figma → コードのワークフローは、Vibe Coder のツールボックスの中で最も効果的なデザイン力です。
インターフェースをテキストで説明するよりも、まず Figma でビジュアルデザインを行い、その後 Figma MCP を介して、AI に設計ファイルからコードを生成させることができます。
ワークフロー
まず Figma MCP を Cursor か Claude Code に接続します。Cursor Marketplace から Figma プラグインをインストールできます。
次に、プロンプトで Figma ファイルを参照します：
Figma ファイル内のデザイントークンを調査します。カラーパレット、フォントサイズ、および間隔を抽出し、Tailwind 構成に整理します。最初はコンポーネントを作成しないでください。
デザイントークンが確立されたら、具体的なコンポーネントを参照します：
Figma デザインに基づいて Navbar コンポーネントを生成します。余白、フォントスタイル、およびホバー状態を正確に一致させます。Tailwind CSS を使用し、TypeScript のみを記述します。
ブロックごとに構築し、常に Figma ファイル内のサイズとレイアウトロジックを参照します。
重要な提案
Figma MCP を使用しなくても、初心者はより迅速な代替手段を取ることができます：まず Canva を使用してページのスケッチを作成します。
どのビルドツールを開く前に、Canva でレイアウトを 30 分間描く時間を取ります。これにより、いくつかの質問に先に回答する必要が生じます：各ページには何が含まれていますか？ナビゲーションはどこに配置されますか？各ブロックには何が含まれていますか？
これにより、最初のプロンプトを書く前に、多くの不確実性が事前に解消され、後続の数時間のデバッグ時間が節約されます。
リソース
Figma MCP + Cursor: The New AI Design System Workflow（YouTube，無料）
リンク：https://www.youtube.com/watch?v=09VgyFFLrOw
Figma を Cursor に接続し、デザイントークンをインポートし、Figma 仕様に正確に一致するコンポーネントを生成する方法を詳しく説明しています。2025 年 11 月に公開。
Claude Code × Figma MCP: デザイナーのプレイブック（無料ガイド、ADPList）
リンク：https://adplist.substack.com/p/how-to-build-with-figma-mcp-the-designers
100日間のVibe Codingを行った後、著者はよりスムーズなFigma → Claude Code → 本番用Reactコンポーネントワークフローをまとめました。デザイントークンを取得し、レスポンシブブロックを生成するための直接コピー可能なヒントワードテンプレートが含まれています。
Figma Make（公式、無料のレイヤーあり）
リンク：https://www.figma.com/solutions/vibe-coding-tool/
FigmaネイティブのVibe Codingツール。UIやプロトタイプを自然な言語でFigma内で記述し、インタラクティブなプロトタイプを生成し、クリーンなコードをエクスポートできます。Figma MCPと統合でき、外部エージェントが使用できます。
Anima：あなたのFigmaデザインシステムでVibe Code（無料のレイヤーあり）
リンク：https://www.animaapp.com/blog/design-systems/vibe-code-with-your-figma-design-system/
FigmaデザインシステムをAnimaにインポートし、design tokensに従うReactコンポーネントを生成します。生成物はAnima MCPを介してClaude CodeまたはCursorに引き継がれます。
Muzli：デザイナー向けの完全なバイブコーディングガイド（無料ガイド）
リンク：https://muz.li/blog/the-complete-vibe-coding-guide-for-designers-2026/
AI 生成製品を非開発者向けに構築するための包括的なガイドで、デザインシステムのプロンプト、プロンプト内の視覚的リファレンス、および Vibe Coding コンポーネント内でのブランドの一貫性の維持方法について説明しています。
4、製品に AI 機能を組み込む：Vercel AI SDK
「AI を使用した製品」を構築したい場合は、「AI を使用して製品を構築する」だけでなく，Next.js 技術スタックにおいて、Vercel AI SDK は最速かつ最もクリーンな選択肢の一つです。
リソース
Vercel AI SDK ドキュメント（公式無料ドキュメント）
リンク：https://sdk.vercel.ai/docs
公式リファレンスドキュメント。20 を超える AI プロバイダをサポートする統一されたインターフェースを通じて、OpenAI、Anthropic、Google、Mistral、Groq などをサポートしています。 React hooks，例えば useChat、useCompletion が組み込まれており、ストリーミング出力、ツールの呼び出し、および構造化生成をサポートします。
AI SDK V5 チュートリアルシリーズ（YouTube、無料）
リンク：https://www.youtube.com/playlist?list=PL4cUxeGkcC9h2NkvFCBO4kvA4Y9wiDrIO
Next.js AI アプリケーションを構築するための Vercel AI SDK の使用に関する複数のチュートリアル。2025年8月にリリースされた第1回の概要と第2回のプロジェクト設定が取り上げられており、完全な設定手順をカバーしています。
Vercel AI SDK と Next.js を使用して Streaming AI チャットアプリを構築する（無料ガイド、dev.to）
リンク：https://dev.to/nikolasbarwicki/build-a-streaming-ai-chat-app-with-vercel-ai-sdk-and-nextjs-10f6
ステップバイステップのコードチュートリアルで、ゼロからストリーミング AI チャットアプリを構築します。
今月は何ができますか？
4 か月目に作成したプロジェクトから 1 つ選んで、Vercel AI SDK を使用して AI 機能を追加します。例：ノートアプリに AI 自動タグ付けを追加する、習慣追跡アプリに「習慣データを尋ねる」AI アシスタントを追加する、ユーザーが貼り付けたテキストに基づいて AI フラッシュカードを自動生成する等。
5、RAG: ドキュメントベースで AI に質問させる
RAG は、Retrieval-Augmented Generation の略で、リトリーバル増強生成を意味します。これは、顧客サポートロボット、内部ナレッジベース、ドキュメント QA ツールなど、ほとんどの本格的な企業向け AI アプリケーションの中核的機能です。
「AI プロダクトエンジニア」のキャリアを目指す人にとって、RAG は、最も人気があり、需要の高いスキルの 1 つでもあります。
このコンセプトは非常にシンプルです。LLM に訓練データだけで質問に回答させず、まず自分の文書から関連するセグメントを検索し、それらのセグメントをヒント内に組み込んで、モデルに提供した情報に基づいて回答させます。
リソース
LlamaIndex: RAG 入門（公式無料ドキュメント）
リンク：https://developers.llamaindex.ai/python/framework/understanding/rag/
ロード、インデックス、格納、クエリ、評価の 5 つの主要段階をカバーしています。
LlamaIndex スターターチュートリアル（公式無料ドキュメント）
リンク：https://developers.llamaindex.ai/python/framework/getting_started/starter_example/
RAG システムを実行可能にするためのコードを 30 行未満で構築します。
初心者向け LangChain チュートリアル（2026 年ガイド）（YouTube、無料）
リンク：https://www.youtube.com/watch?v=AOQyRiwydyo
完全な 2026 年 LangChain コースで、Agents、RAG、データに基づく AI Agent を構築するための ReAct Agent フレームワークなどを網羅します。
LangChain と LlamaIndex を使用した効率的な RAG アプリケーションの構築（YouTube、無料）
リンク：https://www.youtube.com/watch?v=D7YwcDJ75lQ
実際のコード例を使用して、LangChain と LlamaIndex の RAG シナリオでの使用方法を横断的に比較します。
AI エージェントフレームワークの選び方（LangChain vs. LlamaIndex）（無料ガイド）
リンク：https://workforcenext.in/blog/how-to-choose-ai-agent-framework/
2026 年 4 月に公開された包括的な解説。提案は次のとおりです：最も困難な部分が検索の問題である場合は、LlamaIndex を使用してください。より広範囲のエコシステムと本番向けの編成能力が必要な場合は、LangChain / LangGraph を使用してください。
6、トークンのコストと予算管理：誰もあなたに事前に教えてくれない、請求書が来るまで
単一コールのレベルでは、低コストモデルと先進モデルの間には30倍ものコスト差があるかもしれません。
製品のアプリケーションが毎回GPT-5.5やClaude Sonnet 4.6をコールする場合、請求書はおそらく月額20ドルから数百ドルまで膨らむ前に現れるでしょう。
報告によると、Uberは2026年にわずか4か月で、大量の長いコンテキストClaude Codeセッションの使用により、年間AIプログラミング予算を使い果たしました。
その数学的論理は非常にシンプルです：コンテキストの長さはコストを線形に押し上げます。そして、Claude Codeセッションが完全なコードライブラリを持つ場合、25万から50万トークンまで急速に増加するでしょう。
実用的なコスト管理のルール
まず、固定した支出上限を設定する
一般公開向けのAI機能をリリースする前に、OpenAIとAnthropicのバックエンドで月次の上限額を設定してください。リリース前に行うべきです。リリース後ではありません。
タスクの複雑さに応じてモデルを分割する
分類、ラベリング、要約、およびフォーマットのタスクは、claude-haikuやgpt-5.5-miniを使用することができます。推論が難しいタスクだけをSonnet 4.6、Opus 4.6、またはGPT-5.5に残してください。
簡単なタスクに対しては、安価なモデルがほぼ同等の品質の出力を提供しますが、コストは10倍異なる場合があります。
Claude Codeで/compactコマンドを使用する
コンテキストが長くなると、大規模なタスクを開始する前に/compactを手動で実行してください。Claude Codeは自動的にコンテキスト履歴を圧縮します。通常、次のコールのトークン数を大幅に減らすことができます（60%～80%の削減）。
短いコンテキストウィンドウを維持する
コンテキストの長さが倍増するごとに、コストもおおむね倍増します。新機能を開発する際は、古い対話を継続するのではなく、新しい対話を開始するのがベストです。
繰り返しの同じプロンプトワードをキャッシュする
Anthropicのプロンプトキャッシングでは、キャッシュヒットの入力トークンだけを10%の価格で請求します。システムのプロンプトワードやCLAUDE.mdファイルなど、毎回繰り返される入力に対しては、これにより長期的な著しい節約が生み出されます。
支出リマインダーの追加
月間予算の50%と80%に到達したときに請求書リマインダーを設定し、予期しない請求書があなたの気づく前に発生するのを防ぎます。
リソース
MindStudio：Claude Code における AI エージェント トークン予算管理（無料ガイド）
リンク：https://www.mindstudio.ai/blog/ai-agent-token-budget-management-claude-code/
Claude Code がどのようにトークン予算を処理するかを詳細に解説し、ハードなコンテキスト制限、設定可能なしきい値での自動縮小、および高コストの操作を実行する前の予算チェックをカバーしています。これらのパターンはどんな LLM 製品にも適用できます。
HackerNews：Claude Code の実際のコスト（無料、HN ディスカッションスレッド）
リンク：https://news.ycombinator.com/item?id=47976415
Claude Code セッションでのコンテキストウィンドウの長さがどのようにコストをほぼ線形に増加させるかに焦点を当てた、実際のエンジニアリングディスカッションと具体的な数字が提供されています。
HatchWorks：2026年の Vibe Coding の実際のコスト（無料ガイド）
リンク：https://hatchworks.com/blog/gendd/cost-of-vibe-coding/
Vibe Coding の全体的なコストについて率直な見積もり：月額20〜200米ドルの観測コストがあるかもしれませんが、セキュリティ修正、技術的負債、専門的なリファクタリングを加味すると、コストは5000〜30000米ドルに達する可能性があります。これを理解することで、QAや構造化プロセスにどれだけの投資が適切か判断できます。
OpenAI 使用仪表板（公式）
リンク：https://platform.openai.com/usage
すべてのパブリック機能を展開する前に、ここで月次クォータを設定してください。エントリは Billing → Usage Limits にあります。
Anthropic コンソール（公式）
リンク：https://console.anthropic.com/
Claude API の使用クォータもここで設定する必要があります。
第5の月のマイルストーン
この月の終わりまでに、次のことができるはずです：
プロジェクトを最初から整理して、AI に常に適切なコンテキストを提供する；
MCP を使用して、カーソルまたは Claude Code を外部データソースに接続する；
Vercel AI SDK を使用して、既存の製品に AI 機能を統合する；
基本的な RAG パイプラインを構築し、AI が文書に基づいて質問に回答できるようにする；
各 AI API アカウントにアクティブなコストモニタリングと支出上限を設定する；
クリーンな /docs アーキテクチャを維持し、どんな AI ツールでもプロジェクトを即座に理解できるようにする。
第6の月：プロとして展開し、専門分野を選択する
この月の目標は：プロジェクトを本番レベルで利用可能にし、自分自身のキャリアパスを選択することです。本当の展開、本当の監視、本当の収益を生み出すと同時に、目標と一致する専門分野を見つける。
1、本番展開と環境設定
デモと本番レベルの製品の展開には大きな違いがあります。最も重要なポイントの1つは、開発環境と本番環境を分けることです。
2026年の推奨展開テクノロジースタック
静的サイトまたはランディングページ
フロントエンドを Vercel または Netlify に展開し、バックエンドは不要です。GitHub からワンクリック展開できます。
認証付きデータベースを使用するフルスタックアプリ
フロントエンドにはVercel、バックエンドにはSupabaseを使用。これは初心者に最も推奨されるテックスタックです。
複雑なバックエンドロジック
フロントエンドにはVercel、バックエンドにはSupabaseを使用し、Edge Functionsを介して計算タスクを処理します。これにより、サーバーを借りないでスケーリングを実現できます。
完全なサーバー制御
バックエンドにはFly.ioまたはRailwayを使用し、フロントエンドには任意のソリューションを組み合わせます。制御力は強力ですが、複雑さも高くなります。
リソース
Supabase: Vibe Coder's Guide to Environments（公式無料ガイド）
リンク: https://supabase.com/blog/the-vibe-coders-guide-to-supabase-environments
プロダクションセキュリティデプロイメントに関する必読の内容で、開発環境とプロダクション環境の違い、データベースの移行とロールバック戦略について説明しています。
Add Jam: How to Deploy Your Vibe Coded Project（無料ガイド）
リンク: https://addjam.com/blog/2026-04-07/how-to-deploy-your-vibe-coded-project/
非技術者向けのデプロイガイドで、プロジェクトのタイプに応じて適切なデプロイ方法を選択するのに役立ちます。2026年4月に公開されました。
Deploy Your Vibe Coding Projects for Free with Vercel and Netlify（YouTube、無料）
リンク: https://www.youtube.com/watch?v=85JVKjW-uG0
GitHubからVercelとNetlifyにデプロイする手順のビデオチュートリアル。
Vercel デプロイメントドキュメント（公式無料ドキュメント）
リンク：https://vercel.com/docs/deployments/overview
Vercel 公式デプロイメントドキュメント。プレビューデプロイ、環境変数の管理、およびドメインの設定を含みます。
2、オンライン製品のモニタリング
本番環境では、見えない問題は修正できません。以下の3つのツールを使用して、ユーザーが体験していることやアプリケーションが行っていることを完全に把握できます。
リソース
Langfuse（オープンソース、無料レベルあり）
リンク：https://langfuse.com/
LLM オブザーバビリティプラットフォーム。それはすべての AI コールを追跡できます：どのプロンプトが送信されたか、どんな応答を受け取ったか、トークンの使用量、遅延、コスト、およびエラー状況。OpenAI、Anthropic、および LangChain をサポートします。2026年までに、それは AI アプリケーションの監視の標準ツールの1つになっています。
Langfuse で AI アプリケーションをモニタリングする方法（YouTube、無料）
リンク：https://www.youtube.com/watch?v=V7nugySdrgw
2025年3月に公開された、OpenTelemetry を使用して Langfuse をローカルおよび本番環境に構成する方法を紹介する完全なチュートリアル。
Langfuse + Sentry 統合ガイド（公式無料ガイド）
リンク：https://langfuse.com/docs/observability/sdk/advanced-features
Langfuse で LLM オブザーバビリティデータをキャプチャしながら、エラーモニタリングデータを Sentry に送信する方法を紹介します。1回の設定で完全なプロダクションモニタリングスタックが構築されます。
Sentry（公式、無料プランあり）
リンク：https://sentry.io/
アプリケーションエラーのトラッキングのための標準ツール。オンラインアプリでエラーが発生した際、ユーザーフィードバックを待つのではなく、最初に通知を受け取ることができます。
Vercel Analytics（公式、無料プランあり）
リンク：https://vercel.com/docs/analytics
Vercel 組込みのウェブサイト分析ツール、ワンクリックで有効化可能。ページビュー、パフォーマンスメトリクス、Core Web Vitals を表示できます。
3、方向の選択
6 か月目には、基本的なスキルが身についています。次に考えるべき点は、どの方向に進むかです。
以下は、選択可能な 3 つのパスであり、自分の目標に最も合ったものを選択する必要があります。
方針 1：プロダクトビルダー、つまり Indie Hacker
適した人物：独立起業家、スタートアップの運営者、独立開発者、自身の製品を開発して販売したい人々。
これは Vibe Coder が最も一般的に進むパスです。仕事を探しているのではなく、収益を生み出す製品をリリースすることを目指しています。
2026 年の Indie Hacker スタック
Lovable または Bolt：迅速なプロトタイプ開発と初期検証に使用されます；
Cursor 3.0 + Claude Code：本番構築と高度なカスタマイズに使用されます；
Supabase：データベースと認証；
Stripe：支払い；
Vercel：デプロイ；
PostHog：ユーザー分析。
2026 年に注目すべきマネタイズ可能なアプリケーションタイプ
SaaS マイクロツール
非常に具体的な問題を解決し、月額 5–25 ドルの定期購読を採用。
AI ラッパー
特定のLLM機能を、明確で具体的で、特定の市場セグメント向けのUIに組み込む。
ディレクトリまたはマーケットプレイス
人々が検索している情報を集約および整理する。
企業内ツール
企業が現在、スプレッドシートで手動で行っている作業を自動化する。
リソース
Indie Hackers（無料コミュニティ）
リンク：https://www.indiehackers.com/
実際の創業者が収入データ、ビルドログ、および経験教訓を共有。何が本当に売れる製品であるか、どのような価格設定が効果的であるかを理解するための重要な情報源の1つです。
Stripe Docs: Payments Quickstart（公式無料ドキュメント）
リンク：https://stripe.com/docs/payments/quickstart
Stripe Checkoutの追加方法を紹介する公式ガイド。1回限りの支払いや定期支払いに使用できます。AIを使用して、「月額Xドルの定期購読をStripe Checkoutに統合する」とした場合、このガイドを使用して生成されたコンテンツを確認できます。
PostHog Getting Started（公式無料ドキュメント）
リンク：https://posthog.com/docs
オープンソースのプロダクト分析ツール。ユーザーの行動、変換ファネル、リテンション、機能スイッチを追跡し、本当に効果的なものを知ることができます。
方向2: AI プロダクトエンジニア
対象者: スタートアップ企業またはテック企業でAI製品開発に携わりたい人。
この方向のポートフォリオプロジェクト
「ドキュメントとチャットする」製品の構築。
ユーザーは10～20のPDFファイルをアップロードし、アプリケーションを使用してこれらのドキュメントに基づいて質問し、引用付きの回答を受け取ることができます。これはデプロイ済みで共有可能なフルスタックアプリケーションである必要があります。
2026 年までに、これはあなたが雇用主や顧客に見せることができる最高のポートフォリオアイテムの一つです。
リソース
LlamaIndex：RAG 入門（公式無料ドキュメント）
リンク：https://developers.llamaindex.ai/python/framework/understanding/rag/
ドキュメントを使用して最速で質問応答システムを構築します。
LangChain Academy：LangGraph 入門（無料コース）
リンク：https://academy.langchain.com/courses/intro-to-langgraph
LangGraph の公式無料コース。LangGraph は主要なエージェント調整フレームワークの1つであり、コースでは状態管理、メモリ、ヒューマン・エンゲージメント・ループ、およびマルチエージェント・コラボレーションがカバーされています。
Vercel AI SDK（公式無料ドキュメント）
リンク：https://sdk.vercel.ai/docs
ごく少数のコードで、任意の Next.js アプリケーションにストリーミングチャット、構造化生成、およびツール呼び出しの機能を追加できます。20を超えるAIプロバイダーをサポートしています。
Vibe Coding to Agentic AI: プログラミングの次なる進化（YouTube、無料）
リンク：https://www.youtube.com/watch?v=LHAvPwOLz8U
この分野がランダムなVibe Codingから自己計画、実行、検証ができる構造化されたエージェンティックシステムに向かう方法を概説しています。これは就業市場が移行している方向でもあります。
MindStudio：エージェンティク・エンジニアリングとは？（無料ガイド）
リンク：https://www.mindstudio.ai/blog/what-is-agentic-engineering/
Vibe Coding からエージェンティク・エンジニアリングへの移行を明確に説明します。2026 年までに、これは多くの雇用主が求める能力パラダイムです。
方向3：AI自動化アドバイザー
適用対象：企業に直ちにサービスを提供したい個人、フリーランサー、コンサルタント、または代理店を設立したい個人。
企業はAI自動化に対して本物のお金を支払う用意があります。なぜなら、それは高価で反復的で手動のプロセスを代替できるからです。これはVibe Codingスキルを収益に変える最も迅速な方法の1つです。
最も一般的であり、かつ最も価値のある自動化シナリオ
AIメールの分類と自動返信；
見込み客の選別および個別化されたアウトリーチ；
ドキュメントの抽出と処理；
ナレッジベースの顧客サポートロボット；
CRMデータの補完とクリーニング；
請求書と契約の処理。
リソース
n8nドキュメント（無料、オープンソース）
リンク：https://docs.n8n.io/
ビジュアルワークフローオートメーションツール。AIノードにネイティブ対応。400 を超える統合に LLM を接続できます。Slack、Gmail、Notion、HubSpot、Airtable などを含む。セルフホスト型のバージョンは完全無料です。
n8n完全コース；6時間（YouTube、無料）
リンク：https://www.youtube.com/watch?v=QoQBzR1NIqI
初心者から上級者までカバーする完全なn8nコース。
Make（旧 Integromat，無料レベルあり）
リンク：https://www.make.com/
ビジュアルワークフロー自動化プラットフォーム。複雑な多段階のワークフローにおいて、Zapierよりも強力です。
Automation Builders：Vibe Coding to Agentic AI（YouTube，無料）
リンク：https://www.youtube.com/watch?v=LHAvPwOLz8U
n8n、OpenAI、Vibe Codingツールをどのように組み合わせて、エンドツーエンドの企業自動化プロセスを構築するかについて紹介。
この分野のポートフォリオプロジェクト
エンドツーエンドのリードフィルタリングおよびアウトリーチ自動化プロセスを構築：
CSVまたはAirtableからリードをインポート；
LLMを使用して各リードを調査し、理想的な顧客プロファイルに基づいてマッチ度を評価；
リードにスコアを付け、並べ替え；
受信者のトーンでパーソナライズされたアウトリーチメッセージを起草；
すべての結果、ステータス、メモを元のテーブルに書き戻す。
これは実際に利益を生む自動化プロジェクトであり、企業はこのために支払います。
オプション：Vibe Codingを使用してモバイルアプリを開発する
これまでの内容では、Webアプリケーションを構築していると仮定しています。ほとんどのVibe Coderもそのようにしています。
しかし、あなたのアイデアがモバイルアプリで、つまりユーザーがスマートフォンにインストールする製品を必要とする場合、状況は異なります。始める前に、このエコシステムをよく理解する価值があります。
2026年のモバイル端末向けVibe Codingの実際の状況
モバイル開発はWeb開発よりもVibe Codingが難しいです。その理由は非常に具体的です：React Nativeの依存関係ツリーが大きく、かつより脆弱です。AIは時折、特定のパッケージバージョンと互換性があると仮定してコードを生成しますが、実際のバージョンは競合する可能性があります；iOSおよびAndroidシミュレータをローカルで設定する必要があり、AIが完全に管理してくれるわけではありません；モバイルUIのテストには実機またはシミュレータが必要で、Webと同様にブラウザで直接プレビューできません；Expoはプロセスを大幅に簡素化しましたが、独自の制約も導入しました。
モバイルアプリを構築したい場合、推奨される構成は次のとおりです：
フレームワーク：React Native + Expo、管理されたワークフローを使用する；
ツールチェーン：Expo Router を使用したナビゲーション、ファイルベースのルーティングを採用し、Next.js App Router モデルに類似しています；
AI ツール：Claude Code + Cursor、つまり Web 開発と同様のツールであり、React Native を十分にサポートしています；
スターターテンプレート：npx create-expo-app または create-rn-new、これらは設定済みのスケルトンを生成するのに使用されます；
プレビュー方法：Expo Go アプリ上の実機で QR コードをスキャンし、これが最も迅速なフィードバックループです。
リソース
Vibe Coding a Mobile App from 0 to Market（YouTube、無料）
リンク：https://www.youtube.com/watch?v=SzmXEOozpFg
クロードコード＋カーソル＋React Native＋Expo Router を使用してフィットネストラッキングアプリをゼロから構築する方法の完全なデモ。内容は Figma-to-spec ワークフロー、Claude Code フェーズプラン、および Expo 依存性のリアルタイム処理方法を網羅しています。
Build a React Native App with Vibe Coding in 2026（無料ガイド）
リンク：https://blog.vibecoder.me/build-react-native-app-vibe-coding
Expo プロジェクトの設定方法、プロジェクトの概要の作成、および段階的なモバイルアプリ構築計画の実行についてステップバイステップで説明しています。
React Native Vibe Code SDK（無料、オープンソース）
リンク：https://github.com/react-native-vibe-code/react-native-vibe-code-sdk
自然言語のヒントを使用して React Native および Expo アプリを構築するために設計されたオープンソース IDE。モバイル開発領域で最も愛されるツールに近いと言えます。
Expo Documentation（公式無料ドキュメント）
リンク：https://docs.expo.dev/
Expo の設定、ルーター、およびデバイス API の主要参照資料。AI ツールを使用する際には、同時にこのドキュメントをブラウザで開いておくことをお勧めします。
最も重要なアドバイスは：モバイル AI セッションを開始する前に、関連する Expo ライブラリの examples フォルダを常に Google AI Studio に貼り付け、Gemini がこれらの例を元にドキュメントを生成できるようにすることです。次に、このドキュメントをヒントワードとして使用し、現在の API を知っているモデルに依存せずにセッションを行います。
モバイルライブラリの API は非常に迅速に変化し、トレーニングデータは通常実際の状況よりも遅れます。
おまけ：完全なツールマップ——2026 年現在のすべての主要ツール
このガイドでは、主要ツールとして Cursor 3.0 と Claude Code をお勧めしています。しかし、2026 年までに、完全なツールマップは明らかに拡大し、異なるツールが異なるシーンに適しています。以下に、より完全なマップを示します。
ターミナル / CLI エージェント
Claude Code
Anthropic のネイティブターミナルエージェント。全体のコードベース推論およびリポジトリレベルのタスクに最適です。
Gemini CLI
Google のオープンソースターミナルエージェント。Claude Code の無料代替として機能し、非常に大きなコンテキストウィンドウを持っています。
OpenCode
コミュニティオープンソース CLI エージェント。組み込みのモデルを備え、柔軟なコスト設定が可能。
Factory Droid
企業向け CI/CD 自動化に特化したソフトウェアエンジニアリングエージェント。
Gemini CLI に特筆すべき価値があります。なぜなら、Gemini CLI は完全に無料でオープンソースであるからです。Gemini CLI は Gemini 3.5 Pro の 100 万トークンのコンテキストウィンドウを使用し、Claude Code よりも大きいです。
インストール方法：
npm install -g @google/gemini-cli
その後、実行します：
gemini
これで利用を開始できます。Gemini CLI は、より高いコンテキストのタスクの無料の代替手段として使用したり、第4の月のワークフローで「Gemini に手動で貼り付け」するステップを置き換える第二のレビュワーとして使用することができます。
OpenAI Codex、すなわち新しいクラウドエンコーダーエージェントは、古いモデルではなく、現在は ChatGPT でクラウドエンコーディングエージェントとして使用でき、非同期タスクを実行できます。Codex と Claude Code の違いは、Codex がクラウドで実行される点です。ChatGPT サイドバーからアクセスできます。
AI プログラミング IDE 拡張機能一覧
Cursor 3.0
Agents Window と並行してクラウドエージェントをサポートします。無料版 / 月額 $20。
Windsurf
Google による買収後、より企業向けに特化した Cascade エージェントを備えています。無料版 / 月額 $15。
GitHub Copilot
ほぼどこでも利用可能で、VS Code、JetBrains、Xcode、Neovim をサポートしています。無料版 / 月額 $10。
Cline
オープンソースで、組み込みのモデルを備えています。無料でご利用いただけますが、API トークンごとに料金が発生します。
Google Antigravity
複数のエージェントマネージャービューを備え、並行ビルドが可能です。価格は未定です。
Zed
パフォーマンス重視、AI ネイティブを最初から採用。無料。
Kilo Code
VS Code プラグイン、オープンソース、すべての主要プロバイダーをサポート。無料。
Continue
オープンソース Copilot の代替ソリューション、VS Code と JetBrains をサポート。無料。
リソース
DataCamp：2026 年により速くビルドするためのトップ 15 バイブコーディングツール（無料ガイド）
リンク：https://www.datacamp.com/blog/top-vibe-coding-tools-to-build-faster
2026 年のより完全なツール比較の一つで、CLI エージェント、AI IDE、ブラウザービルダー、専用ツールを網羅しています。提供される簡潔なアドバイスは次のとおりです：ブラウザでは v0 を優先し、エディタ内では Codex を使用し、オールインワンのシナリオでは Cursor を使用し、ターミナルでは Claude Code を優先してください。
The Ultimate Vibe Coding Guide（2026 年フルコースチュートリアル）（YouTube、無料）
リンク：https://www.youtube.com/watch?v=KO_vCL1ZhpI
3 時間のマスタークラス、Cursor、Codex、Antigravity、Claude Code、Lovable、Bolt、Supabase、Vercel、Figma Stitch、v0、および MCP サーバーを一度にカバーします。2026 年 5 月時点で、これは最も完全な単一ビデオリソースの1つです。
Vibe Coding for Beginners（2026 年フルコース）（YouTube、無料）
リンク：https://www.youtube.com/watch?v=BpOsHF5Oj_I
同じコードベースを使用して Codex と Firebase で Web アプリ、デスクトップアプリ、および iOS アプリを構築する方法について説明します。2026 年 5 月に公開。複数のプラットフォームをカバーしたいが、技術スタックを頻繁に切り替えたくない初心者に適しています。
追加：参加值得的社区
最も速い学びは、何を構築しているかをリアルタイムで共有するコミュニティで行われることがしばしばあります。以下は、2026年中盤までに依然として活発なコミュニティです。
Lovable Discord（無料）
リンク：https://lovable.dev/community
16万人以上のメンバーを擁し、さまざまなタイムゾーンをカバーしている、2026年最も活発なVibe Codingコミュニティの1つです。リアルタイムのサポート、週次イベント、およびプロジェクトのオンラインショーケースチャンネルを提供しています。
r/vibecoding（無料、Reddit）
リンク：https://www.reddit.com/r/vibecoding/
Vibe Codingコミュニティの集会所。ここでは、プロジェクトのショーケース、ツールの比較、デバッグ支援、YouTubeのチュートリアルでは見られない実際の失敗物語などがあります。
Cursor Forum（公式無料コミュニティ）
リンク：https://forum.cursor.com/
Cursorの公式コミュニティで、エンジニアリングチームがここで読み込み・返信を行います。 「Cursorで作られた」の展示スレッドは、実際のプロジェクトの事例を見つけ、実際の課題を理解するための最高の情報源の一つです。
Vibe Coder向けBuild in Public戦略（YouTube、無料）
リンク：https://www.youtube.com/watch?v=ke6oxy8Z7C4
Vibe Coder向けのパブリックビルド戦略ガイド：何を投稿し、いつ投稿するか、プロジェクトの構築プロセスをどのように観客に変換し、その観客が次のリリースを加速させるかについて。
Postiv AI：Vibe Coding to SaaS Pipeline（無料ガイド）
リンク：https://postiv.ai/blog/vibe-coding-marketing
製品完成後の完全なプロセスをカバー：ビジネスモデルの検証、リリース戦略の策定、およびLinkedInやXを活用してすでにオンライン化された製品をどのように展開するか。
Karo Zieminski: Vibe Coding Hub 2026（無料、Substack）
リンク：https://karozieminski.substack.com/p/vibecoding-resources-hub
実践者によって検証された15を超えるガイドが収録されており、Vibe Coding、仕様駆動開発、AIによる製品構築をカバーし、完全なビルダーのパスを網羅しています：基礎、本番、セキュリティ、デバッグ、ツール選択。これは、Substackで最も包括的なワンページリソースセンターの1つです。
0xMinds: The Complete Guide to AI-Powered Development（無料ガイド）
リンク：https://0xminds.com/blog/guides/vibe-coding-complete-guide-2026
2026年の包括的なガイドで、データ駆動採用、6段階のビルドワークフローをカバーしており、アイデア出し→コンテキスト→生成→レビュー→最適化→リリース、および複数エージェント調整モードと直接使用できる基本設定リストを提供しています。
Augment Code: Vibe Coding vs Spec-Driven Development（無料ガイド）
リンク：https://www.augmentcode.com/guides/vibe-coding-vs-spec-driven-development
いつ純粋なVibe Codingを採用すべきか、いつ仕様駆動開発を使用すべきかを判断するための明確な意思決定フレームワークを提供します。記事では、純粋なVibe Codingプロジェクトでよくある「三ヶ月の壁」を説明し、いつモードを切り替えるべきかを識別する方法も説明されています。
このロードマップを実際に活用する方法
この記事を読んだほとんどの人は、実際にはそれを完了しません。内容が難しすぎるわけではなく、それを読むだけのリストとしてではなく、計画を立てるために活用しないからです。
2026 年に本当に成功した Vibe Coder は、通常、3 つの共通の習慣を持っています：
彼らは製品をリリースします。学習だけではなく、毎月のマイルストーンは、デプロイされたプロジェクトで終了すべきです。つまり、実際にアクセス可能な URL を持つものであり、完了したコースではありません。完成していないがすでにリリースされた 6 つの製品は、完了したが学習済みの 20 のコースよりも優れています。
彼らは公開でビルドします。X、LinkedIn、または対象ユーザーがいるプラットフォームに構築プロセスを投稿します。例：「X の構築 1 日目」と「X を公開しました、これが学んだことです」など。この分野で最高の機会は、見える化から来ることが一般的であり、履歴書を送ることではありません。
彼らは最初に狭く、次に広くなります。最初の 6 か月は、1 つのツール（例：Cursor または Claude Code）、1 つのテックスタック（例：Next.js + Supabase + Vercel）、および1 つの方向（例：プロダクトビルダー、AI エンジニア、または自動化コンサルタント）にのみ焦点を当てるべきです。深さが広さに勝る。3 つのものを本当にリリースした後に、範囲を広げてください。
この記事は、筆者が 6 か月のノートと個人的な実践の経路に基づいて整理され、AI モデルのミニマックスと Opus 4.6 によって編集されました。
BlockBeats の公式コミュニティに参加しよう：
Telegram 公式チャンネル：https://t.me/theblockbeats
Telegram 交流グループ：https://t.me/BlockBeats_App
Twitter 公式アカウント：https://twitter.com/BlockBeatsAsia
関連記事
