「Figmaのデザインカンプから実装するのは手間がかかる」「AIに頼んでも結局コピペや画像の書き出しが面倒」——そんな経験はありませんか。
デザインカンプからの実装は、通常なら数時間かかる作業です。
そこで役立つのがClaude CodeとFigma MCPの組み合わせです。この2つを使うと、Figmaのデザインカンプを渡すだけで、人間が1行もコードを書かずにAIがHTML/CSSを生成してくれます。
この記事を読めば、VS Codeの設定からFigma MCPの接続、実際にデザインカンプからコーディングを依頼するまでの一連の流れが分かります。
解説するのは、Web制作を中心に400件以上の案件に関わってきたはにわまんさんです。実際の画面に沿って、初心者の方にも分かるように紹介していきます。
・Claude CodeとFigma MCPの基礎と、利用に必要なプラン
・VS Codeの拡張機能とFigma MCPを接続するセットアップ手順
・Figmaのデザインカンプから自動でHTML/CSSを生成させる依頼のしかた
・AIが対応しきれなかった箇所を人間が確認・修正する流れ
公式LINEでは、デイトラ受講に関する個別のお悩み相談も承っております！
「デイトラは積極的に情報を開示し、ミスマッチをなくす」方針を取っているので、あなたの状況に合わせて、中立の立場から回答いたします。
Claude Code×Figma MCPとは？デザインカンプ自動コーディングの前提
まずはClaude Codeとは何かを簡単に紹介します。
Claude Codeとは、一言で言うとターミナルの上で動くAIエージェントです。
今回は、このClaude Codeを使ってFigmaのデザインカンプからコードを書いてもらう、という一連の流れをやっていきます。
利用に必要なプラン
利用にあたっては、プランの前提があります。
Claude Codeを使うにはProプラン以上の契約が必要になるので注意してください。
もう1つ、Figmaのツールも使いますが、そのツールを使うためにもFigmaのProfessionalプラン以上が必要になります。
この2つのプランが前提になる、という点だけ押さえておいてください。
なお、動画の冒頭でも触れられていたように、AIが発達している今、AIを使えるかどうかで作業効率に大きな差が出ます。
AIを活用して効率的に実装を進めるコーダーと、今まで通り手作業でコーディングをするコーダーとでは、品質が同じであれば前者の方が選ばれやすくなる、という状況が起き始めています。
AIエージェントとは、指示された目的に向かって、ファイルの作成や編集などの作業を自律的に進めてくれるAIのことです。Claude Codeはコード生成に特化したAIエージェントで、この記事ではFigmaのデザインを見てコードを書く役割を担います。
VS Codeのセットアップ｜Claude Code拡張機能を追加する
では早速セットアップを進めていきましょう。
今回はコードエディタ上でClaude Codeを動かす方法を紹介します。
コードエディタは、今回はVS Codeを前提に進めます。VS Codeはコードエディタの中でもシェアが高いエディタです。
他にもCursorやAntigravityといったエディタもありますが、基本的には同様の手順になるはずですので、お好きなコードエディタを使っていただいても大丈夫です。
拡張機能を2つ追加する
まずは拡張機能を追加していきましょう。
左側の「Extensions（エクステンションズ）」を開いて、この中で「Claude Code for VS Code」を検索してインストールしてください。
これで、ターミナルのようなコマンドを使わずに、VS Code上でチャットのような感覚でClaude Codeを使えるようになります。
そしてもう1つが「Live Preview」です。
こちらは、Claude Codeで作成してもらったコードの表示を確認しやすくするツールですので、こちらも入れておいてください。
ここまででVS Code上の設定は以上になります。
拡張機能とは、VS Codeに後から機能を追加できる仕組みのことです。左側のExtensionsパネルから検索してインストールできます。今回は「Claude Code for VS Code」と「Live Preview」の2つを追加します。
Figma MCPの接続手順｜AIとFigmaをつなぐ設定
続いてはFigma MCPの接続を行っていきましょう。
MCPという言葉は難しく感じるかもしれませんが、簡単に言うとAIと外部のツールをつなぐ仕組みのことです。
この仕組みがあるおかげで、Claude CodeがFigmaのデザインカンプを直接見に行けるようになります。
公式サイトで接続方法を確認する
接続の仕方については、Figmaの公式サイトを見てもらうのが早いです。
「Setup the remote server（セットアップ・ザ・リモートサーバー）」というタイトルのページを開いて確認してみてください。
下の方にスクロールすると、いろいろなエディターでのセットアップ方法が書かれていますので、参考に追加してみてください。
今回はClaude Codeを使いますので、Claude Code向けの手順を見ていきます。
手順は大きく2パターンあり、プラグインとして追加する方法と直接追加する方法があります。今回は直接追加する方法で進めます。
プロジェクトフォルダを作成する
追加する前に、まずはプロジェクトフォルダを作っていきましょう。
これはClaude Codeが作成したコードを格納するためのフォルダというイメージです。
追加する場所はどこでも構いませんが、今回はデザインカンプのタイトルに合わせて「speed-lp」という名前で新規フォルダを作成しておきます。
作成できたら、このフォルダをVS Codeで開いていきます。VS Codeを開いて、先ほど作成したフォルダをドラッグ&ドロップで開きましょう。
そうすると、左側のエクスプローラーに「speed-lp」フォルダが認識されていることが分かります。
コマンドでFigma MCPを追加し、認証する
ここまでできたら、またドキュメント（公式サイト）に戻って、コマンドを使って追加していきます。
「claude」から始まるコマンドをコピーして、VS Codeに戻ってターミナルを開きます。ターミナルを開いてこのコマンドを貼り付けると、「追加できました」というメッセージが表示されます。
これでFigma MCPが認識されているはずですので、Claude Codeのチャットから確認していきましょう。
左側のパネルのClaude Codeを開いて、「New Session（ニューセッション）」を押します。
そうすると新しいタブでClaude Codeとチャットできるスペースが登場し、ここでメッセージを送ることができます。
この中で、まずはFigmaの認証をしておきます。
チャットに「/mcp」と入力するとMCPサーバーのメニューが出てきますので、こちらを選択してください。
今追加した1件（Figma）が表示されていますが、まだ認証できていないタグが付いています。これをクリックしてください。
さらにボタンが出てきますので、上の認証のボタンを押して進んでいきましょう。ブラウザで開きます。
そうすると「どのFigmaアカウントと連携しますか」と出てきます。下の方に自分がログインしているFigmaアカウントが出てきますので、間違っていないか確認して、上の「Agree & all access（アグリー&オールアクセス）」を押しましょう。
認証が成功しました、という画面になりますので、こちらは閉じておきます。
改めてVS Codeに戻ると「Connected（コネクテッド）」と表示されており、接続が完了していることが分かります。
これでFigma MCPの設定ができました。
MCPは、AIと外部ツールをつなぐための仕組みです。このFigma MCPを接続することで、Claude Codeが自分でFigmaのデザインカンプを見に行き、その内容をもとにコードを書けるようになります。手動でデザインを書き出して渡す手間が省けるのがポイントです。
Figmaのデザインカンプから自動でコーディングしてもらう
Figma MCPの設定ができたので、実際にデザインカンプからコーディングしてもらいましょう。
Figmaのリンクを取得する
デザインカンプからコーディングしてもらうには、Figmaのリンクを取得します。
Figmaのデザインカンプの画面に移動します。今回のデザインは様々な幅で作られていますが、PCの1440pxとスマホの375pxを渡して実装してもらうことにします。
まずは1440pxのフレームを右クリックして、「Copy/Paste as」の中の「Copy link to selection」を選択してURLをコピーします。
そしてVS CodeのClaude Codeのチャットに戻って貼り付けます。何のデザインカンプか分かるように「デスクトップ」と入れておきます。
改めてFigmaの画面に移動して、次はスマホの375pxのフレームを選択し、同じように「Copy link to selection」で貼り付けます。こちらは「モバイル」と入れておきましょう。
依頼のプロンプトを送る
デザインカンプの情報が揃ったので依頼していきましょう。依頼内容はシンプルに、以下のように書きます。
[code class=”bash” id=”code1″]以下のデザインを参考にHTML/CSSでWebページとして再現してください。（念のため）Figma MCPを使ってください。[/code]
「Figma MCPを使ってください」と明示的に付け加えておくのがポイントです。ではこちらで送ってみましょう。
実行中の許可と生成結果を確認する
AIが作業する中で、こちら側に確認が来ることがありますので、内容を確認して「Yes」を押しながら進めていきます。
今回は「このMCPのツールを使いますよ」ということで確認されています。
「Yes」だと1回限りの許可になりますが、2番目の「Yes」にするとこのやり取りの間は常に許可するという意味になります。今回は2番で進めます。
すると、AIがHTMLファイルを作ってくれます。
エクスプローラーを見ると、CSSのフォルダや画像のフォルダが作られ、その中にはデザインカンプから取り込んだ画像も入れてくれています。
そして「index.html」というHTMLファイルと、「style.css」というCSSファイルも作成してくれています。
完成すると、ディレクトリの構造やどのように実装したか、といった内容を報告してくれます。
実装を確認するには、「index.html」を右クリックして開いていきます。
右クリックの「検証」から1440pxにして、まずはPCの見栄えを確認します。この時点では、画像だけが正しく反映されていないことがあるかもしれません。
スマホ（375px）も見ていくと、構造に関してはデザインと同様になっていることが分かります。あとは画像が反映されていないので、そこだけ次で直していきます。
デザインカンプとは、Webサイトの完成見本となるデザインデータのことです。Figmaなどのツールで作られ、PC用（例：1440px）やスマホ用（例：375px）など複数の画面幅で用意されることが多くあります。この記事では、そのカンプのリンクをClaude Codeに渡してコード化してもらいます。
反映されない画像をAIに修正依頼する
続いて、正しく反映されていなかった画像の部分を修正していきます。
ここは少しコーディングの知識が必要になるかもしれない部分です。
画像の部分を確認していくと、デベロッパーツールから画像の指定を見ると「image-case.png」といったファイルが指定されていることが分かります。
実際のファイルを見ていきましょう。VS Codeに戻って画像フォルダの中を見ると、「.png」のファイルはなく「.jpeg」のファイルが入っていた、というのが原因です。
つまり、コード側で指定している拡張子（.png）と、実際のファイルの拡張子（.jpeg）が食い違っているため、画像が表示されていなかったわけです。
これも簡単に修正できます。以下のようにAIへ依頼してみましょう。
[code class=”bash” id=”code2″].pngではなく.jpegに変更してください。[/code]
「完了しました」と返ってきたら表示を見ていきます。すると、画像が正しく差し替わっていることが確認できました。
このように、うまく反映されない箇所があっても、原因を伝えてAIに修正を依頼するだけで直せます。
拡張子とは、ファイル名の末尾に付く「.png」「.jpeg」などの種類を表す文字列です。HTMLやCSSで画像を指定するときは、実際のファイルの拡張子と一致していないと画像が表示されません。今回は指定が「.png」なのに実ファイルが「.jpeg」だったため、表示されていませんでした。
まとめ：Claude Code×Figma MCPで実装を自動化し、最終チェックは人間が行う
今日はClaude CodeとFigma MCPを組み合わせて、Figmaのデザインカンプからの実装をAIにやってもらう方法をお伝えしてきました。
このように、Claude CodeとFigma MCPを使うと、人間が手を動かしてコードを書くことなく、AIがFigmaのデザインカンプを直接見に行ってコーディングしてくれるようになります。
ただし、先ほど画像を書き換えたように、AIに任せているから全て完璧というわけではありません。
最終的には人間がページを確認し、問題がありそうなところは手で修正するか、さらに修正をAIに依頼するという流れで作っていくことになります。
とはいえ、これだけの作業をAIが自動で書いてくれるのはかなりの効率化につながりますし、AIが作っている間に人間は他の作業ができるため、時間的な余裕を持ちながらいろいろなタスクを進められます。
プランの制限はありますが、条件を満たしている方はこの記事と同様に進めていただければ、Figmaのデザインからの実装をAIに任せることが可能になります。ぜひご自身の環境でも試してみてください。
Claude Code×Figma MCPに関するよくある質問
Q. Claude CodeとFigma MCPを使うのに必要なプランは？
Claude CodeはProプラン以上の契約が必要で、Figmaのツールを使うにはFigmaのProfessionalプラン以上が必要です。この2つが前提になります。
Q. VS Code以外のエディタでも使えますか？
使えます。動画ではVS Codeを前提に進めていますが、CursorやAntigravityといったエディタでも基本的には同様の手順になります。お好きなコードエディタを使って大丈夫です。
Q. MCPとは何ですか？
MCPは、AIと外部のツールをつなぐ仕組みのことです。Figma MCPを接続することで、Claude CodeがFigmaのデザインカンプを直接見に行けるようになり、手動でデザインを書き出す手間が省けます。
Q. 生成されたコードはそのまま公開して大丈夫ですか？
そのままでは不十分な場合があります。動画でも画像が反映されない箇所があったように、最終的には人間がページを確認し、問題があれば手で修正するかAIに追加で修正を依頼する流れになります。
Q. Figmaのリンクはどう渡せばいいですか？
Figma上でフレームを右クリックし、「Copy link to selection」でURLをコピーして、Claude Codeのチャットに貼り付けます。動画ではPC用の1440pxとスマホ用の375pxの2つを渡していました。
Claude Code×Figma MCPをさらに深く学ぶならデイトラ「Web制作コース」
本記事で解説したClaude Code×Figma MCPによる自動コーディングは、独学でも基礎を押さえることはできます。
ただし、AIが生成したコードを確認・修正し、実務で通用するレベルのWebサイトに仕上げるには、HTML/CSSの土台となる知識と、現役で活躍するメンターから添削を受けながら学べる環境が近道です。
デイトラの「Web制作コース」は、実務レベルを想定したカリキュラムと、現役プロによる質問対応が特徴のオンラインスクールです。
広告費を最小限に抑え、口コミと品質で支持を得てきたからこそ、業界の数分の一という低価格で学べます。
AIを使いこなしながらWeb制作で案件を獲得できるようになりたい方は、ぜひ一度カリキュラムをチェックしてみてください。
「自分に合うか不安…」という方は公式LINEへ
「独学とスクール、どちらが自分に合っているか分からない」
「複数のコースのうち、どれを選ぶべきか相談したい」
そんな方は、デイトラ公式LINEに登録してみてください。
自分に合ったコースの診断や、無料の学習動画などの特典もプレゼント中です。
無理な勧誘は一切ありませんので、まずは情報収集として気軽に登録してみてくださいね。
はにわまん（@haniwa008）
業界歴10年以上の現役フリーランスWeb制作者。Web制作系技術ブログ「HPcode」運営。数千人が受講したデイトラWeb制作コースマネージャー。
