Lovable 直し方と戻し方｜できた画面を会話や部品選びで直し、失敗したら前の版に戻す方法

「ボタンの色だけ変えてほしかったのに、ページ全体が変わってしまった」

AIに作らせたものは、最初から思いどおりになることはまれです。直しを頼むたびに別のところが崩れて、どこまで戻せばいいか分からなくなる。そうなると、AIに任せるのがかえって不安になります。

Lovable（ラバブル）は、作りたいものを文章で伝えると、AIがアプリやホームページを作るサービスです。この記事では、Lovableでできたものを「直す」「戻す」やり方を、解説動画から集めて見比べました。最初の作り方はLovableでアプリやサイトを作る方法にまとめています。

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

プレビューを見ながら、チャットで直しを頼む

いちばん基本の直し方は、できた画面を見ながら、チャットで頼むことです。アプリ開発研究所の山口さんは、作りたいものを送ると、数十秒から数分で右側にプレビュー（仕上がりの見本）が出るので、それを確かめてから直しを頼む流れを説明しています。

「修正したい点があればチャットにて修正の依頼を行いましょう」

AI大学の動画でも、サイトができたあと、チャットで色などの細かいところを直し、画面の上にあるスマホのボタンを押して、スマホでの見え方を確かめる手順が紹介されています。会社のページなら、お客様はスマホで見ることが多いので、ここを確かめる手順は欠かせません。

Kabu & Koinの動画では、直しの頼み方の幅が紹介されています。ページを作り直す、機能を足す、配置を変える、文章を書き直す、仕組みの決まりを変える、といったことを、ファイルを探して自分で直す代わりに、言葉で伝えればよいという説明です。

画像を添えて、見た形で伝える

言葉だけで見た目を伝えるのは、意外と難しいものです。Kabu & Koinの動画では、直しを頼むときに画像やスクリーンショット（画面写真）を添えられると紹介しています。AIが目で見た形を手がかりにできるので、すでに作りたいデザインがある場合に特に便利だという話です。Figma（デザインを作る道具）のデザインを出発点にすることもできるとしています。

アプリ開発研究所の山口さんも、作りたいデザインがすでに決まっているなら、最初に画像やFigmaのデータを渡しておくことを勧めています。言葉で雰囲気を伝えるより、求めていたデザインに近づけやすいという説明です。

部品を選んで、その場で色や大きさを変える

小さな直しなら、AIに頼まずに自分で変えることもできます。まさおさんは、Lovableの「Edit」モードを見せています。画面の部品を選び、たとえばボタンの背景の色を黒に変えると、その場でボタンの色が変わりました。

まさおさんによると、細かい指定の欄（Advanced）では、見た目を決める書き方（Tailwind CSS）で文字の大きさなどを直接指定することもできます。ただ、この書き方は覚えるしかないので、分からなければChatGPTなどに聞きながら使えばよい、と話しています。変えたら保存すると反映されます。

Kabu & Koinの動画でも、チャットを使いながら部品を選んで目で見て直す編集のしかたが紹介されています。言葉で頼むと大きく変わってしまうような小さな直しは、こちらのほうが確実です。

直す前に「計画モード」で中身を確かめる

大きな変更を頼むときは、いきなり直させる前に、何をするつもりかを確かめる方法があります。Kabu & Koinの動画では、Lovableには2つの進め方があると紹介しています。

「実装前に変更を検討するための計画モード」

もう1つは、プロジェクトに直接手を入れていく「エージェントモード」です。思ったのと違う方向に直されるのが心配なときは、まず計画モードで「どこをどう変えるか」を見てから進める、という使い分けです。

失敗したら、前の版に戻す

それでもうまくいかないときのために、Lovableには前の状態に戻す仕組みがあります。

まさおさんは、チャットで「フッター（ページのいちばん下の欄）を追加して」と頼み、フッターができたあとで、それを取り消す様子を見せています。履歴に「チェックポイント」と呼ばれる区切りが残っていて、戻したい時点を選んで戻すボタンを押すだけです。

「ここで戻すを押すと戻るイメージですね」

一度戻したあとで、別の時点にもう一度戻すこともできると説明しています。Kabu & Koinの動画でも、プロジェクトには版の履歴があり、変わったところを追って、必要なら前の版に戻せると紹介されています。

戻せると分かっていれば、思い切って直しを頼めます。大きな変更の前には、今の状態がうまく動いているかを確かめてから頼むと、どこまで戻せばよいかも分かりやすくなります。

まとめ

• Lovableでは、右側のプレビューを見ながら、チャットで直しを頼むのが基本です。スマホでの見え方も画面上で確かめられます
• スクリーンショットや見本のデザインの画像を添えると、目で見た形を手がかりに直してもらえると紹介されています
• 小さな直しは「Edit」モードで部品を選び、色などをその場で変えられます
• 大きな変更の前は「計画モード」で中身を確かめ、失敗したら履歴（チェックポイント）から前の版に戻せます