html2wp / ブログ / Claude Design WordPress化
Claude Design WordPress化：デザインをWordPressテーマに変換する方法
Claude Design WordPress化（Claude DesignのデザインをWordPressテーマにすること）は、生成デザインの変換の中でいちばん短いルートです。デザインをClaudeがHTMLで出力したなら、それは変換ツールが求める入力そのものです。ビルドも、ブラウザでの追加の工程も、フレームワークも要りません。確認するのは、1つのアーティファクトでウェブサイトに足りるかどうかだけです。変換はあなたのパソコンで実行するので、Docker、Node、Pythonが必要です。一覧は下にあります。短い一覧です。
公開： · 更新： · Lovableのルートより短く、ビルドの工程はありませんClaude Designからどんな出力を受け取りましたか？
出力は2種類あり、それぞれ別のルートを通ります。Claude Design WordPress化の前に、どちらを持っているか確かめてください。変換にかかる時間がそれで決まります。
| Claudeから受け取ったもの | 中身 | ルート |
|---|---|---|
| HTMLアーティファクト |
自己完結した.htmlファイルです。コード、スタイル、スクリプトがすべてファイルの中にあります。 |
この記事の対象です。すでにフラットなHTMLなので、変換ツールが必要とする入力そのものです。 |
| Reactアーティファクト |
コンポーネントです。ページはJavaScriptが動いたあとに初めて現れ、周りのHTMLは、アプリが組み込まれる空の要素だけです。 | Lovableの手順ガイド：同じ種類の入力で、同じ追加の工程があります。 |
よくわからない場合は、ファイルを開いて<body>の中を見てください。見出しや段落が見えれば、HTMLアーティファクトです。この記事で合っています。bodyが空の<div>1つとscriptタグだけなら、もう一方の種類です。
HTMLのほうが簡単な理由
Reactのプロジェクトは、まずビルドしてから本物のブラウザで開かないと、変換できるものがありません。HTMLアーティファクトなら、この工程を飛ばせます。コードはすでにファイルに書き出されていて、後の工程はすべてそこから読み取ります。
Claude Design WordPress化の準備：画像ごとフォルダにエクスポート
入力は、常にディスク上のフォルダです。公開中のサイトのアドレスは、入力として使えません。これは意図的です。公開ページのコピーには表示された結果しか残らず、ソースファイルが持っている情報は失われます。
そのため、Claudeからデザインをエクスポート（アーティファクトをダウンロード）し、フォルダを作って、その中にindex.htmlという名前で保存します。ファイルに含まれていない画像をデザインが参照している場合は、その画像をファイルの横に置きます。コードが想定している相対的な場所に置いてください。
mkdir my-site && cd my-site
mv ~/Downloads/artifact.html index.html
mkdir -p images # if the design uses any images
1ページだけか、それ以上か
アーティファクト1つが1ページです。1ページのサイトは問題なく変換でき、テーマのトップページになります。「会社概要」や「お問い合わせ」のページもあるサイトにしたいなら、Claudeにそのページも作ってもらいます。それぞれを別の.htmlファイルとして同じフォルダに保存してください。ファイル名は重要です。分析ではファイル名を読み、blog.htmlやabout.htmlというファイルを名前から判断します。
ファイルが5つ以下なら、Claude Design WordPress化の全体が無料枠に収まります。
Claude Design WordPress化でパソコンに必要なもの
短いルートでも、実行するのはあなたのパソコンで、要件は減りません。ブラウザと一時的なWordPressは、結果をチェックするためのものです。
- Node 20以降とPython 3、そしてPlaywright・Pillowパッケージ。
- Dockerと
docker composeコマンド。パソコン上に一時的なWordPressを起動します。変換ツールは、あなたに見せる前にそこへテーマをインストールします。 - php-cli：すべてのPHPファイルは、ZIPに入る前に構文チェックを受けるからです。
jq、curl、bash、tar。インストール先のWordPressは6.6以降が必要です。
最初の手順で、これらをすべて確認します。あなたのフォルダの中に自動でインストールできるものと、あなたが判断する必要があるものを分けて表示します。頼まれない限り、Dockerをインストールすることはありません。
Dockerは省略できず、いちばん驚かれる要件です
ブラウザ上の変換ツールはDockerを必要としません。この工程を省いているからです。ここでは、生成したテーマを本物のWordPressに入れ、あなたに見せる前にそこでテストします。コンテナはそのためにあります。Dockerが動いていなければ、変換は最初の手順で止まり、最後まで待たずにその場で知らせます。
Claude Design WordPress変換を実行する
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:html2wp
convert ./my-site
指示はフォルダのパスだけです。設定ファイルを書く必要も、ビルドコマンドを選ぶ必要もありません。Codexではconvert ./my-site with html2wpと入力します。ターミナルを使いたくない場合は、同じフォルダをhtml2wpデスクトップアプリで開けます（スクリーンショット付きのガイドがあります）。
Flashは約30分、Fullは約1時間かかります。ページ数とパソコンの速さによって変わります。1ページのアーティファクトなら短いほうになりますが、入力がどれだけ小さくても、チェックは毎回すべて実行します。
自動で決めることと、確認を求めること
何かを生成する前に、まずファイルを測定します。ページを一覧にし、コードのどの部分が共通で、どの部分が固有かを割り出します。デザイントークン（色やフォントなど、デザイン全体で共通の値）、ブログらしい部分、単独のページも見つけます。そのうえで方針を書き出し、その計画どおりに変換します。
生成されたデザインでは、次の2つによく出会います。
- デザインのバリエーションは、すべて残します。ページごとにヘッダーが違っても、1つを選んで残りを揃えることはしません。バリエーションごとにテンプレートパーツを作り、各ページを実際に使っていたものにつなぎます。Claudeの別々のチャットで作ったアーティファクトは、記憶よりずっと違っていることがよくあります。
- 本文中の波括弧も消えません。途中の工程では、JSXに似た形式を使います。何もしなければ、本文中のJSONやCSSのサンプルがビルドを壊したり、ページに
{と表示されたりします。変換ツールがこれを処理するので、波括弧はページ上でも波括弧のままです。
カード、お客様の声、FAQなどの繰り返しのグループは、ハードコードされたマークアップではなく、コレクションとして保存します。そのため、後から本当に編集できます。編集できるように見えるだけ、ということにはなりません。
省略できない目視チェック
変換ツールは、各ページを元のページと並べて1枚の画像にします。その画像を1枚ずつ、上から下まで読んでください。
ある変換では、ページ下のほうのセクションが抜けていたのに、ピクセル比較の差はわずか0.4%で、チェックを通ってしまいました。数値のチェックには、性質上見えない不具合が3種類あります。1つ目は、見た目は完璧なのに何も起きない操作部品です。2つ目は、テンプレートの元になった1ページの値がそのまま埋め込まれたものです。3つ目は、スクロール、クリック、フォーム送信のあとにだけ現れるものです。
内容を編集できるかも確認してください。ピクセル単位で一致していても、FAQや機能紹介のグリッドをwp-adminから誰も編集できないことがあります。実際に起きたことで、見つけたのは自動チェックではなく、この目視チェックでした。
Claude Design WordPress変換後の編集：テーマ、Visual Edit、ページビルダー
フォルダには2つのファイルが置かれます。テーマのZIPと、その横のCONVERSION-REPORT.mdです。レポートには、変換の対象範囲、目視チェックで見つかったこと、まだ残っている課題が書かれています。テーマは、ほかのWordPressテーマと同じようにインストールします（外観 → テーマ → 新しいテーマを追加 → テーマのアップロード）。
テーマは単独で動きます。ページ、ブログ、フォーム、メニュー、SEO、リダイレクトは、すべてテーマ自身のコードです。動作にプラグインは要らず、私たちのサーバーと通信することもありません。ブログ記事はブロックエディターで書き、ページの文章はHTMLのまま残ります。ページをコードなしで編集するには、Visual Editとページビルダーという2つの選択肢があります。
| 方法 | 得られるもの | デメリット |
|---|---|---|
| テーマだけ | あなたのコードが変更されずに残り、上に何もインストールしません。更新の手続きも、他人のアップデートで壊れるものもありません。 | プラグインがなければ、ページの文章はHTMLで変更します。クライアントが自分で編集したいなら、Visual Editで編集できます（Liteは無料）。 |
| Visual Edit（私たちのプラグイン） | ページ上の見出しをクリックし、上から入力して保存します。テキスト、画像、リンク、フォーム、メニューをその場で編集でき、コードは元のままです。Liteは無料で、ライセンスキーは要りません。 | プラグインが1つ増えます。Liteの履歴は10ステップまでで、AIチャットはありません。Proでは両方が加わり、年額€59です。 |
| Elementor または別のページビルダー |
すでに使っている人には、慣れた作業環境です。クライアントも、あなたなしでページを組み直せます。 | コードがビルダーのウィジェットとして作り直されます。Claudeが作ったデザインではなくなります。以後、サイトはElementorなしでは表示できず、その構造、CSS、アップデートを引き継ぐことになります。 |
ページビルダーは、デザインが出発点にすぎない場合には良い選択です。デザインそのものを納品する場合には悪い選択です。生成したデザインをWordPressで残すために変換するなら、ウィジェットとして作り直すと、そもそもの目的がなくなります。ただ、次の四半期に別の人がレイアウトを作り直すなら、その人のElementorの経験は、デザインの忠実さより価値があるかもしれません。
Visual Editを選ぶなら、LiteかProか
| Lite（無料） | Pro | |
|---|---|---|
| クリックでコンテンツを編集 | ✓ | ✓ |
| フォーム、メニュー、SEO項目 | ✓ | ✓ |
| AIチャットでの編集 | – | ✓（ご自分のAPIキーで） |
| テーマのエクスポート | – | ✓ |
| Turnstileによるフォーム保護 | – | ✓ |
| AIによる画像編集と、画像からのアニメーション | – | ✓ |
| 編集履歴 | 10ステップ | 300ステップ |
AIチャットは、ご自分のAPIキーで動きます。私たちはトークンを販売しません。その費用は、プロバイダーと直接精算してください。
Claude Design WordPress変換の料金と、断るケース
誰でも無料で使え、キーも登録も要りません。5ページまでの変換が3回と、再実行が合計5回です。どちらの回数もIPアドレスごとに数えるので、アドレスが1つのオフィスでは1人分の枠になります。無料枠は、ツールのお試し、個人サイト、非営利の用途のためのものです。
Proライセンスがあれば、ページ数の上限がなくなり、変換と再実行は無制限になります。ショップをWooCommerceにする工程も使えるようになります。この工程が無料になることはありません。アプリは、ショップのあるサイトの無料変換を最初から断ります。半分だけ変換することはしません。Proは料金ページで月額または年額で購入でき、ベータ期間中は初回の支払いが30%割引になります。
注意点が1つあります。これはベータ版です。チェックで見つかるのは違いの大部分で、すべてではありません。そのため、各ページを元のページと並べて読む作業は工程に組み込まれていて、省略できません。まず自分のサイトを無料で変換し、それから信頼してほしいのも同じ理由です。
全体の手順は、html2wpアプリのドキュメントで順に説明しています。アーティファクトがReactなら、そのルートはLovable WordPress移行のガイドで説明しています。