html2wp / ブログ / アプリでLovableをWordPressへ

LovableをWordPressに変換:html2wpアプリで順を追って

このガイドでは、html2wpアプリで、LovableのプロジェクトをWordPressに変換します。ターミナルもプログラミングも要りません。プロジェクトをZIPで追加し、FlashかFullを選びます。最後に、デザインどおりの見た目の、完成したWordPressテーマをダウンロードします。

ガイド作成日: · Flashは約30分、Fullは約1時間 · スクリーンショットはhtml2wp 1.0.20のものです
始める前にアプリとアカウント

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はライセンス条項を表示します。

html2wpアプリ:最初の変換の前の、Prepare environmentボタンがある設定画面
最初の変換の前:「Settings」にあるPrepare environmentボタン。

すべての準備ができると、アプリに「Ready to work」と表示され、ボタンが「Repair environment」(環境を修復)に変わります。このボタンを使うのは、あとで環境が壊れたときだけです。

環境の準備が終わり、Repair environmentボタンが表示されたhtml2wpアプリ
環境の準備が完了し、サイドバーに「Environment ready」と表示されています。

ChatGPTでサインインする

「Connect with ChatGPT」をクリックします。アプリにコードが表示され、「Open sign-in page」ボタンでOpenAIのページが開きます。そのページでChatGPTのアカウントにサインインし、アプリに表示されたコードを入力します。パスワードを入力するのはOpenAIのページだけなので、アプリがパスワードを見ることはありません。

OpenAIのページでコードを入力し、html2wpアプリをChatGPTにサインインする画面
アプリに表示されたコードを、OpenAIのサインインページで入力します。

サインインしたら、「Conversion model」(変換に使うモデル)と「Reasoning effort」(推論の強さ)を選びます。初期設定のままでもかまいません。Proライセンスがある場合は、「Settings」でキーを入力し、「Save & check」をクリックします。無料枠ではキーは要りません。

ChatGPTアカウントにサインインし、モデルと推論の強さを設定しているhtml2wpアプリ
サインインしたアカウントと、変換に使うモデルの選択。
変換Lovableからテーマへ

Lovableのプロジェクトをアプリに追加する

アプリに必要なのはプロジェクトのソースファイルで、公開サイトのアドレスではありません。LovableはプロジェクトをGitHubのリポジトリと同期します。GitHubでリポジトリを開き、Code → Download ZIPでダウンロードします。プロジェクトをビルドしたり、npm installを実行したりする必要はありません。アプリが自分で行います。

アプリで「New project」(⌘N)をクリックします。「Output」は「HTML WordPress theme」のままにして、「Import a ZIP」を選びます。プロジェクトを展開済みなら「Choose a folder」を選びます。アプリはコピーで作業するので、元のファイルは変わりません。

html2wpのNew project画面:WordPressテーマとして出力し、LovableプロジェクトをフォルダかZIPで読み込む
New project:出力はHTML WordPress theme、読み込みはZIPかフォルダです。
html2wpアプリにHTML WordPressテーマとして読み込んだLovableプロジェクト
読み込みが終わると、元のファイルが変更されていないことをアプリが知らせます。

LovableをWordPressに変換:FlashかFullを選ぶ

プロジェクトの画面で、LovableサイトをWordPressにどこまで丁寧に変換するかを選びます。Flashが初期設定で、各手順を1回ずつ実行し、約30分かかります。Fullはすべてのチェックを実行し、見つけたエラーの修正を試みるので、約1時間かかります。正確な時間は、ページ数とMacの速さによって変わります。

LovableをWordPressに変換:FlashかFullで変換を始める前の、html2wpアプリのLovableプロジェクト
FlashとFullのボタンと、テーマの種類(HTMLかAstro 5)。

WordPressが不要なら、種類をAstro 5に切り替えます。するとアプリは静的サイトをビルドし、アプリから直接Cloudflare Pagesにデプロイできます。

変換の進み方

変換中は「Overview」(概要)タブに、変換プラグインが進めている手順と、自分で行った修正が表示されます。ほとんどの時間は、あなたなしで進みます。Lovableのプロジェクトが古いReactアプリでも、新しいTanStack Startのプロジェクトでも、アプリはまずプロジェクトをビルドしてブラウザで開き、各ページを完成したHTMLとして保存します。そのHTMLをテーマにするのは、そのあとです。

LovableからWordPressへのFlash変換:html2wpアプリの進み具合とStop conversionボタン
実行中のFlash変換。進み具合のパーセントと次の手順が表示されています。

一時停止するには「Stop conversion」をクリックし、「Continue」で再開します。プラグインが手順の途中で自分から止まった場合は、「Repair and continue」でエラーを直して続行させます。

LovableサイトとWordPress版を見比べる

「Compare」タブには、元のサイトの各ページとWordPress版が並んで表示されます。幅はデスクトップ(Desktop · 1440)とモバイル(Mobile · 390)で、違いはパーセントで示されます。すべてのページを自分の目で確認してください。自動チェックで見つかるのは違いの大部分で、すべてではありません。ある変換では、セクションが丸ごと抜けていたのに、違いはわずか0.4%でした。

html2wpアプリのCompareタブ:左が元のサイト、右がWordPress版
デスクトップ幅でページを比較しているところです。スクリーンショットはサンプルサイトのものです。

「Preview」タブでは、「Open website」でローカルのWordPressサイトが、「WordPress admin」でその管理画面が開きます。何かを変えたいときは、右側のチャットに入力します。変更は数秒でプレビューに反映されます。最後に「Make release」をクリックすると、プレビューで見たとおりの状態でテーマがパッケージされます。

チャットで変更したあとの、Make releaseボタンがあるhtml2wpアプリ
チャットで変更すると、変更の数とMake releaseボタンが表示されます。

LovableをWordPressに変換:テーマのエクスポート

LovableからWordPressへの変換が終わると、完成したファイルは「Exports」タブにあります。WordPressテーマの横の「Save」をクリックして、ZIPを保存します。ほかに、PDFの変換レポートと元のプロジェクトのZIPがあり、Flash変換のあとはAstro 5のプロジェクトもあります。

WordPressテーマのZIPと変換レポートが並ぶ、html2wpアプリのExportsタブ
ZIP形式のテーマ、変換レポート、元のプロジェクト。

WordPressで「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」を開き、ZIPを選んでテーマを有効化します。ページ、ブログ、フォーム、メニュー、SEO、リダイレクトはすべてテーマに含まれ、プラグインなしで動きます。

クライアントがページ上をクリックしてテキストや画像を編集できるようにしたいなら、Visual Editエディターを追加してください。ターミナルでエージェントと作業したい場合は、Claude CodeとCodex用プラグインのガイドで同じ変換を説明しています。