コーディング工数60%削減!? Figma MCPとClaude Codeの実践活用レポート

私たちは「気になったトレンド技術は、とりあえず自社で試してみる」を徹底しています。今回は、Figma MCPとClaude Codeを自社の採用サイトリニューアルの際に1ページを実践検証しました。良かったことも、うまくいかなかったことも正直にお伝えします。

従来フローとの比較

結果：コーディング工数を約60%削減できました！

実践プロセスの詳細

Figma MCPでデザイン情報を取得

Figma MCPをClaude Codeに接続し、採用サイトのデザインファイルにアクセス。カラーコード、フォント情報（書体、サイズ、行間）、レイアウト（余白、要素間の距離）、コンポーネント構造まで想像以上に詳細に取得できました。

「この余白って何pxだっけ?」っと毎回Figmaを確認しながらの作業が丸ごと不要になったのは本当に楽でした。

Claude Codeでコーディング実行

Claude Codeに具体的に指示を出してコーディング。 今回はリンクベースで使用してみました。

Figmaファイルでフレームやレイヤーを右クリック → 「選択範囲へのリンクをコピー」でURLを取得し、Claude Codeのプロンプトに貼り付けます。

指示の例

下記URLのデザインをもとにHTML、CSSで実装してください。
@https://www.figma.com/design/xxxx/...

できたコードは基本構造の90%以上がそのまま使えるレベル。HTMLもセマンティックですし、CSS命名もBEM記法でキレイ。

デザインとの比較検証

コードは問題なかったので、次に実際のデザインとの比較をしてみましょう。

Figmaのデザインと実装結果を並べて確認。再現度は約70%ぐらいでしょうか。 グリッドレイアウトやグラデーションなど大まかなところは再現性が高いのですが、コンテンツの順番が違ったり一部の画像がテキストまで含んだかたちで書き出してしまっています。 ここからは手作業での修正になっていきますが、1からここまでコーディングすることを考慮するとベースができてるから調整は楽でした。

精度を上げるために重要だったこと

精度を上げるためにはFigma側での調整が必要でした。

レイヤー命名規則

• NG：「Rectangle 1」「Group 23」みたいな自動生成名
• OK：「header」「main-visual」「button-primary」など意味のある名前

レイヤー構造の整理

• 入れ子になりすぎてるとAIが混乱する
• レイヤー構造の順番をコーディング目線で揃える
• Auto Layoutを使ってる方がコード生成がキレイ

その他の工夫

• コンポーネント化すると再利用性の高いコードが生成される
• デザイントークン（色やフォントの変数）を整理すると精度アップ
• 1ページまるっと読み込ませるより、セクションごとに読み込ませた方が精度が高い

つまり、コーディングを意識したFigmaデータ作りが重要です。事前にルールを決めておくことで、AIの精度が格段に上がります。

定量的な成果と気づき

どれくらい時短できた?

• 制作期間：3日→1.2日（60%削減）

良かったこと

1. 初期コーディングの工数が大幅削減できた
2. アニメーションの設定など細かい作業に集中できる

正直、課題もあります

• 複雑な動きやデザインは手動実装が必要
• レスポンシブの細かい調整は人の目が必須
• Figmaデータの作り方次第で精度が大きく変わる（これが一番の発見）

まとめ

Figma MCPとClaude Codeは「本当に使える技術」です。ただし、ツールを入れれば自動的に楽になるわけではなく、Figmaデータの整理など事前準備が重要という学びもありました。

今後もFigma MCPとClaude Codeを活用していき、ナレッジを蓄積していきます。

私たちは「情報収集→すぐ試す→学んだことをシェアする」サイクルを大切にしています。失敗を恐れず、まず自分たちで使ってみる。そんな姿勢が、クライアントからの信頼や採用力につながると信じています。

私たちの取り組みや実績について、もっと詳しく知りたい方は[会社紹介資料]をご覧ください。最新のWeb制作事例やAI活用のノウハウもご紹介しています。