FigmaのデザインからHTML/CSSを自動生成できるAIエージェントが、Web制作の現場に革新をもたらしています。
従来の「コード補助型AI」とは異なり、AIエージェントは人間の指示に基づいて自律的にファイルを生成し、コーディングを進める新しい仕組みです。
特に、Figmaのデザインカンプを読み取ってHTML/CSSを出力する流れは、実装フェーズの効率を大きく高めるものとして注目されています。
本記事では、AIエージェントとは何か、その仕組みや活用方法を解説し、Cursorに搭載されているAIを使った自動コーディングについても詳しく紹介します。
「Web制作の自動化に興味がある」「Figmaからコードを起こす作業を効率化したい」という方はぜひ参考にしてください。
そもそもAIエージェントとは？
はじめに、AIエージェントについて確認しておきましょう。
AIエージェントの概要
AIエージェントとは、人間の指示を受けて自律的にタスクを実行するAIプログラムです。
従来のAIツールが一問一答でコードの一部を補助していたのに対し、AIエージェントは「ToDoリストをJavaScriptで作って」といった曖昧な指示でも、HTML・CSS・JSのファイル生成からコードの記述、動作確認まで一連の流れを自ら進めます。
特徴的なのは、AIがタスクを「まずHTMLを作成します」「次にスタイルを定義します」といったように段階的に分解しながら進めていく点です。
何をすべきかを自ら判断し、順序立てて実行できることが、従来の生成AIとの大きな違いといえます。
AIエージェントで変わる人間の役割
AIエージェントの登場によって、Web制作における人間の立ち位置も変わり始めています。
かつては「人間がコードを書き、AIが補助する」という構図でしたが、今では「AIが主導でコードを生成し、人間はそれをチェックして承認する」という逆の関係に移行しつつあります。
今後のWeb制作者には、「AIに明確な指示を出し、結果を評価し、必要に応じて調整する」というマネジメントスキルが強く求められるようになるでしょう。
実例1：Cursorに搭載されているAIを使用したコーディング
AIエージェントが実際にどのようにコーディングを進めるのか、ここからは具体的な事例を見ていきましょう。
使用するのは、AI機能を統合したコードエディタ「Cursor」です。
Cursorとは？
Cursorは、Visual Studio CodeをベースにしたAI統合型コードエディタです。
画面右側にはチャット形式のAIパネルがあり、自然な日本語で指示を出すだけでコーディングが始まります。
「Agent Mode」を有効にすると、AIは単なる補助ではなく、作業の全体像を把握しながら自律的にコードを生成・構造化してくれます。
エディタ上でAIがどのようにファイルを作成し、コードを書いていくのかを逐一確認できるのも大きな特徴です。
ToDoリスト作成に必要なコードをAIが出力
AIパネルに「JavaScriptでToDoリストを作成してください」と入力するだけで、「index.html」「styles.css」「script.js」の3ファイルが自動生成されました。
それぞれの役割に応じてHTML・CSS・JavaScriptが分離されており、構成も一般的なスタイルに準拠しています。
出力されたToDoリストには、以下のような機能が実装されています。
- タスク追加：フォームに入力し、追加ボタンを押すとリストに表示
- 完了マーク：チェックで打ち消し線＋グレースタイルに変更
- 削除：ボタンをクリックすると該当のタスクを削除
人間の役割は承認と調整だけ
Cursorでは、AIが提案した内容に対して「Accept（承認）」または「Reject（却下）」を選ぶだけで、コーディングが進行します。
たとえば styles.css の内容が提案された際、人間はそれを確認して承認すれば次に進むという流れです。
この過程がすべて可視化されているため、作業がブラックボックス化されず、初心者でも安心して使える設計になっています。
細かい調整やデザイン意図に応じた修正が必要な場面では、再度指示を出すことでAIが即座に対応します。
このように、AIと人間が「実装と意思決定」を分担する形で、効率と品質を両立したWeb制作が実現できるのです。
AIがここまで一気に進めてくれるのは、やっぱりすごいですね。
実例2：Figmaデータからの自動コーディング
Figmaのデザインをもとに、AIが自動でコーディングする実例を紹介します。
AIと外部アプリケーションをつなぐMCP
FigmaデータをAIが読み取り、HTML/CSSを自動生成するには、「MCP（Model Context Protocol）」という仕組みが必要です。
これは、AIと外部アプリケーションを接続するための通信ルールのようなものです。
通常、Figmaのようなクラウド型デザインツールには、AIが直接アクセスできません。
そこでMCPを導入すると、AIがFigmaの構造情報や画像を取得し、それを元にコーディングを進めることが可能になります。
これまで分断されていたデザインと実装の工程がつながり、FigmaからHTML/CSSを自動で生成できるようになりました。
FigmaとCursorの接続・設定方法
Cursorには、MCPを通じてFigmaと連携するための設定項目が用意されています。
設定は以下の手順で行います。
- Cursorの「設定（歯車アイコン）」を開く
- 「MCP」メニューを選択
- 使用するMCPサーバー（例：Figma）を有効化
- 「Tools」セクションでAIに許可する操作を指定（例：get_figma_data、download_figma_images）
この設定を済ませれば、AIはFigmaのテキストやカラー、レイアウト情報に加え、画像ファイルの取得も自動で行えるようになります。
Figmaデザインからの自動コーディングの流れ
FigmaのデザインからHTML/CSSを自動で生成する流れを解説します。
- URLをAIに共有
- データと画像の取得を許可
- HTML/CSSの自動生成と確認
1：URLをAIに共有
まず、AIに読み取らせたいFigmaのデザインURLを取得します。
対象のアートボードを選択し、「選択範囲のリンクをコピー」を実行してください。
取得したURLをCursorのAIパネルに貼り付け、以下のように依頼します。
「このデザインをHTMLとCSSで忠実に再現してください。」
このようなシンプルな指示でも、AIはURLからデザイン構造を解析し、必要な工程を順を追って進めていきます。
2：データと画像の取得を許可
AIが「Figmaデータを読み込みます」「画像をダウンロードします」といったメッセージを表示するので、その都度「Accept（許可）」をクリックして処理を進めます。
許可を出すと、プロジェクトフォルダ内に images フォルダが自動生成され、Figmaから取得された画像ファイルが保存されます。
3：HTML/CSSの自動生成と確認
画像取得後、AIは自動で index.html と styles.css を作成します。
CSSには、BEM（Block Element Modifier）に沿った命名が用いられており、保守性の高い構造になっています。
生成されたページをブラウザで表示すると、セクションの構成や色使い、タイポグラフィまでFigmaのデザインをほぼ忠実に再現していることが確認できました。
デザインカンプの再現度は高いが課題もある
AIエージェントが生成したHTML/CSSは、Figmaのデザインカンプをベースに、セクション構成・文字サイズ・配色・余白などを高精度で再現していました。
見た目としては、すぐに実用できるレベルの完成度です。
ただし、細部を見てみるとAIだけでは判断が難しい箇所もあります。たとえば、今回の実例では下記のような現象が見られました。
- コンテナの幅が広がりすぎ、全体が間延びしてしまう
- 導入事例カードが折り返されて意図と異なる表示に
- 背景色と文字色の組み合わせに、視認性の配慮が不十分
このような部分については、人間の手で手直しする必要があります。
Figma側の準備と指示内容が精度に影響する
AIに正確なコーディングを行わせるには、Figmaデータの構造が整っていることが重要です。
今回使用されたデータには、以下のような工夫があり、AIが内容を理解しやすい状態になっていました。
- オートレイアウト：要素の並びや余白が明確になり、AIが正しくレイアウトを把握しやすい
- コンポーネント化：命名ルールが明示されており、BEMに沿ったCSS設計との親和性が高まる
- レスポンシブ対応の設定：Figma上で可変レイアウトが再現されており、動的構造をAIが推測しやすい
また、AIへの指示文の具体性も出力結果に大きく影響します。
今回は「HTMLとCSSで再現してください」というシンプルな依頼でしたが、明確な条件を加えていれば、より理想に近いコードが生成されたと考えられます。
出力結果にズレがあるとき、それはAIの性能不足ではなく、指示の曖昧さによるものかもしれません。
意図を的確に伝えるスキルがこれからの制作者に求められるようになるでしょう。
まとめ：AIエージェントと共に進化するWeb制作
AIエージェントがFigmaデザインを読み取り、自動でHTML/CSSを生成するという技術は、すでに実用化のフェーズに入りつつあります。
特にCursorのようなAI統合型エディタとMCPを使ったFigma連携により、実装のスピードと精度は大きく向上しています。
もちろん、すべてをAIに任せるにはまだ課題もあります。意図を読み取る力やレスポンシブ対応など人間の判断と調整が必要な工程は今も重要です。
これからのWeb制作者に求められるのは、自分で手を動かすスキル以上に、「AIを正しく使いこなすスキル」です。
AIに的確な指示を出し、成果物の品質を監督する設計者としての役割がますます重要になっていくでしょう。
未経験からWeb制作を学ぶならデイトラWeb制作コースがおすすめ！
東京フリーランスは、1日1題のステップでWebスキルを身につけられる”デイトラ”を運営しています。
デイトラWeb制作コースは、実務レベルの本格スキルを学び、Web制作を仕事にしたい方におすすめのコースです。
HTML/CSSやjavaScriptを始めとした言語の基本からデザインカンプをもとにしたコーディング、WordPressのオリジナルテーマ作成まで、学習カリキュラムはなんと100日分！Web制作を網羅的に学べます。
また、中級・上級の最終課題はメンターによる課題レビューつき！品質を現場目線でチェックしてもらえるため、「自分は今どのくらいのスキルがあるのか」が客観的にわかります。
Discordによる公式サポートの質問部屋も用意。実務を経験しているメンター陣があなたの疑問に回答してくれます。
Web制作のスキルを身につけたい方は、ぜひデイトラWeb制作コースをチェックしてみてください！
はにわまんさん（@haniwa008）
Webコーダー。コーディングを中心にディレクションからサイト運用・保守まで、Web制作全般の仕事に400件以上携わった経験あり。デイトラのマネージャーも務めている。