Lovable · コーディング

Lovableとは?機能・料金・使い方をわかりやすく解説

プロンプトからWebアプリをAIで生成するノーコードビルダー

無料枠あり AIコーディング ノーコード
対応環境
  • Webブラウザ
Lovableの公式イメージ
出典:Lovable公式(lovable.dev)
更新日: 読了目安:約8分

Lovable(ラバブル)は、自然言語のプロンプトからWebアプリを生成・編集できるノーコード系のAIアプリビルダーです。v0Bolt.newと並ぶ「プロンプト駆動の開発ツール」として知られ、フロントエンド生成に加えLovable Cloud(ホスティング)やSupabase連携を組み込んだアプリ構築が特徴です。本記事は全機能の網羅ではなく、試験で押さえる位置づけ(AIコーディング支援・ノーコード生成)とv0・Bolt.newとの違い「ノーコード=品質保証不要」という誤解に絞って書いています。料金や利用枠は2026年6月時点の情報です。利用前は料金プランと公式の最新情報を確認してください。

試験で問われる見方

生成AIパスポートやG検定では、AIコーディング支援業務利用の注意点が問われることがあります。Lovableは「プロンプトからアプリを作るブラウザツール」の代表例の一つとして、v0(UI生成)やBolt.new(フルスタック生成)と並べて覚えると整理しやすいです。試験では製品名そのものより、機密情報の入力禁止利用規約・商用条件を問う設問の方が多い点に注意してください。

よくある誤解は3つあります。「Lovable=v0と同じUI生成ツール」と同一視すること(v0はコンポーネント中心、Lovableはアプリ全体の生成・編集に寄せた体験です)。「Lovable=Bolt.newと完全に同じ」と思い込むこと(どちらもブラウザ完結ですが、技術基盤や連携先・料金体系は異なります)。そして「ノーコードで作ったアプリはそのまま本番に出してよい」と考えること(セキュリティレビューとテストが必須です)。

このサイトの演習で確認する

生成AIパスポート:一問一答 TF-0150(AIコーディング支援)TF-0348(商用利用と利用規約)実践演習 HQ-0318(業務利用のケース)

G検定:一問一答 TF-170(生成AI)

関連ツール比較:v0 · Bolt.new · Replit

Lovableとは

Lovableは、ユーザーが「予約サイトを作って」「ダッシュボードにグラフを追加して」と指示すると、AIが画面・ロジック・データ連携を含むWebアプリを生成するプロンプト駆動の開発プラットフォームです。コーディング経験が浅くてもプロトタイプを試せる点が訴求されています。

バックエンドにはLovable Cloud(認証・データベース・ホスティング)やSupabase連携が組み込まれやすく、フロントだけでなくデータを持つアプリまで一気通貫で作る体験が特徴です。試験では「ノーコード系AIアプリビルダー」「v0・Bolt.newと並ぶ生成ツール」として覚えるとよいです。

提供元はLovable(lovable.dev)です。名称は「愛される・作れる」といった英語のlovableに由来し、Loveableと表記されることもありますが、公式ドメインはlovable.devです。

できること(主な機能)

主な機能を整理します。

プロンプトからアプリ生成

自然言語の指示から画面レイアウト・コンポーネント・ロジックを生成。チャットで反復改修できます。

Lovable Cloud・Supabase連携

Lovable Cloudで認証・DB・ホスティングを一体利用するか、Supabaseを外部連携してデータ付きアプリをプロンプトから構築できます。

ライブプレビュー

生成したアプリをブラウザ上で即座に確認。デザイン変更や機能追加を短いサイクルで試せます。

コードのエクスポート

生成物をダウンロードしたり、GitHubへ連携したりできます(プラン・時期で機能は変動)。

ノーコードに近い体験

非エンジニアでもMVPを試作できますが、本番運用にはコード理解とレビューが依然として必要です。

デプロイ・公開

ワンクリック公開やホスティング連携が用意されていることがあります(詳細は公式確認)。

AIコーディングツールとの位置づけ

v0がReact UIコンポーネントの生成に強みを持つなら、Lovableはアプリ全体の生成とデータ連携に寄せた体験です。Bolt.newはWebContainerでブラウザ内に開発環境を構築する点が特徴で、LovableはLovable CloudやSupabase連携を前提としたアプリ構築が訴求されています。いずれも生成AIのLLMを開発フローに組み込むツールですが、出力の粒度とバックエンドの扱いで覚え分けましょう。

料金プランの考え方

Lovableはクレジット制のサブスクリプションです。無料プランから始められますが、本格開発では有料プランへの移行が前提になります(2026年6月時点。公式のプランとクレジットを確認してください)。

Free

$0

1日5クレジット(月最大30)

Pro

$25/月

月100クレジット+日次5

Business

$50/月

SSO・チーム管理

プラン 料金・クレジット(2026年6月時点) 向いている人
Free $0。メッセージ送信に1日5クレジット(UTC深夜リセット)、月最大30クレジット。日次クレジットは繰り越し不可。 お試し・学習・ワークフローの確認
Pro $25/月(年払いあり)。月100クレジット+日次5クレジット(月最大150まで)。カスタムドメイン・クレジット繰越など。 個人開発者・フリーランス
Business $50/月(年払いあり)。Proの機能に加えSSO、チームワークスペース、学習データ除外(opt-out)など。 チーム・部門での共同開発
Enterprise 企業規模に応じたカスタム料金。SCIM、専用サポート、監査ログなど。 大規模組織・ガバナンス重視の企業

商用・クライアント案件では、生成コードの権利関係と利用規約、社内のセキュリティポリシーを必ず確認してください。APIキーや顧客データをプロンプトに含めないなど、機密情報の取り扱いには特に注意が必要です。

はじめ方・基本的な使い方

アカウント登録後、基本的な流れは次のとおりです。

  1. 公式サイトにアクセス lovable.dev を開き、アカウントを作成します(Google/GitHub連携など)。
  2. プロンプトでアプリを指示 例:「予約管理アプリを作って」「ユーザー認証付きのToDoリストを追加して」
  3. 生成とプレビューを確認 AIが画面とロジックを生成。プレビューで動作とデザインを確認します。
  4. チャットで反復改修 デザイン変更・機能追加・バグ修正を会話形式で依頼し、都度プレビューで検証します。
  5. エクスポートまたは公開 必要に応じてコードをダウンロード、GitHubへプッシュ、またはLovable Cloudで公開します。
Lovableの公式イメージ
出典:Lovable公式(lovable.dev)

ビジネスでの活用例

社内ガイドラインと利用規約の確認が前提です。

プロトタイピング

  • 新機能のUI/UXを数時間で試作
  • 社内デモ用のMVP作成
  • 企画会議のたたき台

非エンジニアの学習

  • プロダクトマネージャーのアイデア可視化
  • 生成AIパスポートのケース演習の補助
  • Webアプリの仕組みを体験する教材

開発の前段階

  • 要件確認用の動くモック作成
  • Lovable Cloud/Supabase連携の検証
  • 生成コードを起点に本番開発へ引き継ぎ

メリット・デメリット

メリット デメリット
プロンプトからアプリ全体を素早く生成 無料枠ではAI利用量に制限がある
Lovable Cloud/Supabaseでデータ付きアプリを構築しやすい 複雑な既存コードベースの日常開発には向きにくい
ノーコードに近い体験で非エンジニアも試せる 生成コードの品質は一定ではなくレビュー必須
v0・Bolt.newと並ぶ選択肢として比較検討しやすい 機密データをプロンプトに含めるリスクがある

v0・Bolt.new・Replitとの比較

ノーコード系AIアプリ生成で名前が並びやすい4つを整理します。

項目 Lovable v0 Bolt.new Replit
提供元 Lovable Vercel StackBlitz Replit
製品の形 AIアプリビルダー(ブラウザ) UIコンポーネント生成 AIアプリビルダー(WebContainer) クラウドIDE+ホスティング
主な強み アプリ全体+Lovable Cloud/Supabase React UIの高速生成 フルスタックをブラウザ内で生成 多言語対応・実行・公開の総合環境
バックエンド Lovable Cloud/Supabase連携 UI中心(APIは別途) フルスタック生成 クラウドVM上で実行
試験での覚え方 ノーコード系アプリ生成 Vercel製・UI生成 StackBlitz製・ブラウザ完結 クラウドIDEの代表例

UI部品を素早く作るならv0、Lovable Cloud/Supabase連携込みでアプリ全体を試すならLovable、WebContainerでフルスタックをブラウザ内生成するならBolt.new、多言語のクラウド開発環境ならReplit、という使い分けが現実的です。

こんな人におすすめ

  • プロンプトからデータ連携付きのWebアプリを素早く試したい人
  • v0(UI)とLovable(アプリ全体)の違いを整理したい受験生
  • 非エンジニアでもMVPを作りたい起業家・PM
  • Lovable CloudやSupabaseで認証・DB付きアプリのたたき台を作りたい人

あえて向いていないのは、大規模な既存リポジトリの日常開発Cursorの方が適する)や、会社が外部AIツールへのコード送信を禁止している場合(社内承認と代替手段の検討が先)です。

よくある質問

Lovableは無料で使えますか?

はい。Freeプラン($0)でプロンプトからアプリの生成・編集を試せます。メッセージ送信は1日5クレジット・月最大30クレジットの上限があります。本格開発ではPro($25/月・月100クレジット)以上が必要になることが多いです。最新の枠はLovable公式ドキュメントで確認してください。

Lovableとv0の違いは?

v0(Vercel)は主にReact UIコンポーネントの生成・プレビューに強みがあります。Lovableはアプリ全体の生成に加え、Lovable CloudやSupabase連携を含むデータ付きアプリの構築体験が中心です。UI部品を素早く作るか、アプリ全体を丸ごと作るか、という整理が試験・選定の両方で役立ちます。

LovableとBolt.newの違いは?

どちらもブラウザ上でプロンプトからアプリを生成しますが、技術基盤が異なります。Bolt.newはStackBlitzのWebContainer上でフルスタックを生成・実行します。LovableはLovable CloudやSupabase連携を前提としたアプリ構築が特徴です。ゼロからフルスタックをWebContainerで試すか、Lovable Cloud/Supabase連携込みで構築するか、という観点で選びます。

LovableはLoveableと同じですか?

同一サービスを指すことが多いです。公式サイトのドメインはlovable.devです。試験や資料では「Lovable(ラバブル)」表記が一般的ですが、英語表記のLoveableと混同しないよう、公式名称を確認してください。

ノーコードで作ったアプリはそのまま本番に出せますか?

いいえ。生成アプリはプロトタイプや検証用の出発点として扱い、セキュリティレビュー・テスト・利用規約の確認が必須です。認証・データ保護・商用条件は公式ドキュメントと社内ポリシーで必ず確認してください。