Claude Design エクスポートからWordPressテーマへ：html2wpアプリで
html2wpアプリを使えば、Claude Designで作ったデザインを、ターミナルなしでWordPressにできます。Claude Design エクスポートでは、デザインをHTMLとして保存します。それをアプリに追加し、FlashかFullを選びます。最後に、デザインどおりの見た目のWordPressテーマをダウンロードします。
Claude Design エクスポートの変換に必要なもの
- Apple silicon搭載のMac（M1以降）と、macOS 12以降。
- ChatGPTのアカウント。変換は、あなた自身のサブスクリプションのAIが行います。そのため、クレジットの代金を私たちに払う必要はありません。
- Claude Design エクスポート：HTMLファイルとして保存したデザインです。複数のページがある場合は、それぞれ別のファイルとして保存します。
ClaudeのHTMLは、テーマへの最短ルートです。アプリが先にビルドしたり、ブラウザで開いたりする必要がないからです。無料枠では、5ページまでのサイトを3つ変換できます。クライアントの仕事には、料金ページで購入できるProライセンスが必要です。
インストール、環境、サインイン
Mac版アプリをダウンロードし、「アプリケーション」フォルダに移します。「Settings」（設定）で「Prepare environment」（環境を準備）をクリックすると、アプリがDockerと変換環境をダウンロードします。続けて、「Connect with ChatGPT」でサインインします。それぞれの手順はアプリ版のLovableガイドでスクリーンショット付きで詳しく説明しています。Claudeの場合も手順は同じです。
Claude Design エクスポートをアプリに追加する
まず、Claudeでアーティファクトを.htmlファイルとしてダウンロードします。フォルダを作り、その中にindex.htmlという名前で保存します。ファイルに含まれていない画像をデザインが参照している場合は、その画像を同じフォルダの、コードが想定している場所に置きます。「会社概要」や「お問い合わせ」などのほかのページは、about.html、contact.htmlとして横に置きます。どのページが何かは、アプリがファイル名から判断します。
アプリで「New project」（⌘N）をクリックし、出力は「HTML WordPress theme」のままにして、「Choose a folder」を選びます。フォルダをZIPにしてある場合は、代わりに「Import a ZIP」を使います。
WordPressテーマへの変換はFlashかFullで
Flashが初期設定で、各手順を1回ずつ実行し、約30分かかります。Fullはすべてのチェックを実行してエラーの修正を試みるので、約1時間かかります。1ページのデザインなら短いほうになることが多いですが、チェックはすべて実行します。
変換中は、「Overview」（概要）タブにアプリの作業内容が表示されます。一時停止するには「Stop conversion」をクリックし、「Continue」で再開します。
アプリでデザインを確認する
「Compare」タブには、元のデザインとWordPress版が、デスクトップ幅とモバイル幅で並んで表示されます。すべてのページを確認してください。自動チェックで見つかるのは違いの大部分で、すべてではないからです。合わない部分があれば、チャットに書きます。変更はプレビューに反映され、そのあと「Make release」でテーマの新しいバージョンがパッケージされます。
Claude Design エクスポートから作ったテーマを保存する
「Exports」タブで、WordPressテーマの横の「Save」をクリックし、ZIPを保存します。WordPressでは、「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」からアップロードします。テーマは単独で動き、ページ、フォーム、メニュー、SEOはプラグインなしで機能します。
Visual Editエディターを入れると、クライアントがクリックで編集できるようになります。ターミナルで作業するなら、Claude CodeとCodex用プラグインのガイドで同じ変換を説明しています。