Lovableで何でも作れる - その方法

11,606 文字

私の名前はDavid Andreで、Lovableを使って何でも作る方法をお見せします。このAIツールは、ソフトウェアを構築する最速の方法かもしれません。
インタラクティブなAIモデル比較のウェブアプリを作ってみましょう。まず始める前にアカウントを作成する必要があります。サインアップをクリックして、私はGitHubを使います。とても早いので。サインアップしたら、createをクリックするだけです。
すると、Lovableエディタに移動します。左側にチャットが表示され、右側ではLovableがリアルタイムでアプリを構築している様子が確認できます。ちなみに、このプロジェクトのアイデアはVLEに尋ねて得ました。
実はLovableはヨーロッパで史上最速で成長しているスタートアップです。わずか4週間で400万ドルの年間経常収益を達成しました。
ウェブサイトの様子を見てみましょう。わあ、GP4とClaw 2がありますね。これらのモデルは古いですが、UIはすでにかなり良い感じです。もちろんこのデータはまだ入力する必要がありますが、第一稿としては非常に良いですね。
2番目のプロンプトを書く前に、Lovableにカスタム指示を追加する方法をお見せしましょう。Lovable内で右上の設定アイコンをクリックし、下にスクロールするとノートタブが表示されます。ここでmanage knowledgeをクリックすると、カスタム指示を入力できます。
私は自分のスタートアップを立ち上げた過去3ヶ月間で完成させた、Curserと同じ指示を使用します。ちなみに、私のすべてのシステムプロンプトとカスタム指示にアクセスしたい場合は、New Societyにあります。
Cur rulesファイル全体をコピーして、Lの中に貼り付けるだけです。これで完了としましょう。次に、これらのモデルを変更したいと思います。Palm 2やCloth 2、llama 2を使用している人はいませんからね。
ベンチマークのスクリーンショットがあるので、Lovableでは簡単にスクリーンショットをアップロードして「スクリーンショットにあるLLMsに変更して、そのデータでグラフを埋めてください」と言うことができます。現在グラフには何も表示されていませんからね。
興味深いことに、Lovableは以前GPT engineerという名前でした。AIの分野に1年以上いる方なら、このプロダクトが2023年と2024年に大きな波を作っていたことを覚えているでしょう。しかし、彼らにとってこれらのローンチはまだ失敗だったため、リブランドしました。
これがLovableの背後にいる人物で、ご覧の通り、これは彼らのビジネス全体のMRRチャートです。最初のローンチは大きな失敗でした。2回目のローンチでは25,000ドルのMRRに達しましたが、すぐに下降しました。
その後、3回目のローンチのために5ヶ月ほど作業を重ね、わずか5週間で530万ドルの年間経常収益を達成しました。これがAIツールで可能なことです。優れたチームと良いアイデアがあり、諦めずに改善を続ければ。そして驚くべきことに、Lovableは文字通り、そのようなビジネスをより速く構築できるツールの1つなのです。
ご覧のように、私たちはわずか2つのプロンプトでウェブアプリを作り、どのモデルを表示するかを選択し、異なる指標で比較することができます。Lovableには無料プランがありますが、より大きなプロジェクトを構築しようとすると、すぐに使い切ってしまいます。
そこで、月20ドルのスタータープランにアップグレードします。これは標準的な価格で、Cursor、ChatGPT、Claude、すべて月20ドルです。アップグレードすると、「ご購入ありがとうございます」という画面が表示され、「continue building」をクリックできます。
以前のプロジェクトを見るには、プロフィールをクリックします。ここにプロジェクトが表示されます。Lovely LLM Comparisonsですね。もう一度このプロンプトを送信してみましょう。
素晴らしい、もう拒否されません。もし「heavy load」で困っているなら、おそらく無料プランで制限に達しているので、アップグレードが必要かもしれません。多くのAIエージェントを実行し、多くのトークンを生成するのは安くないんです。私は自分のAIスタートアップを立ち上げた経験から、それを身をもって知っています。
ちなみに、私のスタートアップはVectalと呼ばれ、基本的には統合されたAIエージェントを備えたより優れたタスク管理ツールです。AIエージェントが自動的にタスクを整理し、タスクの完了を支援します。例えば、「今日のタスクが多すぎる、いくつかを明日に移動して」と言うと、Vectalがそれを実行します。
このAIエージェントは、あなたのアクティブなタスクすべて、ユーザー設定、目標にアクセスできるからです。ご覧の通り、タスクの半分を明日に移動しましたが、もちろんそれは望まないので、「今日に戻して」と言うと、Vectalは問題なく実行します。
これはVectal内のAIエージェントができることの一つに過ぎません。試してみたい方は、Vectalにアクセスしてサインアップしてください。
さて、Lovableの中で、GitHubへの接続方法をお見せしましょう。再度プロジェクト設定に移動し、GitHubが表示されるまで下にスクロールします。私の場合、すでにサインアップ時にGitHubで接続したので「connected」と表示されています。
Googleやメールでサインアップした場合は表示されませんが、他の人と同じプロジェクトで協力できるように、特定のGitHubリポジトリに接続したいと思います。「connect to GitHub」をクリックすると、このポップアップが開きます。
「Install and authorize lovable.dev」をクリックし、「only selected repositories」を選択します。ただし、まず先にGitHubに行って新しいリポジトリを作成する必要があります。GitHubアカウントをお持ちでない方は作成してください。
ソフトウェアを構築する上で絶対に必要で、30秒ほどで完了します。完全に無料で超簡単です。「lovable test」と入力して作成しましょう。
ご覧の通り、リポジトリの作成は超簡単です。このポップアップを更新する必要があるかもしれません。再度開いて、「connect to GitHub」、「only select repositories」、「lovable.test」を選択し、インストールと認証を行います。
必要事項を入力すると、Lovableに戻され、読み込み中が表示され、「transfer repository」が表示されます。良いですね、これでリポジトリが接続されました。
更新すると、現在このリポジトリには何もないので、Lovableが自動的に処理できるか見てみましょう。ターミナルコマンドが表示されましたが、自分で実行してほしいわけではありません。Lovable自身が実行できるはずです。
実は「transfer repository」をクリックする必要がありました。私のミスでした。「transfer repository」をクリックすると、新しいリポジトリが作成されます。特定のリポジトリを接続する意味が分かりませんが、様子を見てみましょう。
はい、Lovely LLM Comparisonsというリポジトリがlovableから作成され、READMEファイルを含むすべてのファイルがあります。悪くないですね。特定のリポジトリを接続する必要があるのに、新しいものを作成するのは少し混乱します。
Lovableがまだ変更する必要のある点かもしれませんが、6週間前にローンチしたばかりなので、あまり完璧を求めないようにしましょう。
さて、GitHubが接続されたので、前のステップに戻る方法をお見せしましょう。「ウェブアプリをデフォルトでダークモードにする」というようなことを試して、その変更を意図的に元に戻して、どれだけ簡単に戻れるかお見せします。
多くの人が「間違ったプロンプトを入力したらどうしよう」と心配していますが、Lovableでは実際とても簡単です。左上に履歴タブがあり、チャットと履歴が表示されます。
ここでLovableがコードに加えた主要な変更をすべて確認できます。バージョン3がライトモードで、戻りたい場合は「restore」をクリックできます。
これは、アプリがどのように改善されているかを確認する非常に簡単な方法です。最初はこのような外観で、今はこのようになっています。より良いチャートとより多くのモデルがあります。気に入らない点があれば、いつでも変更を元に戻すことができます。
Lovableのもう一つの強力な機能は、ここにある「select」ボタンです。任意のdiffやウェブアプリの任意の部分を選択でき、Lovableはその部分だけを編集できます。
例えば、このレイアウトが気に入らない場合、「このLLMsのレイアウトが大きすぎる。もっと小さくして、UIをよりクリーンにして」と言えます。
Lovableの素晴らしい点の一つは、その速さです。例えば、Boltを使用すると、変更が適用されるまで60秒ほどかかり、待つだけです。Lovableはほとんどの場合、10-20秒以内です。v0やBoltよりもはるかに効率的です。
はい、変更されました。私が変更を望んだ部分だけが変更され、ベンチマークには何も影響を与えていません。ただボックスを小さくしただけです。
この選択機能は、特に初心者にとって便利です。divやh1が何なのか、または例えばこれを正確に説明する方法が分からない場合、メインタイトルなのか、ウェブアプリのタイトルなのか、モデルのタイトルなのか、説明なのか、確信が持てない場合、モデルを混乱させる可能性があります。
しかし、選択ツールのおかげで、これを選択して「このテキストをより単純に書き直して」と言うだけで、Lovableは正確に何を指しているか理解します。更新が超速く、望んだ部分だけが更新されました。
AIモデルはしばしば、あなたの意図を理解するのに苦労します。例えば、Claude 3.5 Sonnetで問題がある場合、おそらくプロンプトが悪いのです。あなたが望むことをClaudeに正確に説明できていないのです。この機能のおかげで、それが非常に簡単になります。
Lovableでできるもう一つのことは、ファイルを添付することです。ここでデザインの画像を添付して、「現在のウェブアプリを添付画像のようにして、デザイン原則とUI原則に従って」と言えます。
一つ絶対にお勧めなのは、Lovableのドキュメントを見ることです。Lovableの使い方について、とても充実したプロンプトガイドがあります。ハートマークをクリックすると、docsが表示され、左側に「prompting with lovable」が表示されます。
ここで基本を見ることができます。プロンプト戦略、文脈的なプロンプトです。文脈を提供することで、Lovableが要件の広い範囲を理解するのに役立ちます。通常、文脈が多いほど良いですが、もちろん無関係な情報を含めないことは言うまでもありません。
具体的なタスクを依頼する前に、背景情報で状況を設定できます。これは良い例です：「ユーザーがタスクを追跡するのを助けるプロジェクト管理ツールを構築しています」。基本的に、ソフトウェアがどんな問題を解決するのかを、何を持つべきかを言う前に説明します。
この少しの文脈が、プロンプトをより強力にします。もう一つの戦略は、段階的なプロンプトです。巨大なプロンプトを投げ込んでAIにすべてを処理させることを期待するのではなく、小さな変更を積み重ねていきます。もう一つの戦略は、画像プロンプトの使用です。
正直なところ、これらはすべて基本的なものです。それ以上のことを知りたい場合は、New Societyにある高度なAIチュートリアルセクションでは、プロンプトエンジニアリングのエキスパートになるための8モジュールのワークショップがあり、Lovableが提供しているものよりもはるかに高度です。ただし、初心者の方にとっては、これでも十分しっかりしたリソースです。
しかし、AIについて真剣に取り組みたい、次のレベルに進みたい、プロンプトエンジニアリングで99%の人よりも優れたいと思うなら、ぜひチェックしてください。New Societyは下にリンクがあります。
次にお見せしたいのは、実際にLovableをSuperbaseに接続する方法です。彼らには多くの素晴らしい組み込み統合機能があります。ほとんどのMVPはクライアントサイドのみで、データを保存しません。
例えば、ここにテキスト入力フィールドを追加して、「LLMのリストに簡単に新しいモデルを追加できるテキスト入力フィールドを追加して」と言えます。はい、できました。新しいモデルを追加できます。
例えば、OpenAIの新しいモデルGPT5があるとして、3兆のパラメータがあり、専門性はAIだとします。「add model」をクリックすると、リストに追加されました。GPT5です。比較することはできますが、データはありません。
しかし、ページを更新すると、これは消えてしまいます。なぜなら、データベースに保存されていないからです。このためにプロジェクトにデータベースを接続する必要があります。幸い、LovableはSuperbaseとの接続を非常に簡単にしてくれています。
右上に大きなSuperbaseボタンがあります。クリックして「connect superbase」をクリックします。Superbaseのセットアップ方法についてのチュートリアルを見ることもできますが、時間を節約するために手順を説明します。
superbase.comに行ってサインインしてください。Superbaseに初めてログインする場合は、組織と新しいプロジェクトをセットアップする必要があります。テストアカウントを作成したところです。無料プランを選択し、プロジェクト名を「hello YouTube」とし、データベースパスワードとリージョンを設定して、新しいプロジェクトを作成します。
ご覧のように、Superbaseが新しいプロジェクトをセットアップしています。Lovableに戻って「connect superbase」をクリックし、先ほど使用したのと同じアカウントを使用する必要があります。下にスクロールして、作成した組織を選択し、Lovableを承認します。
Superbaseに接続中...成功です！プロジェクトに接続し、「hello YouTube」を選択して接続します。「このLovableプロジェクトをSuperbaseに接続しますか？」はい、接続します。
チャットで「あなたのSuperbaseプロジェクトに接続して、データベース構造、テーブル、セキュリティ設定を収集しています」と表示されています。Lovableが接続を完了しました。「プロジェクトにテーブルが作成されていないようです」その通りです。
変更点を見てみましょう。このファイルは自動生成されています。Superbaseの公開可能キーがあり、基本的にデータベースに接続し、データベースの型を作成しています。アプリがSuperbaseに接続されました。これで完全な機能を持つバックエンドで作業できます。
これは現在、おそらくLovableの最大の利点だと思います。実際の本番環境用データベースへの統合と、バックエンドの追加がいかに簡単かということです。Bold、v0、これらはすべてフルスタックを目指していますが、実際にはそうではありません。
ほとんどがフロントエンドだけです。それでも有用で、素晴らしいMVPを構築できますが、本番環境にデプロイできる実際のフルスタックウェブアプリを構築するには、データベースと堅牢なバックエンドが必要です。
ここを更新すると、何か表示されるはずです...いいえ、まだテーブルは表示されません。「表示しているLLMsとそれらに関するベンチマークデータを保存する新しいテーブルをSuperbaseに作成して」と指示する必要があるかもしれません。
Lovableがどれだけ自力でできるか見てみましょう。確かに、これを設定して数時間かけることもできますし、ClaudeにSQLクエリを書いてもらうこともできますが、Lovable自体ですべてを完了できれば素晴らしいですね。
まず何をする必要があるか分析してみましょう。2つのテーブル、LLMsとBenchmark Resultsが必要です。これは良い関心の分離ですね。これらのテーブル間の関係は、各LLMが複数のベンチマーク結果を持つことができるということです。
はい、LLMの名前を一意の識別子として使用します。すでに使用されているので。これらのテーブルのSQLコマンドを共有して、それらを実行できることを願っています。はい、これをレビューする必要があります。
これは良いことです。なぜなら、データベースの変更を行うことは、ソフトウェアやSaaSで行える最もリスクの高いことの一つだからです。スタートアップがある場合、おそらく本番データベースを台無しにすることが最悪のことです。
しかし、これはテストアカウントで、完全に別のSuperbaseをセットアップしたので、あまり心配していません。「apply changes」をクリックしましょう。マイグレーションが適用されました。
それは速かったですね。ここに入って、テーブルを見てみましょう。そしてできました！ここに2つの新しいテーブル、Benchmark ResultsとLLMがあります。ここに実際にLLMがあります。
では、また追加してみましょう。再度GPT5を追加するか...実はo3を試してみましょう。OpenAIのo3として、パラメータ数は...5,000億としましょう。「powerful reasoning model」と入力して、add modelをクリックします。
Superbaseに保存されたか確認してみましょう。更新...いいえ。「フォームを通じて追加する各モデルが実際にデータベースに保存されるようにして」と言いましょう。
そうですね、これに同意すべきでした。フロントエンドのハードコードされたデータを削除して、データベースからフェッチするようにしたいとのことです。
バックエンドは、フロントエンドほど魅力的ではありません。派手なフォームやインタラクティブなグラフを構築することは、初心者には魅力的です。しかし、実際にAIスタートアップを構築したい場合、堅牢なバックエンドとデータベースなしでは何もできません。
これが、私がLovableが最も実用的なツールだと考える理由です。v0は明らかにNext.jsの設計が最高です。Next.jsの開発者によって開発されているのですから。Boltは MVPの設計が非常に優れています。
CursorはVectalの開発に使用しましたが、フルスタックIDEで、VS Code上に構築されていますが、初心者には威圧的です。Lovableは実用的でありながら、初心者にも親しみやすい非常に良いバランスを持っています。
平易な英語でコミュニケーションができますが、フロントエンドとバックエンドも手に入れることができます。publishをクリックすると、これは実際に使用可能なアプリになり、人々が何かを入力するとデータベースに保存されます。
これは、スタートアップを構築したい場合には絶対に不可欠です。データベースとバックエンドは魅力的ではありません。多くの初心者はこれをスキップしたがり、その結果、実際に何かをローンチすることができません。
しかし、Lovableを使えば1時間以内に構築できます。1時間以内に、MVPとして公開する準備ができた、フルスタック、フロントエンド、バックエンド、データベースを備えたアプリを構築できます。
正直なところ、Lovable以外のツールでそれができるとは思えません。では、Claude 4.5をAnthropicから試してみましょう。これは5兆モデルで、「close to ASI」としましょう。
どうでもいいですが、add modelをクリックして、テーブルに追加されるか見てみましょう。更新...いいえ、まだテーブルに追加されていません。エラーが出ています。
ここでキーボードショートカットが役立ちます。FまたはL1ボタンを押すだけで、Lovableがそれほど速いということです。Fをクリックして、単一のキーストロークでLovableがエラーの修正を開始します。
show errorをクリックして、実際に何が起こっているのか見てみましょう。その点についてもっと文脈を提供すべきでした。はい、RLSポリシーを設定する必要があります。これらの変更を適用して、LLMsへのパブリックユーザーの挿入アクセスを許可します。
はい、これはセキュリティの問題でしたが、今は大丈夫なはずです。もう一度試してみましょう。OpenAIのo5を試します。1兆パラメータモデルで、推論が専門です。add modelをクリックして、3回目のチャームを見てみましょう。
LLMs...できました！o5が表示されました。これで実際にすべてのものがDBと同期されています。これを更新すると、o5も表示されるはずです。はい、表示されました。
これで、プロジェクトにリンクされた完全に機能するデータベースができました。これは、YouTubeの動画で見るほとんどのプロジェクトよりもはるかに優れています。
そこでは、機能性のない派手なフロントエンドを作るだけで、すべてがハードコードされています。しかし、実際のアプリを構築したい場合は、データベースが必要です。
幸いなことに、Lovableはこれを数回のクリックで簡単にしてくれます。Superbaseに接続し、何をすべきか指示するだけで、SQLを実行し、新しいテーブルを作成し、エラーを修正できます。これは非常に強力なツールです。
では、LovableをSuperbaseに接続する方法が分かったところで、実際にどのタスクをAIで自動化すべきか、どのように判断するのでしょうか？
多くの視聴者の方々は、2025年がAIの年になることを理解しています。2023年はすでにChatGPTとGPT-4のリリースで非常に強力でした。2024年はAIエージェントの始まりでしたが、2025年、今年はAIがすべてのビジネス、すべての製品、すべての場所に統合される年になります。
では、実際にどのようにしてタスクの一部の自動化を始められるかを判断するのでしょうか？幸いなことに、New Societyでは、これを非常に簡単にしています。
テンプレートとプリセットの中のチェックリストをクリックすると、AIで自動化できるタスクを見つける方法が、ステップバイステップで示されています。これはAIエージェントを構築する際の最初のステップです。
自動化する価値のあるタスクを見つける必要があります。なぜなら、一部のタスクは非常に複雑で、現在のLLMsがまだ準備できていないタスクに何時間も無駄にしたくないからです。
また、一部のタスクは単に悪いものです。LLMsはそれらが苦手で、自動化しても非常に悪い結果になり、「ああ、AIエージェントは悪い」と思ってしまいます。いいえ、AIエージェントは悪くありません。単に間違ったタスクを選んだだけです。
実際に自動化する価値があり、スタートアップ全体に発展させる可能性のあるタスクを見つけたい場合は、New Societyに参加してください。下にリンクがあります。
ちなみに、特にスタートアップのアイデアが欲しい場合は、そのためのセクションもあります。ここには、108のAIドメインのキュレーションリストがあります。
これらは実際に、Vectalを選ぶ際に私自身が事前に選択したドメインです。明らかにVectalが私のお気に入りだったので選びましたが、約3,500の異なるドメインを閲覧してベスト108を選びました。
これらやAIエージェントのアイデア、スタートアップのアイデアが欲しい場合は、New Societyに参加してください。
最後に、実際にアプリをウェブに公開する方法をお見せしましょう。UIをより良くしたり、これらの重なり合う問題を修正したりして、アプリに満足したとします。ウェブに公開するにはどうすればよいでしょうか？
Lovableは、公開ボタンを追加することで、それを信じられないほど簡単にしてくれました。右上の公開ボタンをクリックします。publicかprivateを選択できます。チームと開発したい場合や、友人にだけ送りたい場合は...私はあまり気にしないので、publicをクリックします。
デプロイには数秒かかり...はい、サイトが公開されました。カスタムリンクが付与されます。もちろん、自分で良いドメインを持っている場合は、Superbaseに入ってそれを設定できますが、MVPには十分すぎるほど良いです。
ここにボタンもありますが、クリックしてみましょう。はい、これが私たちのアプリです。完全に独立していて、Lovableの中で実行されているだけではありません。これはデプロイされたアプリで、誰でも訪れて試すことができます。
私たちが実際に何をしたのか、多くの方々は本当に理解していないと思います。1時間もかからずに、空白のページから、わずか5つのプロンプトで、Superbaseデータベースに接続された完全なフルスタックウェブアプリを作成しました。
完全なバックエンド、RLSポリシー、機能するフロントエンドがあり、インタラクティブで、新しいモデルを入力するとデータベースに保存されます。これは驚くべきことです。
これを見て可能性が分からないなら...文字通り40分座って、フルスタックのデモを構築し、クライアントに送ることができます。これで多くの人を獲得できます。
他の人のためにこれを構築して数千ドルを稼ぎたい場合も、会社で内部システムを構築して昇給を得たい場合も、自分のAIスタートアップを構築したい場合も、これほど簡単だったことはありません。
Lovableのようなツールを当たり前だと思わず、実際に何かを構築し始めてください。
最後まで見ていただいたということは、あなたの注意力がまだ損なわれていないということです。つまり、実際に超生産的な少数の人々の一人だということです。これは、まさに私のVectalのターゲットオーディエンスです。
このAIツールは、作成する新しいタスクを自動的に並べ替えるだけでなく、例えば「Lovableについて学ぶ、6週間前にリリースされた新しいAIツール」と言うと、新しいタスクが他のアクティブなタスク、ユーザー設定、作業の説明、目標、Vectalに提供するすべての文脈に基づいてリストに自動的に並べ替えられます。
しかし、それは一つの機能に過ぎません。Vectalの主要な部分は、ここにあるチャットエージェントです。これは見た目以上にはるかに強力です。
ChatGPTやClaudeよりもはるかに速くタスクを完了するのを助けることができます。なぜなら、あなたのすべての作業、すべてのプロジェクトの文脈を持っており、これらのタスクを実際に変更できるからです。
名前を変更したり、「アクティブなタスクの名前をより明確にして」と言えば、それらを再優先順位付けし、整理し、削除し、完了することができます。できることは多いです。
より生産的になり、より速く作業を完了したい場合は、Vectalにアクセスして試してみてください。
以上です。ご視聴ありがとうございました。素晴らしく生産的な一週間をお過ごしください。さようなら。