この記事では、CodexとFigma MCP Serverを連携し、デザインとコードを行き来しながらWebサイトを作る方法についてまとめています。AIコーディングに興味はあるものの、デザイン調整で手が止まってしまう方でも、この流れを押さえれば作業の全体像が見えるようになります。
OpenAIは2026年2月26日、CodexとFigmaのコード・デザイン連携を公式発表しました。Figma MCP Serverは、Figmaのデザイン情報をCodexへ渡したり、Codexで作った画面を編集可能なFigmaデザインとしてキャンバスへ取り込んだりするための仕組みです。
まず押さえたい結論：デザインとコードを往復できる
従来は、Figmaでデザインを作り、制作者が画面を見ながらHTMLやCSSへ書き換える流れが一般的でした。見た目を少し変更するたびに、Figmaとコードを見比べる必要があります。
連携後は、Figmaのレイアウトや色、文字サイズなどをCodexに読み込ませて実装の土台にできます。反対に、コードで作ったUI（画面上の部品や操作部分）をFigmaキャンバスへ取り込み、デザインとして編集してから再びコードへ反映する流れも可能です。
実際に使うと便利なのは、完成したデザインを一度コードに変換する場面だけではありません。ボタンの余白やカードの並びを調整し、デザイナーや社内担当者がFigma上で確認してから、再度実装へ戻せる点が大きな変化です。
従来の制作方法と何が変わるのか
| 作業 | 従来の方法 | CodexとFigmaの連携後 |
|---|---|---|
| デザインの実装 | 画面を見ながら手作業でコード化 | Figmaの情報をCodexへ渡して実装の土台を作る |
| 修正の確認 | Figmaとブラウザを個別に確認 | Figmaとコードを往復しながら調整 |
| 社内共有 | スクリーンショットや口頭で説明 | 編集可能なデザインと実装を近い状態で共有 |
ただし、AIが作ったコードをそのまま公開すればよいわけではありません。実際の制作では、スマートフォン表示、キーボード操作、画像の読み込み速度、WordPress（Webサイトを作る管理システム）への組み込みなどを人が確認します。連携は作業を自動化するというより、デザインと実装の行き違いを減らすための補助線と考えると使いやすいです。
利用前に知っておきたい仕組み
ここで登場するMCPは、AIツールと外部サービスをつなぐための共通の仕組みです。たとえるなら、CodexがFigmaの中身を確認したり、Figmaへ結果を書き戻したりするための通訳のような役割を持ちます。
Figma MCP Serverは、Figmaのデザイン情報をCodexへ渡す経路です。Codex側では、受け取った内容をもとにHTML、CSS、JavaScript（Webページに動きを加えるプログラム）などの実装を進めます。コードからFigmaへ戻す場合は、画面の構造を編集可能なデザインとしてキャンバスへ取り込みます。
初心者向けの連携手順
最初は、いきなり大規模なサイトで試さず、ヘッダーや問い合わせフォームなど小さな画面から始めると安心です。画面を見ながら進める場合は、次の順番で確認してください。
- Figmaで対象ファイルを用意する
Figmaを開き、実装したいフレーム（画面全体をまとめる作業領域）を1つ選びます。フレーム名を「Desktop」「Mobile」のように整理し、見出し、ボタン、画像、カードなどの役割が分かる名前にしておきます。名前が整理されているほど、Codexへ意図を伝えやすくなります。 - Codexで作業対象のプロジェクトを開く
Codex側で、Webサイトのファイルが入っているプロジェクトを開きます。左側のメニューから設定または連携機能の項目を探し、MCP Serverを追加する画面へ進みます。画面名や配置は利用環境によって異なるため、Figma MCP Serverの公式セットアップ手順に表示される項目と照らし合わせて設定してください。 - Figma MCP Serverの接続状態を確認する
接続設定を保存したら、MCPの一覧画面でFigmaが有効になっているか確認します。接続エラーが表示された場合は、設定内容、利用権限、対象ファイルへのアクセス権を順番に見直します。ここを飛ばすと、Codexへ指示を出してもFigmaの情報を取得できません。 - Figmaからコードへ変換する
Codexの入力欄に、対象フレーム、使用する技術、必要な画面幅を具体的に書きます。たとえば「選択したFigmaフレームを、既存プロジェクトの構成に合わせて実装してください。スマートフォン幅も考慮し、変更したファイルを説明してください」のように指示します。単に「このデザインを作って」と書くより、作業範囲を限定した方が確認しやすくなります。 - ブラウザで見た目を確認する
生成されたコードをプレビューし、Figmaと並べて確認します。最初に見るのは、文字の大きさ、余白、ボタンの位置、画像の比率です。違いがあれば「見出し下の余白を半分にする」「カードをスマートフォンでは1列にする」のように、1回の指示で1つか2つだけ修正します。 - コードからFigmaキャンバスへ取り込む
コード側で調整した画面をFigmaへ戻す場合は、Codexのコードからキャンバスへ取り込む機能を使います。取り込み後、Figma上で文字や色を確認し、デザインとしてさらに修正します。変更内容を整理してから再びCodexへ渡すと、修正の繰り返しで意図がずれにくくなります。
最初につまずきやすいポイントと対処法
実際に初回で壁になりやすいのは、連携設定よりも「どこまで直してほしいか」の伝え方です。指示が広すぎると、Codexがファイル構成や見た目を大きく変更することがあります。
- デザインと画面が一致しない：対象フレーム名、画面幅、変更したい部分を指定します。「全体を修正」ではなく「ヘッダーの高さとロゴ位置だけ」と絞ります。
- 既存コードが大きく変わる：作業前に変更対象のファイルを限定し、既存のクラス名やコンポーネント（再利用できる画面部品）を維持するよう指示します。
- スマートフォンで崩れる：Figmaにモバイル用フレームを用意し、PC用と一緒に参照させます。1つの画面だけで全サイズを推測させないことが重要です。
- 取り込んだデザインを編集しにくい：Figma側のレイヤー名やグループ構成を整理します。見た目だけでなく、後から修正する人が理解できる構造を意識します。
料金と無料プランを確認する方法
今回確認できるOpenAIとFigmaの公式発表・開発者向け資料では、この連携機能について一律の料金や無料プランの詳細までは案内されていません。利用前に、Codexの利用契約、Figmaのプラン、MCP Serverの利用条件をそれぞれの最新の料金ページや管理画面で確認してください。
特に社内利用では、個人アカウントで試せるか、チームのファイルへ接続できるか、利用権限を誰が管理するかを先に決めると安全です。無料で使えると断定せず、実際のアカウントに表示される条件を確認してから導入しましょう。
向いている人・向いていない人
向いている人は、Figmaとコードを両方使うWeb制作者、AIで試作を早めたい初心者、社内でデザイン修正と実装確認を担当する人です。特に、デザイン案を何度も作り直す案件では、変更点を共有しやすくなります。
向いていない人は、デザインデータをそのまま公開用サイトに変換できると考えている人です。アクセシビリティ（誰でも使いやすくする配慮）、SEO（検索で見つけられやすくする対策）、保守性は別途確認が必要です。また、Figmaの整理やコードの基本を避けたい場合は、連携しても期待ほど楽になりません。
安全に使うための注意点
社内情報や顧客情報を含むデザインを扱う場合は、まず利用規約と組織のAI利用ルールを確認します。公開前の資料、個人情報、認証情報を不用意に入力しないことも基本です。
もう1つ大切なのは、変更前の状態を残すことです。Git（コードの変更履歴を管理する仕組み）やFigmaのバージョン履歴を使い、どの修正を戻せるか分かる状態にします。AIへの指示は短く区切り、変更後に差分を確認する習慣をつけると、意図しない修正に気づきやすくなります。
よくある質問
Figmaのデザインがあれば、すぐ完成したWebサイトになりますか？
そのまま公開できるとは限りません。デザインをコード化する土台にはできますが、リンクの動作、フォーム送信、スマートフォン対応、アクセシビリティなどは確認が必要です。
プログラミング初心者でも使えますか？
小さな画面からなら試せます。ただし、生成されたコードを確認するために、HTML、CSS、ファイル構成の基本は少しずつ学びましょう。分からない部分を残したままサイト全体を作るより、部品単位で動きを確かめる方が挫折しにくいです。
既存のWordPressサイトにも使えますか？
デザイン案や部品の実装を考える補助には使えます。ただし、WordPressテーマへの組み込み方法やプラグインとの競合は別に確認してください。最初は本番サイトではなく、複製したテスト環境で試すのが安全です。
無料で試せますか？
公式資料だけでは、一律の無料プランや連携料金は判断できません。CodexとFigmaの契約プラン、組織の設定、利用時点の条件を確認してください。
まとめ：まずは1画面の往復から始めよう
CodexとFigma MCP Serverの連携によって、Figmaからコードへ、コードから編集可能なFigmaデザインへと作業を往復できるようになります。従来のように、デザインと実装を完全に別作業として扱う必要がなくなる点が大きなメリットです。
今日からできる最初の一歩は、Figmaで小さなフレームを1つ用意し、Codexへ具体的な実装指示を出して、ブラウザと見比べることです。連携設定、指示、確認、修正の順番を小さく繰り返せば、AIに任せきりにせず、制作の主導権を保ったまま作業を速められます。
参考・公式情報
📦 Amazonで関連商品を探す
🛒 楽天市場でWebデザイン入門書を探す
🛒 楽天市場でHTML CSS入門書を探す
