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

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

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

この記事でわかること

  • 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ステップで完了】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. チャットで「Supabaseに接続してデータを永続化して」と指示
  2. Lovableが自動でSupabaseプロジェクトの作成を提案
  3. 案内に従ってSupabaseアカウントを連携
  4. テーブル設計・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.6に追加料金なしで対応
2026年1月 クレジット追加購入 50クレジット単位でオンデマンド購入が可能に
2026年2月 Plan Mode AIの実装計画を事前レビュー。クレジット節約に直結
2026年3月 Workspace Knowledge ワークスペースレベルでルールを定義。チーム開発効率化
2026年3月 5つの新規コネクタ 外部サービス連携の選択肢が拡大

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

Lovableを使う上での注意点

セキュリティ

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

コスト管理

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

AIの限界を理解する

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

よくある質問

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

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

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

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

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

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

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

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