Lovableの実際の使い方：最初の1時間に、Buildで作る、指して直す、Planで計画する、エラーを直す、戻す、公開する、までを場面ごとに、公式の手順で追う

この記事は、公式の資料を2026年10月25日に読んでまとめたものです。この記事は、実際に使って確かめた記録ではありません。

画面の表記は変わります。公式ページの表記を使っているので、手元の画面と照らして読んでください。この記事のプロンプトは「この記事の例」で、返ってくる内容や、かかるクレジットは、公式の資料から予告できません（Build mode のページは「実行前に費用の見積りは出せない」と書いています）。

先に結論

• 1回に頼むのは1つ。 クイックスタートは「変更は1つずつ頼み、そのたびにプレビューを確かめる」と書いています。
• 「やってほしい結果」を書く。 チャットのページは、やり方より結果を書くよう書き、Build mode のページは、ほしい動き、文脈、触ってはいけない場所（ガードレール）を書く例を挙げています。
• 戻る場所を先に作る。 変更は版として保存され、版履歴で戻せます。大きな変更の前に、プレビューで確かめ、よい状態をブックマークする方法が、プロンプトのページにあります。
• 数字は目安にならない。 費用は、各メッセージの「More options」の「Credits used」で見ます。

前提：用語をそろえる

• プロンプト：AIへの依頼の文章です。
• Build / Chat / Plan：モード。05と同じ意味です。
• プレビュー：画面右の、動いている状態のアプリです。
• 版（バージョン）：変更のたびに保存される状態のことです。
• ドラフト（draft）：本線とは別に、試す変更を溜める場所です。この記事では扱いません。
• Knowledge：プロジェクトやワークスペースごとに、Lovableに覚えておいてほしいことを書く欄です。
• Publish：作ったアプリを、ネット上のアドレスに載せることです。

たとえ話：設計図つきの打ち合わせ

大きな工事は、先に設計図（Plan）を見て「ここは直して」と言ってから、着工（Build）に進みます。ちょっとした相談は、立ち話（Chat）で済ませます。これは僕らのたとえで、公式の表現ではありません。

最初の1時間の順番（この記事の案）

下の表は、公式のクイックスタートの順を、時間の目安つきで並べた「この記事の案」です。時間は僕らの見積りで、公式の数字ではありません（公式は、クイックスタート全体を約10分と書いています）。

場面1：Buildで最初の版を作る

手順

1. ダッシュボードで、プロンプト欄（Ask Lovable to create…）の横のモード切り替えを見て、Build を選ぶ。
2. 作りたいものを、ふつうの言葉で書く。例は次の「この記事の例」です（公式の例は、近所のカフェのサイトで、ヒーロー部分、カテゴリで絞り込めるメニュー、営業時間、場所、サンプルの文章、居心地のよいデザイン、スマホ対応、ログインとデータベースは入れない、という項目を挙げています。以下は別の題材で組んだものです）。

text 【この記事の例】 小さな古本屋の紹介サイトを作ってください。 - 一番上に、店名と短いあいさつ文、店の写真の場所 - ジャンル（小説、実用、絵本、雑誌）で絞り込める本の一覧。本は10冊ほど、サンプルの題名と価格を入れる - 営業時間の表と、場所の説明 - 落ち着いた色合いで、スマホでも見やすく ログインとデータベースは、まだ入れないでください。 3. Enter で送る。 4. 数分待つ。左に project chat、右に preview のエディタが開きます。 5. プレビューの中を、実際に押す。絞り込みのボタン、スクロールなど。

期待される結果と、読み取り方

• チャットに、作業の様子（今のステップ、変更中のファイル、使っている道具）が出ます。Build mode のページは、これを「visible tasks」の形で書いています。
• 活動のカード、または終わった変更の Details を押すと、Details view がプレビューの代わりに開き、Timeline（全ステップ）と Changes（ファイルの変更）の2つのタブが出ます。Hide details で、プレビューに戻ります。
• 作業中に、続きを書き足せます。Lovableは、次の区切りで拾います。まだ拾われていないメッセージは、グレーで出ます。
• 止めたいときは、停止ボタンを押します。終わった作業は残り、その分の料金はかかる、と公式にあります。

日本語で書いてよいか

クイックスタートは「どの言語でもよい」と書いています。日本語のプロンプトでも、扱われる前提です。

場面2：変更を1つ頼む

手順

1. チャット欄に、1つだけ変更を書く。クイックスタートの例は、メニューと営業時間のあいだに「Today's specials」を足し、2品を短い説明と価格つきで目立たせる、というものでした。この記事の例は次のとおりです。

text 【この記事の例】 「今週の入荷」という見出しのセクションを、本の一覧と営業時間のあいだに足してください。 本を2冊、題名・ひとこと紹介・価格つきで、大きめのカードで見せてください。 ほかの部分は変えないでください。 2. Enter。 3. プレビューで、場所と見た目を確かめる。

見た目が違うとき

クイックスタートは、感じを言葉にする書き方を示しています。例は「全体を、もっと温かく、会社っぽくなく」といった趣旨のものです。具体的な部品名を挙げる書き方は、プロンプトのページにあります（場面4）。

書き方の型（公式のプロンプトのページ）

「ask me any questions you need…」のように、質問を許す一文を足す方法も書かれていて、Plan モードで特によく働く、とあります。

場面3：プレビューで指して直す（プレビューツールバー）

プレビューツールバーは、以前の「Visual edits」の置き換えです。全プランで使えます。モードを選んで、プレビューに作用し、変えたいことを言葉で書きます。

• Edit text inline の枠：各アカウントに100回の無料の枠があり、使った分は24時間後に戻ります。ワークスペースにも、24時間で2,000回の共有の枠があります。どちらかを超えると、クレジットを使います。
• ツールバーの位置：初期は下の中央。ドラッグで動かせ、メニューの Dock、Minimize、Hide で扱えます。隠したときは、右上の Show preview toolbar のアイコンで戻します。
• 画像の差し替え：画像を選び、新しい画像を添付するか、画像のURLを書いて、変更を説明します。

作業中に送ったときの扱い

Select と注釈の依頼は、チャットを通じて、次の区切りで拾われます。インラインの文字編集とコメントのスレッドは、今の作業のあとに実行され、Runs after the current task と表示されます。

場面4：Chat、Plan、Build を使い分ける

モードの切り替え

• 入力欄の横のモード切り替えで選びます。Option+P（Mac）または Alt+P で、順に切り替わる、とチャットのページにあります。
• 会話は、3つのモードをまたいで続きます。

Plan の手順（公式の流れ）

1. モード切り替えで Plan を選び、変えたいことを書く。
2. 質問が出たら答える。質問カードは最大4つの質問を出し、選択肢を選ぶか、自分の答えを書きます。Skip／Skip all で、Lovableに既定で進めさせることもできます（この質問カードの細部〔最大4つ、Skip／Skip all〕は、読み直した Plan、Build mode、チャット、エディタのページでは確認できていません。Plan のページは、計画の前に確認の質問をすることが多い、とだけ書いています）。
3. 計画が Plan view（全画面の読みやすい文書）で開く。含まれるものの例は、全体の方針、判断と前提、部品・データ・API、順序、図です。
4. 直す方法は3つです。
5. Edit で、計画を直接書き換える。
6. 一部をなぞって Comment を選び、Describe the change... 欄に書いて Enter（Escape で閉じる）。
7. チャットで質問や修正を頼む。
8. チャットの計画カードで Approve か Skip。

9. Approve すると、Build に切り替わり、すぐ実装が始まり、計画が終わるまで続きます。

10. 計画は .lovable/plan.md に保存され、承認すると、日付つきのファイルが .lovable/plan/ に作られます。

11. 計画の途中の版は、矢印の undo／redo で見られます。「Viewing version 2 of 3」のような帯が出て、Back to latest で戻ります。
12. 費用については、依頼を特定のファイルや機能に絞ると、広い依頼より高くつく調べ物が起きにくい、と Plan のページに書かれています。

例（この記事の例）

【この記事の例／Planモード】
本の一覧に「お気に入り」の機能を足したいです。
ログインなしで、ブラウザの中だけに保存する案と、ログインして保存する案を、
長所と短所つきで比べてください。そのうえで、前者の計画を書いてください。
質問があれば先に聞いてください。

場面5：画像・ファイル・ほかのものを渡す

チャットのページに書かれている方法です。

1. チャット欄の横の Chat actions メニューで Attach files。または、ファイルをチャットにドラッグするか、貼り付けます。
2. 1メッセージに最大10ファイル。1ファイルあたりの上限は、Freeで20 MB、有料プランで256 MB、Enterpriseで1 GB です。
3. 添付を押すとプレビューが出ます。画像は Draw で注釈し、Save します。
4. 画面そのものは、Add context の Take a screenshot で撮れます。
5. @ を打つと、プロジェクト、コネクタ、コード、デザインを参照でき、/ を打つとSkillsの一覧が出ます。ファイルを指す書き方の例として、Build mode のページは @src/components/UserProfile.tsx add a loading state here の形を示しています。
6. 話して入力するには、マイクのボタン、または Option+V（Mac）／ Alt+V（Windows、Linux）です。

アプリに画像や動画を入れる方法として、公式は、Lovableに生成させる、添付して置き場所を言う、プレビューで要素を選ぶ、URLを貼る、GitHubまたはGitLabの public フォルダに置く、を挙げています。動画は、置き場所のリンクを埋め込む、とあります。

場面6：確かめて、おかしい所を直す

確かめる（クイックスタート）

1. 全部のボタンとリンクを押す。
2. 動きのある部分を、全部の場合で試す。
3. プレビューの上のデバイス切り替えで Mobile view を見る。

直してもらう

おかしいときは、症状と場所を書きます。

【この記事の例】
ジャンルの「絵本」を押すと、一覧が空になります。
絵本の本が表示されるはずです。

エラーが出たとき

1. 活動のカードに出る Try to fix を押す。アカウントには、ビルドの修正とセキュリティの修正を合わせて、10回の無料の修正があり、使った分は24時間後に戻る、とあります。
2. それでも直らないとき、公式は次の順を書いています。
3. Lovableに、見えていることと、期待していることを書いて、調べてもらう。
4. 版履歴で前の版に戻し、もっと具体的に頼み直す。
5. Plan モードで、作り直す前に方針を確かめる。

場面7：戻す

• 履歴のパネルは History（すべての版）と Bookmarks の2つのタブです。版ごとの More actions には、Open preview in new tab、View code changes（差分）、Go to message in chat があります。
• 公開されている版には Published の印が付きます。
• 戻るもの：プロジェクトのコードです。エッジ関数は、版に合わせて再デプロイされます。
• 戻らないもの：データベースの中身です。その版のあとに入れた記録や変更、マイグレーションは、そのまま残ります。
• 履歴は、全部か、何もしないかの単位です。1つの変更だけを取り消したいときは、チャットでその部分を頼みます。
• 戻してもクレジットは返らない、と書かれています。
• 戻せない場合：すでにその版にいる、組み込みのバックエンドのプロジェクトからのリミックスの場合、古すぎる場合。古すぎるときは「Cannot revert this far back in history.」と出ます。

場面8：Knowledge（覚えておいてほしいこと）を書く

手順（公式の説明）

• プロジェクト単位：Project settings → Knowledge。そのプロジェクトを編集できる人が書けます。
• ワークスペース単位：Workspace settings → Knowledge（またはProject settingsのKnowledge）。編集できるのはオーナーと管理者だけ。ワークスペースに1つ。
• どちらも上限は10,000文字。変更はすぐ反映され、進行中の会話にも効きます。両者が食い違うときは、プロジェクトの Knowledge に従うよう、Lovableが促されます。

何を書くか（公式の例の種類）

• プロジェクト：アプリの目的、対象の利用者、データの構造、設計の判断、用語、制約、デザインの方針、参考リンク、セキュリティや規則の要件。
• ワークスペース：コードの書き方、命名、使うライブラリ、設計の型、テストと lint の決まり、言語と書式、ブランドの語り口、避けること。
• 書き方：短い箇条書きと、直接的な決まりで書く（公式）。

例（この記事の例）

【この記事の例／プロジェクトのKnowledgeに書く】
- このアプリは、小さな古本屋の紹介サイト。読む人は、近所の人と観光客。
- 本のジャンルは、小説、実用、絵本、雑誌の4つ。
- 価格は円で、税込の表記。
- 色は、落ち着いた茶色と生成りを基本にする。

外部から書く方法

MCPサーバーの get_project_knowledge／set_project_knowledge などで、外のAIから読み書きできます（07）。set_ は、内容を全部置き換える、と書かれています。

場面9：公開する

最初の公開（公式の手順）

1. エディタ右上の Publish を押す。Share の隣にあり、狭い窓ではアイコンだけになります。
2. ダイアログで、Website URL を確かめる。lovable.app で終わる提案が出ます。ここで直すか、あとから Project settings で変えられます。
3. 見られる人を、可視性の行から選ぶ。
4. Quick scan の結果を見る。自動で走り、データベースのアクセス規則、依存関係、MCPサーバーの公開の状態を調べます。結果は、既定では公開を止めません。重大な指摘は、先に直すよう書かれています。任意の Deep scan は、このダイアログからは走りません。
5. Publish を押す。終わると、公開されたことが表示され、リンクのコピーと、サイトを開くボタンが出ます。

チャットから「公開して」と頼むこともできます。Lovableは、公開の設定を確かめ、Quick scan を走らせ、承認を求めます（自動承認がオンでなければ）。この方法はビルド用クレジットを使います。

見られる人（プランで変わる）

招待された外部の閲覧者には、公開時にメールが届きます。

更新と取り下げ

• あとの編集は、自動では公開されません。ダイアログを開き、Publish changes を押します。未公開の変更があると、Publish ボタンに点が出ます。
• サイトのタイトル、説明、ファビコン、共有画像は、ページごとに作られます。変えるには、チャットで頼み、ページ選択か、ダイアログの ⋮ メニューの Social と Search のカードで確かめます。
• 取り下げ：Project settings の Publishing → Unpublish project、Publishダイアログの ⋮ メニュー、またはダッシュボードでの一括、のいずれか。URLは落ちますが、プロジェクトは残ります。

費用と、その他

• ダイアログからの公開は無料と書かれています。ホスティングと組み込みのバックエンドは、使われるにつれて Run credits を使います。
• Freeのワークスペースは、独自ドメインがつながっておらず、12か月、訪問もオーナーのログインもないと、非公開になることがある、と書かれています。オーナーと管理者にメールが届き、組み込みのバックエンドは一時停止し、プロジェクトとデータは消えない、とあります。

場面10：独自ドメインをつなぐ

独自ドメインは、有料プランが要ります。Freeでは、買うことも、新しくつなぐこともできません。公開してからでないと、ドメインはサイトを返しません。

持っているドメインをつなぐ（公式の手順）

1. 次のどれかから始める：Project → Settings → Domains、Publish ダイアログの Add domain、Workspace settings → Workspace domains（Lovableで買ったドメイン用）、またはチャットで頼む。権限は、公式のドメインのページでは、ドメインの接続と解除はプロジェクトのエディター以上、Lovableでドメインを買うのはワークスペースの管理者かオーナー、と分けて書かれています。
2. Connect existing domain の下の Connect domain を押し、ドメインを入れて Continue。
3. Configure connection で、Root domain か Subdomain を選び、Connect domain を押す。ルートドメインでは、www を yourdomain.com に転送する選択肢が、既定でオンです。
4. DNSを設定する。Automatic setup with Entri（提供元にログインして、記録の更新を許可）か、Manual setup。
5. Done を押し、状態が Live になるのを待つ。

手動の場合のDNSの記録は、公式のページに次のように書かれています（原文の表で確かめてから登録してください。この記事の写しに頼らないでください）。

• 登録前に、古いA、AAAA、CNAMEの記録を消す。AAAAは、設定の妨げになりうるので足さない、とあります。CAAの記録があるときは、Google Trust Services、Let's Encrypt、SSL.com の発行を許す内容にする、とあります。
• CloudflareなどのCDNやプロキシの裏にある場合は、Advanced で Uses Cloudflare or similar proxy をオンにすると、AではなくCNAMEが案内される、とあります。

状態の読み方

DNSの反映は、通常は数時間、長くて72時間、と書かれています。

Lovableで買う場合

Buy new domain → 名前を探す（価格はUSD）→ Term length（既定は1年）と Auto-renew（既定はオン）→ 登録者の情報を入れて Save → メールの確認（Lovableのアカウントのメールと違う場合。しないと Action required）→ Confirm purchase → Stripeの支払い。AとTXTの記録とSSLは、自動です。

場面11：裏側（データ、ログイン）を足す

• Lovableの組み込みのバックエンドは、データベース、認証、ストレージ、リアルタイム、関数を持ちます。公式は、ログインやファイルの保存のような機能が要るときに、Lovableが自動で有効にするか、先に承認を求める、と書いています（Enable Cloud の権限による）。
• 見る場所：プロジェクトの More メニュー → Database、Users、Storage、Edge functions、Jobs、Secrets、Logs、Usage。
• 地域は、Americas、Europe、Asia Pacific。有効にしたあと変えられません。01と04に、データの置き場所の整理があります。
• 自分のSupabaseを使う方法は、08で扱います。
• 例のプロンプト（この記事の例）：

text 【この記事の例／Buildモード】 「お気に入り」を、ログインした人ごとに保存できるようにしてください。 メールとパスワードのログインを足し、本のお気に入りを、本人にだけ見えるようにしてください。 データ保存の許可やテーブルの作成は、承認を求められることがあります。内容を読んでから承認してください。

場面12：費用の見方

• 各応答の More options で、実行中は Working for と Credits used、終わると最終の費用が見えます。
• Credit check-ins：メッセージが一定のレベル（既定20クレジット）を超えると、いったん止まり、そこまでの費用が出ます。続ける、設定のレベルを変える、まとめて終わらせる、のどれかを選びます（beta、と書かれています）。
• クレジットが尽きると、メッセージは終わらず止まります。チャットのカードの Add credits（再開）か Finish up（途中までをまとめる）を選びます。
• Build の1メッセージは、最大10時間まで動く、と書かれています。
• 残高は、Workspace settings → Plans & credit usage で見られる、とあります。
• 費用を抑える方法として、公式は次を挙げています（Build mode のページ）。依頼を狭くする、ファイルを名指しする、大きな変更は Plan で先に確かめる、詳細ビューで進み具合を見て早めに止める、を挙げています。

気をつけること

• この記事は、実際に使って確かめた記録ではありません。公式ドキュメントのページを、要約の形で取得して読んだ範囲です。
• 例のプロンプトは「この記事の例」で、結果は保証できません。Lovableが返す内容や、かかるクレジットは、実行してみないと分かりません。
• 公開した瞬間から、リンクを知る人が見られる設定（Public）かもしれません。個人の情報や社内の資料を入れたものは、公開前に、見せる相手を確かめてください。
• 戻す機能は、データベースの中身を戻しません。データを入れたあとに版を戻すと、コードとデータの状態がずれることがあります。
• DNSなど、外部のサービスに登録する操作は、公式ページの原文を見ながら行ってください。
• 年齢、利用規約、データの扱いの判断は、公式や専門家に確認してください。
• 価格・上限の数字（10ファイル、100回、20クレジットなど）は、確認日 2026-10-25 のものです。変わることがあります。

出典

• Quick start（Lovable Documentation、Lovable、確認日 2026-10-25）
• Work with Lovable in the project chat（Lovable Documentation、Lovable、確認日 2026-10-25）
• Find your way around the Lovable editor（Lovable Documentation、Lovable、確認日 2026-10-25）
• Plan a change in Plan mode（Lovable Documentation、Lovable、確認日 2026-10-25）
• Implement changes in Build mode（Lovable Documentation、Lovable、確認日 2026-10-25）
• Edit from the preview（Lovable Documentation、Lovable、確認日 2026-10-25）
• Revert and restore your project with version history（Lovable Documentation、Lovable、確認日 2026-10-25）
• Define workspace and project knowledge（Lovable Documentation、Lovable、確認日 2026-10-25）
• Publish your Lovable project（Lovable Documentation、Lovable、確認日 2026-10-25）
• Set up a custom domain（Lovable Documentation、Lovable、確認日 2026-10-25）
• Built-in backend（Lovable Documentation、Lovable、確認日 2026-10-25）
• Prompting best practices（Lovable Documentation、Lovable、確認日 2026-10-25）
• Dashboard overview（Lovable Documentation、Lovable、確認日 2026-10-25）
• Lovable MCP server（Lovable Documentation、Lovable、確認日 2026-10-25）