デザインプロトタイプからプロジェクトコードへ
🎯 核心的な問い
デザインツールのプロトタイプをブラウザで動くフロントエンドコードに変換するには？
1. プロトタイプからコードへの3つのパス
Figma、MasterGoなどのモダンなフロントエンドデザインツールでインターフェース設計を完了した後、一つの非常に実際的な問題が自然に浮かび上がります：これらの構造的に完全なデザイン稿を、どうやってブラウザで実際に動くフロントエンドコードに変換するのか？
一般的に、プロトタイプからコードへの落とし込みには、本質的に3つの典型的なパスがあります：
| パス | 方法 | 特徴 | 適用シーン |
|---|---|---|---|
| パス1 | 画像に基づき、マルチモーダル大規模モデルで直接コードを復元 | 柔軟、特定のツール不要 | 迅速なプロトタイピング検証、シンプルなページ |
| パス2 | プラットフォーム自身の機能やプラグインで使用可能なコードをエクスポート | 再現度が高い、編集可能 | Figma/MasterGoユーザー |
| パス3 | プラットフォームとMCP機能を組み合わせて使用可能なコードをエクスポート | 自動化度が高い、カスタマイズ可能 | 深い統合が必要なワークフロー |
本記事では、これら3つのパスの具体的な実装方法を詳しく紹介し、プロジェクトのニーズに応じて最も適切なワークフローを選択できるようにします。
📚 前提知識
本節を始める前に、FigmaとMasterGo入門チュートリアルを先に学び、フロントエンドデザインツールの基本操作をマスターすることをお勧めします。
2. パス1：マルチモーダルAIによる直接コード復元
視覚能力を持つ大規模モデルは、生来画像をコードに変換する能力を備えています。デザイン稿のスクリーンショットを直接ダイアログにインポートし、大規模モデルに完全な結果コードを生成させるだけです。
2.1 操作フロー
デザイン稿の画像をキャプチャ
- FigmaまたはMasterGoで、設計したページをPNGまたはJPGにエクスポート
- スクリーンショットに完全なページレイアウトが含まれていることを確認
マルチモーダルAIモデルを選択
- Gemini、Qwen、Claudeなどの画像入力をサポートするモデルを使用可能
- ここではGeminiを例にデモを行います
プロンプトを作成
このデザイン画像に基づいて対応するHTML/CSSコードを生成してください。 要件： - モダンなCSSレイアウト（Flexbox/Grid）を使用 - レスポンシブデザイン、異なる画面サイズに対応 - すべての可視UI要素を含める - 色、フォントサイズはできる限りデザイン稿に忠実に
- コードを取得して保存
- モデルに完全なHTMLコードを返却させるよう要求
- 単一の
.htmlファイルとして保存し、ローカルテストに便利 - 後でローカルIDEでReactなどのフレームワークに変換可能
2.2 よくある問題と解決策
生成されたページはシンプルな作業ではなく、具体的な過程で多くの問題に直面する可能性があります：
| 問題 | 解決策 |
|---|---|
| インターフェースの配置が不均一 | AIに具体的なレイアウトの問題を説明し、CSSのmargin/paddingの調整を要求 |
| インターフェースの表示が不完全 | 正しいviewportが設定されているか確認し、レスポンシブブレイクポイントの追加を要求 |
| 色の再現が不正確 | カラーピッカーツールでデザイン稿の正確な色値を取得し、AIに提供 |
| フォントが一致しない | 具体的なフォント名を指定するか、Google Fontsの代替使用を要求 |
💡 コツ
まずHTMLコードを生成し、取得後にローカルIDEでReactフレームワークに変換することをお勧めします。これにより複数の独立したHTMLファイルが得られ、フレームワーク変換を一括して行えます。
2.3 MasterGo AIによるページ生成
MasterGoも強力なAIページ生成機能を提供しており、参考画像に基づいて直接使用可能なWebコードを生成できます。
AI機能の入り口を見つける
MasterGo編集画面の上部ツールバーに、AIツールボタンがあります：
生成フロー
参考画像をアップロード
- マルチモーダルAIと同じ方法でデザインの参考画像をアップロード
- テキストで要件を説明
生成結果を確認
- コードを取得
- 青いボタン「キャンバスに挿入」をクリックし、生成後のWebページを直接編集
- または右側の「コード」ボタンをクリックし、コード内容をローカルにコピー
3. パス2：プラットフォーム自身の機能やプラグインでコードをエクスポート
3.1 Figma Makeによるコード生成
Figma MakeはFigma公式が提供するAIデザインツールで、ユーザーが入力したプロンプトまたは参考画像に基づいて、高精度にWebプロトタイプUIインターフェースを復元できます。
機能の特徴
- 高精度な復元：ネイティブAI生成コードに比べ、より良い効果
- 編集可能性：生成結果を編集可能なFigma Designファイルに変換可能
- GitHub統合：コードを直接GitHubに同期する機能をサポート
🔑 権限について
Figma Makeの完全な機能を使用するにはProユーザー権限が必要です。学生は教育認証を通じて無料でPro権限を取得できます。
操作手順
Figma Makeに入る
- FigmaのホームページでMakeボタンをクリック
- またはFigma Makeにアクセス
参考画像をアップロード
- 復元したいデザイン画像をダイアログにアップロード
- 要件を説明するプロンプトを追加
- 生成結果を確認
- しばらく待つとレンダリング結果が表示
- 右上の再生ボタンをクリックしてフルスクリーンプレビュー
- ディテールの調整
- 右上の編集アイコン（マウスと定規のアイコン）をクリック
- おなじみのFigma Editorインターフェースに戻り、詳細な調整を行う
- コードをエクスポート
- 調整に満足したら、コードのエクスポートを選択
- GitHubに直接接続してコードを保存可能
3.2 プラグインによるコードエクスポート
プラットフォームのネイティブAI機能に加えて、FigmaとMasterGoはどちらもプラグインによるコードエクスポートをサポートしています：
よく使われるFigmaプラグイン：
- Figma to Code：デザイン稿をReact、Vue、HTMLなどのコードに変換
- Anima：高忠実度なコード生成、インタラクション効果をサポート
- Locofy：AI駆動のデザインからコードへのツール
使用手順：
- Figmaでプラグインパネル（Plugins）を開く
- 必要なコードエクスポートプラグインを検索してインストール
- エクスポートするデザイン要素を選択
- プラグインを実行し、ターゲットフレームワークとコード形式を選択
- 生成されたコードをコピーまたはダウンロード
4. パス3：プラットフォームとMCP機能を組み合わせてコードをエクスポート
4.1 MCPとは？
MCP（Model Context Protocol、モデルコンテキストプロトコル）は、AIモデルが外部ツールやデータソースに安全かつ制御可能にアクセスできるようにするオープン標準プロトコルです。フロントエンドデザインツールのシーンでは、MCPは大規模モデルがデザインファイルの構造、スタイル、コンポーネント情報を直接読み取ることを可能にし、より正確なコード生成を実現します。
4.2 MCPの動作原理
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ AIモデル │ ←→ │ MCPサーバー │ ←→ │ デザインツール │
│ (Claude等) │ │ (プロトコル適配) │ │(Figma/MasterGo)│
└─────────────┘ └─────────────┘ └─────────────┘ワークフロー：
- AIモデルがMCPプロトコルを通じてデザインツールにリクエストを送信
- デザインツールが構造化されたデザインデータ（レイヤー、スタイル、コンポーネントなど）を返却
- AIモデルがデザイン構造を理解し対応するコードを生成
- コードを直接エクスポートまたは開発環境に同期
4.3 Figma + MCP実践
環境の準備
MCPサーバーのインストール
bash# Figma MCPサーバーをnpxでインストール npx figma-mcp-serverClaude Desktopまたは他のMCP対応AIツールの設定
json{ "mcpServers": { "figma": { "command": "npx", "args": ["figma-mcp-server"], "env": { "FIGMA_ACCESS_TOKEN": "your-figma-token" } } } }Figma Access Tokenの取得
- Figmaにログイン → Settings → Personal Access Tokens
- 新しいTokenを生成して保存
使用フロー
AIツールでMCP接続を有効にする
- Claude Codeまたは他のMCP対応IDEを開く
- MCPサーバーが接続されていることを確認
デザインファイルのリンクを提供
ユーザー：このFigmaデザインをReactコードに変換してください リンク：https://www.figma.com/file/xxxxx AI：MCPを通じてFigmaに接続し、デザインファイルの構造を読み取っています...AIが自動的に分析しコードを生成
- MCPサーバーがデザインファイルのレイヤーツリーを取得
- AIがコンポーネント構造とスタイル属性を理解
- 正しい命名と構造を持つReact/Vueコンポーネントを生成
イテレーションと最適化
ユーザー：ボタンコンポーネントを独立した再利用可能なコンポーネントとして抽出してください AI：MCPを通じてデザインシステムのButtonコンポーネントを特定しました。 propsインターフェースを持つReactコンポーネントを生成しています...
4.4 MCPの利点
| 特徴 | 従来の方法 | MCP方式 |
|---|---|---|
| データ精度 | スクリーンショットに依存、ディテールが失われる可能性 | オリジナルのデザインデータを直接読み取り |
| コンポーネント認識 | AIがコンポーネントの境界を推測する必要がある | コンポーネント定義を正確に取得 |
| スタイルの復元 | ピクセルベースの推定 | 正確なデザイントークンを取得 |
| イテレーション効率 | 毎回の変更でスクリーンショットを再取得 | デザイン変更をリアルタイムで同期 |
| 自動化度 | 手動でコピー＆ペースト | プロジェクトファイルに直接書き込み可能 |
4.5 現在利用可能なMCPツール
デザインツールMCP：
- Figma MCP Server：公式サポートのMCP実装
- MasterGo MCP：コミュニティ開発のMasterGoアダプタ
開発環境MCP：
- Claude Code：MCPプロトコルをネイティブサポート
- Cline：VS Codeプラグイン、MCP接続をサポート
- Trae：設定でMCP機能を有効化可能
🔮 将来の展望
MCPプロトコルは急速に発展しており、将来的にはデザインツールと開発環境の統合がさらに緊密になるでしょう。デザインからコードへのワンクリック同期ソリューションがさらに登場し、デザインと開発の距離をさらに縮めると予想されます。
5. コードエクスポート後の作業
5.1 ローカルテスト
コードを取得したら、ローカルIDEで開いてテストします：
新規プロジェクトの作成
bash# HTMLファイルの場合、ブラウザで直接開く open index.html # React/Vueプロジェクトの場合 npm install npm run devAI IDEとの協業
- 生成されたコードをTraeや他のAI IDEにインポート
- AIにレイアウト問題の修正やインタラクション機能の追加を支援させる
5.2 よくある問題の処理
| 段階 | 問題 | 解決策 |
|---|---|---|
| レイアウト | 要素のずれ | CSSのdisplayとposition属性を確認 |
| スタイル | 色が一致しない | ブラウザの開発者ツールで実際に適用されている色値を確認 |
| レスポンシブ | モバイルでの表示が異常 | media queryのブレイクポイントを追加 |
| インタラクション | ボタンが反応しない | JavaScriptのイベントバインディングを確認 |
6. 3つのパスの比較と選択の提案
6.1 パスの比較
| 次元 | パス1：マルチモーダルAI | パス2：プラットフォーム機能 | パス3：MCP |
|---|---|---|---|
| 難易度 | ⭐ 簡単 | ⭐⭐ 中程度 | ⭐⭐⭐ やや複雑 |
| 再現精度 | ⭐⭐⭐ 中程度 | ⭐⭐⭐⭐ 高い | ⭐⭐⭐⭐⭐ 最高 |
| 柔軟性 | ⭐⭐⭐⭐⭐ 高い | ⭐⭐⭐ 中程度 | ⭐⭐⭐⭐ やや高い |
| 自動化度 | ⭐⭐ 低い | ⭐⭐⭐ 中程度 | ⭐⭐⭐⭐⭐ 高い |
| コスト | 低い（API呼び出しに基づく） | 中程度（Proが必要な場合も） | 低い（オープンソースツール） |
6.2 選択の提案
パス1（マルチモーダルAI）を選ぶ場合：
- アイデアを素早く検証する必要がある
- デザインツールが固定されておらず、頻繁に切り替える
- 再現精度の要求が高くない
- 予算が限られている
パス2（プラットフォーム機能）を選ぶ場合：
- チームが主にFigmaまたはMasterGoを使用
- 高精度なコード復元が必要
- デザイナーと開発者が頻繁に協業する必要がある
- Pro版に投資する意思がある
パス3（MCP）を選ぶ場合：
- 最高レベルの自動化を追求
- MCP環境を構築する技術力がある
- プロジェクトでデザインからコードへの頻繁なイテレーションが必要
- 標準化されたデザイン→開発ワークフローを構築したい
7. まとめ
本章の学習を通じて、デザインプロトタイプからコードへの3つのコアパスをマスターしました：
- マルチモーダルAIによる直接変換：柔軟で高速、プロトタイピング検証に適する
- プラットフォームのネイティブ機能：再現度が高く、プロのデザインワークフローに適する
- MCPプロトコル統合：自動化度が最も高く、未来のトレンドを代表
💡 ベストプラクティス
- 初心者におすすめ：パス1（マルチモーダルAI）から始め、素早くキャッチアップ
- チーム協業：パス2（プラットフォーム機能）を使用し、デザインの一貫性を保証
- 効率優先：パス3（MCP）を試み、自動化ワークフローを構築
- 混合使用：プロジェクトの段階に応じて柔軟に異なるパスを切り替え
参考リソース
- FigmaとMasterGo入門 - デザインツールの基礎を学ぶ
- ホグワーツ肖像画を作ろう - 完全なプロジェクトの実践
- MCP公式ドキュメント - プロトコルの詳細を理解
- Figma Make公式ドキュメント
- MasterGo AIチュートリアル