FigmaからAIが出したコードをWordPress化する2つの方法
この記事でわかること
FigmaからAIが出したコードをWordPress化する2つの方法
この記事でわかること
- AIが出したHTML/CSSは、そのままではWordPressで動かない理由
- 「固定ページに貼る」方法と「テーマに組み込む」方法の違い
- どちらを選べばいいかの判断基準
FigmaのURLをAIに渡してコードを組んでもらう、というところまでは、これまでの記事で紹介してきました。ただ、出てきたコードをそのままWordPressに貼り付けても、思った通りには表示されません。今回は、AIが出したコードをWordPressで実際に動く状態にする、2つの方法を紹介します。
なぜそのまま貼るだけでは動かないのか
AIがFigma MCPを通して出してくるのは、基本的に単体のHTML/CSS/JavaScriptです。1ページ分だけの、独立したファイルとして組まれています。
一方でWordPressのサイトは、次のような仕組みで動いています。
- 全ページ共通のヘッダー・フッターがある
- 記事一覧やタイトルなど、内容が自動で入れ替わる部分がある
- テーマというプログラム（PHP）が、ページの骨組みを作っている
AIが出したコードには、この「WordPress側の仕組みに合わせる部分」が含まれていません。ここを人間側でつなぎ込む必要があります。
方法1：固定ページに貼る
一番手軽なのが、WordPressの固定ページ（または投稿）の中に、AIが出したコードをそのまま貼り付ける方法です。
やり方
- WordPress管理画面で、新規の固定ページを作成する
- ブロックエディタで「カスタムHTML」ブロックを追加する
- AIが出したHTML（
<style>タグごと）をそのまま貼り付ける - 公開する
向いているケース
- LP（ランディングページ）のように、1ページだけ特別なデザインにしたい場合
- サイトの他のページとデザインが揃っていなくても問題ない場合
- 早く形にして確認したい場合
注意点
このやり方は、そのページだけがサイトの他の部分から独立した存在になります。サイト共通のヘッダー・フッターが表示されなかったり、テーマ側のCSSと衝突して見た目が崩れたりすることがあります。貼り付けた後は、必ず実際の画面で確認してください。
方法2：テーマのファイルに組み込む
サイト全体の一部として、他のページと同じ仕組みで動かしたい場合は、AIが出したコードをWordPressテーマのファイルに落とし込みます。
やり方
- AIが出したHTMLの構造を、テーマのテンプレートファイル（
page-〇〇.phpなど）に移す - CSSは、テーマの
style.css、または専用のCSSファイルに追加する - 固定の文字列になっている部分（ページタイトルなど）を、WordPressのテンプレートタグ（
the_title()など）に置き換える - 管理画面のプレビューで確認しながら調整する
向いているケース
- サイト全体の一部として、他のページと統一感を持たせたい場合
- 記事一覧やタイトルなど、WordPressの管理画面から更新できるようにしたい場合
- 今後も似たページを量産していく予定がある場合
注意点
方法1と違って、PHPの知識やテーマの構造の理解が必要になります。AIに「このコードをWordPressのテーマに組み込みたい」と伝えれば手伝ってもらえますが、既存のテーマ構造を壊さないよう、対象のファイルと影響範囲をAIにきちんと伝える必要があります。ここは、これまでの記事で紹介した「対象セクション以外のファイルは変更しない」という指示の出し方がそのまま活きてきます。
どちらを選べばいいか
| 固定ページに貼る | テーマに組み込む | |
|---|---|---|
| 手間 | 少ない | 多い |
| 必要な知識 | 特になし | PHP・テーマ構造の理解 |
| サイト全体との統一感 | 独立しやすい | 保ちやすい |
| 管理画面からの更新 | しにくい | しやすい |
| 向いている場面 | 単発のLP、練習 | 本番サイトの一部 |
初めてFigma連携でコーディングを試す場合や、練習として1ページ完結させたい場合は、方法1で十分です。実際の案件でサイト全体に組み込む必要が出てきたら、方法2に切り替える、という順番で進めるのがおすすめです。
まとめ
- AIが出したコードは単体のHTML/CSSで、WordPress側の仕組みとはまだつながっていない
- 手軽に試すなら、固定ページの「カスタムHTML」ブロックに貼る
- サイト全体の一部として組み込むなら、テーマのファイルに落とし込む
- どちらもそのままでは動かないので、貼り付け後・組み込み後は必ず実際の画面で確認する
FigmaからAIにコードを組んでもらうところまでがゴールではなく、それをWordPressの仕組みに正しくつなぎ込むところまでが、実際に使えるページを作る一連の流れです。
