Lovableは、スウェーデン発のAI搭載ウェブサイト・アプリビルダーです。自然言語でAIに指示を出すことで、Webアプリケーションのコードを自動生成するサービスです。

230万人超のアクティブユーザーと18万人の有料購読者を持ち、Klarna、HubSpot、Photoroomなどの企業でも利用されています。「vibe coding」というコンセプトで従来のプログラミングとは異なるアプローチを提案しており、これまでに1,000万以上のプロジェクトが作成されています。サービス開始から8か月でユニコーン企業となったことでも話題になっています。

実際に使ってみた！

今回は、Lovableの実力を確かめるため、社内用のLMS（学習管理システム）を作成してみました。

サインアップ・初期設定

登録はメールアドレスとパスワードの入力のみで完了します。ダッシュボードはシンプルな構成で、新規プロジェクトを作成するか、既存のテンプレートから始めるかを選択できます。

プロジェクト作成体験

今回は白紙から「社内用LMS」を作成することにしました。画面左側にチャット形式のAIアシスタントがあり、ここに自然言語で要件を入力すると、右側のプレビュー画面にリアルタイムでUIが反映されます。

社内向けの研修システムを作りたいです。
1. システム概要 
社内向けの研修システムを構築する。研修担当者が動画や資料をアップロードし、特定の部門に対して研修を割り当てることができる。社員は自分に割り当てられた研修を受講・完了報告できる。

2. ユーザー種別と権限 
管理者：部門・ユーザー管理、全体設定 
研修担当者：研修の登録・割り当て、進捗確認 
一般社員：自分に割り当てられた研修の受講・完了報告 

3. 主な機能一覧 
・ログイン：社内アカウント（例：Google Workspace）と連携したログイン機能 
・研修登録：動画（ファイルまたはYouTubeリンク）やPDF等の資料アップロード機能 
・割り当て機能：特定の部門または個人に対して研修を割り当て 
・受講進捗管理：視聴・ダウンロード状況、完了報告の記録機能 
・通知：研修の割り当てや期限前のリマインド通知（メール等） 
・レポート出力：研修の完了状況をCSV等で出力できる管理者向け機能 

4. UI/UX要件 
・シンプルで直感的に操作できるUI 
・モバイルやタブレットでも閲覧しやすいレスポンシブデザイン 
・動画プレイヤーや資料閲覧機能は軽量でストレスのない動作を重視 
・進捗状況の確認や完了ボタンが一目で分かる画面設計 

5. 技術要件 
・アカウント連携：Google認証やSSOに対応

バックエンドの設定について

LMSのような本格的なアプリケーションには、データベースや認証システムが不可欠です。Lovableは最初にSupabaseとの統合を提案してきました。

Supabaseボタンをクリックして接続すると、以下の機能が自動的に設定されます。

・Google認証/SSOによる認証システム
・ユーザー管理、研修データ、進捗追跡のためのデータベース
・動画やPDF資料の安全なファイルストレージ
・メール通知機能
・レポート生成やデータエクスポートのためのAPI機能
この統合により、本格的な研修システムの基盤が整います。

便利ですね！

生成されたLMSの内容

基本的な機能を実装するまでに約半日の時間を要し、54クレジットを使用しました。100クレジットが約25米ドル（約3,800円）なので、これらの基本機能の開発にかかったコストは2,000円以下となります。安すぎます！

使ってみて感じたメリット・デメリット

LMSのような管理者とユーザーで異なるダッシュボードを持つ複雑なシステムでは、一度にすべての機能を完成させるのは困難でした。実際の開発では、一つずつ機能を段階的にLovableに指示して開発していく必要があります。

例えば、「管理者用のユーザー管理機能を追加してください」「ユーザーが自分のコース進捗を確認できる機能を作成してください」「コース完了時に証明書を生成する機能を追加してください」といった具合に、具体的で明確な指示を出すことで、徐々に機能を拡張していきました。

開発中にバグが発生した場合も、「ログイン後にダッシュボードが表示されない問題を修正してください」のように自然言語で問題を伝えるだけで、Lovableが原因を特定して修正してくれます。プログラミング言語を全く理解していない私でも、自然言語での対話だけで本格的なアプリケーション開発を進めることができました。

生成されるUIは現在のWebデザイントレンドに沿ったもので、見た目にも満足できる仕上がりです。

ただし、日本語でメッセージを入力する際に問題がありました。変換を確定するためにEnterキーを押すと、その時点でメッセージが送信されてしまいます。文章を完成させる前に送信されてしまうため、非常に使いにくく感じました。

どんな用途に向いている？

実際に使用してみた結果、Lovableは特にプロトタイプ作成に非常に効果的だと感じました。アイデアの初期検証には確実に威力を発揮します。スタートアップや新規事業で最小限の機能を持つMVPを素早く作成したい場合にも有用です。また、今回作成したLMSのような社内向けツールであれば、実用的なレベルで作成可能でした。新しい技術やフレームワークを試したい場合の実験環境としても活用できるでしょう。

まとめ

今回、Lovableを使って社内用LMSを作成した結果、プログラミング知識がなくても自然言語での対話だけで本格的なWebアプリケーションを構築できることが分かりました。

日本語入力時のUI問題など改善の余地はありますが、アイデアを素早く形にしたい場合や、プロトタイプ作成においては非常に有効なツールです。AI技術の進歩により、今後開発の民主化がさらに進んでいくことが期待されます。