Lovableの使い方完全ガイド｜プログラミング不要でWebアプリを作る方法

「アプリのアイデアはあるけど、コードが書けない」。この悩みに対する2026年時点での最適解がLovable（ラバブル）です。

テキストで「こういうアプリが欲しい」と伝えるだけで、デザインからバックエンド、デプロイまでAIがやってくれる。累計2,500万プロジェクト、評価額66億ドル（約1兆円）に到達した「バイブコーディング」の代表格を、料金・始め方・実践テクニックまで丸ごと解説します。

Key Takeaway: Lovable（ラバブル）の使い方・料金プラン・始め方を2026年3月最新情報で解説。プログラミング不要でWebアプリを作る方法を初心者向けに紹介します。

この記事の要点

Lovableでできること・できないことの正直な線引き
無料プラン〜Enterpriseまでの料金体系（2026年3月時点）
アカウント作成〜デプロイまでの具体的な手順
クレジットを無駄にしないプロンプトのコツ
Bolt.new・v0との違いと使い分け

30秒で結論

Lovableは「対話だけでWebアプリが作れる」AIプラットフォーム。旧名GPT Engineer
無料プランで月30クレジット。Pro（月$25）で月100クレジット+5日次クレジット
非エンジニアがMVPを作るなら現状ベストの選択肢。Supabase連携でバックエンドも対応
2026年3月にWorkspace Knowledge機能追加。チーム開発の効率が大幅に向上
コードを書ける人はBolt.newやCursor、UIコンポーネントだけならv0が向いている

Lovableとは？バイブコーディングの代表格

Lovableは、自然言語の指示（プロンプト）からフルスタックのWebアプリケーションを生成するAIプラットフォームです。2024年に「GPT Engineer」としてローンチし、2025年に「Lovable」にリブランド。以降、爆発的に成長しています。

「バイブコーディング（Vibe Coding）」とは、コードの細部を制御するのではなく、「こういう雰囲気（vibe）のアプリが欲しい」とAIに伝えて開発するスタイルのこと。Lovableはこのコンセプトを最も忠実に体現しているツールです。

Lovableでできること

Webアプリ全体の生成: フロントエンド（React + TypeScript）をプロンプトから自動生成
バックエンド連携: Supabase統合でユーザー認証・データベース・APIを構築
デプロイまで完結: lovable.appドメインまたはカスタムドメインでワンクリック公開
GitHub連携: 生成コードをリポジトリにプッシュし、ローカルで編集も可能
リアルタイムプレビュー: コード変更がそのままブラウザで即時反映

Lovableの限界（正直に言うと）

万能ではありません。以下はLovableが苦手なことです。

ネイティブモバイルアプリ: iOS/Androidアプリは直接作れない（PWA対応のみ）
複雑なバックエンドロジック: 決済処理・リアルタイム通信など高度な実装は手動での調整が必要
大規模アプリの保守: 数十画面を超えるアプリはコードの管理が難しくなる
ピクセルパーフェクトなデザイン: Figmaレベルの細密なデザイン再現は期待しすぎない方がいい

ポイント: Lovableは「MVP（実用最小限の製品）を最速で作る」ツール。プロダクションレベルのアプリに育てるには、GitHub経由でコードを引き取ってからの追加開発が前提になる。

Lovableの料金プラン【2026年3月最新】

Lovableはクレジット制のサブスクリプションモデルです。AIとの1回の対話（生成・修正）ごとに1クレジットを消費します。

プラン一覧

Free（無料）

月額: ¥0
クレジット: 日次5クレジット（月最大30）
制限: 公開プロジェクトのみ、lovable.appドメイン5個まで
向いている人: お試し、学習用途

Pro（月額$25 / 約¥3,700）

クレジット: 月間100 + 日次5（最大月150程度）
特典: プライベートプロジェクト、カスタムドメイン、バッジ非表示、クレジット繰り越し、オンデマンド追加購入
向いている人: 個人開発者、スタートアップ創業者

Business（月額$50 / 約¥7,400）

クレジット: 月間100 + 日次5
特典: SSO、チームワークスペース、ロールベースのアクセス制御、デザインテンプレート
向いている人: チームでの開発

Enterprise（カスタム価格）

専任サポート、オンボーディング、SCIM、監査ログ、パブリッシング管理
向いている人: セキュリティ要件の厳しい企業

クレジットの仕組みを理解する

Lovableのクレジットシステムには独特のルールがあります。

1クレジット = AIとの1回の対話。複雑さに関係なく一律消費
月間クレジットは繰り越し可能（月額プランは1ヶ月分、年額は12ヶ月分が上限）
日次クレジットは繰り越し不可。その日のうちに使わなければ失効
クレジット追加購入: 2026年1月から50クレジット単位で追加可能
プランアップグレード時: 差分のクレジットのみ追加（Pro 100→200なら+100）

ポイント: 個人でMVPを1〜2個作る程度ならProの月100クレジットで十分。ただし「やり直し」を繰り返すとすぐに消費するので、後述するプロンプトのコツが重要になる。

Lovableの始め方【5ステップで完了】

TODOアプリ制作の5ステップを示す立体ワークフロー

実際にLovableを使ってアプリを作る流れを解説します。例として「TODOアプリ」を作ってみましょう。

ステップ1: アカウント登録

lovable.dev にアクセス
「Sign up」をクリックし、GoogleアカウントまたはGitHubアカウントで登録
ダッシュボードが表示されれば完了

無料プランで始められるので、クレジットカードの登録は不要です。

ステップ2: プロジェクト作成とプロンプト入力

「Create New Project」をクリックして、作りたいアプリの説明を入力します。

シンプルなTODOアプリを作ってください。

タスクの追加・完了・削除ができる
カテゴリー（仕事・プライベート・勉強）でフィルタリングできる
完了したタスクは取り消し線で表示
デザインはミニマルでモダンな雰囲気
カラーはネイビーとホワイトベース

AIがコードを生成し、右側のプレビューにリアルタイムでアプリが表示されます。生成には通常30秒〜1分ほどかかります。

ステップ3: 対話で調整する

生成されたアプリを見て、修正したい部分をチャットで指示します。

各タスクに期限日を追加してください
期限が過ぎたタスクは赤色でハイライト
タスクをドラッグ&ドロップで並べ替えできるようにして

1回の修正指示 = 1クレジット。具体的に指示するほど「やり直し」が減り、クレジットを節約できます。

ステップ4: バックエンド連携（Supabase）

データを保存したい場合はSupabaseを接続します。

チャットで「Supabaseに接続してデータを永続化して」と指示
Lovableが自動でSupabaseプロジェクトの作成を提案
案内に従ってSupabaseアカウントを連携
テーブル設計・RLS（行レベルセキュリティ）ポリシーもAIが自動生成

ユーザー認証が必要な場合は「Googleログインを追加して」のように追加指示を出すだけです。

ステップ5: デプロイ（公開）

アプリが完成したら、右上の「Publish」ボタンをクリック。

無料プラン: your-app.lovable.app のサブドメインで公開
Proプラン以上: カスタムドメイン設定可能

GitHubリポジトリへの自動プッシュも有効にしておけば、後からVercelやCloudflare Pagesにデプロイすることもできます。

クレジットを無駄にしない7つのプロンプトテクニック

Lovableでの開発コストはクレジット消費量に直結します。以下のテクニックを使えば、同じクレジットで2倍以上の成果が出せます。

1. 最初のプロンプトに全体像を詰め込む

❌ 悪い例（何度もやり直しが必要）: 「TODOアプリを作って」→「カテゴリー追加して」→「色を変えて」→「認証つけて」 = 4クレジット消費

✅ 良い例（1回で伝える）: 「以下の仕様でTODOアプリを作ってください。

タスクの追加・完了・削除
カテゴリーフィルタ（仕事・プライベート・勉強）
ネイビー×ホワイトのミニマルデザイン
Supabaseでデータ永続化
Google認証」 = 1〜2クレジット消費

2. Chat Modeで計画を立ててから実装する

Chat Mode（チャットモード）は、コードを変更せずにAIと相談できるモードです。「この機能を追加するにはどういう実装が必要？」と聞いてから、Agent Modeで実装すればクレジットの無駄遣いを防げます。

3. Plan Modeで実装前にレビューする

2026年2月に追加されたPlan Modeを使えば、AIの実装計画を事前に確認できます。大きな変更の前に「何をどう変えるか」を確認し、問題があれば実装前に修正できます。

4. フロントエンドファーストで進める

データベース接続は後回しにして、まずUIとインタラクションを完成させる。バックエンドが絡むとエラーが複雑になり、修正にクレジットを浪費しがちです。

5. バージョンをピン留めする

Lovableは全ての変更履歴を保持しています。「ここまでは動いてる」というタイミングでバージョンをピン留め（Pin）しておけば、失敗してもすぐ戻れます。

6. エラー修正は具体的に伝える

❌「動かないので直して」 ✅「ログインボタンをクリックするとコンソールに"TypeError: Cannot read property 'uid' of null"が出る。Supabaseの認証状態の確認が漏れていると思う」

7. Workspace Knowledge機能を活用する

2026年3月に追加された機能。デザインシステムやコーディング規約をワークスペースレベルで定義しておけば、新しいプロジェクトでも一貫したスタイルが適用されます。複数プロジェクトを運用するなら必須の設定です。

Lovable vs Bolt.new vs v0【2026年比較】

どのAIアプリビルダーを使うべきか。結論から言うと、ユーザーのスキルレベルと目的で決まります。

Lovable（月$25）がベストな人:

プログラミング経験がない・浅い
アイデアの検証（MVP）を最速でやりたい
デザイン性の高いアプリを対話だけで作りたい

Bolt.new（月$25）がベストな人:

基本的なコード知識がある
コードを自分でも編集したい
Supabase中心のフルスタック開発がしたい

v0（月$20）がベストな人:

Reactコンポーネント単位で開発したい
Next.js / Vercelエコシステムを使っている
UIの部品を高品質に生成したい

Lovableの強みは「プロンプトからデプロイまでの一気通貫の体験」にあります。コードに触れなくてもアプリが完成する安心感は、3つの中で最も高いです。

詳しい比較はBolt.new vs Lovable vs v0の比較記事もあわせてどうぞ。

2026年の注目アップデート

Lovableは2025年後半〜2026年にかけて急速に進化しています。主なアップデートを時系列で整理します。

時期	機能	概要
2025年10月	Voice Mode	音声でAIに指示。ハンズフリーで開発可能
2025年10月	ファイルからアプリ生成	スプレッドシート等をアップロードするだけでアプリ化
2025年12月	ChatGPT連携	ChatGPT内から直接Lovableアプリを構築可能
2026年1月	最新AIモデル対応	GPT-5.2、Gemini 3、Claude Opus 4.7に追加料金なしで対応
2026年1月	クレジット追加購入	50クレジット単位でオンデマンド購入が可能に
2026年2月	Plan Mode	AIの実装計画を事前レビュー。クレジット節約に直結
2026年3月	Workspace Knowledge	ワークスペースレベルでルールを定義。チーム開発効率化
2026年3月	5つの新規コネクタ	外部サービス連携の選択肢が拡大

特にPlan ModeとWorkspace Knowledgeは、「AIに任せたら想定外のコードが出てきた」問題を大幅に軽減する重要なアップデートです。

Lovableを使う上での注意点

APIキーとデータベースを守るセキュリティ確認の構図

セキュリティ

Supabase接続時のRLS（行レベルセキュリティ）ポリシーは必ず手動で確認する。AIが生成したRLSが不十分なケースがある
APIキーをフロントエンドのコードに直書きしない。環境変数を使うようAIに明示指示する
生成されたコードの最終責任はあなたにある。本番運用前にはセキュリティレビューを入れること

コスト管理

無料プランの日次5クレジットは繰り越し不可。毎日少しずつ使うのが効率的
「試行錯誤」をするとクレジットが一瞬で溶ける。Chat Modeで計画→Agent Modeで実行のフローを徹底
年額プランは月額の約20%OFF。3ヶ月以上使う予定なら年額を検討

AIの限界を理解する

複雑なビジネスロジックは1回のプロンプトで完璧にならない。段階的に構築する
生成されたコードが「動く」と「正しい」は別。特にエッジケースのテストは手動で行う
複数画面にまたがる状態管理は苦手。大きなアプリは画面ごとに分割して開発する

AI PICKSの独自評価

AI PICKSでは、500以上のAIツールを独自の評価基準でスコアリングしています。外部レビュー・SNSバズ・トレンド指数・サイト人気度・プロダクト品質の5軸で総合評価しています。

Lovableの総合スコア: 83点 / 100点満点

ユーザー評価: 4.3点（432件のレビュー）

編集部の検証メモ

検証の観点

非エンジニアがMVPを作る用途で、現実的な選択肢として浮上するのがLovable・Bolt.new・v0の3つです。公開情報を比較検討するにあたり、以下の3軸で評価しました。

生成範囲：UIだけか、バックエンド込みのフルスタックか
料金体系：無料枠の使いやすさと有料プランの月額
学習コスト：コード知識ゼロでも実用に耐えるか

公開情報からの比較整理

公式サイトの料金プランと機能仕様から整理すると、それぞれ得意領域が異なります。

項目	Lovable	Bolt.new	v0
生成範囲	フルスタック（DB含む）	フルスタック	UIコンポーネント中心
無料枠	日次5クレジット（月最大30）	日次トークン制	月次クレジット制
有料プラン起点	月$25（Pro）	月$20前後	月$20前後
バックエンド	Supabase統合	StackBlitz環境	Vercelデプロイ前提
日本語UI	対応（プロンプトは多言語可）	英語UI中心	英語UI中心

※料金・クレジット仕様は変動するため、最新は各公式サイトで要確認。

編集部の総合判断

コードを一切書きたくない非エンジニア → Lovable。Supabase連携でバックエンドまでAI側が組んでくれるため、アイデア検証フェーズで詰まりにくい
エンジニアでローカル環境より速く動くプロトタイプが欲しい → Bolt.new。ブラウザ完結でnpmパッケージも動かせる柔軟性が強み
既存Next.jsプロジェクトにUIだけ足したい → v0。shadcn/uiベースのコンポーネント単位生成が用途に合う

よくある質問

Q. Lovableは完全無料で使えますか？

無料プランがあります。日次5クレジット（月最大30クレジット）で、簡単なアプリなら無料の範囲で作れます。ただしプロジェクトは公開のみで、カスタムドメインは使えません。本格的に使うならPro（月$25）が実用ラインです。

Q. プログラミングの知識は本当に不要ですか？

基本的な操作は日本語の指示だけで完結します。ただし、エラーの原因特定や微調整の際にHTMLやJavaScriptの基礎知識があると格段に効率が上がります。完全にゼロ知識でも使えるが、少し学んでおくとクレジットの節約になるのが正直なところです。

Q. 日本語のプロンプトで使えますか？

はい、日本語で指示できます。ただし英語プロンプトの方が精度が高い傾向があります。複雑な指示は英語で書くか、日本語で書いてから「この仕様を英語に翻訳して実装して」と伝える裏技もあります。

Q. 作ったアプリのコードは自分のものになりますか？

はい。GitHub連携で生成コードを自分のリポジトリにプッシュできます。Lovableの契約を解約しても、コードはそのまま手元に残ります。VercelやNetlifyなど別のホスティングに移行することも可能です。

Q. Bolt.newとどっちがいいですか？

コードをまったく触りたくないならLovable。コードも直接編集したいならBolt.new。Lovableはチャットベースの操作が中心で非エンジニア向け、Bolt.newはIDE的なインターフェースで開発者向けです。詳しくは比較記事をどうぞ。

Q. 商用利用はできますか？

できます。有料プランで作成したアプリは商用利用に制限はありません。ただし、無料プランではLovableのバッジが表示されます。Proプラン以上でバッジの非表示が可能です。

Q. スマホアプリは作れますか？

ネイティブアプリ（iOS/Android）は直接作れません。ただし、PWA（Progressive Web App）としてスマートフォンでも動作するWebアプリは作れます。ホーム画面に追加すればアプリのように使えます。

Q. Supabase以外のバックエンドは使えますか？

2026年3月時点では、Supabaseが最も深く統合されています。Lovable Cloudという独自のバックエンドサービスも利用可能です。Firebase等の外部サービスはMCP Server連携経由で接続できますが、Supabaseほどシームレスではありません。