近年、ClaudeやChatGPTなどの大規模言語モデルがWeb制作の現場に浸透し始めています。特にLP（ランディングページ）制作では、AIにHTML/CSSを生成させ、それをWordPressに組み込むワークフローが現実的な選択肢となりました。本記事では、AIコーディングをWordPress制作に統合する具体的な手順と、現場で得られた知見を共有します。
AIコーディングがWordPress制作にもたらすインパクト
従来のWordPress制作フローでは、デザインカンプからコーディング、テーマへの組み込み、ブロック化という工程を順番に進める必要がありました。この中でもっとも時間がかかるのが「HTMLコーディング」と「ブロックへの変換」です。AIコーディングを導入すると、この2工程を大幅に短縮できます。
具体的には、Figmaのデザインカンプを言語化してClaudeに渡し、セクション単位でHTML/CSSを生成させます。このとき重要なのは、最初からWordPressのブロックエディタで編集可能な構造を意識したプロンプト設計です。たとえば「セマンティックなHTML5タグを使用し、セクションごとにsection要素で区切る」「インラインスタイルではなくCSS変数を活用する」といった指示を含めます。
実践ワークフロー：ClaudeでLP用HTMLを生成する
まず、Claudeに渡すプロンプトを設計します。効果的なプロンプトの要素は以下の通りです。
- ページの目的と対象ユーザーの明確な定義（例：「30代女性向けのヨガスタジオLP」）
- セクション構成の指定（ヒーロー、課題提起、解決策、料金、FAQ、CTAなど）
- デザインの方向性（カラーパレット、フォント、余白感）
- 技術的な制約（レスポンシブ対応、CSS Grid/Flexbox使用、画像はプレースホルダー）
- WordPressとの互換性を考慮した出力形式の指定
Claudeは指示に従って各セクションのHTML/CSSを生成します。ここで重要なのは、一度に全体を生成するのではなく、セクションごとに生成・確認・修正を繰り返すことです。1セクション1500行以内を目安にすると、精度が安定します。
生成HTMLをWordPressブロックに変換する
生成されたHTMLをそのままWordPressに貼り付けると「カスタムHTML」ブロックとして扱われ、クライアントが編集できない状態になります。ここで2つのアプローチがあります。
1つ目は手動変換です。生成されたHTMLの構造を理解し、対応するGutenbergブロック（段落、見出し、カラム、グループなど）に手作業で置き換えます。確実ですが時間がかかります。
2つ目はプラグインを使った自動変換です。AI HTML to Blocks Importerのようなツールを使えば、HTMLの構造解析からブロック変換までを自動化できます。Flex/Gridレイアウトをカラムブロックに、テキストコンテンツを段落・見出しブロックに変換し、編集可能な状態でエディタに取り込めます。変換精度は完璧ではありませんが、ゼロから組み直すのと比べて作業時間を60〜70%削減できます。
品質を担保するためのチェックポイント
AIが生成したコードをそのまま使うのではなく、以下の観点でレビューを行います。
- アクセシビリティ：alt属性、aria-label、見出しの階層構造が適切か確認します。AIは見出しレベルを飛ばすことがあるため、h1→h2→h3の順序を必ずチェックしてください。
- レスポンシブ対応：PCでの表示だけでなく、375px幅（iPhone SE相当）でレイアウトが崩れないか確認します。特にGridの列数やFontサイズのclamp()設定を重点的に見ます。
- パフォーマンス：不要なCSS、重複するスタイル定義、過剰なネストがないか確認します。AIは安全側に振ってコードを冗長に書く傾向があるため、不要な部分は削除します。
- セキュリティ：外部リソースの読み込み、インラインJavaScript、不明なCDNリンクがないか確認します。本番環境では不要なscriptタグを必ず除去してください。
現場での運用Tips
最後に、実際にこのワークフローを導入して得られた知見を共有します。
プロンプトのテンプレート化は必須です。案件ごとにゼロからプロンプトを書くのではなく、業種別（美容、飲食、不動産など）のテンプレートを用意しておくと、初回のHTML生成精度が格段に上がります。テンプレートには配色ルール、余白の基準値、フォントサイズの段階を含めておきます。
また、Claudeとの対話は「生成→レビュー→修正指示」のサイクルを3回程度回すのが効率的です。1回目で大枠を固め、2回目でディテールを調整し、3回目で最終的な微調整を行います。4回以上のイテレーションは収穫逓減になりがちです。
テーマとの相性も考慮が必要です。SWELLのような高機能テーマを使っている場合、テーマ固有のデザイントークン（カスタムプロパティ）を活用するようプロンプトに含めると、変換後の見た目がサイト全体と自然に統一されます。特にカラー、フォントファミリー、border-radiusの値はテーマの設計と合わせることが重要です。
AIコーディング×WordPressのワークフローはまだ発展途上ですが、すでに制作工数の削減効果は実証されています。完璧な自動化を目指すのではなく、AIに7割を任せて残り3割を人間が仕上げるハイブリッドアプローチが、現時点でもっとも実用的な方法です。