本業の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の組み合わせは、特に定型的な実装のスピードを大きく上げてくれる印象です。一方で、設計思想や最終チェックの部分は引き続き人間の判断が必要だと感じました。今後も実案件で使いながら、知見を追記していきたいと思います。ツール自体の進化も早い分野なので、今回まとめた内容も数ヶ月後には古くなっているかもしれません。定期的に振り返って、使い方をアップデートしていくつもりです。
この記事が参考になったら、応援クリックをお願いします
