Lovableの使い方｜公式ドキュメントで確認したアプリの作り方

Lovableの使い方は「作りたいものを文章で書く」だけで始められます

まず、いちばん知りたいところからお答えします。

Lovableは、作りたいウェブサイトやアプリの中身を日本語や英語の文章で伝えると、その場で動くものを組み立ててくれるサービスです。

公式ドキュメントの入口にあたるページには、Lovableについて「どんな習熟度の人でも、自然な言葉でフルスタックのウェブサイトを作れるAIのプラットフォーム」という説明が載っていました。

フルスタックというのは、画面の見た目だけでなく、データを保存する裏側の仕組みまで含めたひとそろい、という意味の言葉です。

公式の「Getting started（Lovable公式ドキュメント）」には、最初のアプリを作って公開するまでにかかる時間の目安は10分ほどだと書かれていました。

同じページには、インストールするものも、設定するものも何もないという説明も添えられています。

実際の流れは、次の順番になります。

1. アカウントを作ってログインする
2. 画面のメッセージ欄に、作りたいものを文章で書いて送る
3. 右側のプレビューに出てきたものを見て、直したいところを続けて伝える
4. 納得できたら公開ボタンを押す

公式ドキュメントでは、この流れの例として「Little Fern」という架空のカフェのサイトを作る手順が紹介されていました。

つまり、最初の一手は「作りたいものを1文で書く」だけだと考えて構いません。

生成AIそのものに初めて触れる方は、生成AIを初めて触る方向けの記事から読むと前提がそろいます。

Lovableの始め方はアカウント作成から数分で終わります

Lovableはブラウザで使うサービスなので、始めるためにアプリを入れる必要はありません。

公式の「Create an account（Lovable公式ドキュメント）」には、登録に使える方法が並べられていました。

• メールアドレスで登録する
• Googleアカウントで登録する
• GitHubアカウントで登録する
• Appleアカウントで登録する
• 会社のシングルサインオン（SSO）で登録する

同じページには、利用にあたって18歳以上であること、または保護者の許可が必要だと利用規約の条件として書かれていました。

登録が終わると、自分専用のワークスペースが無料プランで自動的に用意される、とも説明されています。

ワークスペースというのは、作ったプロジェクトや利用量、支払い設定がまとまって入っている「箱」だと考えてください。

公式のFAQには、ワークスペースの中の人数は無制限で、料金は席数ではなくクレジットで決まると書かれていました。

そのため、あとから同僚を招いても契約の形は変わらない、という整理になります。

白紙から始めるのが不安な場合の入口も、公式に複数用意されていました。

始め方	公式ドキュメントに書かれていた内容
文章から作る	メッセージ欄に作りたいものを書いて送る、いちばん基本の方法
画像から作る	デザイン画やスクリーンショットを添えて、それに近いものを作らせる
テンプレートから作る	公開されているテンプレートをリミックス（複製）して自分用に作り替える
URLから作る	既存のページのURLを渡して、それを土台に作らせる

公式によれば、テンプレートはどのプランでもリミックスできると書かれていました。

Lovableの画面は左がチャット・右がプレビューの2分割です

プロジェクトを開くと、編集画面（エディタ）に入ります。

公式の「Find your way around the Lovable editor（Lovable公式ドキュメント）」には、この画面が大きく2つに分かれていると書かれていました。

場所	公式ドキュメントに書かれていた役割
左側のチャット欄	作りたいものを伝え、Lovableの作業の進み具合を見る場所
右側のプレビュー	作られたアプリが実際に動いている状態。作業に合わせてその場で更新される
上部のバー	プロジェクト名のメニュー、履歴、公開ボタンなどが並ぶ

プロジェクト名をクリックすると、いま使っているワークスペース・契約プラン・クレジットの使用量がメニューの先頭に表示されると書かれていました。

同じメニューから、設定・プロジェクトの複製（リミックス）・名前の変更・フォルダへの移動・見た目の明暗切り替えなどにも行けます。

画面が狭いと感じたときは、チャット欄を折りたたんでプレビューを全面に広げる切り替えも用意されています。

初心者にとっていちばんありがたいのが、プレビュー側から直接指示できる仕組みです。

公式には、プレビューの中の要素を選んでから直したい内容を伝えられると書かれていました。

さらに、文字の修正については「Edit text inline」という機能があり、こちらは文章で指示を出さなくてもその場で書き換えられると説明されています。

スマートフォンでの見え方を確認したいときは、表示の切り替えでモバイル表示に変えられる、とも書かれていました。

そしてもうひとつ大事なのが、履歴です。

公式ドキュメントには、変更のたびに元へ戻せるバージョンとして保存されると書かれていました。

上部のHistory（履歴）から過去の状態を見て、そこへ戻すこともできます。

壊してしまうことを恐れて手が止まる、という状態にはなりにくい設計だという整理になります。

Lovableでできることは公式ドキュメントに機能ごとに書かれています

Lovableは画面を作るだけの道具ではありません。

公式ドキュメントには、作業の性質に応じた2つのモードがあると書かれていました。

モード	公式ドキュメントに書かれていた内容
Plan mode（計画モード）	考える・調べる・比べるためのモード。コードは一切変更しない。1メッセージにつき1クレジット
Build mode（作成モード）	実際に手を動かして作り、結果を確かめるモード

公式の「Plan mode（Lovable公式ドキュメント）」には、Plan modeは決めるためのモード、Build modeは実行するためのモードだと整理されていました。

Plan modeでは、Lovable側からこちらへ質問が返ってくることが多いとも書かれています。

作った計画は.lovable/plan.mdというファイルに保存され、承認すると日付つきの控えとして別フォルダに残る、という説明もありました。

なお、Plan modeは以前Chat modeと呼ばれていた機能で、名前が変わったものだと公式に明記されています。

裏側のデータを扱う仕組みも用意されています。

公式の「Lovable Cloud（Lovable公式ドキュメント）」には、Lovable Cloudという機能でデータベースやログイン機能を持たせられると書かれていました。

• Database（データを保存する場所）
• Users（ログインや会員登録の仕組み）
• Storage（画像やファイルの保管）
• Secrets（外部サービスの鍵を安全にしまう場所）
• Edge functions（サーバー側で動く処理）
• Logs（動作の記録）とUsage（利用量の確認）

これらはプロジェクトの上部メニューのMoreからCloudを開いて確認できる、と書かれていました。

公式には、Lovable CloudはSupabaseのオープンソースの土台の上に作られているという説明も添えられています。

さらに、作られた中身を見たい人向けに、コードを表示して編集する画面も用意されています。

公式の「View and edit your code（Lovable公式ドキュメント）」には、Lovableが作るのは本物の標準的なコードであり、コード画面で中身を見たり手で直したりできると書かれていました。

ただしコードを編集できるのは有料プランのみで、無料プランでは読み取り専用だと明記されています。

コードを一切見なくても作れる一方で、見たくなったときは開ける、という構えです。

AIが自分で手順を進めていく感覚がつかみにくい方は、AIエージェントとは何かを整理した記事も合わせて読んでみてください。

Lovableで作ったアプリを公開する手順と落とし穴

作ったものを人に見せる段階の話です。

公式の「Publish your app（Lovable公式ドキュメント）」には、画面右上の公開ボタンを押すと公開できると書かれていました。

そのとき、lovable.appで終わる住所（アドレス）が提案され、こちらで書き換えられるとも説明されています。

ここでいちばん大事なのが、公開後の扱いです。

公式ドキュメントには、公開されたサイトはその時点のコピーであり、あとから直した内容は、もう一度公開しない限り反映されないと書かれていました。

公式はこれを、はじめて使う人がいちばん驚くところだとまで書いています。

直したのに公開ページが変わらない、という相談のほとんどはここが原因です。

なお公式ドキュメントには、無料プランでは独自ドメインの設定、Lovableのバッジの非表示、コードのダウンロードが使えないと書かれていました。

自分の持っているドメインで公開したい場合は、有料プランが前提になる、という整理です。

一方で、GitHubやGitLabとの同期はすべてのプランで使えると書かれていました。

Lovableのクレジットは1日5回まで無料で使えます

Lovableは、使った量を「クレジット」という単位で数えます。

公式の「Credits and usage（Lovable公式ドキュメント）」には、クレジットの残高はひとつにまとまっていて、作成・Cloud・AI機能のすべてがそこから引かれると書かれていました。

2026年9月4日時点で確認できた内訳は次のとおりです。

項目	公式ドキュメントに書かれていた内容
1日あたりの作成クレジット	無料・Pro・Businessのいずれも1日5回分。協定世界時の0時にリセットされ、翌日への繰り越しはない
無料プランの上限	1か月あたり30回分（月初から6日分に相当する計算）
月ごとのCloud用の付与	20回分
月ごとのAI機能用の付与	4回分
有料プランの付与	月100回分から。繰り越しや追加購入、自動追加の仕組みもある

つまり、無料でも毎日5回までは試せるが、1か月では30回分で止まるという設計です。

公式には、月ごとに付与されたクレジットは付与から2か月後に期限を迎える、といった有効期限の説明も書かれていました。

1回の指示でどのくらい減るのかについては、公式の料金ページに具体的な例が載っていました。

指示の例	公式ページに書かれていた消費量
ボタンを灰色にして、という指示	0.50クレジット
フッターを削除して、という指示	0.90クレジット
新規登録とログインの機能を追加して、という指示	1.20クレジット
画像を使ったランディングページを作って、という指示	1.70クレジット

計画モードでのやりとりは1メッセージにつき1クレジットだと書かれていましたので、考えるだけの会話にも費用がかかる点は先に知っておくほうが安全です。

小さな修正なら1回分に届かないこともある一方、まとまった機能追加は1回分を超える、という目安になります。

Lovableの料金プランは公式ページで確認してください

ここは正直にお伝えします。

公式の料金ページは2026年9月4日時点で価格表を確認できませんでした。最新の料金は公式サイトでご確認ください。

金額の部分が画面を開いてから読み込まれる作りになっており、こちらで確実に読み取れる形では取得できませんでした。

記憶や他サイトの数字を書くと事実と食い違う恐れがあるため、この記事では金額を一切書きません。

確認先は公式の「Pricing（Lovable公式サイトの料金ページ）」です。

そのうえで、金額以外に公式ドキュメントで確認できた前提を整理しておきます。

• プランは無料・Pro・Businessなどに分かれている
• 料金は席数ではなくクレジットの量で決まる（人を増やしても契約の形は変わらない）
• ワークスペースに参加できる人数に上限はない
• 無料プランでは、コードの編集・独自ドメイン・バッジの非表示・コードのダウンロードが使えない
• 学生向けの割引の案内が公式に用意されている

つまり、最初は無料で1日5回ずつ試し、足りなくなってから有料に切り替えるという順番が、公式の設計にそのまま沿った進め方になります。

プランごとの違いの詳細は、公式の「Subscription plans（Lovable公式ドキュメント）」に一覧があります。

Lovableを使うときの注意点は公式が安全面でまとめています

人に見せるものを作る以上、安全面は先に読んでおきたいところです。

公式の「Security best practices（Lovable公式ドキュメント）」には、初心者がいちばん誤解しやすい点が最初に書かれていました。

それは、画面側（フロントエンド）のコードは利用者のブラウザで動くため、常に公開されているものとして扱うことという原則です。

フロントエンドというのは、利用者の目に見えて操作する側の部分のことです。

公式は、その画面に鍵やパスワードを書いてはいけないと明記していました。

外部サービスの鍵が必要な場合は、Secretsという専用の置き場に入れる、と説明されています。

もうひとつ書かれていたのが、入力チェックの位置です。

画面側だけで入力内容を確認しても、それは使い勝手のための表示にすぎず、安全性の保証にはならないと公式は書いていました。

本当に守りたい確認は、サーバー側で動くEdge functionsで行うこと、という整理です。

データベースについては、PostgreSQLという仕組みが使われ、行ごとにアクセス権を決めるRow Level Securityが前提だと書かれていました。

会員機能や問い合わせ内容など、他人に見られては困るデータを扱うなら、ここは飛ばさずに公式の該当ページを読むところです。

加えて、公式のプロンプトの解説ページには、上手に伝えるための注意点も並んでいました。

• 指示の最後に「必要な質問があれば聞いてください」と書くと、先に確認を返してくれる
• ページ単位ではなく、部品単位で頼むほうが意図どおりになりやすい
• 仮の文章ではなく、実際に載せる文章で作らせるほうが完成に近づく
• 色や雰囲気の方向性は、早い段階で言葉にして伝えておく

この4つは、クレジットの無駄打ちを減らすという意味でも効いてきます。

詳しくは公式の「Prompting（Lovable公式ドキュメント）」に書かれていました。

Lovableが向いている人・向いていない人を整理します

公式ドキュメントの設計思想から、向き不向きを整理します。

向いているのは、コードを書けないけれど、動くものを自分の手で形にしたい人です。

• 小さなウェブサイトや申し込みページを自分で作りたい人
• アイデアを人に見せるための試作を早く用意したい人
• アプリを入れずにブラウザだけで完結させたい人
• 作ったものをそのまま公開して、URLで共有したい人

逆に、次のような場合は別の道具のほうが向きます。

• 手元にすでにあるプロジェクトのファイルを直したい人
• 調べものや文章作成が中心で、ものを作る予定がない人
• 使った量で費用が動く形が落ち着かない人
• 無料の範囲だけで長く回したい人（1か月30回分の上限があるため）

文章作成や調べものが中心なら、Lovableではなく会話型のAIのほうが手数が少なく済みます。

その場合はClaudeの使い方をまとめた記事のほうが実際の使い道に近いはずです。

ものを作りたいのか、考えを整理したいのか、で選び分けるのがいちばん迷いません。

Lovableとコードエディタ型のAIツールの違い

同じ「AIで作る」でも、Lovableと、パソコンに入れて使うコードエディタ型の道具は立ち位置が違います。

公式ドキュメントに書かれているLovableの特徴を並べると、違いがはっきりします。

観点	Lovableの公式ドキュメントに書かれていたこと
使う場所	ブラウザで完結する。インストールも設定も不要
作りはじめ方	作りたいものを文章で書いて送る
確認の仕方	右側のプレビューで動いているものを見ながら直す
公開	画面右上のボタンで公開。住所はlovable.appで終わる形が提案される
裏側の機能	Lovable Cloudでデータベースやログイン機能を持たせられる
コードの扱い	見なくても作れる。見たいときはコード画面を開ける（編集は有料プラン）

いちばんの違いは、Lovableは「作って公開するまで」がひとつのサービスの中で完結するという点です。

手元のパソコンにファイルを置いて管理する必要がありません。

その代わり、すでに自分の手元にあるプロジェクトを直す用途には向いていません。

ゼロから作って世に出すならLovable、手元のものを直すならエディタ型、という分け方が現実的です。

Lovableのよくある質問をまとめました

公式ドキュメントに記載があった範囲で、よく聞かれる点をまとめます。

Lovableの使い方まとめ

最後に、この記事で確認した内容を短くまとめます。

• Lovableはブラウザだけで使え、作りたいものを文章で書くところから始まる
• 画面は左がチャット、右が動いているプレビューの2分割
• プレビューの要素を選んで直せて、文字はその場で書き換えられる
• 公開はボタン1回だが、あとからの変更は公開し直すまで反映されない
• 無料でも1日5回分、1か月30回分まで使える
• 料金の金額は公式ページで確認する（この記事では取得できなかったため書いていない）
• 会員機能を作るなら、鍵は画面側に置かずSecretsへ入れる

まずは公式の「Getting started（Lovable公式ドキュメント）」を開きながら、簡単な1ページを作ってみてください。

全体像から押さえたい方は、公式ドキュメントの入口にあたる「Introduction（Lovable公式ドキュメント）」から順に読む形でも構いません。

細かい疑問が出てきたときは、公式の「FAQ（Lovable公式ドキュメント）」に同じ質問がまとまっていることが多いはずです。

作れる量に上限がある道具なので、思いつきで送る前に、何を作るのかを一度書き出しておくほうが結果的に早く進みます。

ここまで読んで「AIを仕事の中にどう組み込むかを、もう少し体系立てて学びたい」と感じた方は、自分専属AI育成ウェブセミナーのような、手を動かしながら学ぶ形の講座を一度のぞいてみるのも手です。

この記事の内容は2026年9月4日にLovableの公式ドキュメントで確認したものです。仕様や料金は変わりますので、最新の情報は公式ページでご確認ください。