AIコーディング

Webアプリ向けvibe codingプロンプト例

プロダクトブリーフ、UI生成、データベース設計、バグ修正、テスト、リファクタリング、ローンチレビューを網羅した、Webアプリ向けvibe codingプロンプト例の実践的なコレクションです。

公開日 2026/06/12更新日 2026/07/13

Vibe CodingプロンプトAI WebアプリAIコーディングワークフロー

優れたvibe coding用プロンプトは、作りたいアプリを説明するだけではありません。AIコーディングツールにコンテキスト、制約、受け入れ基準、検証手順、明確な停止地点を与えます。プロンプトが優れているほど、後から予想外のコードを解きほぐす時間を減らせます。

このガイドでは、Webアプリ向けの実践的なvibe coding用プロンプト例を紹介します。AIコーディングエージェント、AIアプリビルダー、エディタベースのツールで構築しながら、実際のプロダクト開発に使えるほど構造化されたワークフローを保ちたいときに活用してください。

このガイドの対象者

AIを使ってランディングページ、ディレクトリ、ダッシュボード、クリエイター向けツール、社内Webアプリを構築する創業者
計画、実装、テスト、レビューに再利用できるvibe coding用プロンプトを求める開発者
機能のアイデアをより明確な構築指示へ変えるプロダクトマネージャー
エンジニアが仕上げる前に、AIツールでUIの流れを生成するデザイナー
保守性を失わずにプロトタイピングを高速化したいチーム

ステップごとのワークフロー

ユーザー、目標、ルート構成、データオブジェクト、最初のワークフローを説明するプロダクトブリーフ用プロンプトから始めます。
特に機能が認証、データベースへの書き込み、支払い、公開SEOページに触れる場合は、コードより先に計画を求めます。
完成したアプリを依頼せず、ページまたはコンポーネントを1つずつ生成します。
空、読み込み、エラー、成功、モバイル、デスクトップ、長いコンテンツの各状態を含むUI用プロンプトを使います。
永続化を依頼する前に、エンティティ、フィールド、検証、所有権、プライバシーを定義するデータ用プロンプトを使います。
再現、根本原因、最小限の修正、検証を必須にするバグ修正用プロンプトを使います。
実装を受け入れる前に、どの動作が失敗するべきかを指定するテスト用プロンプトを使います。
動作している挙動をテストで保護してから、リファクタリング用プロンプトを使います。
SEO、アクセシビリティ、モバイルレイアウト、認証、環境変数、サイトマップへの掲載を確認するローンチレビュー用プロンプトで終えます。

推奨ツール

計画、リポジトリに基づく推論、コードレビュー、慎重なバグ修正にはClaude
プロダクトブリーフの作成、プロンプトの下書き、代替となる実装案にはChatGPT
エディタベースのAIコーディングとリファクタリングにはCursor
UIコンポーネントの下書きとフロントエンドの検討にはv0
自然言語によるアプリのプロトタイピングとすばやいプロダクト実験にはLovable

プロンプト例

プロンプト1：プロダクトブリーフから構築計画へ

I want to build a web app for [target user] that helps them [main job]. The first version should include [page 1], [page 2], and [one core action]. Before writing code, turn this into a concise implementation plan with routes, components, data objects, validation rules, empty states, mobile behavior, and test cases. Point out anything that is too broad for an MVP.

プロンプト2：UI生成

Create the UI for [page name]. Follow the existing design system and page patterns in this repository. Include desktop and mobile layout, loading state, empty state, error state, and success state. Do not create a marketing hero unless this is a landing page. Keep the primary workflow visible above the fold.

プロンプト3：データベースとAPIの計画

Design the smallest data model for [workflow]. List tables or collections, fields, ownership rules, validation rules, indexes, and API routes. Do not write a migration yet. First explain what data is public, what requires login, and what requires admin access.

プロンプト4：テストを伴う実装

Implement the approved plan. Add or update tests for the public route, metadata, validation, empty state, and the main user action. Keep route files thin and move reusable UI or business logic into focused modules. Run the targeted test and tell me exactly what passed.

プロンプト5：バグ修正

Reproduce this bug: [bug description]. Inspect the relevant code before editing. Explain the root cause, make the smallest fix, and add a regression test. Do not refactor unrelated files. Run the test that proves the bug is fixed.

プロンプト6：ローンチレビュー

Review the current diff for launch readiness. Check SEO metadata, canonical URLs, sitemap coverage, mobile layout, accessibility, auth boundaries, environment variables, destructive commands, and missing tests. List findings first, then summarize verification commands.

よくある間違い

プロダクト、デザイン、データベース、認証、支払い、デプロイを1つの巨大なプロンプトで扱う
AIにまだ構築してはいけないものを伝え忘れる
ワークフロー、状態、対象ユーザーを示さず、"make it modern"と依頼する
リポジトリに既存のパターンがあるのに、AIへ新しいアーキテクチャを作らせる
安価に検証できないほどアプリが複雑になるまでテストを省く
モバイルレイアウトと実際のコンテンツの長さを確認する前に、生成したUIを完成版として扱う
現在の動作を保護する前にリファクタリングを依頼する

実践例

弱いプロンプト：create a tool directory website with AI.

改善したプロンプト：create a focused AI tool directory MVP. First version has a homepage, tools listing page, tool detail page, and submit page. Use static sample data first. Each tool has name, slug, category, description, website URL, preview image, tags, and SEO metadata. Do not add login, voting, comments, paid listings, or admin moderation yet. Before editing, propose the route structure, data type, components, metadata strategy, and tests.

改善したプロンプトが有効なのは、曖昧なアイデアをスコープの定まったWebアプリへ変えるからです。コード生成を始める前に、ページ、データ、除外項目、計画への期待を定義しています。

FAQ

Q: vibe coding用プロンプトに最適な形式は何ですか？ A: コンテキスト、目標、制約、実装スコープ、受け入れ基準、検証を使います。有用なプロンプトは、何を成功とするか、いつ止めるかをAIへ伝えます。

Q: AIにテストの作成を依頼するべきですか？ A: はい。特にルート、検証、データへの書き込み、認証、請求、SEO、重要なユーザーワークフローでは依頼してください。テストによって、vibe codingは当てずっぽうの作業から反復的なエンジニアリングループへ変わります。

Q: AIが作り込みすぎないようにするにはどうすればよいですか？ A: スコープ外の項目を明示します。現在のワークフローに必要でない限り、認証、請求、管理ダッシュボード、複雑な依存関係、追加ページを作らないようAIへ伝えてください。

Q: 技術者ではない人もこれらのプロンプトを使えますか？ A: はい。ただし、アプリの動作を確認する必要はあります。コードを詳しくレビューできない場合は、スコープをさらに小さくし、より単純なツールを使い、すべての経路を手動でテストし、最初のバージョンでは慎重な扱いが必要なデータや支払いを避けてください。