LovableをWordPressに変換:アプリで必要なもの
- Apple silicon搭載のMac(M1以降)と、macOS 12以降。
- ChatGPTのアカウント。変換は、あなた自身のサブスクリプションのAIが行います。そのため、クレジットやトークンの代金を私たちに払う必要はありません。
- Lovableのプロジェクト:ソースコードの入ったZIPかフォルダです。入手の手順は下で説明します。
- ディスクの空き容量。実行中の変換1つにつき、数GBを使います。
Docker Desktopを前もってインストールする必要はありません。必要になれば、アプリが自分でダウンロードしてインストールします。無料枠では、5ページまでのサイトを3つ変換できます。小さなLovableサイトをWordPressに変換するには十分です。クライアントの仕事、大きなサイト、WooCommerceのショップには、料金ページで購入できるProライセンスが必要です。
html2wpアプリのインストール
Mac版アプリをダウンロードし、DMGファイルを開いて、html2wpを「アプリケーション」フォルダにドラッグします。このガイドでは、アプリのボタン名を画面の表示どおり英語で書きます。
環境の準備
アプリの「Settings」(設定)で、「Prepare environment」(環境を準備)をクリックします。アプリは必要に応じてDockerをダウンロードして起動し、変換環境と、WordPressとデータベースのイメージを読み込みます。初回は数分かかります。Macがパスワードを求めることがあり、Dockerはライセンス条項を表示します。
すべての準備ができると、アプリに「Ready to work」と表示され、ボタンが「Repair environment」(環境を修復)に変わります。このボタンを使うのは、あとで環境が壊れたときだけです。
ChatGPTでサインインする
「Connect with ChatGPT」をクリックします。アプリにコードが表示され、「Open sign-in page」ボタンでOpenAIのページが開きます。そのページでChatGPTのアカウントにサインインし、アプリに表示されたコードを入力します。パスワードを入力するのはOpenAIのページだけなので、アプリがパスワードを見ることはありません。
サインインしたら、「Conversion model」(変換に使うモデル)と「Reasoning effort」(推論の強さ)を選びます。初期設定のままでもかまいません。Proライセンスがある場合は、「Settings」でキーを入力し、「Save & check」をクリックします。無料枠ではキーは要りません。
Lovableのプロジェクトをアプリに追加する
アプリに必要なのはプロジェクトのソースファイルで、公開サイトのアドレスではありません。LovableはプロジェクトをGitHubのリポジトリと同期します。GitHubでリポジトリを開き、Code → Download ZIPでダウンロードします。プロジェクトをビルドしたり、npm installを実行したりする必要はありません。アプリが自分で行います。
アプリで「New project」(⌘N)をクリックします。「Output」は「HTML WordPress theme」のままにして、「Import a ZIP」を選びます。プロジェクトを展開済みなら「Choose a folder」を選びます。アプリはコピーで作業するので、元のファイルは変わりません。
LovableをWordPressに変換:FlashかFullを選ぶ
プロジェクトの画面で、LovableサイトをWordPressにどこまで丁寧に変換するかを選びます。Flashが初期設定で、各手順を1回ずつ実行し、約30分かかります。Fullはすべてのチェックを実行し、見つけたエラーの修正を試みるので、約1時間かかります。正確な時間は、ページ数とMacの速さによって変わります。
WordPressが不要なら、種類をAstro 5に切り替えます。するとアプリは静的サイトをビルドし、アプリから直接Cloudflare Pagesにデプロイできます。
変換の進み方
変換中は「Overview」(概要)タブに、変換プラグインが進めている手順と、自分で行った修正が表示されます。ほとんどの時間は、あなたなしで進みます。Lovableのプロジェクトが古いReactアプリでも、新しいTanStack Startのプロジェクトでも、アプリはまずプロジェクトをビルドしてブラウザで開き、各ページを完成したHTMLとして保存します。そのHTMLをテーマにするのは、そのあとです。
一時停止するには「Stop conversion」をクリックし、「Continue」で再開します。プラグインが手順の途中で自分から止まった場合は、「Repair and continue」でエラーを直して続行させます。
LovableサイトとWordPress版を見比べる
「Compare」タブには、元のサイトの各ページとWordPress版が並んで表示されます。幅はデスクトップ(Desktop · 1440)とモバイル(Mobile · 390)で、違いはパーセントで示されます。すべてのページを自分の目で確認してください。自動チェックで見つかるのは違いの大部分で、すべてではありません。ある変換では、セクションが丸ごと抜けていたのに、違いはわずか0.4%でした。
「Preview」タブでは、「Open website」でローカルのWordPressサイトが、「WordPress admin」でその管理画面が開きます。何かを変えたいときは、右側のチャットに入力します。変更は数秒でプレビューに反映されます。最後に「Make release」をクリックすると、プレビューで見たとおりの状態でテーマがパッケージされます。
LovableをWordPressに変換:テーマのエクスポート
LovableからWordPressへの変換が終わると、完成したファイルは「Exports」タブにあります。WordPressテーマの横の「Save」をクリックして、ZIPを保存します。ほかに、PDFの変換レポートと元のプロジェクトのZIPがあり、Flash変換のあとはAstro 5のプロジェクトもあります。
WordPressで「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」を開き、ZIPを選んでテーマを有効化します。ページ、ブログ、フォーム、メニュー、SEO、リダイレクトはすべてテーマに含まれ、プラグインなしで動きます。
クライアントがページ上をクリックしてテキストや画像を編集できるようにしたいなら、Visual Editエディターを追加してください。ターミナルでエージェントと作業したい場合は、Claude CodeとCodex用プラグインのガイドで同じ変換を説明しています。