FigmaをClaude Codeに読ませて再現度を上げる3つのコツ

6月 11, 2026 6月 11, 2026

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Figmaで丁寧に作ったデザインを、Claude Codeに渡して実装しようとしたら、なんか微妙に違う…という経験、ありませんか？

ボタンの角丸が微妙にズレていたり、フォントサイズが意図した数値になっていなかったり、色コードが近いけど違うという状況になったり。
何度修正指示を出しても、完全に一致しないもどかしさを感じている方も多いのではないでしょうか。

私自身、浜松市内のクライアントからWEBサイトの制作を受けた際に、同じ悩みにぶつかりました。
Figmaで完璧なデザインを仕上げたのに、Claude Codeで実装すると「なんか違う」の繰り返し。
修正のやり取りだけで、制作時間の3割近くを消費してしまっていたこともあります。

でも、あるコツを3つ実践してから、状況は劇的に変わりました。

1つ目はFigmaの書き出し画像ではなくフレーム構造のテキストデータをそのまま渡すこと。
2つ目はデザインをセクションごとに分けて段階的に指示すること。
そして3つ目が、実は一番差がつく方法で、これを実践してから修正回数が体感で半分以下になりました。

この3つ目を知っているかどうかで、Claude Codeを使った実装作業の生産性が大きく変わります。
すでに1つ目・2つ目はやっているという方でも、3つ目を取り入れていない場合は、まだ大きな改善の余地が残っています。

この記事では、FigmaとClaude Codeを組み合わせた実装ワークフローにおける3つのコツをすべて詳細に解説します。
それぞれのコツについて「なぜ効果があるのか」という原理から「具体的にどうやるのか」という手順まで、WEBデザイナーとしての実務経験をもとに丁寧に説明していきます。

最後まで読むと、FigmaデザインをClaude Codeで高精度に再現できるようになり、修正のやり取りにかかる時間を大幅に短縮できるようになります。

それでは早速、3つのコツの全体像から見ていきましょう。

FigmaとClaude Codeの組み合わせで起きる「再現度の問題」とは

まず前提として、なぜFigmaデザインをClaude Codeで実装しようとすると再現度が下がるのかを理解しておくことが重要です。
ここを理解せずにコツだけを真似しても、応用が効きません。

Claude Codeが「見ている」ものと「必要なもの」のギャップ

Claude Codeは画像を渡されると、視覚的な情報から推測してコードを生成します。
しかし、推測であるがゆえに、数値の精度には限界があります。

例えば画像から「このボタンのパディングは上下12px・左右24pxっぽい」と推測はできても、実際のデザインが「上下10px・左右20px」だった場合、微妙なズレが生じます。
この小さなズレが積み重なると、全体として「なんか違う」という印象になるわけです。

Claude Codeに正確な情報を渡せば、推測の必要がなくなり、精度が上がります。
これが3つのコツすべての根底にある考え方です。

よくある失敗パターン3つ

私が実務でよく見かける、または自分自身がやってしまっていた失敗パターンを整理しておきます。

Figmaの画面全体をスクリーンショットして渡している（情報が画像として圧縮・劣化される）
「このデザインをコードにしてください」と一言だけ指示している（コンテキストが不足している）
毎回ゼロから指示しているため、コンポーネントごとにスタイルが微妙にブレている

これらの失敗は、どれも「Claude Codeに渡している情報の質と量が不足している」という共通の原因から来ています。

ポイント

Claude Codeの再現度は、渡すプロンプトの情報設計で決まります。ツール側の問題ではなく、使い方の問題です。情報設計を変えるだけで、同じClaude Codeが劇的に変わります。

再現度の問題は「Claude Codeの限界」ではなく「情報の渡し方」の問題です。

コツ1：書き出し画像ではなくフレーム構造のテキストを渡す

1つ目のコツは、FigmaのデザインをPNGやJPEGで書き出して渡すのをやめて、フレーム構造のテキストデータを渡すことです。
これだけで、数値の精度が大きく向上します。

なぜ画像ではなくテキストなのか

画像として渡した場合、Claude Codeは「視覚的な推測」でコードを生成します。
一方、テキストとして構造データを渡すと、Claude Codeは推測ではなく「読み取り」でコードを生成できます。

具体的に比べると、画像で渡した場合のClaude Codeの処理は「このボタンは横長で、角が少し丸く、テキストは白っぽい。パディングは目測で…」という推測プロセスになります。
テキストで渡した場合は「width: 200px, height: 48px, border-radius: 8px, color: #FFFFFF, padding: 12px 24px」という読み取りプロセスになります。
どちらが精度高くコードを生成できるかは明らかです。

Figmaのフレーム構造テキストの取り出し方

Figmaには、レイヤーパネルやインスペクト機能を使ってデザインの数値情報をテキストとして確認する方法があります。
また、Figma APIを使うとJSON形式でフレームの構造データを取得できます。

実務での手順としては以下の流れが効果的です。

実装したいフレームをFigmaで選択する
インスペクトパネルを開き、各要素の数値（幅・高さ・パディング・色・フォントサイズなど）を確認する
確認した数値情報をテキスト形式でまとめてClaude Codeに渡す
またはFigma APIやプラグインを使い、JSON形式の構造データを取得して渡す

Figma to Codeなどのプラグインを活用すると、インスペクト情報を自動でテキスト化できるものもあります。
自分の制作フローに合ったツールを見つけておくと、この工程が大幅に効率化されます。

テキスト渡しのプロンプト例

実際にどのようなテキストをClaude Codeに渡すかの例を示します。

以下のFigmaフレーム構造をもとにHTMLとCSSを生成してください。

【フレーム名】ヒーローセクション
【幅】1440px
【高さ】600px
【背景色】#1A1A2E

【子要素：メインテキスト】
フォント：Noto Sans JP Bold
フォントサイズ：56px
行間：1.4
色：#FFFFFF
位置：上から160px、左から120px

【子要素：サブテキスト】
フォント：Noto Sans JP Regular
フォントサイズ：18px
行間：1.8
色：#CCCCCC
位置：メインテキストの下40px

このように数値が明示されていると、Claude Codeは推測の余地なく正確なコードを生成できます。

画像ではなくテキストで渡すだけで、Claude Codeの「推測」が「読み取り」に変わり、数値精度が劇的に向上します。

コツ2：セクションごとに分けて指示する

2つ目のコツは、ページ全体を一度に渡すのではなく、セクションごとに分けて段階的に指示することです。
これはClaude Codeのコンテキストウィンドウの特性と、複雑な指示処理の精度に関係しています。

一度に全体を渡すと何が起きるか

ページ全体のデザインデータを一度に渡すと、Claude Codeが処理する情報量が膨大になります。
情報量が多いほど、後半の要素への注意が薄れたり、前半で定義したスタイルが後半で維持されなかったりという現象が起きやすくなります。

私が浜松市内のクライアント向けにランディングページを制作した際、最初は全セクションを一度に渡していました。
その結果、ヒーローセクションは完璧だったのに、お客様の声セクションになるとレイアウトが崩れ、フッターはほぼ別デザインになってしまうという事態が起きました。
一度に処理できる精度には限界があります。

セクション分割の効果的なやり方

実際にセクション分割する際の手順と考え方をまとめます。

ページを論理的なセクション単位（ヒーロー・特徴紹介・実績・FAQ・CTAなど）に分ける
最初に全体のHTML骨格だけを生成してもらい、その後各セクションの中身を埋めていく
1つのセクションが完成して確認が取れてから次のセクションに進む
セクション間でスタイルの一貫性を保つために、共通スタイルを先に定義しておく

セクション分割の指示例

「今回はヘッダーセクションのみを実装してください。全体のHTML構造は後で統合しますので、ヘッダーに必要なHTMLとCSSのみ生成してください。使用するクラス名はheader-から始まるものを使ってください」というように、スコープを明確に限定して指示します。

セクション指示の順番にも意味がある

セクションを分割する際、指示する順番も重要です。

推奨する順番は「グローバルスタイル定義 → ヘッダー → ヒーロー → コンテンツセクション順 → フッター」です。
グローバルスタイル（カラーパレット・フォント・ベーススペーシング）を最初に定義しておくと、それ以降の各セクション指示でClaude Codeがスタイルの基準を持った状態で生成してくれます。

これはコツ3のスタイルガイドとも深く連携しますが、まずは「分けて渡す」という習慣を持つだけでも精度は格段に上がります。

セクションを分けることで、Claude Codeの注意が1箇所に集中し、各パーツの完成度が上がります。

コツ3（最重要）：スタイルガイドをテキストで渡す

さて、修正回数を体感で半分にする3つ目のコツです。
答えは「スタイルガイドをテキストで冒頭プロンプトに渡すこと」です。

これをやるかやらないかで、同じデザインを実装しても、最終的に必要な修正回数がまったく変わります。

スタイルガイドとは何か

ここで言うスタイルガイドとは、デザイン上の「ルール集」のことです。
具体的には以下のような情報が含まれます。

カラーパレット（プライマリカラー・セカンダリカラー・テキストカラー・背景色の色コード）
タイポグラフィ（見出し・本文・キャプションごとのフォントサイズ・ウェイト・行間）
スペーシングルール（セクション間のマージン・コンポーネント内のパディングの基準値）
ボーダーラジウス（ボタン・カード・入力欄などの角丸の基準値）
シャドウ定義（カードやモーダルに使用するboxシャドウの値）
ブレークポイント（レスポンシブ対応の画面幅の基準）

Figmaを使って制作している方なら、Figmaのスタイル機能やコンポーネント設計の中にこれらの情報がすでに存在しているはずです。
その情報をテキスト化してClaude Codeに渡すのが3つ目のコツです。

スタイルガイドがないと何が起きるか

スタイルガイドを渡さずに実装を進めると、以下のような問題が起きます。

最初のセクションで使ったプライマリカラーが#2563EBだったのに、次のセクションでは#2564EBになっていたり、ボタンのborder-radiusが最初は8pxだったのに途中から6pxになっていたりします。
数値が1〜2px・1〜2桁ズレるだけなので一見わかりにくいのですが、デザイン全体を並べると違和感として現れます。

これはClaude Codeがスタイルの基準を持っていないために、毎回「それっぽい値」を生成してしまうからです。
スタイルガイドを渡すことで、この「それっぽい値」問題が解消されます。

スタイルガイドの書き方と渡し方

実際に私が使っているスタイルガイドの書き方を紹介します。
プロンプトの冒頭に以下のような形式で貼り付けます。

【スタイルガイド（このプロジェクト全体で必ず適用すること）】

■ カラーパレット
プライマリ：#2563EB
プライマリホバー：#1D4ED8
セカンダリ：#10B981
テキストメイン：#111827
テキストサブ：#6B7280
背景メイン：#FFFFFF
背景サブ：#F9FAFB
border色：#E5E7EB

■ タイポグラフィ
H1：48px / Bold / 行間1.2
H2：36px / Bold / 行間1.3
H3：24px / SemiBold / 行間1.4
本文：16px / Regular / 行間1.8
キャプション：14px / Regular / 行間1.6

■ スペーシング
セクション間マージン：80px（PC）/ 48px（SP）
カード内パディング：24px
ボタン内パディング：12px 24px

■ ボーダーラジウス
ボタン：8px
カード：12px
入力欄：6px
バッジ：4px

■ シャドウ
カード：0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)
モーダル：0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04)

■ ブレークポイント
SP：768px以下
タブレット：769px〜1024px
PC：1025px以上

このスタイルガイドを各セクションの指示プロンプトの冒頭に毎回貼り付けます。
「毎回？面倒では？」と思うかもしれませんが、これをやることで修正回数が大幅に減り、結果として作業時間は大幅に短縮されます。

スタイルガイドの管理方法

スタイルガイドのテキストはNotionやテキストエディタに保存しておき、Claude Codeに指示するたびにコピペするだけにしておくと効率的です。プロジェクトごとにスタイルガイドファイルを用意しておくと、複数プロジェクトを掛け持ちしているときも混乱しません。

スタイルガイドをテキストで渡すことが、修正回数を半減させる最大の施策です。これをやっているかどうかが、Claude Code活用の差を生みます。

3つのコツを組み合わせた実践ワークフロー

3つのコツを個別に理解したところで、実際の制作フローにどう組み込むかを整理します。
コツ1・2・3を組み合わせることで、相乗効果が生まれます。

制作開始前の準備（5分の投資が後で10倍になる）

プロジェクト開始時に以下の準備をしておきます。

Figmaのスタイルパネルからカラーパレットとタイポグラフィをテキストにまとめる（スタイルガイド作成）
ページをセクションに分割し、実装の順番を決める（実装計画の策定）
各セクションの主要コンポーネントのフレーム構造データ（数値情報）をテキスト化する
スタイルガイド・実装計画・フレームデータをまとめたテキストファイルを作成する

この準備に5〜10分かかりますが、この投資が後の修正時間を大幅に削減します。

実装時の指示テンプレート

実際にClaude Codeに渡す指示のテンプレートを紹介します。

【スタイルガイド】
（上記スタイルガイドの全文をここに貼り付ける）

【今回の実装範囲】
ヒーローセクションのみ

【フレーム構造】
フレーム名：ヒーロー
幅：1440px / 高さ：700px
背景色：#111827

子要素1 - キャッチコピー
テキスト：「静岡から、世界に通じるデザインを。」
フォント：48px Bold
色：#FFFFFF
位置：上から200px、左から120px
最大幅：600px

子要素2 - サブコピー
テキスト：「浜松のWEBデザイナーが贈る、使いやすさ起点のUI設計」
フォント：18px Regular
色：#9CA3AF
位置：キャッチコピーの下32px

子要素3 - CTAボタン
テキスト：「無料相談を予約する」
背景色：#2563EB（スタイルガイドのプライマリ色）
ボーダーラジウス：スタイルガイド準拠
パディング：スタイルガイド準拠
位置：サブコピーの下40px

【出力形式】
HTMLとCSSのみ。クラス名はBEMで統一。JavaScriptは不要。

このテンプレートを使うことで、3つのコツが自然に組み込まれた状態で指示できます。

確認・修正のサイクルを短くするために

実装後の確認でも工夫できることがあります。
修正が必要な場合は「このボタンのパディングが上下8pxになっているが、スタイルガイドでは12pxと定義している。修正してください」というように、スタイルガイドを基準にした差分を明示して修正依頼をすると、修正の精度も高まります。

「なんか違う」ではなく「スタイルガイドのXという定義と相違がある」という形で指摘することで、修正が一発で解決しやすくなります。

3つのコツを組み合わせた指示テンプレートを用意しておけば、毎回の制作で迷わず高品質な実装ができます。

FigmaとClaude Codeの活用でよくある疑問と答え

ここでは、FigmaとClaude Codeの組み合わせについてよく寄せられる疑問に答えます。

Q. FigmaプラグインでそのままClaude Codeに渡せるものはありますか？

A. いくつかのFigmaプラグインが、フレーム情報をClaude Codeやその他のAIに渡しやすい形式でエクスポートする機能を持っています。
「Figma to Code」「Builder.io」「Anima」などのプラグインがその例です。
ただし、プラグインの出力形式がそのままClaude Codeに最適かどうかは都度確認が必要で、スタイルガイドの追加は手動で行う必要があることが多いです。
ツールを活用しながらも、スタイルガイドの追記は必ず行うことが重要です。

Q. ReactやTailwindでも同じコツは使えますか？

A. はい、同じコツはフレームワークを問わず有効です。
Tailwindの場合はスタイルガイドをTailwindのカスタム設定値（tailwind.config.jsの形式）で渡すとより精度が上がります。
React Componentとして生成する場合は、コンポーネント名・Props定義・スタイリング方針（CSS Modules・styled-componentsなど）をスタイルガイドに追加しておくと良いでしょう。

Q. スタイルガイドを毎回プロンプトに貼るのが面倒です。何か良い方法はありますか？

A. Claude Codeにはプロジェクト設定やカスタム指示の仕組みがあります。
また、CLAUDE.mdというファイルをプロジェクトルートに置くことで、Claude Codeが自動的に参照する仕組みを使うことができます。
CLAUDE.mdにスタイルガイドを記述しておけば、毎回のプロンプトへの貼り付けが不要になります。
プロジェクトの規模が大きくなるほど、このCLAUDE.md活用は効果的です。

CLAUDE.mdの活用

Claude Codeが自動的に読み込むCLAUDE.mdにスタイルガイドを書いておくと、毎回のコピペが不要になります。「毎回貼るのが面倒」という悩みは、CLAUDE.mdを使うことで解決できます。

CLAUDE.mdにスタイルガイドを書いておくと、毎回のプロンプトへの貼り付けが不要になり、さらに作業効率が上がります。

浜松市のWEBデザイナーが実際に変わった体験談

最後に、私自身の体験をより詳しく共有します。
理論だけでなく実際に効果があったという話を聞いてもらうことで、実践への後押しになれば幸いです。

変わる前：修正の連鎖で疲弊していた

1年ほど前、私はFigmaのスクリーンショットをClaude Codeに渡してページ全体を一気に実装する方法を取っていました。
最初の生成物は「大体合ってる」という感じで、60〜70%の再現度でした。
そこから修正を重ねるのですが、1箇所直すと別の箇所がズレたり、色が全体的に統一されていなかったりで、修正のやり取りが10回を超えることもありました。

浜松市内のとある飲食店のランディングページ制作では、Figmaでの制作に4時間かけたのに、Claude Codeでの実装調整に5時間かかるという逆転現象が起きていました。