Figma MCP を利用した WordPress テーマ開発に挑戦してみた – 投機的な実装による危険予知

WordPress テーマ開発において、Figma のデザインから HTML・CSS へのコーディング作業は多くの時間を要する工程です。「デザイン通りに実装したいが、コーディングに時間がかかりすぎる」「デザインとコードの差異によるやり取りが発生してしまう」といった課題を抱える開発現場も多いのではないでしょうか。

最近話題の Figma MCP（Model Context Protocol）を活用することで、デザインからコードへの変換プロセスを大幅に効率化できる可能性があります。実際に Figma MCP を使った WordPress ブロックテーマ開発を検証し、その効果と活用ポイントを詳しく解説します。

Figma から WordPress への変換時間を MCP で短縮する

従来の WordPress テーマ開発では、デザイナーが Figma で作成したデザインを開発者が目視で確認しながら HTML・CSS を手動で記述する必要がありました。この作業にはある程度の時間が必要ですし、デザインの解釈ミスやコーディングエラーが発生するリスクも抱えていました。

Figma MCP を活用することで、Figma のデザイン URL を AI に提供するだけで WordPress ブロックテーマに適した HTML コードを自動生成できます。デザインの意図を理解した適切なコード生成、WordPress ブロックエディターとの互換性確保、レスポンシブ対応の自動実装が可能になります。

このアプローチにより、「デザインを見ながらコードを書く」時間を大幅に削減し、より創造的な開発作業に集中できる環境を構築できます。ただし、生成されたコードの品質確認と最適化は依然として重要な工程として残ります。

Figma MCP を使った WordPress ブロックテーマ開発の実践検証

実際に Amimoto の Web サイトリニューアル用デザインを使用し、Figma MCP による WordPress ブロックテーマ開発を検証しました。404ページテンプレートとヘッダー部分を Figma MCP と Cursor でどこまで再現できるかを検証します。

開発環境の準備と基盤構築

検証環境の構築は WordPress の Create Block Theme プラグインから開始しました。

このプラグインを使用することで、ブロックテーマの基本構造を自動生成できます。

figma-demo/
├── parts/
│   ├── footer.html
│   └── header.html
├── templates/
│   └── index.html
├── style.css
├── theme.json
└── screenshot.png

開発環境には wp-now を活用し、コマンド一つで WordPress 環境を立ち上げられる効率的なセットアップを実現しました。Figma MCP サーバーとの連携設定も公式ガイドに従って実施し、Claude Desktop との統合を完了しています。

Cursor に Figma のデザイン URL だけを共有する

Figma MCP を使っている場合、デザインの共有方法は URL です。対象となるレイヤーを Figma で選択し、「選択範囲へのリンクをコピー」をクリックします。

あとは Cursor で「<Figmaから取得したURL> に基づいて、このブロックテーマに実装を反映させてください」と指示をするだけです。実際の案件ではより詳細な要件を伝える必要がありますが、今回は検証として簡単な指示にとどめました。

Cursor に作業を指示すると、Figma MCP を利用してデータの取り込みが始まります。

初回のタスクでは配置に問題がありましたが、「ブロックテーマのディレクトリ構造に一致していない。修正して」と修正指示を出すことで、 templates/404.html などブロックテーマとして利用できる形でファイルを作成してもらえました。

テンプレートを利用してページを作成すると、 Figma デザインをベースにしたページが表示されました。

実際のサイトで表示されている 404 ページと比較した画像がこちらです。細かくみていくと配色や画像などの差分が気になりますが、大まかなレイアウトや構成については再現されていることがわかります。

WordPress 固有の仕様への対応精度

検証過程で WordPress ブロックテーマの仕様に関する高い理解度を確認できました。当初 patterns ディレクトリに PHP ファイルが作成されましたが、ブロックテーマでは HTML 形式が必要である旨を指摘すると即座に修正されました。

この辺りの精度をより高めるには、WordPress ハンドブックの情報を Cursor に渡す仕組み、例えば WP MCP Server などを活用するのが良さそうです。

検証しての印象

やはりといいますか、100% 完全なテーマを 1回で作成させることは難しそうです。とはいえ大まかな構成・レイアウトの再現はすぐに実現できています。そのため、「大まかな構成・レイアウトを作成」してから「ボタンや画像の調整を進める」のような、人間が行う開発手法を再現させるような指示スタイル・ワークフローを構築する必要があるのではないでしょうか。

デザインパターンから CSS だけ作成する

タスクを分割する例としては、配色やフォントなどの CSS 部分だけを先に作らせる方法が有力な候補です。 Figma でスタイルガイドを作成し、Figma MCP や Claude コネクターで CSS / PostCSSなどの設計・実装を先行して行います。

テーマで利用するデザインシステム・CSS フレームワークを整備し、それをベースに Figma デザインからテンプレートを作成させることで、セッション内でのタスク量を削減し、レイアウト部分の作業に集中させることができます。

Cursor のブラウザ機能を併用する

2025 年秋から、Cursor がブラウザ機能を持つようになりました。これを利用することで、 Figma のデザインを実装する際に Cursor のエージェント自身が実装状況を自分でチェックできるようになります。また、 Chrome DevTools MCP も併用することで、CSS がどのように設定されているかまでエージェントが把握しながら作業できるようになります。

このようなツール・機能を組み合わせることで、デザインツールと HTML / CSS での違いなどを AI 自身が自分で見つけて修正できるようになります。

迅速なプロトタイピングや、コーディング工数見積もりに活用する

Figma MCP を利用したコーディングを実際の案件で成果物として顧客に納品することは、ベストプラクティスが整っているとは言い難い現状ではなかなか難しいと思います。ですが、「このデザインを実際にコーディングさせたら、どんな実装になるか？思わぬバグを発生させないか？」のような実装前の調査であれば、すぐに開始できるでしょう。このような「実装してみないと気づかない問題を、AI コーディングで事前に発見させる」手法は、「Speculative Implementation（先行的な複数実装）」とよばれています。

「実装してみないとわからない」から「Cursor でやってみたところ、大きな問題は起きなさそうだった」や「AI に作らせたら、レスポンシブの breakpoint で問題があった」といった開発フローにおける危険予知の実現へ。

AI コーディングツールを活用した開発フロー全体の効率化や最適化についても、デジタルキューブでは引き続き挑戦してまいります。

今回テスト的に開発したテーマについては、以下の GitHub リポジトリにて公開しています。AI コーディングの検証などに、ぜひお使いください。

https://github.com/hidetaka-dc/demo-wp-block-theme-with-figma-mcp

参考情報

• Create Block Theme – WordPress Plugin: https://wordpress.org/plugins/create-block-theme/

• Figma MCP サーバー公式ガイド: https://github.com/figma/mcp-figma