Lovable は、
AIに指示するだけでWebアプリを作れる開発ツールです。

特に

• SaaS

• AIツール

• Webアプリ

を コード生成 → デプロイまで自動化できます。
（いわゆる AIフルスタック開発ツール）

1️⃣ Lovableとは

簡単に言うと

ChatGPT
+
GitHub
+
Webアプリ開発

を合体させたようなサービスです。

できること

AIに指示
↓
アプリ生成
↓
コード生成
↓
GitHub保存
↓
デプロイ

2️⃣ Lovableの基本の使い方

手順

① サイトにアクセス

https://lovable.dev

② GitHubでログイン

連携するサービス

• GitHub

すると

AIプロジェクト作成

画面になります。

③ AIに作りたいアプリを説明

例

Create an AI SaaS that generates LinkedIn posts.
Use Next.js and Supabase.
Add authentication and dashboard.

するとAIが

UI
Backend
Database

を自動生成します。

3️⃣ Lovableの開発フロー

基本フロー

Prompt
↓
AIコード生成
↓
UI生成
↓
DB生成
↓
GitHub保存

作られる技術

• Next.js

• Supabase

• Vercel

4️⃣ AI SaaSを作る例

プロンプト

Build an AI SaaS that summarizes PDFs.

Features:
- User login
- File upload
- AI summary
- Dashboard

AIが生成するもの

ログイン
ダッシュボード
AI処理
DB

5️⃣ Lovableの画面

主な画面

Chat

AIと会話して開発

Code

生成コード

Preview

アプリ表示

Deploy

デプロイ

6️⃣ GitHubに保存

Lovableは自動で

GitHub repo

を作ります。

例

lovable-ai-saas

そこに

Next.js
Supabase

コードが保存されます。

7️⃣ デプロイ

通常は

• Vercel

に自動デプロイできます。

手順

Connect Vercel
↓
Deploy

8️⃣ Lovableの強み

① UIを自動生成

React UI

② DBも作る

Supabase schema

③ SaaS構造を作る

login
dashboard
billing

9️⃣ Lovableで作れるもの

代表例

AIチャット
AI記事生成
AI議事録
AI画像生成
AI SaaS

10️⃣ Lovableの弱点

注意

大規模アプリは修正必要

AI生成コードは

70〜80%完成

です。

AI SaaS開発での使い方

多くの開発者は

Lovable
↓
プロトタイプ作成
↓
GitHub
↓
自分で修正

という流れです。

ここでは Lovable を使って
**AI SaaSを30分で作る実際の手順（海外の個人開発者のやり方）**を説明します。

ゴールの例

AI記事生成SaaS
・ログイン
・ダッシュボード
・AI生成
・保存

技術スタック

• Frontend → Next.js

• Backend → Supabase

• AI → OpenAI

• Deploy → Vercel

全体の流れ（30分）

① Lovableでプロジェクト作成
② AIにSaaSを生成させる
③ Supabase接続
④ OpenAI API接続
⑤ デプロイ

① Lovableにログイン（3分）

Lovableサイトへ

https://lovable.dev

ログイン方法

Login with GitHub

連携

• GitHub

すると

Create Project

画面になります。

② AIにSaaSを作らせる（5分）

ここが一番重要です。

このプロンプトをそのまま使えます。

AI SaaS生成プロンプト

Build an AI SaaS web app.

Stack:
Next.js
Supabase

Features:
- User authentication
- Dashboard
- Text input
- AI text generation
- History of generated content

Design:
- Modern SaaS UI
- Sidebar navigation
- Clean dashboard

AIが自動で

Next.js project
UI
login
dashboard
API

を生成します。

③ UIをAIで修正（5分）

生成後

Preview

でアプリが見れます。

修正はチャットで指示。

例

UI改善

Make the dashboard more modern.
Add a left sidebar.

機能追加

Add a page for AI blog generation.

履歴追加

Save generated text to database.

④ Supabase接続（5分）

Lovableは Supabaseと相性が良いです。

Supabaseで作る

1. プロジェクト作成

2. APIキー取得

Project Settings
↓
API

取得

SUPABASE_URL
SUPABASE_ANON_KEY

Lovableに設定

環境変数

SUPABASE_URL=
SUPABASE_ANON_KEY=

すると

login
database

が動きます。

⑤ OpenAI API接続（5分）

AI機能を追加します。

AIプロンプト

Add OpenAI API integration.

Feature:
User enters text prompt
AI generates response
Show result on page
Save result to database

必要な環境変数

OPENAI_API_KEY

APIキー

• OpenAI

⑥ AI機能ページを作る（5分）

例

/generate

ページ

AI指示

Create a page where users can enter a topic.
Call OpenAI API and generate an article.
Display the result.

すると

input
button
result

が生成されます。

⑦ デプロイ（2分）

デプロイ

• Vercel

手順

Connect GitHub
↓
Deploy

数分で公開されます。

完成するAI SaaS

30分でできる構成

AI SaaS
├ login
├ dashboard
├ AI生成
├ 保存
└ 履歴

AI SaaSの基本構造

Frontend
Next.js

Backend
Supabase

AI
OpenAI

Hosting
Vercel

これは実際に

個人開発AI SaaSの定番構成です。

海外の個人開発者の使い方

多くは

Lovable
↓
プロトタイプ
↓
GitHub
↓
手動修正

という流れです。

Lovableで作りやすいAI SaaS

特に相性がいいのは

AI記事生成
AI翻訳
AI議事録
AIメール生成
AIコード生成