室谷代表取締役Lovableが大きめのアップデートを出してきましたね。他ツールで作ったプロジェクトや、すでに公開しているウェブサイトをLovableに取り込めるインポート機能です。
テキトー教師DotAI 認定講師これは単に「移行できるようになりました」という話じゃないんですよ。Lovable自身が「多くのツールは“作る”で止まるが、Lovableはその先も続く」と書いていて、インポート後に決済・広告・顧客獲得まで支援する流れまで含めて打ち出しています。
室谷代表取締役発表はLovableの公式Xアカウントからで、詳細は公式ドキュメントに分かれて書かれているんですよね。サイトのインポートとプロジェクトのインポートでページが別になっています。
テキトー教師DotAI 認定講師まず押さえるべきは、今回のインポートが2種類あることです。ひとつはコードのZIPを取り込む「プロジェクトインポート」、もうひとつは公開URLからサイトを再構築する「ウェブサイトインポート」。
混同しやすいので、そこを整理しながら進めましょう。
混同しやすいので、そこを整理しながら進めましょう。
室谷代表取締役なるほど、ここは丁寧に分けたほうがよさそうですね。
Lovableのインポート機能とは?何が取り込めるのか
Lovableのインポート機能:2種類の取り込み方法
プロジェクトインポート
- 他ツールで作ったアプリのコードをZIP(最大250MB)で取り込む
- Lovableのプロジェクトとして再構築する
- Replit、Manus、Bolt、Base44、v0からのエクスポート手順がダイアログ内に案内される
- それ以外のツールでもZIPにできれば「Upload code」で取り込める
- コードを解析してTanStack Startで再構築する
- データベースとユーザーをLovableの組み込みバックエンドへ移行する
- パスワードとセッションは引き継がれない
- ユーザーは次回サインイン時にメール確認とパスワード再設定が必要
ウェブサイトインポート
- 公開中のサイトのURLを貼り付ける
- 画面に見えている要素を読み取ってLovableのプロジェクトとして再構築する
- Wix、Squarespace、Webflow、Framerなら「Other platforms」を選ぶと案内が出る
- 取り込めるのはテキスト、画像、フォント、色、余白、デスクトップ幅のレイアウト、スマホ幅でのスタイル変化、ブラウザタブのページタイトルまで
- ログインの裏側、データベース、サーバーで動いていた処理は取り込まれない
- ログインが必要なページはログイン画面そのものが取り込まれる
- フォームは見た目だけ残り、送信処理は引き継がれない
室谷代表取締役Lovableのインポート機能は、Lovableが発表した、外部で作ったプロジェクト(コード)と公開済みウェブサイトをLovableに取り込める機能です。大きく2種類あります。
テキトー教師DotAI 認定講師整理するとこうです。
- プロジェクトインポート:他ツールで作ったアプリのコードをZIP(最大250MB)で取り込み、Lovableのプロジェクトとして再構築する
- ウェブサイトインポート:公開中のサイトのURLを貼り、画面に見えている要素を読み取ってLovableのプロジェクトとして再構築する
室谷代表取締役プロジェクトのほうは、Replit、Manus、Bolt、Base44、v0からのエクスポート手順がダイアログ内に案内される形になっています。それ以外のツールでも、ZIPにできれば「Upload code」で取り込めます。
テキトー教師DotAI 認定講師サイトのほうは、Wix、Squarespace、Webflow、Framerで作ったサイトなら「Other platforms」を選ぶと案内が出る、という作りですね。どちらも同じインポート画面に合流します。
室谷代表取締役ここで大事なのは、サイトインポートは「見えているものだけ」を読むということです。テキスト、画像、フォント、色、余白、デスクトップ幅のレイアウト、スマホ幅でのスタイル変化、ブラウザタブに出るページタイトル。
ここまでです。
ここまでです。
テキトー教師DotAI 認定講師ログインの裏側、データベース、サーバーで動いていた処理は取り込まれません。ログインが必要なページは、未ログインの訪問者に見える画面、つまりログイン画面そのものが取り込まれる、と公式ドキュメントに明記されています。
室谷代表取締役フォームも見た目は残るけど、送信内容をメールで飛ばすような元の処理は引き継がれないんですよね。そこは取り込んだあとにLovableに作り直してもらう前提です。
テキトー教師DotAI 認定講師プロジェクトインポートのほうはもう少し踏み込んでいて、コードを解析してTanStack Startで再構築し、データベースとユーザーをLovableの組み込みバックエンドへ移行します。ただしパスワードとセッションは引き継がれず、ユーザーは次回サインイン時にメール確認とパスワード再設定が必要になります。
室谷代表取締役この「パスワードは引き継がれない」は運用上すごく重要なので、後半の注意点でもう一度触れましょう。
Lovableでできること――インポート後に決済・広告・顧客獲得まで進める仕組み
Paddle と Stripe の違い
Paddle
- 運営モデル: Merchant of Record(MOR)
- 対象: 対応国におけるデジタル製品・ソフトウェア
- コスト: 取引ごとに5.0% + 50¢、月額なし
- 向いているケース: グローバルに販売するSaaS・デジタル製品
- 税務・請求・コンプライアンスまで担う
- 10ドル未満の取引は定額10%(手数料が購入価格の10%を超えない)
Stripe
- 運営モデル: PSP(任意でMOR=Managed Payments)
- 対象: Stripe対応国におけるデジタル製品・サービス・物理製品
- コスト: Stripe標準の従量課金
- 向いているケース: サービス販売、国内市場、取引ごとのMOR制御
- Managed Paymentsを有効にすれば取引ごとにMORも使える
室谷代表取締役今回の発表の狙いが一番出ているのがここで、「インポートしたあとに決済を足し、広告を作り、顧客を見つける」という流れをLovableが訴求しているんですよね。
テキトー教師DotAI 認定講師決済はPaddleとStripeの2プロバイダーに対応しています。Lovableがプロジェクトを分析して、両方を提示するか、売るものに応じて片方を推薦する仕組みです。
室谷代表取締役この2つは性格が違うので、そこを整理しておきたいですね。
テキトー教師DotAI 認定講師整理するとこうです。
| 項目 | Paddle | Stripe |
|---|---|---|
| 運営モデル | Merchant of Record(MOR) | PSP(任意でMOR=Managed Payments) |
| 対象 | 対応国におけるデジタル製品・ソフトウェア | Stripe対応国におけるデジタル製品・サービス・物理製品 |
| コスト | 取引ごとに5.0% + 50¢、月額なし | Stripe標準の従量課金 |
| 向いているケース | グローバルに販売するSaaS・デジタル製品 | サービス販売、国内市場、取引ごとのMOR制御 |
室谷代表取締役PaddleはMORなので、税務・請求・コンプライアンスまで担ってくれる。StripeはPSPで、Managed Paymentsを有効にすれば取引ごとにMORも使える、という違いですね。
テキトー教師DotAI 認定講師マイクロトランザクション向けの軽減もあると書かれています。Paddleは10ドル未満の取引が定額10%になり、手数料が購入価格の10%を超えないようになっています。
室谷代表取締役あとLovable経由でStripeやPaddleを使っても、直接契約するのと同じコストだというのも安心材料です。中抜きがないわけですから。
テキトー教師DotAI 認定講師決済のセットアップはテスト環境と本番環境が分かれているのも実務的です。プレビューではテストカードしか通らず、公開したアプリで初めて実際の決済が処理されます。
公開すると商品と価格がテストから本番へ自動で同期される仕組みです。
公開すると商品と価格がテストから本番へ自動で同期される仕組みです。
室谷代表取締役MYUUUでも決済まわりはいつも悩みどころなので、この「テストと本番が分かれていて、公開で同期」という流れはありがたいですね。広告や顧客獲得まで同じ場所で回せるなら、ツールを行き来する手間が減ります。
テキトー教師DotAI 認定講師なお物理商品はShopify連携が用意されていて、Stripeの組み込み決済も使えるけれど在庫と物流は別管理になる、と公式ドキュメントに書かれています。
Lovableのインポートの使い方・始め方――プロジェクト(ZIP)とサイト(URL)の取り込み手順
Lovableのインポート方法:サイト(URL) vs プロジェクト(ZIP)
サイト(URL)インポート
- 「+」→「Import project to Lovable」→「Everything else」で「Website」を選択(Wix・Squarespace・Webflow・Framerは「Other platforms」でも同じ画面)
- 「Website URL」にhttps://を含む完全な公開アドレスを貼る
- 「Import website」クリックでプロジェクト作成・エディタが開く
- チャットでサイトをコピーする権利の確認に答える(1サイトにつき1回)
- 最初のページがホームページになり、追加ページは元のパスを保つ形で1リクエスト最大10ページ
- 最初のページのリンクからLovableが候補ページをリストアップ
- 別サイトのページは同一プロジェクトに追加不可、サブドメインも別サイト扱い
プロジェクト(ZIP)インポート
- 「+」→「Import project to Lovable」→「App builders」でReplit・Manus・Bolt・Base44・v0を選ぶか「Upload code」を選択
- ダイアログの番号付き手順に沿ってエクスポート
- ZIPをドロップまたは「Choose file」で選び「Start import」を押す
- プロジェクトが作られ、チャットでマイグレーションが自動進行
- ZIPは最大250MB、.env・node_modules・ビルド成果物は入れない
- DBレコードとユーザーアカウントは別途エクスポート(CSV/JSONを添付、1ファイル最大2MB・1メッセージ最大10ファイル/25MB)
- SQLダンプ全体は不可、テーブルごとに分割。ユーザーテーブルはメールと元IDを含める
室谷代表取締役ここは実際の手順をなぞっておきましょう。どちらもダッシュボードのプロンプト入力欄にある「+」ボタンから、「Import project to Lovable」を選ぶところが起点です。
テキトー教師DotAI 認定講師まずウェブサイトインポートの流れを整理します。
- ダッシュボードの「+」から「Import project to Lovable」を選ぶ
- 「Everything else」で「Website」を選ぶ(Wix・Squarespace・Webflow・Framerなら「Other platforms」でも同じ画面に進む)
- 「Website URL」に https:// を含む完全なアドレスを貼る(公開されているページであること)
- 「Import website」をクリックするとプロジェクトが作られエディタが開く
- チャットで「サイトをコピーする権利があるか」の確認に答える
室谷代表取締役権利確認は1サイトにつき1回だけ聞かれるんですね。自分のサイトか、所有者の許可があるサイトだけを取り込む前提です。
クライアントのサイトをリデザインする用途は想定内だと書かれています。
クライアントのサイトをリデザインする用途は想定内だと書かれています。
テキトー教師DotAI 認定講師最初に取り込んだページがプロジェクトのホームページになります。そのあと追加するページは元サイトのパスを保つ形で、1リクエスト最大10ページまで。
最初のページが他のページにリンクしていれば、Lovableが候補をリストアップしてくれるので、欲しいページ名を伝えるかURLを渡します。
最初のページが他のページにリンクしていれば、Lovableが候補をリストアップしてくれるので、欲しいページ名を伝えるかURLを渡します。
室谷代表取締役別サイトのページは同じプロジェクトに追加できない、サブドメインも別サイト扱い、というのも覚えておきたいポイントです。
テキトー教師DotAI 認定講師続いてプロジェクトインポートです。こちらはZIPを用意するか、対応ツールならダイアログの案内に沿ってエクスポートします。
- 「+」から「Import project to Lovable」を選ぶ
- 「App builders」でReplit・Manus・Bolt・Base44・v0を選ぶか、その他は「Upload code」を選ぶ
- ダイアログの番号付き手順に沿ってエクスポートする
- ZIPをドロップまたは「Choose file」で選び、「Start import」を押す
- プロジェクトが作られ、チャットでマイグレーションが自動進行する
室谷代表取締役ZIPは最大250MBで、.envファイル、node_modules、ビルド成果物は入れないようにと書かれています。APIキーは後で聞かれるので、最初から入れないのが正解ですね。
テキトー教師DotAI 認定講師データベースのレコードとユーザーアカウントはコードのエクスポートに含まれないので、別途エクスポートが必要です。最初のプレビューが出たあとに「Next: add your existing data」と聞かれるので、そこでCSVやJSONを添付します。
1ファイル最大2MB、1メッセージで最大10ファイル・25MBまで。データベース全体のSQLダンプは受け付けず、テーブルごとに分ける必要があります。
1ファイル最大2MB、1メッセージで最大10ファイル・25MBまで。データベース全体のSQLダンプは受け付けず、テーブルごとに分ける必要があります。
室谷代表取締役ユーザーテーブルはメールアドレスと元のユーザーIDを含めて出す、というのもポイントですね。IDを保つことでレコード間の参照が壊れないようにしているわけです。
Lovableの料金と提供範囲――無料枠・Pro以上の条件・日本で使えるか
室谷代表取締役料金と提供範囲は、みんなが気にするところなので丁寧に見ておきましょう。
テキトー教師DotAI 認定講師まずインポート自体は全プランで使えます。プロジェクトを作れる権限がある人なら誰でも、と公式ドキュメントにあります。
室谷代表取締役無料枠の考え方が少し独特なので整理したいですね。
テキトー教師DotAI 認定講師整理するとこうです。
- 初回インポート無料:サイトインポートは最初の1ページを取り込み終えるまで、プロジェクトインポートは最初のビルドが無料
- 無料枠は共有:サイトインポートとプロジェクトインポートで1回分を共有。アカウント単位かつワークスペース単位で、どちらも未使用のときだけ使える
- 無料期間の範囲:プロジェクトチャットの最初の5メッセージまで(ダイアログが送るインポートリクエストを含む)
- 消費のタイミング:Lovableがプロジェクトを作った時点で無料枠は使用済み扱い。失敗しても、途中で止めても、プロジェクトを削除しても戻らない
室谷代表取締役つまり「無料で試す」つもりでも、プロジェクトが作られた瞬間に1回分は消えるわけですね。ワークスペースの誰かが使っていれば、他のメンバーはもう無料枠は使えない。
ここはチーム運用だと特に注意です。
ここはチーム運用だと特に注意です。
テキトー教師DotAI 認定講師インポートを始めるには、無料のものも含めてワークスペースにクレジットがある必要があります。無料期間を過ぎると、プロジェクト内のメッセージは通常のビルド利用としてクレジットを消費します。
ページを読む作業はコストの小さな部分で、大半はLovableがプロジェクトを構築して確認するコストだ、と説明されています。
ページを読む作業はコストの小さな部分で、大半はLovableがプロジェクトを構築して確認するコストだ、と説明されています。
室谷代表取締役決済のほうはプラン条件があります。組み込み決済は有料プラン、つまりPro以上が必要で、Freeプランでは自前のStripeアカウントを接続する形になります。
テキトー教師DotAI 認定講師バックエンドの条件もあって、TanStack Startの新しいアプリは追加設定なしで決済を受けられますが、サブスクや注文など決済データを保存するならデータベースが必要です。古いReact + Viteのアプリは常に組み込みバックエンドが必要で、自前のSupabaseプロジェクトとは互換がない、と書かれています。
室谷代表取締役日本で使えるかについては、公式ドキュメントに国別の可否までは明記されていないので、現時点では明らかにされていません。決済プロバイダーの対応国はPaddleとStripeそれぞれのポリシーに依存するので、そこは個別に確認が必要ですね。
テキトー教師DotAI 認定講師決済の設定権限も決まっていて、プロジェクトの管理者・オーナー、ワークスペースの管理者・オーナーだけが設定できます。その後の切断や切り替えも同じロールと設定した本人に限られます。
なぜ今インポートなのか――Replit/Bolt/v0からの乗り換えを狙う背景
室谷代表取締役ここが今回の発表の戦略的な部分ですね。公式ドキュメントが移行元として名指ししているのがReplit、Manus、Bolt、Base44、v0です。
テキトー教師DotAI 認定講師これまでLovableは新規プロンプトからの構築が中心で、他ツールで作ったアプリや既存サイトを引き継ぐ手段が限られていました。だから他ツールで作った資産を活かせず、ゼロから作り直す必要があったわけです。
室谷代表取締役サイト移行やリデザインのたびに白紙のプロンプトから始めるのは、正直しんどいんですよね。作ったものを持ち込めるだけで、乗り換えの心理的なハードルはかなり下がります。
テキトー教師DotAI 認定講師しかもLovableは「作る」で止まらず、決済・広告・顧客獲得まで同じ場所で回せることを前面に出しています。インポートはその入口として機能する、という設計思想が読み取れます。
室谷代表取締役決済のハードルも背景にありそうです。公式ドキュメントでは組み込み決済にPro以上が必要とされていて、Freeプランでは自前のStripe接続のみ。
Xのやり取りではPayPal対応の要望に開発チームへ共有すると答えている場面もありました。
Xのやり取りではPayPal対応の要望に開発チームへ共有すると答えている場面もありました。
テキトー教師DotAI 認定講師現時点でPayPalが対応プロバイダーとして公式ドキュメントに記載されているわけではありません。ここは憶測せず、今後に注目というところですね。
室谷代表取締役あと面白いのは、LovableからGitHubへの同期やエクスポートの話と対になっていることです。持ち込めるし、持ち出せる。
囲い込みではなく往復できる設計にしているのは、乗り換えを促すうえで効いてきます。
囲い込みではなく往復できる設計にしているのは、乗り換えを促すうえで効いてきます。
インポートの制約と注意点――引き継がれないもの・失敗時の考え方
室谷代表取締役ここからは実際に使う人がハマりやすいところです。まずサイトインポートの制約を整理しましょう。
テキトー教師DotAI 認定講師整理するとこうです。
- プライベートネットワークや自分のPC上のアドレスは取り込めない
- 読み取りはデスクトップ幅とスマホ幅のみ。タブレット幅やダークモードでは元と違って見えることがある
- 1リクエスト最大10ページ
- アニメーションや動く要素中心のページは再構築が最も難しい
- パスは小文字英数字・ハイフン・アンダースコアのみ保持。大文字やアクセント付き文字、ドットを含むパスは別アドレスになる
- ページタイトルはコピーされるが、検索エンジンに出る説明文(description)はコピーされない
- 非常に大きなページは取り込めない。単一スタイルシートが2MB超なら全体を取り込まず、HTMLが5MB超、残りのスタイルシート合計が5MB超でも停止する
- 画像・フォント・動画は10MB超は除外。最大300点、合計30MBまで
- アカウントあたり1時間に最大10件のサイトインポート、読み取りは最大100ページまで
- PDFなどのダウンロード資料はコピーされない
室谷代表取締役ロゴやアイコンが個別のSVGファイルとして読み込まれている場合、表示サイズの画像に変換されるので、拡大すると粗く見えることがある、というのも実務では効いてきますね。
テキトー教師DotAI 認定講師プロジェクトインポート側の注意点は、パスワードとセッションが引き継がれないことです。ユーザーは次回サインイン時にメール確認とパスワード再設定が必要になります。
あと、他ツールの独自ストレージにアップロードされた画像や書類は、データ行だけ移してもファイル本体は移りません。必要なら別途ファイルのエクスポートを依頼する必要があります。
あと、他ツールの独自ストレージにアップロードされた画像や書類は、データ行だけ移してもファイル本体は移りません。必要なら別途ファイルのエクスポートを依頼する必要があります。
室谷代表取締役切り替えのタイミングも大事です。LovableはアップロードしたZIPから作業するのであって、他ツールに接続するわけではありません。
だから移行中も元のアプリは動き続ける。ユーザーが使い終わったタイミングでデータをエクスポートして添付する、という順番が推奨されています。
だから移行中も元のアプリは動き続ける。ユーザーが使い終わったタイミングでデータをエクスポートして添付する、という順番が推奨されています。
テキトー教師DotAI 認定講師エクスポート後に元ツールで作られたレコードはLovableには入らない、という点も忘れずに。
室谷代表取締役サイトインポートの失敗パターンも公式に整理されていて、URLが不正、インポートが開始できない、別サイトのインポートが既にある、ページ上限を超えた、何も変更されずに停止した、元と見た目が違う、あたりが挙げられています。小さな差分は想定内で、Lovableは元サイトのコードを実行しているわけではないので、余白やアニメーション、スクロールで読み込まれる内容は違いが出る前提です。
テキトー教師DotAI 認定講師差分があればチャットで「元と比較して直して」と頼める。これは講座でも伝えている進め方そのものです。
一発で完璧を狙わず、比較して直すサイクルを回すのが現実的ですね。
一発で完璧を狙わず、比較して直すサイクルを回すのが現実的ですね。
よくある質問
室谷代表取締役最後に、よく聞かれそうな点を公式ドキュメントの範囲でまとめておきましょう。
テキトー教師DotAI 認定講師Wix、Squarespace、WordPress、Webflowのサイトはインポートできますか、という質問ですが、Wix・Squarespace・Webflow・Framerは「Other platforms」から同じインポート画面に進めます。WordPressについては公式ドキュメントのこの案内に対応ツールとして明記されていないため、現時点では明らかにされていません。
室谷代表取締役ブログ記事や商品は取り込まれますか、という点は、ブログやストアは相性が悪いと書かれています。投稿や商品が管理できるレコードではなく固定ページとして入るためです。
テキトー教師DotAI 認定講師取り込んだサイトは元サイトと同期し続けますか、については、同期はしません。Lovableは読み取った内容から再構築するので、元サイトを更新しても反映されません。
室谷代表取締役GitHubリポジトリをLovableにインポートする方法は、という質問もありますね。公式ドキュメントでは、他ツールのコードをZIPにしたもの、またはリポジトリをZIPでダウンロードしたものを「Upload code」で取り込む流れが案内されています。
GitHubとの同期機能は別途「Git sync」として用意されています。
GitHubとの同期機能は別途「Git sync」として用意されています。
テキトー教師DotAI 認定講師ZIPやファイルアップロードでGitHub以外から取り込めますか、という点は、まさにその通りで、ZIPにできればどのツールのコードでも「Upload code」で取り込めます。Lovableが技術スタックやデータベース、利用サービスを検出して同じように移行します。
室谷代表取締役インポートに失敗したときは、という質問には、サイト側はURLの確認、ページ上限、権利確認の完了などを順に見る。プロジェクト側はZIPが大きすぎないか、安全に検査できるか、データやキーが揃っているかを確認する、というのが公式のトラブルシューティングに沿った考え方です。
テキトー教師DotAI 認定講師決済は無料プランでも使えますか、については、組み込み決済はPro以上が必要で、Freeプランでは自前のStripeアカウントを接続する形になります。
室谷代表取締役インポートは何回まで無料ですか、については、サイトとプロジェクトで共有の1回分だけです。アカウント単位とワークスペース単位の両方で未使用のときだけ使えて、プロジェクトが作られた時点で消費されます。
テキトー教師DotAI 認定講師というわけで、今回のLovableのインポートは「乗り換えの入口」でありながら、その先の決済・集客まで同じ場所で回すための布石なんですよね。
室谷代表取締役既存資産を持ち込めるようになったことで、これから作る人だけでなく、すでに何か作っている人にもリーチする発表だと思います。無料枠の消費タイミングだけは、チームで使う前にしっかり確認しておきたいところですね。
