html2wp / ブログ / Lovable WordPress移行
Lovable WordPress移行：プロジェクトを本物のテーマに変換
Lovable WordPress移行は、HTMLをWordPressに変換する作業と同じで、工程が1つ増えるだけです。Lovableの古いプロジェクトはReactアプリなので、そのHTMLには変換できる中身がありません。ページは、ブラウザでJavaScriptが動いたときに初めて現れます。新しいプロジェクト（2026年5月以降のTanStack Start）は、ページをサーバーで描画します。html2wpはどちらも同じ方法で変換します。この記事では、そうしたプロジェクトをWordPressテーマにするまでを順に説明します。テーマにはあなたのコードがそのまま入り、作り直しはしません。どの手順も実際の変換で行ったもので、変換前と変換後の両方を開いて確かめられます。
Lovable WordPress移行の例：変換前と変換後の両方を公開中
以下はすべて、私たちが実際に行った変換の記録です。元になったのはLovableのアプリbruce-banner.lovable.appで、写真家のポートフォリオです。変換後のbruce.html2wp.devはWordPressで動いています。管理画面には/wp-adminから入れます。ユーザー名はdemo、パスワードもdemoです。
この変換で、テーマbruce-banner上に5つのページと5つの投稿ができました。これは無料枠に収まります。無料枠では1回の変換につき5ページまで変換でき、キーは要りません。読み進める前に、2つのサイトを並べて開いてください。この記事のテーマはその2つの違いです。並べておけば、違いをご自分で確かめられます。
ほかに2つのLovable変換も、同じように両方を公開しています。1つ目はspark-remix-kindred.lovable.appから変換したterra.html2wp.devで、WooCommerceで動くニット製品のショップです。2つ目はbloom-echo-remix.lovable.appから変換したsoria.html2wp.devで、ウェディングフォトグラファーのサイトです。3つとも、WordPress管理画面のログインはdemo / demoです。
ここでいう「1:1」の正確な意味
Lovableのアプリがブラウザで組み立てるコードと、テーマに入るコードは同じものです。セクションをページビルダーのウィジェットとして作り直すことはしません。そのため、ページごとにデザインを似せただけの仕上がりにはなりません。以下の手順はすべて、この前提から来ています。
Lovable WordPress移行でパソコンに必要なもの
ビルド、ブラウザでの処理、すべてのチェックは、あなたのパソコンで実行します。テーマを生成するサービスに送るのは、ビルドした結果だけです。Lovable WordPress移行といっても、ZIPをアップロードするタイプのウェブサービスではありません。そのため、事前に知っておきたい要件があります。
- Node 20以降：ビルドとローカルのスクリプトに使います。
- Python 3と、Playwright・Pillowパッケージ。Playwrightは本物のブラウザを操作します。ReactアプリはこれでHTMLになります。
- Dockerと
docker composeコマンド。パソコン上に一時的なWordPressを起動します。変換ツールは、あなたに見せる前にそこでテーマをチェックします。 - php-cli：すべてのPHPファイルは、ZIPに入る前に構文チェックを受けるからです。
jq、curl、bash、tar。インストール先のWordPressは6.6以降が必要です。
プラグインは最初の手順でこれらをすべて確認し、2つのリストを表示します。1つ目は、あなたのフォルダの中に自動でインストールできるものです。2つ目は、あなたが判断する必要があるもので、Docker、新しいNode、Dockerの起動がこれにあたります。2つ目のグループを黙ってインストールすることはありません。
いちばん驚かれるのはDocker
ほかの変換ツールはDockerを必要としません。この工程を省いているからです。ここでは、生成したテーマを本物のWordPressにインストールし、そこでテストします。ブラウザとコンテナはそのためにあります。ブラウザ上で5分で終わるツールを探しているなら、このツールは向いていません。
プラグインのインストール
プラグインは、エージェントごとに1つずつ公開しています。スクリプトとバージョン番号は、Claude CodeとCodexで同じです。使っている方を選んでください。
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
続けて、ターミナルで一度だけ次を実行します。
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
無料枠なら、ほかに設定するものはありません。キーも登録もカードも要りません。ターミナルを使いたくない場合は、同じ変換をhtml2wpデスクトップアプリで実行できます（スクリーンショット付きのガイドがあります）。
Lovableのプロジェクトをディスクに置く方法
公開中のサイトのアドレスは、入力として使えません。これは意図的です。公開ページのコピーには、表示された結果しか残りません。ソースコードが持っている情報は失われます。どんなルートがあるか、コンポーネントは何か、ビルドで何ができるか、といった情報です。
そのため、Lovable WordPress移行の入力はフォルダです。LovableはプロジェクトをGitHubのリポジトリと同期します。リポジトリを接続してクローンすれば、プロジェクトが手元に来ます。今月のLovableの画面がどうなっていても、必要なのはリポジトリです。Lovableがサイトをビルドするのと同じファイルが入っています。
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
先にnpm installやビルドを実行する必要はありません。変換の中で自動的に行います。
「convert this project」と入力する
そのフォルダでエージェントを開き、次のように入力します。
/html2wp:html2wp
convert this project
Codexにはスラッシュコマンドがありません。代わりにconvert this project into a verified WordPress block themeと伝えると、Codexが自分でスキルを見つけます。Claude CodeでもCodexでも、指示はこの一文だけです。設定ファイルを書く必要も、ビルドコマンドを選ぶ必要もありません。
Flashは約30分、Fullは約1時間かかります。ページ数とパソコンの速さによって変わります。ほとんどの時間は手を離していて大丈夫です。手順が1つ終わるたびに進み具合を報告するので、黙ったまま進むことはありません。
Lovable WordPress移行でReactはどうなるか
これが、Lovableのプロジェクトで増える工程です。
Lovableの古いアプリ（ReactとVite）にはindex.htmlが1つしかありません。そのbodyにあるのは、Reactアプリが組み込まれる空の要素とscriptタグだけです。つまり、変換できるものがありません。変換ツールは、まずプロジェクトをビルドします。次に本物のブラウザがすべてのルートを順に開き、その様子をレコーダーが記録します。結果はルートごとのフラットなHTMLで、後の工程に必要なのはまさにこれです。TanStack Startで動く新しいプロジェクトは、すでにページをサーバーで描画します。それでも変換ツールはプロジェクトをビルドし、同じ方法ですべてのルートを開きます。
レコーダーが記録するもの
- JavaScriptが動いたあとにだけ存在する状態。開いたアコーディオン、ドロップダウンの中身、スクリプトが変更するクラスなどです。レコーダーはこれを要素のデータとして保存し、小さな汎用ランタイムが再生します。誰かが記憶を頼りに手書きすることはありません。
- スクロールのしきい値を、ピクセル単位で。
scrollY > 40で変わるヘッダーは、誰かが決めた数値を使っています。レコーダーはその数値を見つけ、正確な位置を割り出します。丸めた推測値では、ヘッダーがずっと間違ったタイミングで変わってしまいます。 - 「同時に1つしか開けない」関係。Aを開いてからBを開いたとき、Aは閉じたでしょうか。要素を1つずつ記録してもわからないので、レコーダーはこれを別にテストします。
- スクロールで現れるアニメーションも残ります。レコーダーがアニメーションを記録し、テーマは元のサイトとまったく同じように再生します。JavaScriptがなくてもコンテンツは表示されたままで、要素が隠れるのはランタイムが動いている間だけです。
prefers-reduced-motionが有効なら、テーマはアニメーションを省きます。1:1の一致は、アニメーションが終わって静止した状態で測ります。
ごまかさないこと
- 記録できなかった動作は、リストに載ります。リストはページごとにあります。必ず読んでください。
この工程には専用のチェックがあります。後のチェックからは見えない工程だからです。変換ツールはすべてのルートの実際の表示をスクリーンショットに撮り、幅1440、820、390ピクセルで静的なキャプチャーと比べます。違いがあれば、この工程は失敗です。後の工程はすべてキャプチャーとWordPressを比べるので、ここで生まれた不具合はどのチェックにも引っかかりません。
省略できない目視チェック
自動チェックが終わっても、Lovable WordPress移行はまだ終わりではありません。変換ツールは、各ページを元のページと並べて1枚の画像にします。その画像を1枚ずつ、上から下まで読んでください。
ある変換では、ページ下のほうのセクションが丸ごと抜けていたのに、ピクセル比較の差はわずか0.4%でした。そのページは、セクションがないままチェックを通ります。自動チェックには、性質上見えない不具合が3種類あります。1つ目は、見た目は完璧なのに何も起きない操作部品です。2つ目は、テンプレートの元になった1ページの値がそのまま埋め込まれたものです。3つ目は、スクロール、クリック、フォーム送信のあとにだけ現れるものです。
見た目が正しいかどうかに加えて、内容を編集できるかも確認してください。ピクセル単位で一致していても、サイトの持ち主がFAQや機能紹介のグリッドを編集できないことがあります。実際に起きたことです。5つの質問があるアコーディオンは見た目がまったく同じでしたが、どのエディターでも編集できませんでした。見た目だけを確認するレビューでは、これを見逃しました。ページごとに、繰り返しのグループとテキストのブロックをすべてwp-adminから編集できるか確かめてください。
テーマのインストール
プロジェクトのフォルダには、テーマのZIPと、その横にCONVERSION-REPORT.mdが置かれます。それ以外は何も増えません。ビルドを行う作業フォルダはプロジェクトの外のキャッシュフォルダにあるので、リポジトリはきれいなままです。レポートだけは例外で、読むのがあなただからです。変換の対象範囲、目視チェックで見つかったこと、すべての警告（許容できるものも含む）、まだ残っている課題が書かれています。
WordPressで外観 → テーマ → 新しいテーマを追加 → テーマのアップロードを開き、ZIPを選んで有効化します。テーマは単独で動きます。ページ、ブログ、フォーム、メニュー、SEO、リダイレクトは、すべてテーマ自身のコードです。動作にプラグインは要らず、私たちのサーバーと通信することもありません。
Lovable WordPress移行後のサイト編集：3つの方法
ブログ記事は普通のWordPressの投稿になるので、すぐにブロックエディターで書けます。ページの文章はHTMLのまま残ります。ページをコードなしで編集するには、知っておきたい選択肢が2つあります。そのうち1つはページビルダーです。
| 方法 | 得られるもの | デメリット |
|---|---|---|
| テーマだけ | あなたのコードが、変更されずにそのまま残ります。プラグインも依存関係も、更新の手続きもありません。投稿はブロックエディターで書きます。 | プラグインがなければ、ページの文章はHTMLで変更します。クライアントが自分で編集したいなら、Visual Editで編集できます（Liteは無料）。 |
| Visual Edit（私たちのプラグイン） | ページ上の見出しをクリックし、上から入力して保存します。テキスト、画像、リンク、フォーム、メニューをその場で編集でき、コードは元のままです。Liteは無料で、キーは要りません。 | WordPressにプラグインが1つ増えます。Liteの履歴は10ステップまでで、AIチャットはありません。Proは年額€59です。 |
| Elementor または別のページビルダー |
Elementorを知っている人なら、1人でページを組み替えられます。使える人も多くいます。レイアウトを自分で変えるクライアントには、その慣れに価値があります。 | コードがビルダーのウィジェットとして作り直され、もうあなたのコードではなくなります。以後、サイトはElementorなしでは表示できず、その構造、CSS、アップデートを引き継ぐことになります。 |
デザインを残すために変換するなら、それを壊すのがまさにページビルダーです。デザインを手作業でビルダーに移すと、その時点でサイトはデザインどおりに見えなくなります。この変換ツールがあるのはそのためです。ただ、デザインが出発点にすぎず、クライアントが次の四半期にどうせ半分を作り直すなら、Elementorを渡してかまいません。
Visual Editを選ぶなら、LiteかProか
| Lite（無料） | Pro | |
|---|---|---|
| クリックでコンテンツを編集 | ✓ | ✓ |
| フォーム、メニュー、SEO項目 | ✓ | ✓ |
| AIチャットでの編集 | – | ✓（ご自分のAPIキーで） |
| テーマのエクスポート | – | ✓ |
| Turnstileによるフォーム保護 | – | ✓ |
| AIによる画像編集と、画像からのアニメーション | – | ✓ |
| 編集履歴 | 10ステップ | 300ステップ |
ProのAIチャットは、ご自分のAPIキーで動きます。私たちはトークンを販売しません。利用料金は、プロバイダーに直接お支払いください。
LovableかWordPressか？どちらかを選ぶ必要はありません
よく、どちらか一方を選ぶ話として語られます。コンテンツ中心のサイトなら、選ぶ必要はありません。Lovableでは、デザインを素早く作れます。WordPressでは、サイトが何年も動き続け、ほかの人が編集します。Lovable WordPress移行では、Lovableで作ったデザインを残したまま、サイトの運用をWordPressに移せます。テーマはどのWordPressホスティングでも動くので、作った場所にサイトを置き続ける必要もありません。
移るのはウェブサイトで、ページ、ブログ、フォーム、メニュー、SEO、リダイレクトが対象です。移らないのは、その裏にあるアプリケーションです。ログイン、データベース、独自APIの呼び出しがこれにあたります。Lovableのプロジェクトがほとんどこちらなら、Lovableに置いておいてください。ショップはその中間です。Proライセンスがあれば、Terra Studiosの例のように、商品カタログがWooCommerceになります。
Lovable WordPress移行の料金と、変換を断るケース
無料枠は誰でも使え、キーも登録も要りません。5ページまでの変換が3回と、再実行が合計5回です。どちらの回数もIPアドレスごとに数えるので、1つのアドレスを共有するオフィスでは、全員で1人分の枠になります。無料枠は、ツールのお試し、個人サイト、非営利の用途のためのものです。
Proライセンスがあれば、ページ数の上限がなくなり、変換と再実行は無制限になります。ショップをWooCommerceにする工程も加わります。この工程は無料枠にはまったく含まれません。アプリは、ショップのあるサイトの無料変換を最初から断ります。半分だけ変換することはしません。Proは月額€49または年額€490で、価格は料金ページにあります。ベータ期間中は初回の支払いが30%安くなり、キーはメールで届きます。
前もって知っておきたい「断るケース」が2つあります。1つ目は、ルートがレコードごとにしか存在しないReactプロジェクトです（表示するデータのない/product/:idなど）。これは変換するサイトではなく、ウェブアプリです。変換ツールは、テンプレートの適当な1例だけを出力することはせず、はっきり断ります。もう1つは、これがベータ版だという点です。チェックで見つかるのは違いの大部分で、すべてではありません。そのため、ページごとの目視チェックは工程に組み込まれていて、省略できません。
全体の手順は、html2wpアプリのドキュメントで順に説明しています。変換前と変換後の両方を開ける3つのLovable変換は、この記事の冒頭の例にあります。