ChatGPTやClaudeなどの生成AIは、プロンプト一つで完成度の高いHTMLを出力してくれます。しかし、そのHTMLをWordPressの投稿に「そのまま使える形で」取り込むのは、意外と面倒な作業です。
なぜ「コピペ」では駄目なのか
AIが生成したHTMLをそのままWordPressのエディタに貼り付けると、多くの場合「カスタムHTMLブロック」として扱われます。これでは見た目は維持できても、クライアントやチームメンバーがテキストや画像を直感的に編集することができません。CMSとしてのWordPressの強みが完全に失われてしまうのです。
解決策:ブロック構造への自動変換
そこで活用したいのが、HTMLの構造を解析し、適切なGutenbergブロック(グループ、カラム、見出し、段落など)に自動変換するアプローチです。これにより、AIの出力をそのままCMSの編集可能なコンテンツとして取り込めます。変換後はブロックエディタの通常操作で自由に編集できるため、クライアント納品にも適しています。
具体的な変換ワークフロー
- AIにHTMLの生成を依頼する(セクション構造を指定するとより精度が上がります)
- 出力されたHTMLをファイルとして保存、またはクリップボードにコピー
- WordPress管理画面で変換ツールを使い、ブロック構造として取り込み
- エディタ上で余白やフォントサイズを微調整して公開
変換精度を高めるプロンプトのコツ
AI側でHTML生成する際、以下の点を意識するとブロック変換の精度が格段に向上します。セマンティックなHTML構造(section、article、aside等)を使うこと、Flexbox/Gridのレイアウトを明示すること、そして見出し階層(h1→h2→h3)を正しく使うことが重要です。インラインスタイルよりもクラスベースのCSSを推奨します。
100%再現ではなく「編集可能な下書き」として
重要なのは、ピクセルパーフェクトな再現を目指すのではなく、「編集しやすいブロック構造」として取り込むことです。7〜8割の構造が自動で組み上がれば、残りの微調整はブロックエディタの得意分野。テーマのデザインルールに自動的に馴染むため、サイト全体の統一感も保たれます。
まとめ
AI × WordPress の組み合わせは、コンテンツ制作のスピードを劇的に変えます。HTMLの生成はAIに任せ、WordPress化のボトルネックをツールで解消する。この二段構えが、これからの制作ワークフローの標準になっていくでしょう。まずは手元のプロジェクトで試してみてください。