Lovable入門：プロンプトだけでWebアプリを作るノーコード開発の最前線

Lovableとは

Lovableは、自然言語のプロンプトからフルスタックのWebアプリケーションを生成するAIノーコード開発プラットフォームです。旧名「GPT Engineer」から2024年にリブランドされました。

特徴は、生成されるコードがReact + TypeScript + Tailwind CSS + shadcn/uiという、実務で広く使われる技術スタックであること。生成されたコードはGitHubにエクスポートでき、開発者が手動で拡張することも可能です。

Lovableでできること

Webアプリの生成：「TODOアプリを作って」で即座にアプリが完成
データベース連携：Supabaseとのワンクリック連携
認証機能：ログイン/サインアップをプロンプトで追加
レスポンシブ対応：モバイル対応のUIを自動生成
デプロイ：ワンクリックで公開URLを生成

始め方

1. アカウント作成

Lovableの公式サイトでアカウントを作成します。Googleアカウントでのサインアップに対応しています。

2. 最初のプロンプト

ダッシュボードから「New Project」を選択し、作りたいアプリを記述します。

レシピ管理アプリを作ってください。
- レシピの一覧表示（カード形式）
- レシピの追加・編集・削除
- 材料と手順を入力できるフォーム
- カテゴリでのフィルタリング
- レスポンシブ対応

この指示だけで、数十秒後にはプレビュー可能なアプリが生成されます。

3. 対話的な修正

生成結果を見ながら、追加の指示で調整します。

「ヘッダーの色をネイビーに変更して」
「検索機能を追加して」
「お気に入り機能をつけて、ハートアイコンで表示して」

各指示ごとにリアルタイムでプレビューが更新されます。

生成されるコードの中身

Lovableが生成するコードは以下の技術スタックです。

| 項目 | 技術 | |------|------| | フレームワーク | React + Vite | | 言語 | TypeScript | | スタイリング | Tailwind CSS | | UIコンポーネント | shadcn/ui | | ルーティング | React Router | | 状態管理 | TanStack Query | | バックエンド | Supabase |

生成されたコードの例：

// src/pages/Recipes.tsx
import { useQuery } from "@tanstack/react-query";
import { supabase } from "@/integrations/supabase/client";
import RecipeCard from "@/components/RecipeCard";

const Recipes = () => {
  const { data: recipes, isLoading } = useQuery({
    queryKey: ["recipes"],
    queryFn: async () => {
      const { data, error } = await supabase
        .from("recipes")
        .select("*")
        .order("created_at", { ascending: false });
      if (error) throw error;
      return data;
    },
  });

  if (isLoading) return <div>読み込み中...</div>;

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {recipes?.map((recipe) => (
        <RecipeCard key={recipe.id} recipe={recipe} />
      ))}
    </div>
  );
};

このように、実務レベルのコードが自動生成されます。

Supabase連携

LovableはSupabase（オープンソースのFirebase代替）とネイティブ連携しています。

データベースの設定

「Supabaseを接続して、recipesテーブルを作成して。
 カラム: id, title, description, ingredients, steps,
 category, image_url, created_at」

このプロンプトだけで：

Supabaseプロジェクトが自動作成
テーブルとカラムが定義
Row Level Security（RLS）ポリシーが設定
フロントエンドのCRUDコードが生成

認証機能の追加

「メールとパスワードでのログイン機能を追加して。
 ログインしていないユーザーはレシピの閲覧のみ可能にして」

Supabase Authと連携し、認証フローが自動実装されます。

効果的なプロンプトの書き方

良いプロンプトの例

予約管理ダッシュボードを作ってください。

画面構成:
1. ダッシュボード（今日の予約一覧、統計サマリー）
2. 予約一覧（テーブル表示、日付フィルター、ステータスフィルター）
3. 新規予約フォーム（顧客名、日時、メニュー選択、備考）
4. 顧客管理（顧客リスト、予約履歴）

デザイン:
- モダンでクリーンなUI
- サイドバーナビゲーション
- ダークモード対応

プロンプトのコツ

画面構成を明示する：どんなページが必要か列挙する
データ構造を伝える：どんな情報を扱うか明確にする
デザインの方向性：「モダン」「ミニマル」「ダッシュボード風」など
機能要件を具体的に：「フィルタリング」「ソート」「検索」など

デプロイ

Lovable内でのデプロイ

「Share」ボタンから、ワンクリックで公開URLが生成されます。独自ドメインの設定も可能です。

GitHubへのエクスポート

生成されたコードはGitHubリポジトリにエクスポートできます。

Settings → GitHub → Connect Repository

エクスポート後は、VercelやNetlifyでの自前デプロイも可能です。

料金プラン

| プラン | 月額 | メッセージ数 | |--------|------|-------------| | Free | $0 | 5回/日 | | Starter | $20 | 100回/月 | | Launch | $50 | 500回/月 | | Scale | $100 | 1500回/月 |

無料プランでも基本機能を試せますが、本格的な開発にはStarterプラン以上が必要です。

Lovableの強みと限界

強み

驚異的なスピード：アイデアから動くアプリまで数分
実務レベルのコード：React + TypeScriptの標準的な構成
Supabase統合：バックエンド込みのフルスタック開発
エクスポート可能：ベンダーロックインなし

限界

複雑なビジネスロジック：高度なバックエンド処理は手動実装が必要
細かいデザイン調整：ピクセル単位の調整はコード編集が必要
大規模アプリ：数十画面規模になるとプロンプト管理が複雑化
既存プロジェクト：ゼロからの構築が前提、既存コードへの統合は非対応

活用シーン

MVP（最小限の実用製品）開発

スタートアップのプロトタイプを数時間で構築。投資家へのデモや初期ユーザーテストに最適です。

社内ツール

予約管理、在庫管理、顧客管理などの社内ツールを非エンジニアでも構築できます。

ハッカソン

限られた時間で動くプロダクトを作る必要があるハッカソンで威力を発揮します。

学習用途

生成されたコードを読むことで、React + TypeScriptの実装パターンを学べます。

まとめ

Lovableは、AIノーコード開発の最前線に位置するツールです。

プロンプトだけでフルスタックWebアプリを生成
React + TypeScript + Supabaseの実務レベルのコード
GitHubエクスポートでベンダーロックインなし
MVP開発・社内ツール・プロトタイピングに最適

「コードを書かずにアプリを作る」時代は、もはや現実のものとなっています。まずは無料プランで、自分のアイデアをアプリにしてみてください。