Claude CodeでFigmaをAIコーディングする実務フロー
作業の全体像
はじめに
Claude CodeとFigma MCPを組み合わせたコーディングの解説、最近増えてきましたよね。ただ、その多くは「1ページだけ」「PCデザインのみ」「規模の小さいLP」を題材にしたものです。
一方で、実務で受ける案件はそう単純じゃありません。ページ数は10を超えることもあるし、SPとPCの両方のデザインがあるのが当たり前。1ページの縦も長く、セクションもたくさんあります。
私自身、Figma MCPでのAIコーディングを実務案件で10件ほどこなしてきました。最初はページ全体を一気に作らせようとして失敗したり、セクションをまたぐうちに規約から外れたコードが増えたりと、それなりに試行錯誤しています。この記事は、その中で「これは効く」と残ったやり方をまとめたものです。
というわけで、複数ページ・SP/PC両対応・大規模といった「現実の案件」をClaude Codeでどう回しているか紹介します！ツールの使い方というより、破綻させずに進めるための「段取りの付け方」の話がメインです。
前提と全体像
この記事は2026年9月時点のやり方です。Claude CodeもFigma MCPも更新が速いので、今後変わっていく可能性があります。
使っているものはこちら。
- Claude Code：コーディングの実行環境
- Figma MCP：Figmaのデザインデータを読み取る
- Playwright：実装後のスクリーンショットを撮ってデザインと比較する
- CLAUDE.md：コーディング規約を書いたファイル
- TODO.md：作業の進行管理をするファイル
モデルはOpus、effortは/effortでxhighにしています。コーディング用途はxhighから始めるのが推奨されているので、そのまま使っている形です。
大まかな流れはこんな感じです。
- プロジェクトを準備する（CLAUDE.md・TODO.mdを用意）
- ページ全体のデザイン画像から、セクションを洗い出す
- セクションごとにFigmaのURLをTODO.mdに書いておく
- セクション単位で実装する
- Playwrightでスクショを撮ってデザインと重ね比較、差異を直す
- 実装後にCLAUDE.mdの規約に違反していないか自己チェックする
ポイントは、ページ全体を一気に作らせないことと、進行状況をファイルに残すことの2つです。順番に説明していきます。
なぜ「一括生成」ではうまくいかないのか
最初は、ページ全体のFigma URLを貼って「このページを作って」とお願いしていました。でも、これがうまくいかなかったのです。
一番の原因は、1ページが縦に長いデザインだと、Figmaのフレームが大きすぎて処理が止まってしまうこと。MCP経由でデザインを取得しようとしても、フレームが大きすぎると最後まで読み取れないのです。
デザイナー側のデータの作り方にも左右される
もう1つ、見落としがちな要因があります。それはデザイナーさんのデータの作り方です。
Figma MCPは、レイヤーやフレームの構造をたどってデザイン情報を読み取ります。そのため、レイヤーやセクションがきれいに分けられていて、オートレイアウトが使われているデザインなら、比較的スムーズに情報を取得できます。
逆に、レイヤーがフラットにベタ置きされていたり、セクションの区切りが曖昧だったり、オートレイアウトが使われていなかったりすると、MCPは構造をうまく解釈できません。要素の位置関係や余白が正しく読み取れず、実装の精度が落ちます。これは制作側ではどうにもできない、受け取ったデザイン次第の部分ですね。
自分でレイヤー分けするより、セクション単位でURLを渡す
理屈のうえでは、私の方でFigmaのレイヤーを整理し直したり、セクションごとにきれいにグループ化したりすれば、MCPは読み取りやすくなります。でも、他人のデザインデータを1から整理し直すのは正直かなり面倒です。
そこで落ち着いたのが、セクションごとにグループとして選択し、そのURLを貼るというやり方。ページ全体ではなく、MVならMV、ProblemならProblemと、区切られた単位でURLを渡します。こうすれば、1つ1つは十分に読み取れるサイズになりますし、レイヤーを整理し直す手間もかかりません。
このやり方には副次的なメリットもありました。1セクションずつ実装すれば、実装の粒度が細かくなるぶん、デザインとのズレにも気づきやすくなります。ページまるごと一気に作られると、どこがどうズレているのか追いきれませんが、セクション単位ならその都度スクショで確認できます。
CLAUDE.mdでルールを固定する
複数ページの案件では、制作会社ごとのコーディング規約があります。クラス命名規則、CSS変数の使い方、SCSSのネストルール、PHPの書き方……こういったルールを毎回口頭で伝えるのは現実的じゃありません。
そこで、規約はCLAUDE.mdというファイルにまとめておきます。プロジェクトルートに置いておけば、Claude Codeが自動で読み込んでくれます。
工夫しているのは、「よくある間違い」をファイルの先頭近くに置くこと。たとえば私の場合、余白をSPとPCで個別に指定し忘れる、フォントサイズをFigmaで確認せず推測で書く、といったミスが頻発していました。こういう「毎回やらかすこと」を目立つ位置に書いておくと、実装時に踏みとどまってくれる確率が上がります。
実際のCLAUDE.mdは、こんな構成にしています（抜粋）。
# コーディングルール
## ⚠️ 実装前に必ず確認すること
- SP・PC 両方の Figma を確認してからコードを書く
- 実装後、このファイルを見返して規約違反がないか自己チェックする
## ⚠️ よくある間違い
- 余白を SP・PC で個別指定していない（推測で統一しない）
- フォントサイズを Figma で確認せず、近い値で書いてしまう
- 色・line-height なども実数値で一致させる
## ブレークポイント
- SP 375 / PC 1920
## クラス命名
- プレフィックス: c- / l- / u- など
- 使用禁止: 複数形・wrap・titleポイントは、「必ず確認すること」と「よくある間違い」を冒頭に持ってくること。細かい命名規則などはその下にまとめます。制作会社から支給されたルールがあればそれをベースに、なければ一度Claudeと壁打ちして作り、次の案件にコピーして使い回しています。
TODO.mdで進行を管理する
これが個人的に一番効いている工夫です。
複数ページの案件を1日で終わらせることはまずありません。何日もかけて少しずつ進めます。すると問題になるのが、「昨日どこまでやったか」「次に何をすればいいか」を見失うこと。これは自分だけの問題ではなく、Claude Codeにとっても同じです。
そこで、TODO.mdに作業の全体像を書いておきます。ページごとにセクションを分解し、各セクションに以下を用意します。
- チェックボックス（実装済みかどうか）
- SP・PCそれぞれのFigma URL欄
- 注意点のメモ欄
- 画像書き出しリスト
こうしておくと、翌日に続きから作業を始めても、私もClaude Codeも「次は何をすればいいか」がすぐわかります。TODO.mdを見れば、どのセクションが終わっていて、次はどこに着手すればいいかが一目瞭然です。
もう1つの大きなメリットが、Figma URLを先に貼っておけること。セクションに着手するたびに「このセクションのURLはこれです」と毎回指示するのは面倒でした。でも、TODO.mdに全セクションのURLを最初に記入しておけば、あとは「この範囲を進めて」と言うだけで、Claude Codeが該当のURLを見て一括で作業を進めてくれます。指示の手間がぐっと減りました。
実際のTODO.mdは、こんな構成です（抜粋）。
# 作業TODO
## 案件概要
- サイト名：サンプルサイト
- 対応デバイス：PC・SP（SP375 / PC1920）
- ページ構成：TOP / About / Contact
---
## TOPページ
### デザイン画像（.design/）
- PC：top_pc.jpg
- SP：top_sp.jpg
### 準備
- [x] .design/ に画像配置済み
- [x] セクション洗い出し完了
### セクション一覧
| # | セクション | 状態 | 注意点 |
|---|---|---|---|
| 1 | header | 済 | スクロール追従あり |
| 2 | mv | 済 | 画像2枚 |
| 3 | about | 未 | カード3枚 |
### Figma URL
#### 1. header
- PC：https://www.figma.com/design/...（PCのURL）
- SP：https://www.figma.com/design/...（SPのURL）
#### 2. mv
- PC：https://www.figma.com/design/...（PCのURL）
- SP：https://www.figma.com/design/...（SPのURL）
### 画像書き出しリスト（設置先：img/）
| ファイル名 | 内容 | alt種別 |
|---|---|---|
| img_mv01 | MV写真 | 空（装飾） |
| img_about01 | About図解 | 図 |セクション一覧、Figma URLの記入欄、画像書き出しリストがひとつのファイルにまとまっているのがポイントです。スライダーやモーダルなど静止画に写らない画面のURL欄も別に用意しておくと、後追いで拾いやすくなります。
1ページを仕上げる実務フロー
実際に1ページを仕上げるまでの流れを、順を追って書いていきます。
1. デザイン画像を配置する
まず、ページ全体のデザインをJPG化して.design/ディレクトリに置きます。PCとSPそれぞれ、等倍のフルページ縦長が理想です。あとでPlaywrightのスクショと重ねて比較するので、実寸で用意しておくとズレの確認が正確になります。
2. セクションを洗い出す
フルページのデザイン画像を見て、そのページにどんなセクションがあるかを洗い出します。MV、Problem、Service……と、区切りごとにリストアップして、TODO.mdに書き込みます。
3. 画像書き出しリストを作る
各セクションで必要になる画像をリストアップします。ファイル名、内容、alt種別（装飾なら空、図や文字画像なら記述あり）まで決めておきます。スライダーの2枚目以降やタブで隠れているパネルなど、静止画に写らない画像は後追いで拾います。
Figma MCPにはdownload_assetsという、画像を自動で書き出す機能もあります。ノードにエクスポート設定（Figma右パネルのExport）があればその設定どおりに、なければデフォルトのフォーマットとスケールで書き出してくれます。
実際に使ってみると、シンプルな写真やアイコンはきれいに取れます。ただ、多数のベクターレイヤーが合成された複雑なイラストは、1枚のアセットではなく分解されたパーツとして返ってくることがあり、そのままでは使えません。あとエクスポート設定がないノードは解像度の面でも扱いづらく、Retina対応が必要な画像だと結局書き出し直すことになります。
なので今は、うまく取れるものはAIに任せて、それ以外は自分で書き出す、という運用にしています。CLAUDE.mdに「エクスポート設定があるノードだけdownload_assetsで書き出す。ない場合は対象ノード名を伝えて手動書き出しを依頼する」と書いておくと、判断が安定します。
4. Figma URLを記入する
各セクションのFigma URL（SP・PC両方）と注意点をTODO.mdに記入します。前述の通り、ここで先に全部貼っておくのがコツです。
5. セクション単位で実装する
準備が整ったら、セクション単位で実装していきます。このとき必ずSP・PC両方のFigmaを確認してからコードを書きます。片方だけ見て書くと、もう片方のデザインを見落とします。画像はSTEP 3のリストのファイル名でダミー配置してもらい、自分で書き出し次第、該当ディレクトリに設置していきます。
6. Playwrightで重ね比較する
実装が終わったら、Playwrightで375px（SP）と1920px（PC）のスクリーンショットを撮ります。それを.design/のデザイン画像の該当箇所と重ねて比較し、ズレがあれば直します。差異がなくなるまで、この確認と修正を繰り返します。
7. 規約をセルフチェックする
最後に、CLAUDE.mdを見返して規約違反がないかを確認します。特に「よくある間違い」の項目は、Figmaの実数値と照らし合わせて検算します。スクショの目視だけだと見落とすので、数値レベルで確認するのがポイントです。
この一連を、セクションごとに繰り返してページを仕上げていきます。
つまずきポイントと対処
実際にやっていて頻発したつまずきを挙げておきます。どれも「片方のブレークポイントの値で書いてしまう」「値をFigmaで確認せず推測する」ことが原因でした。
余白をSP・PCで個別指定していない
たとえばPCで10px、SPで5pxのデザインなのに、SPも10pxのままになっている。これは「たぶん同じだろう」で統一してしまうと起きます。SPとPCのFigma値を別々に読んで、違っていればメディアクエリで分ける必要があります。
フォントサイズがFigmaと違う
デザインは36pxなのに20pxで書いてしまう、というパターン。「近そうなサイズ」を推測で当てると起きます。Figmaのpxをちゃんと読んで、対応する値を当てる。地味ですがここを省くとズレます。
line-heightや色なども同様
letter-spacing、font-weight、色、borderの太さや種類も、思い込みで書くとズレます。Figmaの実数値を読んで一致させる、という基本を毎セクション徹底するしかありません。
対策としては、CLAUDE.mdの「よくある間違い」にこれらを書いておき、実装後のセルフチェックで必ず検算する、という運用にしています。それでも長いCLAUDE.mdだと後半で指示が薄れることがあるので、ここは今も改善中です。
おまけ：毎回同じ指示をするのが大変なのでスキル化した
ここまでのフローを回していて気づいたのは、毎回同じ段取りを口頭で指示しているということでした。「CLAUDE.md読んで」「セクション洗い出して」「この範囲を実装して」……と、案件が変わっても言っていることはほぼ同じです。
そこで、この一連の手順をClaude Codeのスキルにまとめました。プロジェクト準備、セクション実装、コードレビューの3つに分けて、それぞれスキル化しています。これで毎回指示する手間が減り、手順の抜け漏れも防げるようになりました。
まとめ
複数ページ・レスポンシブ・大規模なFigma案件をClaude Codeで回すコツは、突き詰めると2つです。
- ページ全体を一気に作らせず、セクション単位に分割する
- 進行状況と段取りをTODO.mdに残して、AIにも自分にも次の一手を明示する
1ページ・PCのみの解説では見えてこない部分ですが、案件を重ねるほどこの段取りが効いてくると感じています。同じように大きめの案件をClaude Codeで進めたい人の参考になれば嬉しいです！
inaro.dev / Web Engineer