会話だけでWebアプリが完成する時代。僕が実際に使ってみたら、想像以上にUIの質が高かった。テキスト入力からデプロイまでの流れをお見せします。
Lovableとは何か
Lovableは、テキストプロンプトだけでWebアプリケーションを生成するAIツール。元々は「GPT Engineer」という名前で開発され、2024年に現在の名前に変更されました。
背景にあるのはAnthropicのClaude Sonnetという高性能な言語モデル。このAIが直接コード生成を担当するため、他ツールより精度が高いという特徴があります。
実績としては年間経常収益が$200M ARRを達成。つまり月間2,000万ドル以上の収益があり、業界で確実な地位を確立しています。
「AIでWebアプリ作成」という概念は数年前からありますが、実際に使えるレベルに達したのはここ最近。Lovableはその波の中でも特に完成度が高いツールです。
始め方は4ステップ
公式サイトにアクセスしてサインアップします。メールアドレスか、GoogleやGitHubアカウントでログイン可能。
初期登録時に無料クレジット（大体$25相当）がもらえるので、まずはこれを使って試験的に作ってみるのがいいですね。
「タスク管理アプリを作って」「シンプルなブログを作成」といった日本語でのリクエストをテキストボックスに入力します。
ここで大事なのは、できるだけ詳しく要件を説明すること。「美しいUIで」「Supabaseを使って」といった条件を加えると、精度が上がります。
数秒〜数分でアプリのコードが生成されます。左側にプレビュー、右側にコードが表示されるUIです。
僕が試したときは、デザインが最初からかなり完成度高い状態で表示されました。細かい修正が必要なら、チャット欄で「このボタンを大きくして」と指示するだけでOK。
完成したら「Deploy」ボタンを押すだけ。自動的にサーバーにアップロードされて、すぐにURLが発行されます。
Vercelなどの外部ホスティングと連携することもできます。デプロイ自体は本当に簡単です。
料金プランの比較
| プラン | 月額 | 生成回数 | 1回あたりのコスト |
|---|---|---|---|
| フリー | 無料（初期クレジット$25） | 試験的に数回程度 | クレジット消費 |
| Pro | $20 | 無制限 | 実質無制限 |
| Business | $100 | 無制限＋優先サポート | 実質無制限＋サポート |
本格的に使うなら月$20のProプランが現実的。数個のアプリを作れば元が取れます。
実際に何が作れるのか
Lovableが得意なのはReact + Tailwind CSSベースのモダンなUI。これが強みです。
具体的には以下のようなアプリが作成可能です：
- タスク管理アプリ（ToDoリスト）
- シンプルなブログプラットフォーム
- ポートフォリオサイト
- データ可視化ダッシュボード
- チャットアプリケーション
- 在庫管理システム
重要なのは、僕が実際に試したときのUIのクオリティ。自分で書くCSSより洗練されていることもあります。特にボタン、フォーム、カードコンポーネントの仕上がりが綺麗。
できないこと・制限事項
万能ではありません。以下の部分は苦手です。
複雑なバックエンド処理は生成されたコードでは不十分。例えば複数の外部APIを組み合わせた複雑なロジックは、手動で修正が必要です。
また独自デザインの制約がある。Tailwindのデフォルトテーマに依存するため、ブランドカラーを強烈に反映させたいときには物足りないかもしれません。
機械学習モデルの組み込み、複雑な決済システム、高度なセキュリティ機構。これらは手動実装が必須です。
つまり「最初の型出し」「MVP作成」「簡単なWebアプリ」には最高のツール。本格的なサービス開発にはエンジニアの手が必要。
Bolt.new や Replit との違い
| ツール | 得意な分野 | 学習曲線 | デプロイ |
|---|---|---|---|
| Lovable | UIデザイン＋React | 低い | 自動（ワンクリック） |
| Bolt.new | プロトタイピング | 低い | 手動 |
| Replit | 教育・学習 | 中程度 | 自動 |
Bolt.newはOpenAIのGPT-4で動作し、プロトタイピング中心。Replitは学習プラットフォームとして優秀。Lovableはその中間で、実際に使えるアプリ生成に特化しています。
僕が実際に試して感じたこと
正直に言うと、期待を上回る出来栄えでした。
第一印象は「UIが綺麗」。生成されたボタンやフォーム、カードのデザインが、自分で時間をかけてCSSを書いたものと遜色ない。これはClaudeの能力の高さを感じさせます。
もう一つ驚いたのはSupabase連携の楽さ。「Supabaseのデータベースを使って」と指示するだけで、認証機能とデータ操作が組み込まれたコードが生成されます。手動でAPIキーを設定する手間も少ない。
ただ生成後のコード編集は「微調整」程度に留めておくべき。大幅な構造変更を試みると、かえって手間が増えます。最初の指示でできるだけ要件を詰め込むのがコツです。
実用性という観点では、既存のWebサービスを「Lovableで再構築したら」という使い方も考えられます。つまり自分のビジネスロジックはそのままに、UIとフロントエンドだけ再生成する。そういう利用パターンも見えてきました。
Lovableはシンプルなテキスト入力だけで、実際に使えるWebアプリを数分で生成できるツールです。UIの品質は高く、デプロイも簡単。エンジニア未経験でもアイデアを形にできる時代は、本当に来ました。
ただしすべての問題を解決するツールではなく、得意な分野と不得意な分野がはっきりしています。自分のプロジェクトがLovableの得意領域に該当するなら、ぜひ試してみる価値があります。
