Lovable アプリ・ホームページの作り方｜日本語で頼んで画面を作らせる方法と、うまくいく頼み方のコツ

「こんな道具があれば、毎日の作業がずいぶん楽になるのに」

そう思っても、作るとなると外注先を探して、説明して、見積もりを取って…。小さな道具ほど、頼むまでの手間のほうが大きく感じて、結局あきらめてしまうことがあります。

Lovable（ラバブル）は、作りたいものを文章で伝えると、AIがアプリやホームページを作るサービスです。この記事では、Lovableで最初の形を作るまでの流れと、うまくいく頼み方のコツを、解説動画から集めて見比べました。

なお、ここで取り上げる動画は2024年の終わりから2026年にかけて公開されたもので、多くは公開から半年以上たっています。画面や料金のしくみは、今とは違っている場合があります。

日本語で頼むと、数十秒で画面ができる

アプリ開発研究所の山口鳳汰さんは、Lovableの基本の流れを見せています。画面の入力欄に、作りたいアプリの中身を書いて送るだけです。動画では「シフトの作成と、確定したデータを見られるアプリを作って」と頼み、数十秒ほどでコードが書かれ、画面ができ上がっています。

山口さんによると、Lovableの操作画面は英語ですが、AIに送る文は日本語で大丈夫です。

「AIに送るメッセージは日本語でもいいため」

でき上がった画面は、入力欄の右側にあるプレビュー（仕上がりの見本）で、その場で動かして確かめられます。直したいところがあれば、またチャットで頼めば反映されます。画像や、Figma（デザインを作る道具）のデータを渡して、決まったデザインに合わせて作らせることもできると説明しています。

AI大学の動画でも、同じ流れが紹介されています。「コーヒー豆を販売するウェブサイトを作ってください」と送るだけでサイトができ、続けてチャットで色などを直し、画面上のスマホのボタンでスマホでの見え方も確かめられます。比較的短い頼み方でも、しっかりしたサイトができると話しています。

AI大学の動画では、用意された「テンプレート」（ひな形）を選び、それをもとに続きを作り始める方法も紹介されています。何もないところから頼むより、近いひな形から始めたほうが早い場合もありそうです。

使う人・ページ・機能まで書いて頼む

最初の頼み方で、出来は大きく変わります。Kabu & Koinの動画では、作りたいものを説明するときに、次のようなことまで書けると紹介しています。

• 誰が使うのか
• どんなページが要るのか
• どんな機能が要るのか
• どんなデザインにしたいか
• ほかのどのサービスとつなぎたいか

動画では、頼む内容が具体的であるほど、最初にできるものがよくなると説明しています。たとえば「ログインのしくみ、グラフ、データの保存がついた、すっきりした管理画面を作って」のように頼めるという例です。見た目だけでなく、データを保存する裏側の仕組みまで、まとめて土台を作れるとしています。

あきらパパのAI活用学習部屋のあきらパパさんは、説明書のような3ページのサイトを頼み、白と黒を基調にした見やすいデザインに仕上がる様子を見せています。ほかのAIの道具ではデザインが変になりがちな中、Lovableはデザインがきれいだという評価です。

複雑な仕組みは、小分けにして頼む

エンジニアのまさおさんは、Lovableに限らず、AIに作らせる道具はまだ、複雑な仕組みを一度の指示で作りきるのは成功率が低いと話しています。そのため、どのくらいの量なら一度で頼めるかをつかみ、ちょうどよい大きさに分けて頼むことが大事だという説明です。

「これぐらいやったらいけるやろなっていう感覚を掴んで」

まさおさんは、作業の量は感覚をつかむ必要があるとしつつ、少しずつ出して頼んでいくのが重要だとまとめています。最初から完成形を一度に頼むのではなく、動くものを少しずつ足していく進め方です。

統一したい決まりは「Knowledge」に書いておく

まさおさんは、プロジェクトの設定にある「Knowledge」（知識の欄）の使い方も紹介しています。ここには、プロジェクトの説明や、全体で統一したい決まりを書いておきます。例として挙げているのは「フラットデザインにしてほしい」のようなデザインの指定です。

まさおさんは、この欄にできるだけ多くのことを書いておくのがよく、Knowledgeをよく使うことがLovableでは大事だと話しています。会社で使うなら、会社の色、使う言葉づかい、誰が使う道具か、といった前提をここにまとめておくと、毎回の頼み方を短くできそうです。

どんな人に向いているか

まさおさんは、Lovableは画面がシンプルなので、これまで開発をしたことがない人や、画像からアプリを作ってみたい人には始めやすいとしています。一方で、自分でコードを細かく触りたい開発者には、ほかの道具のほうが合うこともあるという見方です。

山口さんも、簡単なアプリなら知識がなくても作れる一方、しっかり収益を上げるようなアプリにはプログラミングの知識が要ると話しています。まずは社内の小さな道具や試作品から始める、という使い方が、どの動画にも共通しています。

できたものの直し方はLovableで作ったものを直す・前の版に戻す方法に、公開と社内で使うときの注意はLovableで作ったものを公開するときの注意にまとめています。

まとめ

• Lovableは、作りたいものを日本語で書いて送ると、数十秒〜数分で画面ができ、右側のプレビューでそのまま確かめられると紹介されています
• 使う人・ページ・機能・デザイン・つなぎたいサービスまで具体的に書くほど、最初の出来がよくなると説明されています
• 複雑な仕組みは一度に頼まず、どれくらいなら一度で作れるかの感覚をつかんで小分けにする、というコツが出ています
• 統一したいデザインの決まりやプロジェクトの説明は「Knowledge」の欄に書いておくと、毎回の頼み方を短くできます