はじめに
フロントエンドはjQueryで時が止まっているバックエンドエンジニアが、Claude CodeとFigma MCPを使ってWebサイトのフロントエンドを実装しました。
先に結論を書きます。
- Figma MCPにページ全体のリンクを渡すだけでは、見た目は40点でした
- スクショ・アイコンのSVG・インタラクションの指示を足して、やっと70点でした
- 最後にページ全体を読み込み直して余白を合わせ、85点くらいまで上がりました
- 残り15点は人の目で確認して直しました。これに1日2時間×1週間ほどかかっています
- MCPは「読み込ませる」だけでは足りません。読み込ませたうえで、何を実装に落とし込ませるかを指定する必要があります
- モックアップの実装と、バックエンドとの結合は分けたほうが速いです
うまくいった話より、遠回りした話が中心です。これから同じことをやる人が、同じ茨の道を歩かずに済めばうれしいです。
先に: Claude Code × Figma MCPの使い方と前提
前提: FigmaはDevシート以上が実質必須
ここが最初の関門です。Figma MCPサーバーの読み取り系ツールには、プランとシートごとに回数制限があります。
| プラン | View/Collabシート | Dev/Fullシート |
|---|---|---|
| Starter（無料） | 20回/月 | 20回/月 |
| Professional | 6回/月 | 200回/日（10回/分） |
| Organization | 6回/月 | 200回/日（15回/分） |
| Enterprise | 6回/月 | 600回/日（20回/分） |
Viewシートでも接続はできますが、月6回では1画面も作り切れません。実装に使うなら有料プランのDevシートかFullシートが必要と考えてください。
上の表は2026年10月時点の値です。回数は変わることがあるので、最新の値は公式ドキュメントで確認してください。
セットアップ
Claude Codeなら公式プラグインを入れるのが一番簡単です。
claude plugin install figma@claude-plugins-official
プラグインを使わずにMCPサーバーだけ追加することもできます。
claude mcp add --transport http figma https://mcp.figma.com/mcp
追加したらClaude Codeを起動し直し、/mcpでfigmaを選んで認証します。ブラウザが開くので「Allow Access」を押し、もう一度/mcpを開いて接続済みになっていれば完了です。
使い方
Figmaで実装したいフレームを選び、右クリックから「選択範囲へのリンクをコピー」します。そのリンクをClaude Codeに貼って「これを実装して」と頼むだけです。
よく使われるツールは次の4つです。Claudeが必要に応じて呼び分けます。
| ツール | 返ってくるもの |
|---|---|
get_design_context |
選択範囲のデザイン情報。既定ではReact + Tailwindの参考コード |
get_metadata |
レイヤーのID・名前・位置・サイズだけの軽い一覧 |
get_screenshot |
選択範囲の画像 |
get_variable_defs |
色・余白・文字などの変数とスタイル |
自分のバックグラウンド
- エンジニア歴12年
- ほぼバックエンド、インフラを少し
- フロントエンドはjQueryまで
- Figmaは3年ほど触っているが、職能外なので「見るだけ」
- UX検定基礎に合格
ReactもTailwind CSSも、ほぼゼロからのスタートです。UX検定基礎は取ったものの、受けてすぐ実践できるものではありませんでした。
やろうと思ったこと
とあるWebサイトのフロントエンドを、FigmaのデザインからAIで実装しようとしました。技術スタックはNext.js（App Router）、TypeScript、Tailwind CSSです。
使ったのはClaude Code 2.1系（2026年5月時点）で、モデルはClaude Sonnet 4.6です。
当初の計画はこうでした。
- Figma MCPでデザインを読み込み、コンポーネント設計書・パーツ設計書をMarkdownで作る
- そこにバックエンドとの繋ぎ込み仕様を追記して、1本の仕様書にする
- その仕様書をもとに、フロントエンドを一気に実装する
仕様書さえしっかり書けば、あとはAIが全部やってくれるはず。そう思っていました。
詰まったこと
失敗1: 前知識ゼロで突っ走った
Figma MCPのことを何も調べずに始めました。ページ全体のリンクを送っておけば、コンポーネントの分割もページの実装も全部やってくれると思っていたのです。
違いました。
ページ全体のような大きな範囲を一度に渡すと、情報量が多すぎて細部が落ちます。公式ドキュメントにも、大きなデザインはまずget_metadataで全体の構造を掴み、そのあと必要な部分だけget_design_contextで取る、という使い方が書かれています。つまり「小さく分けて渡す」のが前提のツールでした。
Figmaの知識も、見た目を作るデザインの知識も、フロントエンドの知識もなかったので、出てきたものの何が悪いのかを言葉にできません。「なんか違う」としか言えず、直す指示が出せませんでした。この「なんか違う」の感覚は、資格を取ったところですぐには変わりません。もっとやり方があったはずで、結果としてだいぶ遠回りしました。
失敗2: モックアップの実装とバックエンド結合を同時にやろうとした
設計書に繋ぎ込み仕様まで書いて、見た目とデータを同時に作らせようとしました。これがうまくいきませんでした。
見た目が崩れているのか、データの繋ぎ込みが間違っているのか、切り分けがつかなくなります。そもそもデザインが実装に落とし込めていない段階で、その上にAPIの繋ぎ込みを積んでも、直す場所が増えるだけでした。
モックと結合は別物です。当たり前のことですが、実装を自動化するからといって、まとめてよい理由にはなりませんでした。
失敗3: 文字の仕様書だけでは、平成のHTMLができあがる
最初の実装はFigma MCPを使わず、文章の仕様書だけで作らせました。できあがったのは、平成のHTMLのような見た目でした。
余白、文字の大きさ、色の濃淡、角の丸み。デザインの「それっぽさ」を作っている情報は、文章の仕様書にはほとんど載っていません。載っていない情報は、AIにも作れません。
解決策としてやったこと
進め方を変えた: まずモック、そのあと結合
計画を次のように組み替えました。
- モックアップ実装: ダミーデータで、見た目だけをFigmaに合わせる
- 本番実装: モックを見た目の正解として、保守できるコンポーネント構成に組み直す
- バックエンド結合: APIの繋ぎ込みを追加する
見た目の問題とデータの問題が混ざらなくなり、手戻りが減りました。
見た目を上げるためにやったこと
ステップ1: MCPだけで読み込む（40点）
ページ全体を読み込ませたあと、コンポーネントごとにもリンクを渡して読み込ませました。構造はそれなりに合いますが、見た目は40点です。
ステップ2: 正解の見た目と素材を渡す（70点）
次の3つを足しました。
- スクショ: ページ全体と、コンポーネントごとの両方
- アイコンのSVG: Figmaから書き出して、どこにどのファイルを使うかを指定
- インタラクション: ホバーや開閉などの動きは、1つずつプロンプトを書いて指示
ここまでやって、やっと70点です。
正解の見た目は、結局スクショしか勝たん、です。数値の情報だけ渡すより、完成形の画像を一緒に見せたほうが、明らかに精度が上がりました。
インタラクションについては、get_design_contextが返すのは基本的に静止したデザインです。ホバーしたらどうなるか、押したら何が開くかは、言葉で伝える必要がありました。
ステップ3: もう一度ページ全体を読み込んで、余白を合わせる（85点）
コンポーネント単位で作ると、1つ1つは合っていても、並べたときの間隔がずれます。最後にもう一度ページ全体をMCPで読み込ませ、コンポーネント間のスペーシングを調整しました。
これで最終的に85点くらいまで上がりました。全体→部分→全体、の順です。最初の「全体」は構造を掴むため、最後の「全体」は余白を合わせるため、と役割が違います。
残りの15点は、人の目で見て直す部分です。ここには細かい見た目のずれだけでなく、文面も入っています。文面は正直ちょっと弱いと感じました。理由は2つあります。
- 再現が崩れる: Figmaでは箇条書きだったものが普通の文章になっていたり、文章自体が違っていたりしました
- 元の文章が正しいとは限らない: Figma上の文章にそもそも誤りがあることもありました。AIはそれをそのまま写すので、誰かが読んで気づくしかありません
見た目は画像と見比べれば気づけますが、文面は読まないと気づけません。文言はFigmaを唯一の正解にせず、別に確認する工程を持ったほうがよいと思いました。
そしてこの目視確認に、めちゃくちゃ時間がかかりました。1日2時間を1週間ほどです。（もうちょっとかかっていたかも・・・）実装はAIが速く進めてくれますが、Figmaと見比べて確かめる作業は速くなりません。
分かったこと
MCPは読み込ませるだけではダメ
読み込ませたうえで、何を実装に落とし込ませるかを指定する必要があります。
- どの単位でコンポーネントに分けるか
- 既存のどのコンポーネントを使い回すか
- 色や余白をどのルールで書くか
- アイコンはどのファイルを使うか
毎回プロンプトに書くのは大変なので、スキルにまとめておくのがおすすめです。自分も最終的に、モック実装と本番実装の進め方をスキルにしました。
MCPは万能ツールではない
そりゃそうなのですが、やる前は万能だと思っていました。
正確に言うと、Figma MCP自体はコードを書きません。Figmaのデザイン情報を、AIが読める形で渡してくれる「資料係」です。CSSを書くのはClaudeのほうです。
そしてClaudeは、CSSを書く作業を代わりにやってくれる助手です。助手に何を作らせるか、できあがったものが正しいかを判断するのは、人間の仕事として残ります。判断するには、フロントエンドとデザインの最低限の知識が要ります。前知識ゼロで突っ走った自分が一番遠回りしたのは、ここでした。
これからやる人へ
- 先に公式ドキュメントを読む（自分はここを飛ばして遠回りしました）
- ページ全体を一度に渡さず、コンポーネント単位で渡す
- 数値だけでなく、正解の画像を必ず一緒に見せる
- 動きは言葉で指示する
- モックと結合は分ける
- うまくいった指示はスキルにする
PS: Code Connectが使えていたら
今回はCode Connectを使っていません。
Code Connectは、Figmaのコンポーネントと、コードベースにある実装済みコンポーネントを紐づける仕組みです。紐づけておくと、MCPが返すデザイン情報に「このボタンは、コードではこのコンポーネント」という対応が載ります。
Code Connectがないと、AIはデザインを見るたびに部品を新しく書き起こします。Code Connectがあれば、最初から既存のコンポーネントを使って組み立ててくれるはずです。「見た目を合わせる」から「部品を並べる」作業に変わり、本番実装への組み直しがかなり軽くなりそうだと感じています。
ただしCode ConnectはOrganizationプランかEnterpriseプランで、DevシートかFullシートが必要です。使える環境の方は、ぜひ試してみてください。次に機会があれば、自分も試して記事にします。
参考
Discussion