コラボレーター
SELECK

【徹底解説】チャットだけでアプリ開発が可能！？「Lovable」の使い方を初心者向けに解説

更新日：2025 年 10 月 10 日公開日：2025 年 10 月 16 日

2025年、ソフトウェア開発の世界に新たな潮流が生まれています。それが「バイブコーディング（Vibe Coding）」です。

自然言語によるAIとの対話を通じてソフトウェア開発を行う手法のことで、元Tesla、元OpenAIのAI研究者であるアンドレイ・カルパシー氏が2025年2月に提唱しました。

バイブコーディングの普及に伴って開発プロセスが民主化されることで、非エンジニアでも「手を動かしてトライできる」世界が実現しようとしています。

SELECKでも先日、バイブコーディング向けツールをいくつかご紹介しましたが、今回は特にバイブコーディング初心者の方におすすめしたいスウェーデン発のツール「Lovable（ラバブル）」をご紹介します。

Lovableの大きな特徴は、「ECサイトを作って」「予約システムを作って」といった自然言語での指示だけで、フルスタックのアプリケーションやWebサイトを即座に生成できることです。

また、ノーコードツールのように画面上で直感的に編集できるだけでなく、AIが開発をサポート。データベースやAPI連携も簡単に設定でき、デザインからコーディング、デプロイまで一気通貫で進められる点で、多くのビジネスパーソンから支持を集めています。

例えば、こちらのクリエイター向けのアプリもLovableで作成されたものです。このようなデザインのアプリが自然言語で作れてしまうなんて、驚きですよね…！

▼Lovableで生成されたアプリケーション

公式によると、他にも勤怠管理システムや求人情報サイト、キャッシュフローのダッシュボード、プロジェクト管理ツール、言語学習ツール、ミニゲームなど幅広いコンテンツを生成できるとのこと。

そこで今回は、Lovableの概要から使い方まで、徹底解説していきます！筆者は非技術職なので、アプリを作ったことがない！という方でも利用できるように詳しくお伝えしていきますので、ぜひ実際に使いながらご覧いただけると幸いです。

＜目次＞

スウェーデン発のバイブコーディングツール「Lovable」とは？
Lovableのアカウントを作成しましょう！
早速、Lovableの機能を使ってみましょう！
実際に、Lovableでアプリを作ってみましょう！
【おまけ】バイブコーディングのプロンプト入力のコツ

※本記事に掲載している情報は、記事公開時点のものになります。サービスのアップデートにより情報が記事公開時と異なる可能性がございますので予めご了承ください。最新の情報については、Lovableの公式サイトをご参照ください。また、記事の内容についてご意見や修正のご提案がございましたらこちらまでお願いします。

スウェーデン発のバイブコーディングツール「Lovable」とは？

Lovableは、自然言語の指示だけでWebサイトやアプリケーションを開発できるAI駆動型のフルスタック開発ツールです。「こういうアプリを作りたい」という指示だけで、デザインからコーディング、API連携、データベース構築、デプロイまでを一貫して実現します。

Lovableの特徴を以下にまとめてみました。

自然言語による指示だけで、Webサイト・アプリを自動生成
Figmaデザインや手書きのワイヤーフレームなどの画像入力に対応
生成されたコードは、Lovable内で直接編集が可能
直感的にUIを調整でき、その調整が自動的にコードに反映
他のユーザーを招待し、チームでの共同作業に対応
デプロイ前のセキュリティチェック機能を搭載
作成したプロジェクトは、ワンクリックでWeb公開
アプリ内にチャットボットなどAI機能を追加可能
バックエンド開発やAPIルート生成もAIが実行

特に注目すべきは、BaaS（Backend as a Service）「Supabase」との連携です。これにより、PostgreSQLを基盤にデータベースを構築でき、クエリの自動生成が可能になります。

加えて、ユーザー認証システム（サインアップ・ログイン・アクセス制御など）を安全に管理したり、ユーザーがアップロードする画像などを保存するファイルストレージを利用したり、データベースの変更をリアルタイムでアプリに反映させたりするといったことが可能になります。

これらの作業も、ゼロからすべてを学習する必要がなく、AIのサポートを受けながら構築できます。そのため、非エンジニアでも本格的なアプリを立ち上げることができ、エンジニア初心者にとってはアプリの仕組みを実践的に学ぶ良い機会になるでしょう。

補足として、技術スタックについては、現時点で下記が採用されているとのことです。

フロントエンド：React.js, TypeScript, Tailwind CSS

バックエンド：Supabase（データベース・認証）

バージョン管理：GitHub

決済機能：Stripe

これら以外にも、さまざまな外部サービスとのAPI連携が可能で、必要に応じて機能を拡張できます。アプリ内にAI機能を追加する際は、デフォルトでGemini 2.5 Flashが使用されますが、GPT-5など他のモデルも選択可能です。（※サポートされているAIモデルの詳細こちらのページをご覧ください）

＜料金体系＞

Lovableはクレジット制で、AIに送信するメッセージの内容によってクレジットが消費される形です。基本的には1メッセージにつき1クレジットですが、複雑なタスクを要求する内容であればそれ以上を消費する場合があります。

無料プランでは1日5クレジットが付与され、月間で最大30クレジットまで利用できます。さらに、デプロイやGitHub同期は利用でき、公開プロジェクトに限り最大20人まで共同編集者を追加できます。ただし、Lovableバッジの削除ができなかったり、プロジェクトは公開のみといった制約があります。

有料プランは、月間25ドルのProプランから用意されています。Proプランでは毎月100クレジットが付与されるのに加え、無料プランと同様に毎日5クレジット（月最大150クレジット）が提供されます。

他にも、カスタムドメインの設定、Lovableバッジの削除、プライベートプロジェクトの作成などが可能になります。月額50ドルのBusinessプランでは、SSO（シングルサインオン）機能や、データをAIの学習に使用させない設定など、ビジネス向けの高度な機能が追加されます。

▼Lovableの有料プラン一覧

Lovableのアカウントを作成しましょう！

それでは早速、Lovableのアカウントを作成してみます！Lovableの画面を開き、画面右上の「Get Started」のボタンをクリックします。

すると、以下の画面が表示されますので、Googleアカウント、GitHubアカウント、またはメールアドレスのいずれかで登録を行います。今回はGoogleアカウントで進めます。

アカウントを作成すると以下の画面が表示されますので、順番にアンケートに回答していきます。

アンケートの最後に、共同編集者の追加を促す画面が表示されますが、こちらは未入力のまま「Finish」をクリックして、スキップしても問題ありません。

質問への回答が終わるとダッシュボード画面に遷移し、「Lovable Cloud」に関するポップアップが表示されます。そのまま「Continue」をクリックしてください。

補足すると、「Lovable Cloud」は、2025年9月にリリースされた統合型バックエンドプラットフォームです。前述した通り、データベース、認証、ファイルストレージなどのバックエンドインフラを自動生成してくれる機能です。

従来のLovableは、Supabaseなどの外部サービスを手動でセットアップする必要がありましたが、Lovable Cloudの登場により、フロントエンドとバックエンドが同時に生成されるフルスタック開発が可能になりました。

▼Lovable Cloudの紹介ムービー（公式）

これらすべての作業が完了すると最初の画面に戻ります。これでアカウントの作成は完了です！あっという間ですね。

早速、Lovableの機能を使ってみましょう！

それでは早速、Lovableを使ってみましょう！始め方は、主に以下2つです。

他のユーザーが作成したコンテンツをRemixする

テキストプロンプトを入力してゼロベースで構築する

アイデアがまだ固まっていない…という場合は、Lovableのユーザーが作成したプロジェクトをベースに、Remixしてスタートするのがおすすめです。

気になる作品をクリックするとポップアップが表示されますので、画面右上の「Remix」をクリックするとコピーできます。

Remixボタンを押すとこのような画面に遷移します。画面の左側がAIとのチャット欄、右側がプレビュー画面という構成です。

ここで簡単に、画面上部のメニューについてお伝えします。

上図に記載の順番で、各機能の詳細をまとめました。

View History：これまで行った編集の確認（ここから戻すことも可能）

Hide/Open Sidebar：サイドバーの非表示 / 表示

Preview：編集中のプロジェクトのプレビュー表示

Tool

Analytics：利用状況やアクセスなどの確認が可能

Code：自動生成されたコードの閲覧・編集・ダウンロード

Cloud：Lovable Cloudでサーバーやデータベースの管理が可能

Security：認証、権限設定、セキュリティチェックなど

Speed：パフォーマンスやレスポンスタイムの最適化など

各機器でプレビュー（パソコン・スマートフォン・タブレットなど）

別タブでプレビュー

編集内容の反映・更新

共有設定、URL発行、プロジェクトの公開

Lovableはレスポンシブ対応で、デスクトップ、タブレット、スマートフォンの3つの画面サイズで表示を確認できます。

▼タブレット表示【左】、スマートフォン表示【右】

テキストプロンプトからゼロベースで構築していく場合は、ダッシュボード画面中央のテキストボックスに入力してスタートします。

実際に、Lovableでアプリを作ってみましょう！

＜プロンプトからアプリを生成＞

それでは、アプリを制作してみましょう！今回は、「地域観光案内を行うインタラクティブなAIチャットボットアプリを作成してください」と、あえて簡素なプロンプトで入力してみます。

Lovableは日本語にも対応しているので、翻訳の必要はありません。入力した結果がこちらです。

桜のイラストが印象的なアプリが生成されました。日本語で入力したこともあり、日本の観光案内だと認識してくれたようです。

画面左側のAIチャット欄をチェックすると、実装前に以下の項目を自律的に思考して反映してくれているのがわかります。

デザインコンセプト：

日本の伝統色（藍色、桜色）を使った温かみのあるデザイン

観光サイトらしい明るく親しみやすいUI

メッセージングアプリのような直感的なチャット体験

実装する機能：

AIチャットインターフェース

観光案内専門のインタラクティブな対話

美しいヒーローセクション

レスポンシブデザイン

デザイン要素：

カラー：藍色（プライマリ）、温かみのあるオレンジ（アクセント）

グラデーション：柔らかく親しみやすい

アニメーション：スムーズなフェード、メッセージスライド

＜Lovable Cloudの実装＞

そして、驚くべき機能がこちら！プロンプトに「AIチャットボット」と記載していたので、前述した「Lovable Cloud」の有効化について質問してくれました。

Lovable CloudでAI機能を有効化する場合、無料で利用できるものの、利用量に応じて課金される仕組みとなるので、第三者に向けたアプリを生成する場合などには注意が必要です。

試しに、「Allow」を選択してみると、無事に実装されました！試しに、「北海道・釧路のおすすめグルメスポットを知りたい」と入力すると、おすすめグルメに紐付けて、いくつかの店舗を紹介してくれています。ただ、表示に関してはタイトルや太字が有効化されていないなど、少し課題がありそうです。

次に、AIチャットボット欄にある「Cloud管理」をクリックしてみました。すると、管理画面が表示され、Lovable Cloudの各種機能を管理できるようになっています。

この画面で管理できる各種メニューの詳細は以下の通りです。

Overview

プロジェクト全体やバックエンドの利用状況、コストなどをまとめて確認できる

Database

データベース構造を自動生成し、SQLなしでデータの閲覧・編集が可能

Users

ユーザーアカウントや認証方法（メール、電話、Googleログイン等）を管理できる。また、ユーザーごとのアクセス権限の設定も可能

Storage

画像、動画、ドキュメントなどのファイルを最大2GBまでアップロード・管理できる

Edge Functions

APIやワークフローをノーコードまたはプロンプトで定義し、サーバーレスで実行。AI連携や外部API呼び出しなども対応

Secrets

APIキーやトークン、認証情報などの機密データを暗号化して安全に保存

Logs

アプリの活動ログをリアルタイムで確認でき、エラー追跡やトラブルシューティングに活用

＜AIと対話しながらアプリを修正＞

それでは、先ほどのアプリをベースに、チャットしながら内容を整えていこうと思います！AIチャット欄に「Edit」と「Chat」というボタンがあります。それぞれの機能は以下の通りです。

Edit：画面上の各種パーツをドラッグ＆ドロップで編集したい場合に選択

Chat：AIとのチャットベースで各種パーツを修正していきたい場合に選択

Editをクリックすると、プレビュー画面上の各種パーツをクリックして選択できるようになります。

今回は、「浜中町」という特定の地域に絞った観光案内AIアプリにしようと思います。追加の内容や、カラーの変更などをお願いしてみました。以下のように、ざっくりした内容のプロンプトで入力します。

入力したプロンプト：

北海道浜中町という地域に特化した観光案内サイトを作りたい

浜中町の絶景を背景にしてほしい

淡いグリーンとブルーをテーマに、大自然が伝わるように

浜中町とはどういう地域なのか？の概要もチャットbotの下にテキストと画像で掲載したい

また、浜中町でできるアクティビティやグルメスポット（グルメ）なども、簡単に情報を載せておきたい

そして、上記の修正が反映されたアプリがこちらです！いかがでしょうか…？

プロンプトの内容通り「浜中町について」のセクションが追加されています。内容も事実に則ったものになっていて、バッチリです！

アクティビティやグルメに関する情報も、有名どころに絞って挙げてくれています。グルメに関しては、隣町のものが入っているのが残念ですが、ここに写真や申し込み先など情報を追加していっても良いですね。

文章はその場で直接書き換えが可能です。各コンポーネントをクリックできない場合は、AIチャットボックス下部の「edit」を有効化してからクリックしてみてください。修正が完了したら、画面下部の「Save」と書かれた青いボタンを押して保存しておきましょう。

次に、セクション内に画像を追加するようAIにお願いしてみます。該当のセクションをクリックし、「このセクションの各内容に画像を追加してほしい」と入力してみました。

待つこと数十秒、指示通りセクション内に画像が追加されました！テキストの内容に沿った画像にはなっていますが、AIが生成した画像が挿入されるようです。実際の写真を追加したい場合は、ここから入れ替える必要がありそうです。

次に、同じコンポーネント内に予約用の日時フォームを追加してほしいとお願いしてみました。入力したプロンプトは以下の通りです。

入力したプロンプト：

各アクティビティの予約をサポートするフォームを追加してほしい。「日時を選択してリクエストを送信する」というボタンを追加し、日時を複数選択して運営に送信できるようにしてほしい。その際に、人数や自由記述欄など必要な項目も追加してほしい。

追加されたボタンがこちらです。デザインも良いですね！

クリックしてみると、以下のようなポップアップが表示されました。名前やメールアドレス、電話番号など、予約にあたって必要な項目も自動で追加してくれていて、とても良いですね！

試しにフォームを送信し、送信データを確認してみましょう。送信されたデータは、画面上部の雲マーク「Cloud」から確認できます。送信した内容が反映されていますね！

フィルターをかけてデータを検索できたり、CSVでダウンロードできる点もかなり便利ではないでしょうか。Notionなど他のツールを活用しながら、顧客データベースを作成することもできそうです。

＜セキュリティレビュー＞

完成したアプリをデプロイする前にやっておきたいのが「セキュリティレビュー」です。この機能はLovable独自の機能で、筆者はこの機能にかなり感動しました…！

画面上部のメニューにある「Security」をクリックするだけで、脆弱性がないか、そして問題点があればその修正案をAIが自動でレビューしてくれるんです。

以下、レビューでの一部抜粋です。正直、非エンジニアの目線からだと理解できない部分が多いのですが、かなり丁寧に説明してくれており、その上で解決策を提案してくれています。

🔒 セキュリティレビュー結果
浜中町観光案内アプリケーションのセキュリティレビューを実施しました。自動スキャナーとSupabaseリンターでは警告が検出されませんでしたが、手動レビューにより1つの重大な懸念と複数の軽微な改善点を発見しました。（中略）

🔧 セキュリティ改善プラン
最も重要な問題に対処するための実装計画を提案します：

フェーズ1: 管理者ロールシステムの構築

ロール管理テーブルとセキュリティ関数の作成

app_role ENUM型の作成（’admin’, ‘user’）

user_roles テーブルの作成（ユーザーIDとロールの関連付け）

SECURITY DEFINER関数 has_role() の作成（RLS内で使用）

RLSポリシーの有効化

activity_bookings テーブルのRLSポリシー追加

SELECT ポリシー: 管理者のみが全予約を閲覧可能

UPDATE ポリシー: 管理者のみが予約ステータスを更新可能

DELETE ポリシー: 管理者のみが予約を削除可能

初期管理者の作成

プロジェクトオーナーを管理者として設定

将来的に管理者追加機能を実装する基盤を準備

フェーズ2: 入力検証の強化（オプション）

クライアント側検証の強化

zodスキーマによる厳密な型検証

文字数制限、フォーマット検証の追加

データベース制約の追加

CHECK制約で文字数制限を強制

より厳密なデータ整合性の確保

フェーズ3: ログとモニタリング（オプション）

ログの改善

個人情報をログから除外

エラー追跡の改善

このプランは、管理機能を将来追加する際に個人情報が漏洩しないよう、予防的にアクセス制御を設定することを最優先としています。

📊 総合評価
セキュリティスコア: 7/10

✅ 基本的なセキュリティ対策は実装済み
⚠️ 個人情報保護の観点で今後の実装に注意が必要
🟢 現時点では顕在化した脆弱性なし
結論: 現在の実装は概ね良好なセキュリティレベルですが、管理機能を追加する前に必ずアクセス制御の実装が必要です。提案したプランを実装することで、安全に機能拡張できる基盤が整います。

脆弱性が発見された場合、AIチャット欄に表示される「セキュリティ改善を実装する」をクリックするだけでOKです。

クリックすると自動でセキュリティ改善を行い、完了したタイミングで新たに実装された内容を提示してくれます。

＜デプロイ作業＞

アプリが完成したら、いよいよ公開作業です！公開は、画面右上の「Publish」と書かれた青いボタンから行います。

デプロイの際には、以下のような項目を設定できます。

Website Address

アプリ公開用のURLで、「https://lovable.so/app/（設定した任意のアドレス）」の形で公開される

Custom Domain

lovable.soではない独自ドメインを設定

Icon&Title

アプリのアイコン（画像）とタイトルを設定

Description

アプリの説明文を記載可能。URLをシェアした時や、検索エンジンなどに表示される

Image

SNSでシェアした際などに表示されるカバー画像をアップロード

このようにして、LovableではAIと対話しながら機能を追加し、オリジナルのアプリやWebサイトを作っていくことが可能です。

【おまけ】バイブコーディングのプロンプト入力のコツ

今回、筆者はかなりざっくりしたテキストプロンプトで指示を出しましたが、より詳細に作りたいものが決まっている場合や、精度高く機能を反映していくには、入力するプロンプトの工夫が必要です。

最後に、参考としてバイブコーディング時のプロンプトに含めたい要素を以下にまとめました。これらの内容を出来るだけ具体的に、そして見出しや箇条書きを使いながら構造化して伝えていくのがコツです。

アプリの基本要件

何を作りたいのかの概要（課題や目的を含めてもGOOD）

誰が使うのか（個人/チーム/顧客など）

プラットフォーム（Web/iOS/Slackアプリなど）

機能要件

コア機能（ログイン機能・チャット機能など）

どんなデータを保存するか（必要な項目・フィールドなど）

UI/UXの要件

デザインの雰囲気・テイスト

配色・レイアウト

参考デザイン（既存のアプリやWebサイトなど近いイメージがあれば）

ユーザー体験の流れ

ユーザーがアプリをどう使うか（ログインした後、○○を入力すると○○が表示される、といった流れを言語化）

認証・権限管理

ログイン方法（メール、SNS連携など）

ユーザーの役割（管理者、一般ユーザーなど）

アクセス制限の有無

技術的要件

利用したいフレームワークや技術

外部連携・API