RoboRobo事業部RoboRoboペイロールチームのエンジニアの佐々木です。
本記事では、v0（vercel.dev）におけるFigmaデザインのUI再現性を比較検証しました。
v0とは
Next.jsの開発元として知られるVercel Labsが提供する自然言語でUIデザインを生成AIサービスです。
🎯 検証方法
対象は以下の2つの方式：
- ✅ Figma Import：Figmaファイルを直接読み込む
- ✅ Image添付：Figmaで書き出した画像を添付し、v0に読み込ませる
この2方式で、v0がどの程度元のUIデザインを再現できるのかを検証します。
🔎 対象画面
-
元デザイン（Figma）
🔎 出力結果
-
v0での出力結果
-
Figma Import版
-
Image添付版
-
🔢 定量評価：Figmaとの比較再現度（100点満点）
| 比較カテゴリ | Figma Import版 | Image添付版 | 評価基準例 |
|---|---|---|---|
| レイアウト構造 | 65点 | 85点 | セクション配置や要素の並び順 |
| フォント（サイズ・太さ・種類） | 45点 | 75点 | テキストの見た目、読みやすさ |
| 配置バランス（余白・padding） | 40点 | 70点 | 要素間の間隔、整列感 |
| アイコン再現 | 80点 | 30点 | 種類、配置、視覚的整合性 |
| シャドウ・装飾 | 30点 | 60点 | カードやボタンの立体感 |
| 色味・テーマ整合性 | 55点 | 70点 | テーマカラー、コントラスト感 |
| セクションタイトル強調 | 35点 | 80点 | 見出しの強調度合、階層感 |
📊 総合スコア（加重平均イメージ）
| バージョン | 総合スコア | コメント |
|---|---|---|
| Figma Import版 | 50点／100 | 再現度は表面的。UI設計者の意図（余白、フォント、強調）が反映されておらず、実運用には修正が必要。 |
| Image添付版 | 67点／100 | 大枠のレイアウトやビジュアルの整合性は保たれており、比較的高再現。ただし、細部の余白や色味など調整の余地あり。 |
🧠 考察とまとめ（定量＋定性）
今回の再現ではFigma ImportよりImageの方が再現度が高い結果に！
ただし、Figma自体の工夫次第（コンポーネント化、variable、styles） では再現度が上がる可能性を感じました。
-
Figma Import版は、Figmaからデザイントークンや構造を抽出し、コードとして落とし込んでくれるため、
初期再現度は低くても、後からの編集・メンテナンスが容易という利点がある。- ただし、読み込み直後の状態ではフォント、余白、装飾などにズレが多く、UI意図の再現性は限定的。
- componentに分けて提示してくれたのは加点。
- 実用には、設計意図を加味した追加調整が必要。
-
Image添付版は、Figmaの見た目により近いUIが出力されるが、アイコンやイメージ部分の再現度は低い印象。
- 一ファイルでの再現が減点。
参考：それぞれの生成されたコードのディレクトリ(追加/修正部分を抜粋)
- Figma Import版
├── app
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── components
│ ├── sidebar.tsx
│ ├── top-navigation.tsx
│ └── ui
│ ├── avatar.tsx
│ ├── button.tsx
│ ├── card.tsx
├── lib
│ └── utils.ts
├── tailwind.config.ts
- Image添付版
├── app
│ └── page.tsx
├── dashboard-page.tsx
Discussion