こんにちは、Diverse Developer Blog です。
はじめに
YYCのフロントエンド開発では、Figmaデザインを基にしたUI実装が不可欠ですが、この工程には依然として多くの手作業が残っています。
近年、AIを使ってこの工程を効率化するアプローチが増えてきており、「どこまで実装を自動化できるのか？」が気になっていました。
そこで今回は、
- Figma MCP
- Pencil
の２つを対象に比較検証しました。
本記事では、「実装工数の削減」と「デザイン再現性」の観点から見えた、比較検証の結果を共有します。
ツールの特徴
まずは、比較する2つのツールの立ち位置を整理します。
Figma MCP
Figma公式が公開しているMCPサーバーを介し、LLM（Claude等）が直接Figma API経由でデザイン情報を取得する仕組みです。
- 公式リポジトリ: https://github.com/GLips/Figma-Context-MCP
- AIがFigmaデザインを読み取り、コード化するための参照用として設計
- get_file（ファイル取得）、get_nodes（要素取得）、get_image（画像取得）など、デザイン情報取得に特化
- 実行環境：クラウドベース
👉 既存のデザインをAIに参照させるための仕組み
Pencil (Pencil.dev)
Pencilは、AIエージェントとの連携を前提に設計されたデザインツールです。
- 公式サイト: https://www.pencil.dev/
- "Built for AI agents": AIによる操作を前提に設計
- "Canvas as a Database": キャンバスが単なる画像ではなく、AIが編集可能なJSON構造データとして扱う
- "Bidirectional editing": AIと人間が双方向に編集可能
- 実行環境：ローカルファースト（.penファイル）、Gitで管理可能
👉 AIがデザインを読み取りつつ、直接編集・再構築できる環境
特徴まとめ（2026年4月現在）
| 観点 | Figma MCP | Pencil |
|---|---|---|
| 役割 | デザイン情報の参照 | デザインの編集・再構築 |
| AIとの関係 | 読み取り＋書き込み | 読み取り＋書き込み |
| データの扱い | API経由で取得 | JSON構造データ（直接操作可能） |
| 管理方法 | クラウド | ローカルファイル、Git |
| コスト | Figmaプランに依存 | 無料 |
検証方法
実際のプロダクト開発で使用するFigmaデザインを対象に、以下の2パターンで検証しました。
パターンA：Figma MCP
- Figmaデザインをそのまま使用
- Claude Code（Opus 4.6）からMCP経由で参照し、コード生成
パターンB：Pencil
- FigmaデザインをPencilに移行（ほぼコピペで再現可能）
- Claude Code（Opus 4.6）からMCP経由でPencilデータを参照し、コード生成
対象
- Webブラウザ（Vue3、SCSS）
- モバイルアプリ（Flutter）
※ 同一UI・同一要件で比較
検証結果
Webブラウザ（Vue3、SCSS）
- 両者ともに、UI構造はほぼ再現
- 一覧画面のヘッダー・フッター固定なども、プロンプト指定なしで実装
- 全体的にPencilの方がデザイン再現度は高い傾向
- グラデーション
- ボーダー有無
- 余白やサイズなど細かいスタイル
一方で、以下の点は両者共通の課題として見られました。
- アイコン画像の選定が不安定（生成ごとにブレる）
- カラー変数・スタイル定数の参照が不安定
モバイルアプリ（Flutter）
- 両者ともに、UI構造はほぼ再現
- ベースのFigmaデザインのコンポーネント階層も再現した実装
- Figma MCPの方がデザイン忠実度が高い結果に
また、Webと同様に以下の傾向が見られました。
- アイコン画像の選定が生成ごとにブレる
- カラー変数・スタイル定数の参照が安定しない
初回生成後の修正フロー
スタイルやアセット参照の課題については、プロンプトの工夫やskillsの整備により、おおよそ8割程度の完成度までは安定して出力可能になりました。
その後、主に以下の修正を行っています。
- コンポーネント構成の最適化 （Figmaデザインと実装の設計差分や、エンジニアごとの粒度差による調整）
- スタイルの微調整
- ビジネスロジック（JS/Dart）など動的処理の実装
まとめ
再現性について
再現性は以下の3軸で評価しました。
- UI構造（レイアウト・階層）
- スタイル（色・余白・装飾）
- アセット参照（画像・アイコン・変数）
その結果、
- UI構造：両者とも高精度
- スタイル：
- Web → Pencilが優位
- モバイル → Figma MCPが安定
- リスト型のようなシンプルなUIでは差は小さい
- アセット参照：両者とも不安定
現時点では「構造の自動生成」には極めて強いものの、「詳細なスタイリング」と「プロジェクト固有のアセット参照」には、人間によるコンテキストの補完（プロンプトでの補足や、skillsの整備、デザインシステム側での命名規則の徹底）が不可欠です。
実装工数削減について
今回の検証では、実際にプロダクトへ組み込む前提で評価しました。
- どちらも生成コードをそのまま使うのは難しい
- 特に以下の修正が必要になるケースが多い
- アイコン差し替え
- カラー変数の置き換え
- コンポーネント分割・整理
一方で、UIの骨組みはほぼ完成しているため、ゼロから実装するよりは確実に工数削減になりました。
体感としては、
- 50~80%程度の工数削減効果は見込める
- “完全自動化”にはまだ届かない
という位置付けでした。
| 評価項目 | Figma MCP | Pencil | 備考 |
|---|---|---|---|
| UI構造の再現 | ◎ | ◎ | 両者ともに精度が高い |
| スタイル再現（Webブラウザ） | ⚪︎ | ◎ | PencilのJSON構造がCSSと相性良 |
| スタイル再現（モバイルアプリ） | ◎ | ⚪︎ | Figmaの階層構造がFlutterと親和性高 |
| アセット参照 | △ | △ | アイコン画像やスタイル変数の紐付けに課題 |
| 導入の容易さ | ◎ | ⚪︎ | Pencilは移行コストが発生 |
| 工数削減（体感値） | 50～ 80% |
50～ 80% |
下書き生成ツールとして極めて優秀 |
最後に
アウトプットの品質自体に大きな差はありませんでしたが、ワークフローの観点では差が見られました。
- Pencilはエディタ上でデザインを開きながら、AIと対話し修正できる
- デザインをコードと同様にバージョン管理できる
これらを踏まえると、Pencilが無料である現時点では、品質・スピード・ワークフローに置いてメリットが大きいと感じました。
一方で、デザインデータの扱いについては運用設計が重要になります。 当社としても、将来的にPencilをマスターデータとして扱うことは現実的な選択肢の一つだと考えていますが、現時点では段階的な移行が前提になると認識しています。
特に、デザインレビューの進め方やデザイナー・エンジニア間の役割分担といった既存のプロセスを変えずにツールのみを移行すると、データの二重管理や認識の不一致が発生しやすくなります。
そのため当社では、まずはFigmaをデザインの正としつつ、Pencilを実装領域で活用する二層構造の運用を採用し、今後は新規開発領域から段階的にPencil中心のワークフローへ移行していく方針が現実的だと考えています。
