> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Lovableでプロンプトを使いこなす
> アイデアを素早く高品質なUIに変えましょう。これらのプロンプト活用テクニックで、思考をクリアにし、作業を加速させ、Lovableでより良いアプリを構築しましょう。
### Lovable に確認の質問をさせる
Lovable からより良い結果を引き出す最も効果的な方法の 1 つは、コードを書く前に、Lovable に抜けている情報を補わせることです。欲しい機能や変更内容を伝えたあと、プロンプトの末尾に次のような一文を追加してみてください。
> "Ask me any questions you need in order to fully understand what I want from this feature and how I envision it."
このやり方には Chat Mode を使うことをおすすめします。
Lovable は、的を絞った、しばしば洞察に富んだフォローアップの質問を返してくれます。中には、あなた自身ではあえて言語化していなかったようなポイントを突くものも含まれます。このプロセスによって、要件をあらかじめ明確にできるため、後からの認識違いやムダな工数を防げます。
もしまだこのやり方でプロンプトを試していなければ、一度やってみてください。新しい機能が、往復のやり取りを減らしつつ、あなたの本来の意図により近い形で仕上がることに気づくはずです。
## プロンプト活用の応用知識：Lovableで一貫して高品質な結果を出すための実践プレイブック
Lovableで大きなインパクトを生み出すプロンプト活用の総合ガイドへようこそ。\
このプレイブックでは、LovableのAIから最高の結果を引き出すための、最も効果的なテクニック、戦略、原則をまとめています。プロンプトを使い始めたばかりの人でも、スキルを磨きたい人でも、アイデアを洗練されたUIの形にすばやく、そして一貫して仕上げるための、実践的なアドバイスとわかりやすい例が見つかります。
## フェーズ1：基盤づくり
### 1. プロンプトを書く前に計画する
Lovable を使う前に、まず「何をつくるのか」を決めましょう。このステップを飛ばすのは、何を描くか決めずに絵を描き始めるようなものです。ペンと紙、ボイスメモ、ChatGPT など、自分に合う方法でさっとプランニングをして、次の4つの質問に答えてください。
* このプロダクトや機能は何ですか？
* これは誰のためのものですか？
* その人たちはなぜそれを使うのですか？
* ユーザーに取ってほしい「たった一つの重要な行動」は何ですか？
仕様書を書く必要はありません。方向性を定めることが目的です。考えがしっかりまとまっているほど、プロンプトは鋭くなります。あいまいなアイデアからは、あいまいなアウトプットしか得られません。考えが明確なら、結果も明確になります。
**プロンプト例**
```text theme={null}
Z世代のフリーランサー向けの家計管理アプリ用ワンページサイトを構築してください。メインCTAは「Start Saving Smarter」にします。大きなテキストと鮮やかな色を使った、大胆で表現力豊かなデザインを重視してください。
```
### 2. ユーザージャーニーを視覚的にマッピングする
デザインは個々の画面そのものではなく、その「間」で何が起きるかが重要です。Lovable で最良の成果を得るには、明確で論理的なフローが欠かせません。ユーザーがページに到達してから、主要なアクションを完了するまでの経路をマッピングしましょう。
トランジションを意識して考えましょう:
* ユーザーは最初に何を見るのか？
* 何が信頼感を生むのか？
* 何が行動する自信を与えるのか？
* その行動はどこにつながるのか？
シンプルな 3 ステップのスケッチ — Hero → Features → CTA — だけでも、プロンプトの効果を 10 倍高められます。
> あなたはただブロックを積み上げているのではありません。ユーザーの行動を導いているのです。すべてのセクションには「存在する理由」と「次のセクションへつなげる理由」が必要です。
### 3. まずデザインを固める
あなたのビジュアル言語は「仕上げ」ではなく、土台です。Lovable には、あなたが求める見た目や雰囲気を**早い段階で**伝えておく必要があります。そうしないと、インターフェースは正しく動いていても、印象がまったく違うものになってしまうかもしれません。デザイン上の問題を後から直そうとしないでください。最初に決めておきましょう。
たとえば、次のような方向性から選びます:
* 落ち着いていてエレガント
* 大胆で既成概念を壊す
* プレミアムで洗練されている
そのうえで、そのスタイルをバズワードやトーン（雰囲気）の説明、UI パターンと一緒に、そのままプロンプトに書き込みます。「starter style prompt」（スターター用のスタイルプロンプト）を作っておき、全セクションで使い回して一貫性を保つこともできます。
> 「You don't prompt your way into good design. You prompt from it.」
**プロンプト例**
```text theme={null}
穏やかでウェルネスにインスパイアされたデザインを使用します。柔らかなグラデーション、落ち着いたアースカラー、丸みを帯びた角、そして十分な余白を設けます。フォントは「Inter」を使用します。全体的なトーンは優しく安心感のあるものにします。
```
## フェーズ2：システム思考
### 4. ページではなくコンポーネント単位でプロンプトを出す
Lovable は、UI を一気にページ全体として作るのではなく、モジュール化されたパーツごとに作るときに最も良く機能します。ランディングページ全体の生成を依頼するのは、レシピを丸ごとミキサーに放り込むようなものです。何かはできあがりますが、そのままでは使い物になりません。
代わりに、プロンプトはレゴブロックを組み立てるように考えてください。各ブロックには、ヒーローセクション、機能グリッド、お客様の声スライダー、料金表といった、1つの明確な目的と構造を持たせます。1つ作って、確認して、改善してから次に進みましょう。
コンポーネント単位でプロンプトを出すと、明確さ・コントロール・柔軟性が得られます。もし何かがおかしく見えても、ページ全体を再プロンプトする代わりに、そのブロックだけを修正できます。これは複数ページにわたってデザインの考え方を展開していくうえでも役立ちます—コンポーネントは、ゼロから書き直さなくても再利用・応用できます。
> "ページ全体のプロンプトはノイズを生む。セクション単位のプロンプトはシグナルを生む。"
**プロンプト例**
```text theme={null}
グラスモーフィズム効果を持つフローティングメニューバーを作成します。ホーム、検索、音楽、お気に入り、追加、プロフィール、設定のアイコンを含めてください。穏やかなフローティングアニメーションとスムーズなホバーインタラクションを追加します。
```
### 5. 本物のコンテンツでデザインする
Lovable は、"lorem ipsum" や "feature 1 / feature 2" のようなプレースホルダーコンテンツとはあまり相性がよくありません。モデルは構造と意図に反応するように訓練されていて、意図をもっとも早く伝える方法は、本物の言葉を使うことです。
最終的なコピーがまだ固まっていなくても、メッセージをきちんと反映したコピーを使いましょう。もし瞑想アプリのページを作っているなら、ユーザーが実際に読むであろう内容を書いてください。ごまかさないでください。
これは Lovable により良いレイアウトや余白を生成させるためだけでなく、より賢いデザインの判断を行う助けにもなります。本物の見出しなら、1行ではなく2行必要になるかもしれません。CTA は名詞よりも動詞のほうがうまく機能するかもしれません。プレースホルダーのテキストはそうした問題を隠してしまいます。本物のコンテンツなら、それらを早い段階で明らかにしてくれます。
> "デザインは制約を好む。本物のコンテンツは、ちょうどよい制約を生み出す。"
**プロンプト例**
```text theme={null}
ヒーローセクションに見出し：「Design Calmly.」サブテキスト：「Turn stress into structure with Lovable.」CTA：「Start Building Free.」コピーを中心としたレイアウトで、縦方向に十分な余白を設ける。
```
### 6. 原子的に指示する: ボタン、カード、モーダル
Lovable は UI を最小単位のコンポーネント（アトム）として捉えます。UI に関する指示が細かく具体的であるほど、よりうまく動作します。「サインアップ付きのセクション」と頼むのではなく、「メール用の入力フィールドと、角丸の CTA ボタンがあるフォームを追加して」と言いましょう。こうした原子的な指示は、標準的な UI パターンとして解釈されます。
システムのように考えましょう。カード、バッジ、トグル、チップ、フォームフィールド、ドロップダウンなどを具体的に説明します。「送信後にサクセス・トーストが表示されるモーダル」と言えるなら、「ユーザーインターフェース」とだけ言うのはやめましょう。
この原子的なボキャブラリを使うことで、複雑さを段階的に重ねていくこともできます。まずカードから始めます。次にバッジを追加します。その次にホバー時の状態を追加します。各レイヤーが前のものの上に自然に積み上がっていきます。これにより、プロンプトを書き直すことなく、より細かくコントロールでき、高精度な出力が得られます。
> 「パーツが小さいほど、レスポンスは賢くなる。」
**プロンプト例**
```text theme={null}
ユーザーのプロフィール画像、名前、フォローボタンを含むカードを作成します。認証済みユーザーにはバッジを追加し、バッジにカーソルを合わせるとツールチップを表示するようにします。
```
### 7. バズワードで美的スタイルを微調整する
ビジュアルスタイルは、Lovable におけるプロンプト設計で、最も重要でありながら最も誤解されがちな要素のひとつです。レイアウトを説明するだけでは不十分で、ツールに「雰囲気」を伝える必要があります。そのための最速の手段がバズワードです。
Lovable は「minimal」「expressive」「cinematic」「playful」「premium」「developer‑focused」といった用語を理解します。これはただの飾りではなく、タイポグラフィ、余白、シャドウ、角丸、カラーパレットに影響する、プロンプトで指定できるパラメーターです。
これらの言葉は、プロンプトの早い段階で使いましょう。さらに言えば、各セクションに必ず入れてみてください。そうすることで全体を通して一貫したデザインになり、いわゆる「デフォルト UI」的な見た目を避けられます。
また、バズワードを組み合わせたり入れ替えたりして、トーンを変化させることもできます。たとえば、ヒーローセクションでは「bold and disruptive（大胆で破壊的）」に始めて、料金セクションでは「calm and reassuring（落ち着いて安心感のある）」トーンにすることができます。ひとつのスタイルに縛られる必要はなく、意図を持ってデザインしている状態です。
> 「デザインは構造だけじゃない。トーンだ。バズワードがそれを定義する。」
**プロンプト例**
```text theme={null}
高級感があり映画のようなランディングページのヒーローセクションをデザインしましょう。奥行きのあるレイヤー構造、半透明の表面、柔らかなモーションブラー、見出しと背景の印象的なコントラストを活用してください。
```
## フェーズ3：正確に構築する
### 8. レイアウトにプロンプトパターンを使う
プロンプトは、構造化された繰り返し使えるパターンを使うと、書きやすくなり、効果も大きくなります。レイアウト用のレシピと考えてください。毎回レイアウトを一から説明するのではなく、いつも同じパターン（リズム）で表現します。
良いレイアウト用プロンプトは、セクションを視覚的なパーツに分解し、その並び順を明確にし、スタイルの指定まで行います。ほとんどのパターンは「ヘッダー → コンテンツ → アクション」という構造ですが、作りたいデザインに合わせてその流れをカスタマイズできます。
自分専用のプロンプトライブラリを作り始めましょう。たとえば、機能グリッド、テスティモニアルスライダー、料金表などのための定番構造を書き出しておきます。これらのパターンを再利用したり、少しずつリミックスしたりして、ページごとに合う形に調整します。
これは「型にはめる」ことが目的ではありません。目的は「効率化」です。Lovable は、構造化されていて、スコープが明確で、予測しやすいプロンプトの書き方に最もよく反応します。プロンプトパターンを使うことで、作業も速くなり、画面間でアウトプットの一貫性も高まります。
**プロンプト例**
```text theme={null}
中央揃えの見出しを持つ機能セクションを作成し、その下に3つのカードを横並びで配置します。各カードには、上部にアイコン、見出し、簡単な説明文を含めてください。カードには柔らかい影を付け、ホバー時に浮き上がるエフェクトを追加します。
```
### 9. ビジュアルをURLで追加する
レイアウトにもっとリアルさを出したいですか？URL を使って、プロダクトデモや Midjourney で生成したクリップ、チュートリアル動画などを埋め込みましょう。Lovable は、プロンプトで明確に指示すれば動画の埋め込みに対応します。
配置（例: ヒーローセクションの下、または機能カード内）、スタイル（例: 角丸、自動再生、ミュート）、意図（なぜそこにあるのか）をプロンプトで指定します。
**プロンプト例**
```text theme={null}
Midjourneyの製品デモ動画を埋め込みます。URL：https://cdn.midjourney.com/video/cb84f296-92a0-4a37-a0e3-1c9c95299488/0.mp4 を使用してください。機能セクションの下に、ソフトシャドウ付きの全幅カードで配置します。
```
### 10. 編集ボタンでコンテキストを重ねる
Edit ボタンは Lovable の中でも最も強力な機能のひとつですが、その真価を発揮できるかどうかは使い方次第です。何かを変えたいときに毎回プロンプト全文を書き直すのではなく、編集機能を使って特定のレイヤーや要素だけにフォーカスしましょう。こうすることで、すでにうまく動いている部分を壊さずに、素早く反復しながら改善できます。
編集は「デザインのオーバーライド」のようなものだと考えてください。置き換えではなく、微調整です。たとえば、CTA ボタンを選んでコピーだけを変更したり、セクション全体のタイポグラフィには手を触れずにカードレイアウトだけを調整したりできます。
これにより、プロジェクトはクリーンでモジュール化された状態を保てます。プロンプトの肥大化を防ぎ、作業スピードが上がり、問題なく動いていた部分を壊してしまうリスクも減らせます。編集を使えば、毎回ゼロからやり直す必要がないので、安心していろいろと試せるようにもなります。
編集するときは、言葉をできるだけ正確にしましょう。何を変えたいのか、何をそのまま残したいのかをはっきり伝えてください。曖昧な「これを良くして」ではなく、「置き換える」「更新する」「調整する」といった具体的な指示を使いましょう。
**プロンプト例（編集時）**
```text theme={null}
CTAボタンのテキストを「Get Started」に変更し、左右のパディングを24pxに増やしてください。背景色とフォントは現在の設定を維持してください。
```
## フェーズ4：改善とリリース
### 11. Lovable Cloud を前提に構築する
レイアウトのデザインは、プロダクトを作るうえでの一部にすぎません。Lovable のプロジェクトに「見た目が良い」以上のことをさせたいなら、実際にどう動くのかまで考える必要があります。そして、組み込みの Cloud は、その検討を始めるための最適な出発点です。
Cloud は、ユーザー認証、データベース、ストレージ、さらにはエッジ関数まで、モダンなフロントエンドと相性の良い形でまとめて扱えます。Lovable なら、こうした実際の動作に合わせて UI を、プロンプトからそのまま形作ることができます。
Cloud を前提にデザインするときは、まず次のことを見越しておきましょう：
* **Auth logic** — ユーザーがログインしているときとしていないときで、UI に何を表示すべきか？
* **Dynamic content** — ユーザーデータ、投稿、アイテム、メトリクスなどをテーブルから取得しているか？
* **States** — データが空の場合、読み込み中の場合、失敗した場合はどうなるか？
こうした初期の検討によって、より賢いセクションをプロンプトで指示しやすくなり、その後の開発もスムーズになります。
**プロンプト例**
```text theme={null}
ユーザーがCloudでログインしている場合は、右上にプロフィール画像と名前を表示します。ログインしていない場合は、「ログイン」ボタンを表示し、認証画面にルーティングします。
```
> ヒント: デザイン段階ではバックエンドが実際に動作している必要はありませんが、あたかもすでにあるかのように UI を設計しておくと、レイアウトが将来の変更にも耐えられるようになります。
### 12. バージョン管理は心強い味方
Lovable は変更内容を自動保存しますが、だからといって考えなしにガンガン進んでよいわけではありません。何をなぜ変えたのかを追えていないと、ただノイズを増やしているだけで、あっという間にコントロールを失ってしまいます。
よいバージョン管理の本質は、ファイル名を付けることではありません。反復を前提に考えることです。意味のある変更を 1 回に 1 つだけ行いましょう。ヒーローコピーを更新する。機能グリッドを追加する。レイアウトを調整する。結果を確認する。それから先に進みます。
本物のデザインシステムはこのようにして作られます――レイヤーを重ね、意図を持って構築していきます。
Lovable が裏側でバージョンを管理してくれてはいますが、自分なりの運用ルールも取り入れましょう。
* マイルストーンで考える（例: レイアウト確定、コンテンツ追加完了、ロジックの接続完了）
* プロンプト内にメモを残す（例: "CTA テキストを変更し、カードの余白を調整"）
* 大きな変更の前にはプレビューし、リスキーな変更をする前に複製しておく
> "自動保存は、自動で整理されるという意味ではない。意図を持って構築しよう。意識して反復しよう。"
**プロンプトの習慣**
```text theme={null}
大きな変更を加える前に、現在のバージョンを複製してラベルを付けましょう。わずかな手間で、大きな安全策になります。
```
***