AIを使って、WordPressのデザインとコンテンツを同時に作ってもらう方法
WordPressのブロックエディターで編集できる形式で「いい感じのデザイン」と「いい感じの文章」を同時に作ってもらうことが可能です。Claudeなら
現在、私たちは「非エンジニアのためのVib Coding講座」を開催しています。この講座では、AIを使ってWebサイトを生成する方法を紹介しているのですが、予想外の反響がありました。
参加者の中に、ご自身が運営するWordPressサイトのページデザインに応用してみようとする方が現れたのです。Claudeに質問を重ねながら、生成したHTMLをWordPressに設置するところまで頑張った方もいらっしゃいました。
その挑戦精神は素晴らしかったのですが、後日「作ったページが編集できません！」という質問を受けました。
WordPressのテンプレートの仕組みを知っている人にとっては当たり前の現象なのですが、多くの方がこの問題に直面することでしょう。
今回は、なぜ通常の方法ではダメなのか？ そして どうしたら解決できるのか？ について説明します。
なぜ編集できないのか？従来の方法の落とし穴
AIに質問したり、インターネットで検索して見つかる記事では、多くの場合以下のように教えられます：
自分で作ったHTMLは、
wp-content/themes/あなたの使っているテーマに保存する保存する名前は、ページのURL（スラッグ）を使い、
page-about.phpなどとするすると、
/aboutにアクセスすると、page-about.phpが読み込まれるこの中が、HTMLだけで構成されていたら、WordPressの機能は一切使わず、シンプルなWebページが表示される
この方法の問題点
実は、この方法はWordPressのテンプレート機能を逆手にとって、無理やりHTMLファイルで作ったページを表示させている方法なのです。
時々、HTMLファイルを作ることしかできない制作代行業者が、無理やりWordPressでサイトを構築する時に使われる手法でもあります。
この方法では、WordPressの管理画面からページを編集することができません。 なぜなら、WordPressが認識しているのは「テンプレートファイル」であって、「ページコンテンツ」ではないからです。
正しい解決策：ブロックエディタ対応のHTML生成
WordPressの機能をしっかり活用するには、ブロックエディタを使ってページを作る必要があります。
つまり、AIに出力してもらうべきは、WordPressのブロックエディタに貼り付けて動くように書かれたHTMLなのです。
例えば、以下のようなHTMLを生成してもらいます。
<!-- wp:cover {"url":"https://example.com/hero-image.jpg","dimRatio":40,"overlayColor":"black","align":"full"} -->
<div class="wp-block-cover alignfull has-black-background-color has-background-dim-40 has-background-dim">
<img class="wp-block-cover__image-background" src="https://example.com/hero-image.jpg" alt="">
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"textAlign":"center","level":1,"textColor":"white"} -->
<h1 class="wp-block-heading has-text-align-center has-white-color has-text-color">
あなたのサービス名
</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","textColor":"white"} -->
<p class="has-text-align-center has-white-color has-text-color">
魅力的なキャッチコピーをここに配置します
</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:cover -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">特徴1</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>特徴の説明文をここに記載します。</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->実は、WordPressのブロックエディターの内部では、このようなHTML形式によって、ブロックのさまざまな設定を保存しています。これは、普通のユーザーがほぼ知らない知識ですが、AIは知っています。
私たち人間側が、AIの知識を引き出せるような依頼や、語彙を持たないだけのことです。
その証拠に、以下のような伝え方をすると、WordPressのブロックエディターに対応したHTMLを出力してくれます。
WordPressのブロックエディタで編集可能な形式で、以下の内容のランディングページを作成してください。出力は、WordPressのブロックエディタのコードエディタに直接貼り付けできる形式でお願いします。
- ここに箇条書きでLPの内容をざっくり書き出す
- 箇条書き
- 箇条書き
おすすめの「３ステップ」
技術的な知識が理解できたと思います。では、以上のことを踏まえると、以下のようなステップで、WordPressにフィットした形で、コンテンツとデザインを同時に実現することができます。
なお、以下は「Claude Sonnet 4」で実行した方法です。他のAI（ChatGPTや、Gemeni）でも機能するかは不明です（多分、無理です）。
まずは、コンテンツ & Webデザインを行う
patterns を「ナレッジ」として与え、変換する
WordPressに貼り付け、調整する
👍 知っておくべきこと
AIを使うコツは、作業を分割することです。複雑なことを一度にさせると、性能を発揮できません。今回は、
Webデザインとコンテンツ作成
WordPressにフィットする形に変換
これを分けて行なっています。
Step1. シンプルに、コンテンツ&デザインをする
ごめんね！メソッドなどを使いながら、「Claude(AI)の知識を引き出すように」して、共同作業で、コンテンツとデザインをします。
例えば、「スペシャルティーコーヒーを中心に扱うコーヒーショップのWebサイトのフロントページを作ってください。シンプルで、抑えの効いたデザインで作ってください」と、ざっくりお願いします。
すると、Claudeは「アーティファクト」を使って、いい感じにWebデザインとコンテンツを作成してくれます。
その後は、「ごめんね！メソッド」で紹介している対話方法を実践し、内容をよくしていきます。
まずは、シンプルなHTML、CSS、Javascript を駆使した「いい感じのデザイン」にしてもらいます。
ある程度、いい感じに出来上がってOKと思ったら、「ナビとフッターは不要です」と伝えて、削除してもらいましょう。
Step2. WordPressにフィットしたHTMLに変換する
次に、WordPressに合わせたHTMLに変換します。もちろん、Claude (AI)を使います。WordPressのブロックテーマで使うブロックは、テーマごとにデザインが違います。使えるブロックパターンも違います。
それらをうまく使って変換してもらうために「ナレッジ」として、WordPressのテーマ情報を与えてあげます。
具体的には、 wp-content/themes/あなたが使っているテーマ/patterns 以下のファイルをClaudeに読み込ませると良いです。
WordPressの標準テーマなら、Github で公開されているので、Githubボタンを押して、URLを入れて読み込むこともできます。
指示は、以下のようにすると良いです。
WordPressのテーマの patternsフォルダのブロックエディターのパターンを添付しました。このパターンのソースコードを参考に、作ってくれたWebページを、可能な限り再現するような、 WordPressのシリアライズされたHTMLコメント付きHTML を作ってください言葉が難しく感じるかもしれませんが、専門用語で伝えると、しっかり伝わります。
Step3. WordPressに貼り付け、微調整する
出来上がったHTMLを貼りつけます。
り付けます。
ページを新規作成（投稿でも良い）
ページ上部の … をクリック
コードエディターを選ぶ
コンテンツボックスに貼り付け
ビジュアルエディターに戻す（コードエディターを修了）
すると、WordPressのブロックエディターで編集できる状態になります。一部は、HTMLブロック（CSSとJavascript）として残りますが、気にせず、無視しましょう。
これを消してしまうと、フワっと動くアニメーションなどが消えてしまいます。
主な調整は、以下の2つです。
グループの幅を「全幅」にする
画像を指定する
あとは、適宜微調整です。
まとめ
Claude (AI) でWebデザインとコンテンツを同時に作ってもらえる時代です！
しかし、WordPressに導入するときに、HTMLファイルをテンプレートフォルダにアップする方法では、編集できません（WordPressを使う意味がない）
WordPressで編集可能にするには、ブロックエディタ専用のHTMLに変換する
タスクを(1) Webデザイン&コンテンツ、(2)変換と２ステップに分ける
変換の時は、WordPressのテーマのパターンを教えてあげることで、精度が上がる
WordPressにコードエディタで貼り付けたあとは、微調整（全幅にする、画像などを入れ替える、入れるなど）
このノウハウは、かなり使えると思います！ぜひ、試してください。
なお、この手のタスクには、Claude Codeがぴったりです。ChatGPT(有料版)や、Gemini(有料版)で、少しだけ試しましたが、イマイチ（さっぱり）でした（現状では）。工夫をすれば可能かもしれませんが、めんどくさくて諦めました。
Claudeいいですよ、是非。
おまけ(1) Claude Pro の「プロジェクト機能」を使う
毎回、patternのファイルをアップするのは面倒です。この手の作業は、何度も行うことが予想されます。
このような場合、「Claude Pro版以後で使えるプロジェクト機能」が便利です。ナレッジに、WordPressテーマのpattenrsディレクトリにあるファイルをアップしておきます。
その上で、あなたのタスクにぴったりの指示を設定しておくことで、仕事効率が数倍は上がるはずです。
おまけ2: WordPressを使わない方が楽かもしれない
Claude は、Sonnet 3.7 の時点で、かなり賢く、Webデザインと優れたコンテンツを同時に実行してくれていました。Sonnet 4 になり、さらに洗練されました。
同じ指示をしているのに、明らかにデザイン力（グラデーション、いい感じの色選択、アニメーションのJavascript）が上がりました。
このデザイン力を、そのまま生かすなら、WordPressを挟まない方がよいです。思い切って、「モダン」なWebサイトホスティング方法に移行すれば、以下のようなことができます。
AIと対話するだけで、Webデザインと、コンテンツを同時に作ってもらえる
サイト全体を、AIと一緒に作ってしまう
完成したら、「コミットして！」というメッセージで、Webサイトを公開（更新）できる
さらに、
グローバルCDNによって、超高速表示
HTML、CSS、Javascriptなのでウィルスやハッキングの心配なし
WordPressのように更新忘れで、セキュリティの脅威に晒される心配なし
WordPressのように更新したら、プラグインなどのバッティングでWebサイトが壊れることもない
バックアップも完璧
独自ドメイン、独自SSL対応
全て「ブラウザ上で完結」
なのに、無料！が実現可能です。
何かの機会に、シェアをしたいと思います。お楽しみに！
写真を変更したり、バックグランドを動画にしたりするのが難しい気がします。