Lovableのチャット指示の書き方｜伝わるプロンプト基本5原則

Lovableは日本語のチャット指示でアプリを構築・修正できますが、書き方次第で結果の品質が大きく変わります。本記事では実務で効く5原則を紹介します。

原則1: 一度に1つの変更を依頼する#

「ヘッダー作って、ログインも追加して、DB繋いで」のような複数依頼は失敗率が上がります。1メッセージ=1目的を徹底しましょう。

原則2: 対象ファイル / 対象画面を明示する#

• 「トップページの英雄セクション」
• 「src/components/Header の右側ボタン」
• 「ログイン画面のエラー表示」

原則3: 期待する見た目・挙動を具体的に#

ヘッダーの背景を白→ダーク(#0F172A)に変更し、ロゴと文字色を白にしてください。
スクロール時に下に薄い影を出してください。

原則4: 制約・禁止事項を書く#

「既存のルーティングは触らない」「shadcn/uiのButtonを使う」「依存追加は避ける」など、やってほしくないことを書くと暴走しません。

原則5: 失敗したら一度Undoして指示を変える#

実例ケーススタディ：会員制サイトを1日で立ち上げた手順#

プロンプトの良し悪しで作業時間が10倍違う実例です。あるユーザーは『会員制の動画講座サイト』を以下の3プロンプトだけで初日に完成させました。

1. 『TanStack Routerの構成は触らないで。トップに講座一覧、/lessons/$idで個別講座ページを作って。Tailwindのデザインはshadcn/uiのCardを使って』（範囲限定＋実装方針指定）
2. 『Lovable Cloudを有効化して、メール認証ログインを追加。lessonsテーブルに id, title, video_url, is_premium を作って、is_premium=true は認証済みユーザーだけ視聴可にRLSを書いて』（依存追加＋セキュリティの方針同時指定）
3. 『有料会員はStripeのサブスクで管理。Stripeコネクタで月額1,500円のPriceを作り、購読中ユーザーだけ is_premium 動画を見られるように Webhook で profiles.is_subscribed を更新して』（業務フローを1文で）

つまずきポイント集（症状→対処）#

• 症状：毎回デザインが少しずつ変わる → 対処：『src/styles.css のセマンティックトークンだけを使う』『shadcn/uiのvariantは増やさない』を恒久ルールとしてプロンプト先頭に貼る
• 症状：勝手に新しいライブラリが追加される → 対処：『新規依存追加禁止。既存のpackage.json内のものだけで実装』と明記
• 症状：1回で複数ファイルがぐちゃぐちゃに変わる → 対処：『今回は src/routes/lessons.$id.tsx だけ編集して』とファイル単位で限定
• 症状：日本語が英語に書き換えられる → 対処：『UI文言は日本語のまま。コードコメントも日本語』と明記

FAQ追加#

Q. 長文プロンプトと短文プロンプト、どちらが良い？

短く始めて、出力を見ながら追記するのがベスト。最初から100行のプロンプトを書くと、AIが優先順位を見失います。『骨格→肉付け→例外処理』の順で3〜5回に分けてください。

Q. プロンプトのテンプレ集は作るべき？

はい。社内Notionに『新規ページ追加』『フォーム追加』『DBスキーマ変更』『リファクタ』の4テンプレを置くだけで、チームの平均出力品質が大きく揃います。