Lovableで作ったWebサイトをStudioに取り込む手順——公開ページを保存して持ち込む方法

Lovableは、チャットで頼むだけでWebサイトやアプリを丸ごと作り、そのまま公開までできるツールです。「作って公開する」までが速い一方で、「公開したあとの文章の直し・ページの追加・SEOの設定はStudioでやりたい」という声もあります。

この記事では、Lovableで作ったサイトをStudioに取り込むまでの流れを説明します。Lovableの出力はReact形式なので、まず「静的なHTML/CSS」にする手順が要ります。全体像は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較へ。

Lovableの出力は、どんな形で返ってくるか

Lovableのプロジェクトは、React（Vite）とTailwind CSS、部品ライブラリを組み合わせた構成です。ファイルをそのままダウンロードしても、中身はプログラムで、ブラウザで開いて初めて画面が組み立てられます。この形のままではStudioに持ち込めません。

Studioに持ち込むための経路は2つあります。

• 公開したページをブラウザで保存する：Lovableでサイトを公開（またはプレビュー）し、そのページをブラウザで開いて「名前を付けて保存」→ 保存形式を「ウェブページ、完全」にします。HTMLファイルと、CSSや画像が入った「_files」フォルダの2つができます。この2つを一緒にSHITAJIの「フォルダを読み込む」で選びます。ページが複数あるサイトは、ページごとにこの保存を繰り返します。
• Lovableに静的HTMLを頼む：チャットで「このページを、Reactを使わない単一のHTMLファイル（CSSは中に書く・JavaScript無し）として書き出して」と頼み、返ってきたコードを「index.html」で保存します。応じてもらえれば、こちらのほうがファイルが素直で、取り込んだあとの手直しが少なくなります。

Studioに取り込むまでの3ステップ

静的なHTMLの形になれば、SHITAJIでの流れは他のAIと同じです。

• 読み込む：ブラウザで保存した場合は「フォルダを読み込む」でHTMLと「_files」フォルダを一緒に選びます。HTML1つなら「HTML/CSSファイルを読み込む」。中身が空のReactファイルを渡すと、SHITAJIは読み込む前に見つけてお知らせします。
• 書き出す：画面で見た目を確かめたら「Studio用に書き出す」を押します。検査を通ったものが、Studioのネイティブ要素（ボックス・テキスト・画像）に変換されます。
• 追加する：「コピー」を押し、Studioのデザイン画面で ⌘V（WindowsはCtrl+V）で貼り付けます。以降は普通のStudioプロジェクトとして編集できます。

Lovableのサイトで崩れやすい箇所と、直し方

Lovableの出力で、取り込んだあとに差が出やすいのは次の箇所です。

• ブラウザで保存したページに、動きの途中の状態が写る：スクロールで現れる演出があると、保存した時点で「まだ表示されていない」要素が透明のまま保存されることがあります。ページをいちばん下までスクロールして全部表示させてから保存すると避けられます。
• ログインが要る画面や、入力してから出る画面：保存できるのは「その時点で表示されている見た目」だけです。Studioに持ち込むのは、誰が開いても同じに見える案内ページ（トップ・サービス紹介・会社概要など）に絞るのが現実的です。
• フォーム：Lovableのフォームは送信先の仕組みごと作られていますが、Studioに持ち込めるのは見た目だけです。送信の仕組みはStudioのフォーム機能で作り直します。Studioのフォーム機能の基本へ。
• メニューの開閉・タブ・カルーセル：JavaScriptの動きは持ち込めません。生成AIが書いたスライダー・アコーディオンのJavaScriptが、Studioで動かない理由で置き換え方を整理しています。
• 複数ページのつながり：ページごとに保存して読み込む場合、ページ間のリンクはStudio側で張り直します。

LovableとStudioの分担

Lovableは「構成と見た目の案を、動く形で素早く出す」ところが得意です。公開後の運用——文章の細かな修正、ページの追加、SEOやOGPの設定、フォームの通知——をStudioでやりたいなら、Lovableの案をStudioに写してから仕上げる分担が向いています。

「Lovableで作ったものをそのまま公開し続けるか、Studioに移して運用するか」は、公開後にどれだけ手を入れるかで決めるとよいと思います。移す前の確認事項はノーコードサイトの乗り換えを考えるときに、先に確認しておきたいことにまとめています。