【保存版】コードゼロでWebアプリが完成する——Lovable完全ガイド、今日から使える【🧰 AIツール大全128選第68回】

2026年8月25日 23:17

「アプリを作りたい。でも自分はエンジニアじゃない。」

その一文で、あなたは何かを諦めてきたことはないだろうか。

たとえば、顧客管理の小さなツール。社内の申請フォーム。自分のサービスのランディングページ。「誰かに頼まないといけない」「外注するお金も時間もない」——そう思って、メモ帳かスプレッドシートで妥協した経験、一度や二度ではないはずだ。

Lovableは、そのループをひとつ断ち切るツールだ。

日本語で「こんなアプリが欲しい」と打ち込むと、数分でWebアプリが動き始める。コードを書かなくていい。フレームワークを知らなくていい。必要なのは「何を作りたいか」という言葉だけだ。

この記事は、Lovableをまったく触ったことがない人が、今日の夜に登録して、最初のアプリを公開するまでを一気通貫でたどれるガイドだ。「AIツール大全128選」連載の第68回として、書籍付録に掲載したLovableを深掘りする。

---

🧭 まず全体像を把握する——この記事の構成

この記事は3つのパートで構成されている。

① Lovableとは何か／誰に向くか（プラットフォームを理解する）
② 2026年8月時点の最新料金とプライバシー設定（使う前に知っておく事実）
③ 登録→プロンプト入力→アプリ公開まで（今日動けるステップ）

③には、コピペで使えるプロンプトテンプレートをそのまま置いた。
まず読んで、それから手を動かしてほしい。

---

🔍 Part 1｜Lovableとは何か——「作れない」という壁をなくすツール

Lovableが解決している問題

ノーコードツールはこれまでも多数あった。Webflow、Glide、Bubble——それぞれ強力だが、「操作を覚える」というコストがある。ドラッグ＆ドロップのUIを習得し、データ構造を設計し、ロジックをブロックで組む。それ自体が一つの技術だ。

Lovableのアプローチは違う。インターフェースそのものを自然言語にした。

「ユーザーが名前とメールアドレスを入力して送信できるお問い合わせフォームを作って。送信後は『ありがとうございました』と表示する」——この一文を打ち込むと、Lovableはそれに対応するReactコードとUIを生成し、すぐに動作確認できる状態で返してくる。

修正も同じだ。「フォームの背景色を白にして」「送信ボタンを右下に移動して」——日本語で追加指示を送るたびに、アプリがアップデートされる。

どんな人に向くか

Lovableが特に力を発揮するのは、次のような状況だ。

向いている人・場面：
- エンジニアに依頼するほどでもない「社内の小さなツール」を自分で作りたい人
- スタートアップやフリーランスで、MVPをすばやく検証したい人
- デザイン案（FigmaやCanvaで作ったもの）をそのまま動くアプリにしたい人
- ランディングページやポートフォリオサイトを持ちたいが、HTMLを触りたくない人

向いていない場面：
- 大規模なデータ処理や複雑な認証が必要なシステム
- 既存のレガシーシステムとの深い連携が必要な業務システム
- リアルタイム処理・高負荷なトランザクションを扱うアプリ

「エンジニアを雇うほどじゃないけど、スプレッドシートでは限界」——その隙間を埋めるのがLovableのポジションだ。

生成物の中身について

Lovableが生成するのは、実際に動くコード（主にReact＋TypeScript）だ。「AIがなんとなく動く画面を作る」ではなく、GitHubと連携してコードをエクスポートすることもできる。つまり、後から本物のエンジニアに引き渡して改修・拡張する起点としても使える。

非エンジニアが「形にする」ツールであり、エンジニアが「たたき台を爆速で作る」ツールでもある。

💰 Part 2｜2026年8月時点の料金プランとプライバシー設定

クレジット制の仕組みを先に理解する

Lovableはクレジット（Credit）制を採用している。AIにプロンプトを送って何かを生成・編集するたびに、クレジットが消費される仕組みだ。

月のクレジット上限を把握してから使い始めると、「気づいたら使い切っていた」という事態を防げる。

| プラン | 月額 | クレジット | 主な特徴 |
|---|---|---|---|
| Free | $0 | 1日5クレジット（月150上限） | 試すには十分。プロジェクトは公開状態 |
| Pro | $25/月 | 月100クレジット＋1日5クレジット（月最大150） | プライベートプロジェクト・カスタムドメイン・Lovableバッジ非表示 |
| Business | $50/月 | 月100クレジット | SSO・セキュリティセンター・チーム向け機能 |
| Enterprise | 要問合せ | カスタム | 大規模・個別契約 |

2026年後半からは年払いで2ヶ月分無料（約17%割引）のオプションが追加されている。Proの場合、年払いだと実質約$250/年になる計算だ。

ただし料金・クレジット数は変更されることがある。利用前に必ず公式サイト（https://lovable.dev/）で最新プランを確認してほしい。

Proプランで何が変わるか

Freeで最も気になるのは「プロジェクトが公開状態になる」点だ。業務で使う場合やクライアント向けに作る場合、プロジェクトのコードやチャット履歴を非公開にしたいことがほとんどだろう。Proプランからプライベートプロジェクトが使えるようになるため、本格的に使うならProへの移行を検討したい。

カスタムドメインも使えるため、「自分のサービス」としてURLを整えることができる。

⚠️ 必ず確認｜データ学習のオプトアウト設定

2026年9月9日以降、FreeおよびProプランでは、ユーザーのデータがAIモデルの学習に使われる可能性がある。（執筆時点の公式変更ログによる）

これを避けたい場合は、事前にオプトアウト設定を行う必要がある。

設定手順：
1. Lovableにログイン
2. 右上のアカウントアイコン →「Account settings（アカウント設定）」
3. 「Privacy（プライバシー）」セクションを開く
4. 「Data collection opt out（データ収集オプトアウト）」を有効にする

この設定は自分のデータにのみ適用される。ワークスペースに他のメンバーがいる場合、それぞれが個別に設定する必要がある点も覚えておきたい。

業務でLovableを使う場合、この設定は使い始める前に必ず確認してほしい。

BusinessプランおよびEnterpriseプランはデフォルトでデータ学習の対象外となっているが、変更がある可能性があるため公式ドキュメントでも確認を推奨する。

🛠 Part 3｜今日から動くための操作ガイド

ここからが本番だ。アカウント登録から最初のアプリを公開するまでを、順を追って説明する。

---

Step 1｜アカウント登録

公式サイト（https://lovable.dev/）にアクセスする。

GoogleアカウントまたはGitHubアカウントでのソーシャルログインに対応している。メールアドレスでの登録も可能だ。

【スクショ：Lovableのトップページ（サインアップ画面を貼る）】

登録後、自動的にダッシュボードに移動する。初期状態では新しいプロジェクトを作成できる状態になっている。

💡 最初に必ずやること：
登録直後に、Part 2で説明したデータ学習オプトアウト設定を確認しておこう。業務利用の場合は特に重要だ。

---

Step 2｜プロジェクトを作成し、最初のプロンプトを送る

ダッシュボードの「New Project（新しいプロジェクト）」をクリックする。

テキスト入力欄が現れる。ここに「何を作りたいか」を日本語で書けばいい。

コツは「使う人・目的・主な機能」の3点をセットで書くこと。曖昧なプロンプトは曖昧なアプリを生む。

以下はそのままコピペして試せるプロンプト例だ。自分の用途に合わせて書き換えて使ってほしい。

---

【プロンプト例①】シンプルなお問い合わせフォーム

> あなたはWebアプリの開発アシスタントです。以下の仕様でWebアプリを作成してください。
>
> 目的：個人・小規模事業者がお問い合わせを受け付けるためのフォームページ
>
> 必要な機能：
> ・入力欄：お名前（必須）、メールアドレス（必須）、お問い合わせ内容（テキストエリア、必須）
> ・送信ボタン（クリックで確認ダイアログ表示）
> ・送信後に「お問い合わせありがとうございました。2営業日以内にご連絡いたします。」と表示
>
> デザイン：清潔感のある白背景。アクセントカラーは深めのブルー。スマートフォンでも見やすいレスポンシブデザイン。
>
> 制約：バックエンドは不要。フロントエンドのみで完結させてください。

---

【プロンプト例②】社内向けタスク管理ツール（ミニマル版）

> あなたはWebアプリの開発アシスタントです。以下の仕様でシンプルなタスク管理アプリを作成してください。
>
> 目的：5〜10人規模のチームが共有できるタスクリスト
>
> 必要な機能：
> ・タスクの追加（タスク名・担当者名・期限日を入力）
> ・タスクの完了チェック（チェックするとグレーアウト）
> ・未完了タスクと完了タスクを分けて表示
> ・タスクの削除ボタン
>
> デザイン：シンプルでモノクロに近い配色。余白を広めに取り、視認性を重視してください。
>
> データはブラウザのローカルストレージに保存してください。

---

【プロンプト例③】ポートフォリオサイト（1ページ構成）

> 以下の情報を使って、シンプルな1ページのポートフォリオWebサイトを作ってください。
>
> 名前：[自分の名前]
> 職種：[フリーランスデザイナーなど]
> 自己紹介：[2〜3文の紹介文]
> 制作実績：[実績タイトル3件程度]
> 連絡先：[メールアドレス]
>
> デザイン：ミニマルで洗練されたデザイン。上から順にヒーローセクション→自己紹介→実績→連絡先の構成にしてください。

---

プロンプトを送信すると、Lovableがコードを生成し始める。数十秒〜数分でプレビューが表示される。

【スクショ：プロンプト入力後のコード生成画面とプレビュー表示（操作画面を貼る）】

---

Step 3｜修正・調整をチャットで重ねる

最初の生成物が完璧である必要はない。Lovableの強みはチャット形式で修正を重ねられる点にある。

「ボタンの色をオレンジに変えて」「フォントをもう少し大きくして」「入力欄を3つから5つに増やして」——このような追加指示を日本語で送るたびにアプリが更新される。

修正プロンプトの書き方のコツ：

> 今の画面について、以下の3点を修正してください。
>
> ①「送信する」ボタンの背景色を #2563EB （ブルー）に変更する
> ②「お名前」の入力欄の下に「※ 姓名の順で入力してください」というヒントテキストを追加する
> ③ ページ全体の横幅を最大 640px に制限し、中央揃えにする

複数の修正を一度に送るより、1〜3点ずつ具体的に指定すると意図通りに反映されやすい。

【スクショ：チャット欄で修正指示を送っている画面（操作画面を貼る）】

---

Step 4｜アプリを公開する

完成したアプリは、Lovable上でそのままホスティングできる。

ダッシュボードまたは編集画面から「Publish（公開）」または「Share（共有）」を選択すると、`yourproject.lovable.app`のようなURLが発行される。これをそのまま共有できる。

Proプランの場合は：
- 公開設定をプライベートに変更し、特定のユーザーだけアクセス可能にできる
- カスタムドメイン（自分で取得したドメイン）を紐付けられる

【スクショ：公開設定・URLが発行された画面（操作画面を貼る）】

FigmaやCanvaのデザインデータがある場合は、プロンプト入力前に画像としてアップロードすることで、そのデザインを反映したアプリを生成できる。既にデザインが決まっている場合には積極的に活用したい機能だ。

---

✋ ここは自分で判断する——AI任せにしてはいけないポイント

Lovableは便利だが、生成されたものをそのまま本番公開する前に確認すべき点がある。

必ず自分で確認するチェックリスト：

- リンクと動作確認：ボタンが意図通りに動くか、全ての入力欄が機能するか実際に操作して確認する
- スマートフォン表示：実機またはブラウザの開発者ツールで表示崩れがないか確認する
- 固有名詞・文言の正確さ：会社名・サービス名・URLなど、AIが補完した文字列に誤りがないか確認する
- 個人情報の取り扱い：フォームに個人情報を受け取る機能がある場合、プライバシーポリシーの掲示や適切なデータ処理を自分で設計する必要がある
- セキュリティの前提を確認：Lovableはフロントエンドの生成が得意だが、バックエンドのセキュリティ設計はAIに丸投げしないこと。特に認証・決済・個人データを扱う場合は専門家に確認を推奨する

「作業はAIに渡す、判断は自分がする」——この姿勢が、Lovableを安全に・長く使い続けるための軸になる。

---

📌 今日のまとめ（保存版）

① Lovableは「言葉でアプリを作るツール」——コードなし、操作習得なし、自然言語だけ

エンジニアに頼むほどでもない小さなツールを、今日から自分で作れる。ランディングページ・社内フォーム・MVP検証——この範囲であれば、Lovableは実用に耐える。

② 2026年8月時点の料金は Free/$25/$50 のクレジット制——使い始める前にデータ学習オプトアウトを確認する

特に業務で使う場合、「Account settings → Privacy → Data collection opt out」の設定を最初に済ませておくことを強く勧める。年払いオプションは2026年後半から追加。プランや料金は変わることがあるため、公式サイトで最新を確認してほしい。

③ 明日からこれだけ試して——まず1つ「あれが欲しかった」小さなツールを作ってみる

完璧なアプリを目指さなくていい。「自分の連絡先をまとめたシンプルな1ページ」でも、「チームで共有したいメモ帳」でも、何でもいい。プロンプト例③（ポートフォリオサイト）が一番入りやすいはずだ。最初の1本を出力させることで、「あ、こういう感覚か」がわかる。

---

この記事で紹介したLovableを含む、AI実務ツール128選の図解・索引を一冊にまとめた書籍『最新！AI実用ツール完全図解大全』（一般社団法人日本AIラボ）も、合わせて参照いただくと体系的に整理できる。ツールごとに「何に使えるか」「何が向かないか」を図解で一覧できるため、記事と一緒に手元に置いておくと便利だ。

X（旧Twitter）の公式アカウント @jpAIlab でも、AIツールの使い方や働き方の実践ネタを毎日発信している。フォローして、明日のインプットに使ってほしい。

#AI #生成AI #ノーコード #Lovable #AIツール #仕事術 #業務効率化 #アプリ開発 #AIリテラシー #日本AIラボ

---

▶ Makuake先行応援購入：https://www.makuake.com/project/navibookai/
▶ 公式ショップ（著者直営）：https://jpailab.theshop.jp/items/149914138
▶ Amazon：https://amzn.asia/d/0eNMt0a1

【保存版】コードゼロでWebアプリが完成する——Lovable完全ガイド、今日から使える【🧰 AIツール大全128選 第68回】