Lovable — AIフルスタックアプリジェネレーター

Lovable — AIフルスタックアプリジェネレーター は何をしますか？

概要

Lovable (lovable.dev) は、ブラウザ上でのチャットプロンプトからWebアプリを生成・編集します。プロジェクトはTailwind CSSとshadcn/uiを使用します。2026年5月以降に作成されたアプリはTanStack Start（サーバーレンダリング）を使用し、それ以前のものはReact + Viteです。バックエンドには、Lovable Cloud（Supabaseのオープンソーススタック上に構築された、組み込みデータベース、認証、ストレージ、リアルタイム、関数）または自身のSupabaseプロジェクトを選択できます。コードはGitHubと双方向に同期可能で、アプリはlovable URLまたはカスタムドメインに公開されます。インストール不要でCLIもありません。エージェントは、適切なプロンプトの作成、出力のレビュー、同期されたリポジトリでの作業を支援します。

手順

1. 最初のプロンプトの前に計画する

4つの質問に答えてください：それは何か、誰が使うか、なぜ使うか、主要なアクションは何か。プレースホルダーではなく、実際のコピーを使ってアプリをセクションごとに説明します。Lovableのガイダンス：全ページのプロンプトはノイズを生み、セクションベースのプロンプトはシグナルを生みます。デザインの方向性（「ミニマル」「プレミアム」「遊び心」）を指定して、タイポグラフィとスペーシングを導きます。

2. バックエンドを選択する

• 新しいプロジェクト：Lovable Cloud（デフォルト）またはSupabase。バックエンドを最初に有効化するときに選択します。
• 既存のSupabase接続プロジェクトは引き続き動作します。SupabaseからCloudへの移行はなく、Cloudから自身のSupabaseプロジェクトへのワンクリック移動もないため、早期に決定してください。

3. モードで作業する

Lovableにはエージェントモード（構築・変更）とチャットモード（議論・計画、編集なし）があります。プランモードは1メッセージあたり1クレジットを消費し、通常の編集は複雑さに応じて約0.5〜1.7クレジットを消費します。「構築前に必要な質問があればしてください」と追加すると、明確化の質問が得られます。永続的なルール（スタック、命名、トーン）はプロジェクトまたはワークスペースのナレッジに保存し、チャット間で維持されるようにします。

4. セキュリティをレビューする

生成されたテーブルには行レベルセキュリティ(RLS)が必要です。各ポリシーを読み、組み込みのセキュリティスキャンを実行し、公開前に2人の異なるユーザーでテストします。

5. コードを同期して所有する

プロジェクト設定からGitHubを接続します。同期は一度に1つのブランチ（デフォルトブランチ、切り替え可能）で双方向に行われます。新しいブランチはアクティブなブランチから開始されます。LovableプロジェクトはGitHubにエクスポートのみ可能で、既存のリポジトリをインポートすることはできません。10 MBを超えるファイルはLovableで編集できません。切断すると両方のコピーが保持されますが、再接続すると新しいリポジトリが作成されます。

6. プラン

無料、プロ、ビジネス、エンタープライズがあります。価格はシート数ではなくクレジット単位です。無料プランには1日5ビルドクレジット（月30まで）と少量のCloudクレジットが含まれます。最新の価格はlovable.dev/pricingで確認してください。

例

例1：紹介機能付きウェイトリストアプリ

リクエスト：「Lovableを使用してSaaSウェイトリストを構築する：カウンター付きサインアップフォーム、紹介リンク、リーダーボード、管理ページ」

貼り付けるプロンプト：

Etsyセラー向け配送ラベルツール「Parcelly」のウェイトリストサイトを構築してください。
セクション：ヒーロー（「ラベルを10秒で印刷」）にメールフォームとライブ
サインアップカウンター、上位10人の紹介者リーダーボード、メールログインが必要な
/adminページ（サインアップをリスト表示し、CSVエクスポート）。
各サインアップは紹介者にクレジットを付与する一意の紹介リンク（?ref=code）を取得します。
スタイル：ミニマル、ダークモード。データと認証にはLovable Cloudを使用してください。
構築前に必要な質問があればしてください。

結果：Lovableが招待メールについて質問し、ページ、signupsテーブルとポリシー、プレビューURLを作成します。生成されたものと比較するための適切なテーブルとポリシーセット：

create table public.signups (
  id uuid primary key default gen_random_uuid(),
  email text not null unique,
  referral_code text not null unique default encode(gen_random_bytes(6), 'hex'),
  referred_by uuid references public.signups(id),
  created_at timestamptz not null default now()
);
alter table public.signups enable row level security;
create policy "誰でも参加可能" on public.signups for insert to anon with check (true);
-- すべての行の読み取りは、例：user_rolesテーブルを介して管理者のみに制限する必要があります

例2：イテレーションとGitHubへの同期

リクエスト：「経時的なサインアップ数のチャートを追加し、コードを自分のリポジトリに取得してCursorで作業を続けられるようにする」

チャットプロンプト：「/adminに既存のデータを使用した1日あたりのサインアップ数の折れ線チャートを追加してください。サインアップがない場合は空の状態を表示してください。」その後：プロジェクト設定、GitHub、接続、アカウントを選択し、リポジトリを作成します。その後：

git clone [email protected]:parcelly-dev/parcelly-waitlist.git
cd parcelly-waitlist && npm install && npm run dev

同期されたブランチへのプッシュはLovableに表示されます。ローカルでの編集はそのブランチ上で行います（またはプロジェクト設定でブランチを切り替えます）。

ガイドライン

• すべてのコア機能を最初のプロンプトに入れ、その後はフォローアップごとに1つのことを変更して、バージョン履歴を有用に保ちます。動作するバージョンはブックマークしてください。
• チャットにAPIキーを貼り付けないでください。シークレット/統合ダイアログを使用してください。サーバーサイドキーはバックエンド関数に属し、クライアントコードには決して含めないでください。
• 生成されたRLSを盲目的に信頼しないでください。insert ... with check (true)ポリシーは公開フォームには適切ですが、selectポリシーはそうではありません。
• クレジットはビルド、ホスティング、AI機能によって消費され、返金されません。質問にはチャット/プランモードを優先してください。
• ネイティブモバイルアプリ、大規模なカスタムバックエンド、複雑な既存のモノレポには適していません。その場合は、リポジトリ内でコーディングエージェントを使用してください。