本業のweb制作案件で、FigmaデザインをもとにClaude Code + Figma MCPを使ってHTML/CSS/JSのコーディングを進める機会がありました。初めての組み合わせです。実際に使ってみて感じたメリットと注意点をまとめます。
Figma MCPとは
FigmaのデザインデータをAIツールから直接参照できるようにする仕組み。Claude CodeからFigma MCP経由でデザインの情報(レイアウト、色、フォント、余白など)を取得しながらコーディングを進められます。
これまでは、Figmaのデザインカンプを見ながら数値を目視で拾って(あるいはInspectパネルを都度確認して)コードに落とし込む、という作業が基本でした。地道な作業です。Figma MCPを使うと、この「デザインの数値を読み取る」部分をAIが直接データとして参照できるようになるので、コーディングの前段の手間がかなり減ります。
導入前の環境準備
実際に使い始める前には、いくつか下準備が必要でした。Figma側のAPIキー発行やアクセス権限の設定などです。特にチームで管理しているFigmaファイルの場合、権限周りの設定を間違えると必要な情報が取得できません。初回セットアップ時は少しつまずきました。とはいえ一度環境が整ってしまえば、以降の案件では同じ設定を使い回せます。最初の手間は先行投資と割り切っています。
実際の作業の流れ
具体的な流れです。
- 対象のFigmaフレームのノードIDを取得し、Claude Codeに共有する
- Figma MCP経由でレイアウト・色・フォント・余白などの情報を取得してもらう
- 既存のコーディングルール(FLOCSS/BEMのクラス設計など)を伝えた上で、HTML/SCSSの実装を依頼する
- 出力されたコードをブラウザで確認し、デザインとのズレを目視でチェックする
- レスポンシブ対応や細かい余白の調整を、指示を出しながら詰めていく
特に3の「事前にコーディングルールを伝えておく」がかなり重要です。ここを丁寧にやっておくかどうかで、後の修正の手間が大きく変わってくる印象でした。
実際に使ってみて感じたメリット
- デザインカンプの数値(余白・フォントサイズなど)を目視で拾う手間が減る
- コーディングの初速がかなり上がる。特に単純なレイアウトの実装は体感でかなり早くなった
- デザインの意図をコメントとして確認しながら進められるので、認識のズレが減る
- 単純な繰り返し作業(似た構造のカードコンポーネントを複数並べるなど)を任せやすい
特に恩恵が大きいと感じたのは、単純作業に近いコーディングです。ここは体感差が大きいです。ある程度パターン化されたレイアウトであれば、細かい数値の指示をしなくても、デザインの情報から近い形で組んでくれることが多かったです。
注意した方がいいポイント
- 複雑なインタラクションはやはり人の目でのチェックが必要:AIが出したコードをそのまま採用せず、レスポンシブの挙動やホバーの動きは自分の目で確認する
- デザインの「意図」までは完全に汲み取れないことがある:見た目通りに再現されていても、コンポーネント設計の意図とズレることがあるので、事前にコーディングルール(component/projectの使い分けなど)を明確にしておくと精度が上がる
- 命名規則やディレクトリ構成は事前にルール化しておく:AIに任せる範囲を広げるほど、最初にルールを決めておくことの重要性を感じました
- 余白の実装方法(margin-bottom統一など)も明文化しておく:ルール化していないと、margin-topとmargin-bottomが案件内で混在してしまうことがあった
特に印象的だったことがあります。事前にルールを渡していない状態と、渡した状態とで、出てくるコードの質がはっきり変わることです。人に指示を出すときと同じで、前提条件をどれだけ具体的に共有できるかが、そのままアウトプットの精度に直結する感覚があります。
他のAIコーディングツールとの違い
これまでにも、v0やCursorなど、他のAIコーディング系ツールをいくつか試してきました。それぞれに一長一短。それらと比較したとき、Claude Code + Figma MCPの組み合わせの強みは、ターミナル上でファイル操作からビルド、確認までを一貫して任せられる点にあると感じています。デザインの参照から実装、SCSSのコンパイル、ブラウザでの見た目確認までを、ひとつのワークフローの中で完結させられるのは、実務での使い勝手という意味でかなり大きいです。
一方で、デザインツール上で完結する系のAIツールにも強みはあります。視覚的な調整のスピード感では優れている場面もあります。案件の性質(コーディングの複雑さ、既存コードベースの有無など)によって使い分けるのが現実的だと感じています。
実際に手直しが必要だった例
すべてがそのまま使えたわけではありません。当然です。例えば、スマホ表示でのナビゲーションの開閉アニメーションは、Figma上のデザインだけでは意図が伝わりきらず、出力されたコードが期待と違う動きになっていました。この手のインタラクションは、結局言葉で細かく指示を出しながら、何度かやり取りして調整する必要がありました。デザインファイルに書き切れない「動き」の部分。ここは依然として人間側からの補足説明が欠かせないと感じています。
今後試してみたいこと
今回は既存のコーディングルールをベースに使いました。今後はコンポーネント単位でのルールをより細かくドキュメント化して渡すことで、さらに精度を上げられないか試してみたいと思っています。また、レスポンシブ対応部分の自動チェックなど、もう少し検証作業自体もツールに任せられる部分がないか探っていきたいです。
チームでの活用可能性について
今回は個人の副業案件での利用でした。もしチームで使うとしたら、コーディングルールのドキュメント自体を資産として整備しておく価値がより一層高まると感じています。個人であれば頭の中にあるルールをその都度伝えれば済みますが、チームで複数人がAIツールを使う場合、コーディング規約や命名ルールが明文化されていないと、出てくるコードの品質にばらつきが出てしまうはずです。この点は、普段からコーディングルールをドキュメント化する習慣そのものが、AIツールの活用力に直結するということでもあると思います。地味な準備が効いてきます。
まとめ
Figma MCP×Claude Codeの組み合わせは、特に定型的な実装のスピードを大きく上げてくれる印象です。ここは素直に評価したいところです。一方で、設計思想や最終チェックの部分は引き続き人間の判断が必要です。今後も実案件で使いながら、知見を追記していきたいと思います。ツール自体の進化も早い分野です。今回まとめた内容も、数ヶ月後には古くなっているかもしれません。定期的な振り返り前提です。
