Lovable（ラバブル）を使うと、プログラミングの知識がなくても、チャットでアイデアを伝えるだけでウェブアプリが完成します。「AIでアプリを作ってみたいけど、何から始めればいい？」「無料で試せる範囲はどこまで？」—本記事では、Lovableの使い方を手順ごとに解説し、無料プランでできることと限界、そしてBolt.newとの使い分けまで実用的にまとめました。
Lovableとは何か｜AIがウェブアプリを自動生成するツール
Lovableの基本的な仕組み
Lovable（lovable.dev）は、スウェーデン発のAIウェブアプリビルダーです。ユーザーがチャット画面に「こういうアプリを作りたい」と入力すると、AIが自動でコード（React + TypeScript + Tailwind CSS）を生成し、ブラウザ上でリアルタイムにプレビューを確認しながら開発できます。
バックエンドはSupabaseと連携しており、データベース・認証・ストレージといった機能も自然言語の指示で追加できます。コードを書く必要はなく、「このボタンを押したらユーザー登録できるようにして」と話しかけるだけで動くアプリが出来上がります。
Lovableが向いているプロジェクト
- SaaSのMVP（最小限のプロダクト）を素早く試したい
- 業務用の簡易ツール（タスク管理・フォーム集計など）を社内向けに作りたい
- デザインが整ったプロトタイプをクライアントに見せたい
- フリーランスがポートフォリオアプリを低コストで作りたい
エンジニアリングの経験がなくても、アイデアさえあれば形にできるのがLovableの最大の強みです。
Lovableの料金プランと無料でできること（2026年版）
無料プランの内容と制限
Lovableは無料プランから始められます。クレジットカード不要で今すぐ試せる点が大きなメリットです。以下が無料プランの概要です。
- 1日あたり5クレジット付与（翌日へのロールオーバーなし）
- 月合計最大30クレジット（毎日使い続けた場合）
- プロジェクト数：最大5件（lovable.appサブドメインでの公開）
- カスタムドメインの設定：不可
- コードモード（ソースコードの直接編集）：不可
- 追加クレジットの購入：不可
- ワークスペースのコラボレーター：無制限
参照：Lovable公式料金ページ / Lovableドキュメント（クレジットと利用）
有料プランの内容（Pro・Business・Enterprise）
本格的な開発や複数プロジェクトの運用には有料プランが必要になります。2026年時点の主要プランは以下のとおりです。
| プラン | 月額料金 | クレジット数 | 主な追加機能 |
|---|---|---|---|
| Free | $0 | 最大30/月 | — |
| Pro | $25/月 | 100クレジット/月 | コードモード・カスタムドメイン・追加クレジット購入可 |
| Business | $50/月 | 400クレジット/月 | プライベートプロジェクト・高度なチーム機能 |
| Enterprise | 要問合せ | カスタム | SSO・SLA・専任サポート |
無料プランで確認すべき現実：1クレジット＝AIへのメッセージ1回前後（複雑な指示は複数クレジット消費）なので、月30クレジットは「どんなアプリが作れるか試す」程度の量です。継続的な開発にはProプラン（$25/月）が実質的なスタートラインになります。
無料プランでできること・できないこと（独自評価軸付き比較表）
| 機能カテゴリ | 無料プランでできるか | 実用上の評価 |
|---|---|---|
| アプリのプロトタイプ生成 | ○ できる | アイデア検証には十分 |
| lovable.appドメインでの公開 | ○ できる（5件まで） | デモ共有には使える |
| Supabase連携 | ○ できる | DBやAuth機能も試せる |
| コードの確認（表示のみ） | ○ できる | エンジニアが中身を把握可能 |
| コードモード（直接編集） | × できない | 細かい調整が必要な場合は有料が必要 |
| カスタムドメイン設定 | × できない | 本番運用には有料プランが必要 |
| 追加クレジット購入 | × できない | 月30クレジット固定で使い切ったら翌日まで待つ |
| プライベートプロジェクト | × できない | 無料は全てパブリック公開 |
Lovableの使い方｜ステップ別手順
ステップ1：アカウント登録とプロジェクト作成
まずlovable.devにアクセスし、GoogleアカウントまたはGitHubアカウントでサインアップします。クレジットカードの登録は不要です。
ログイン後、「New Project」ボタンをクリックしてプロジェクトを新規作成します。プロジェクト名を入力したら、チャット画面が表示されます。この時点でクレジットの消費は始まっていません。
- lovable.dev にアクセス → 「Start Building」をクリック
- GoogleまたはGitHubでサインアップ（クレジットカード不要）
- ダッシュボードから「New Project」を選択
- プロジェクト名を入力して作成完了
ステップ2：プロンプトを入力してアプリを生成する
チャット欄に「作りたいアプリの説明」を入力して送信します。日本語でも問題なく認識されます。プロンプトは曖昧でも動きますが、具体的なほど期待通りの出力が得られます。
良いプロンプト例：
- 「タスク管理アプリを作って。タスクの追加・完了・削除ができること。データはSupabaseに保存したい」
- 「お客様向けの予約フォームを作って。名前・日時・メニュー選択・送信できるシンプルなデザインで」
送信後、AIがコードを生成し右側のプレビューペインに動作するアプリが表示されます。生成には30秒〜2分ほどかかります。
ステップ3：チャットで修正・機能追加を繰り返す
生成されたアプリに対して、さらにチャットで指示を出して改良していきます。
- 「ボタンの色を青にして」
- 「完了したタスクはグレーアウトして表示して」
- 「ログイン機能を追加して、SupabaseのAuthを使って」
各メッセージごとにクレジットを消費するため、無料プランでは指示の数に気をつける必要があります。一度の指示でできるだけ多くの変更をまとめて伝えるのがコツです。
ステップ4：GitHubと連携してコードをエクスポートする
生成したコードはGitHubリポジトリに直接プッシュできます。これにより、ローカルでVS Codeを使って細かい編集ができるようになります（Cursor AIと組み合わせた開発も効果的です）。
設定手順：Lovableのサイドバーから「Connect to GitHub」を選択 → リポジトリを指定 → 以降は変更のたびに自動コミットされます。
ステップ5：公開（デプロイ）する
「Share」ボタンを押すと、lovable.appサブドメインでアプリが公開されます（例：your-app.lovable.app）。URLをコピーしてクライアントや同僚にすぐ共有できます。カスタムドメインへの設定はProプラン以上が必要です。
よくあるつまずきと対処法
つまずき1：UIが英語でわからない
Lovableのインターフェースは現在英語のみです。ただし、AIへの指示（プロンプト）は日本語で問題なく動作します。よく使うボタンの意味を押さえておけば操作に支障はありません。
- 「New Project」→ 新規プロジェクト作成
- 「Preview」→ アプリのプレビュー表示
- 「Share」→ 公開URL発行
- 「Code」→ 生成されたソースコードの確認
- 「Connect to GitHub」→ GitHubリポジトリとの連携
つまずき2：クレジットが思ったより早く減る
無料プランの1日5クレジットは、複雑な指示1〜2回で使い切ることがあります。対策として以下を意識してください。
- 最初の指示でアプリの全体像をできるだけ詳しく伝える（後から細切れに追加しない）
- 小さな修正（色の変更、テキスト変更など）は翌日にまとめる
- クレジットを使わずにコードをGitHubにエクスポートし、ローカルで細かい調整を行う
つまずき3：プロジェクト数が5件の上限に達した
無料プランではプロジェクトを最大5件しか作れません。上限に達した場合は、古いプロジェクトを削除するか、Proプランにアップグレードする必要があります。「試しに作ったプロジェクト」は早めに整理しておくことを推奨します。
つまずき4：生成されたコードが意図と違う動きをする
Lovableが生成するコードは高品質ですが、複雑なロジックでは意図と異なる実装になることがあります。その場合は「〇〇の動作がおかしい。△△のように変えて」と具体的に説明して再生成を依頼します。それでも解決しない場合は、GitHubにエクスポートしてエンジニアに修正を依頼するのが現実的な選択肢です。
LovableとBolt.new・他ツールの使い分け｜こういう人はLovableを選ばないほうがいい
Bolt.newとの違いと選び方
同じAIアプリビルダーとして比較されることの多いBolt.newとの比較です。
| 比較軸 | Lovable | Bolt.new |
|---|---|---|
| 技術スタック | React + Supabase固定 | フレームワーク選択の自由度高 |
| デザイン品質 | 高い（洗練されたUI） | 普通（実用的） |
| 向いているユーザー | 非エンジニア・SaaSプロダクト志向 | エンジニア・プロトタイプ重視 |
| GitHub連携 | 標準搭載 | 対応あり |
| バックエンド連携 | Supabase特化（充実） | 柔軟（自由だが自己設定） |
| 無料枠 | 月最大30クレジット | プランにより異なる |
Lovableを選ぶべき人：プログラミング経験がなく、デザインのきれいなSaaSアプリやポートフォリオを素早く作りたい人。
Bolt.newを選ぶべき人：技術的なバックグラウンドがあり、フレームワークや構成を自分で選びたいエンジニア。
こういう人はLovableより別ツールを選ぶべき
Lovableが万能というわけではありません。以下のケースでは別のアプローチをおすすめします。
- コードを完全に自分でコントロールしたい人：生成されたコードへの全面的なカスタマイズが必要なら、最初からCursor AIやVS Codeで開発したほうが効率的です
- コードなしでAPIやワークフローを自動化したい人：アプリ開発ではなく業務自動化が目的なら、Difyのようなノーコードワークフローツールのほうが適しています
- React以外のスタックで開発したい人：LovableはReact+Supabaseに最適化されており、他スタックでの出力は品質が落ちる場合があります
- 月予算をかけられない人：無料30クレジットでは継続的な開発には不十分です。予算ゼロで本格運用するのは現実的ではありません
Lovableを使った実際の活用例
フリーランスのポートフォリオサイト制作
フリーランスのデザイナーやライターが、自身の実績を紹介するポートフォリオサイトをLovableで作るケースが増えています。「自己紹介・実績・お問い合わせフォームのあるサイトを作って。モダンなデザインで」とプロンプトを入力するだけで、ほぼそのまま公開できるサイトが数分で完成します。
AIノーコードで作ったアプリをさらに発展させる事例についてはAIノーコードアプリ開発の活用記事も参考にしてください。
社内向け簡易ツールのMVP開発
「在庫管理の簡単なツールをExcelから移行したい」「アンケート集計をリアルタイムで見たい」といった社内ニーズに応えるMVPツールをLovable＋Supabaseで作るケースが増えています。エンジニアなしで業務部門が直接ツールを作れるため、開発コストを大幅に削減できます。
スタートアップのプロダクトデモ
投資家向けのデモや、ユーザーインタビュー用のプロトタイプとして使われるケースも多いです。ウェブ上で実際に動くアプリをすぐ作れるため、スライドよりも説得力のある形で仮説を検証できます。
まとめ｜Lovableはアイデアを形にする最速の手段
Lovableは、プログラミングなしでウェブアプリを作れる現時点で最も使いやすいAIビルダーの一つです。無料プランでも十分に動作を確認でき、SaaSのMVPやポートフォリオ、社内ツールの用途なら実用的な成果物が作れます。
一方で、月最大30クレジットの制限や英語UIのつまずき、React＋Supabase以外への対応の弱さといった現実的な制約も理解したうえで使い始めることが重要です。まずは無料プランで「アプリを一本作り切る」体験をしてみてください。それがLovableを使いこなす最短ルートです。
- 無料プラン：月最大30クレジット、5プロジェクトまで。まずはここから試す
- Proプラン（$25/月）：継続開発・カスタムドメイン・コードモードが必要になったら
- Bolt.newと迷ったら：デザイン重視・非エンジニアならLovable、技術的柔軟性ならBolt.new
- コード管理はGitHub連携＋Cursor AIで効率化できる
