【Figma×Claude Code完全ガイド】AIデザインっぽさから垢抜ける6ステップ実践法：Figma Dev Mode MCPで実現するデザイン→コード自動変換

2025年10月11日

AIデザインの「垢抜けない問題」を解決する革新的ワークフロー

AIデザインツールの普及により、誰でも簡単にデザインを生成できるようになりました。しかし、「AIで作ったデザインはどれも似たり寄ったり」「垢抜けない」という課題が浮上しています。

プログラミング解説系YouTuber・Udemy講師として6.3万人のフォロワーを持つShin氏（@Shin_Engineer）が、この課題を解決する画期的なワークフローをX（旧Twitter）で公開しました。 Figma MakeからClaude Code、GitHub Pagesデプロイまでを完全自動化し、「AIデザインっぽさ」から脱却する実践的な6ステップです。

本記事では、Figma Dev Mode MCPサーバーとClaude Opus 4.1を組み合わせた最新ワークフローを徹底解説。デザインから実装、デプロイまでをシームレスに実現する方法を、技術的背景も含めて詳しく紹介します。

6ステップワークフロー全体像：デザイン→実装→デプロイまで完結

Shin氏が提案するワークフローは、以下の6ステップで構成されています：

① Figma MakeでAIデザイン生成とカスタマイズ（テンプレート利用可） ② Figma Designにペースト ③ Figma Dev Mode MCPサーバー起動 ④ Claude Opus 4.1モデルでClaude Codeを起動 ⑤ Figma Designで再現したい箇所をコピペしてClaude Codeに貼り付け、「HTML/CSS/TailwindCSS CDNで忠実に再現して」と指示 ⑥（任意）「React（or Next.js）へUIを維持したままリプレイスして」と依頼

このワークフローの革新性は、 デザインツールとコード生成AI、デプロイ環境を完全に統合している点にあります。従来は「デザイン→手動コーディング→テスト→デプロイ」と4段階必要だったプロセスが、ほぼ自動化されます。

従来手法との決定的な違い

項目	従来手法	Figma×Claude Codeワークフロー
デザイン生成	手動デザイン（数時間〜数日）	Figma Make自動生成（数分）
コーディング	手動実装（1-2日）	Claude Code自動生成（数分）
デザイン忠実度	実装者のスキル依存	Figma Dev Mode MCPで100%再現
フレームワーク移行	手動リファクタリング（数時間）	プロンプト1つで自動変換
デプロイ	手動設定（30分〜1時間）	ghコマンドで自動化（1分）

結果として、 従来2-3日かかっていた作業が1-2時間で完結します。

ステップ①-②：Figma MakeでAIデザイン生成とカスタマイズ

Figma Makeとは何か

Figma Makeは、Figmaに統合されたAIデザイン生成機能です。テキストプロンプトを入力するだけで、 デザインコンポーネントやレイアウトを自動生成できます。

主な特徴：

プロンプトベースの生成：「モダンなランディングページ」「ミニマルなダッシュボード」などのテキストから自動生成
豊富なテンプレート：業界別・用途別のテンプレートライブラリ
カスタマイズ可能：生成後にFigma標準機能で自由に編集
レスポンシブ対応：PC/タブレット/スマホの各サイズに自動適応

「AIっぽさ」を脱却するカスタマイズのポイント

Figma Makeで生成したままのデザインは、確かに「AIっぽさ」があります。Shin氏のワークフローでは、この段階で 人間の感性によるカスタマイズを加えることが重要です。

カスタマイズの具体的手法：

色彩調整：AIが選んだ配色を自社ブランドカラーに置き換え
タイポグラフィ：フォントサイズ・ウェイトを微調整して視覚的ヒエラルキーを強調
余白の最適化：padding/marginを調整してプロフェッショナルな印象に
要素の取捨選択：過剰な装飾を削除し、必要な情報に絞る
アイコン・画像の差し替え：汎用的な素材を独自のビジュアルに変更

このカスタマイズ工程により、 AIの効率性と人間のクリエイティビティを融合させます。

ステップ③：Figma Dev Mode MCPサーバー起動の技術的背景

MCPとは：Model Context Protocolの革新性

MCP（Model Context Protocol）は、Anthropicが開発した AIモデルと外部ツールを接続する標準プロトコルです。Claude CodeがFigmaのデザインデータに直接アクセスできるのは、このMCPのおかげです。

MCPの仕組み：

Figma APIとの接続：Figmaのデザインデータ（ノード構造、スタイル、レイアウト情報）をJSON形式で取得
コンテキスト変換：デザイン情報をClaude Codeが理解できる形式に変換
リアルタイム同期：Figmaでの変更を即座にClaude Codeに反映
双方向通信：生成されたコードの問題点をFigmaデザインにフィードバック

Figma Dev Mode MCPサーバーのセットアップ

Figma Dev Mode MCPサーバーを起動するには、以下の手順を実行します：

# MCP Server for Figmaのインストール
npm install -g @modelcontextprotocol/server-figma

# 環境変数の設定（Figma Personal Access Token必要）
export FIGMA_ACCESS_TOKEN="your_figma_token"

# MCPサーバー起動
mcp-server-figma start

Claude Codeの.mcp.json設定ファイルに以下を追加：

{
  "mcpServers": {
    "figma": {
      "command": "mcp-server-figma",
      "args": ["start"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

これにより、Claude CodeがFigmaのデザインファイルに直接アクセス可能になります。

ステップ④-⑤：Claude Opus 4.1でピクセルパーフェクトなコード生成

なぜClaude Opus 4.1なのか

Shin氏のワークフローでは、 Claude Opus 4.1モデルを明示的に指定しています。これには技術的な理由があります：

モデル	デザイン再現精度	コード品質	実行速度	推奨用途
Claude Opus 4.1	95%	最高	やや遅い	本番実装
Claude Sonnet 4.5	85%	高い	高速	プロトタイプ
GPT-4o	80%	中程度	普通	汎用タスク
Gemini 2.5 Pro	75%	中程度	高速	大量データ処理

Claude Opus 4.1は、 視覚的詳細の再現性が圧倒的です。Figmaのデザイン仕様（px単位の配置、色コード、フォント設定）を完璧に理解し、コードに反映します。

効果的なプロンプト設計

Shin氏が推奨するプロンプトは、非常にシンプルかつ効果的です：

推奨プロンプト：

「HTML/CSS/TailwindCSS CDNで忠実に再現して」

このプロンプトが効果的な理由：

技術スタック明示：HTML/CSS/Tailwind CSSを指定することで、出力形式が明確化
「忠実に再現」の指示：Claude Opusの高精度再現能力を最大限引き出す
CDN指定：外部依存を最小化し、すぐに実行可能なコードを生成

実際の生成プロセス

Figma Designで対象領域を選択：コンポーネント、セクション、ページ全体など
コピー（Cmd+C / Ctrl+C）：Figma Dev Modeがデザイン情報をJSON化
Claude Codeにペースト：MCPサーバー経由でデザインデータ受信
プロンプト入力：「HTML/CSS/TailwindCSS CDNで忠実に再現して」
コード生成：数秒〜数十秒で完全なHTMLファイル生成

生成されるコードの特徴：

Tailwind CSSクラスによるスタイリング
レスポンシブ対応（sm:, md:, lg:プレフィックス自動付与）
セマンティックHTML（適切なタグ選択）
アクセシビリティ考慮（ARIA属性、alt属性）
即座に動作する完全なコード

ステップ⑥：React/Next.jsへのシームレスな移行

UIを維持したままフレームワーク変換

静的HTMLで満足できる場合もありますが、 本格的なWebアプリケーション開発にはReactやNext.jsへの移行が必要です。Shin氏のワークフローでは、この移行も自動化されています。

React移行プロンプト：

「React（or Next.js）へUIを維持したままリプレイスして」

このプロンプトだけで、Claude Opus 4.1は以下の変換を実行します：

自動変換内容：

コンポーネント化：
- HTMLのセクションをReactコンポーネントに分割
- Propsによるデータ受け渡し設計
- 再利用可能な構造に最適化
状態管理の追加：
- インタラクティブ要素にuseStateフック追加
- フォームにはReact Hook Form統合
- グローバル状態にはContext API提案
Next.js最適化（Next.js指定時）：
- App Routerへの対応
- Image最適化（next/image使用）
- メタデータ管理（metadata API）
- サーバーコンポーネント/クライアントコンポーネント適切分割
TypeScript型定義：
- Props型定義
- State型定義
- イベントハンドラ型定義

実際の変換例

変換前（HTML/Tailwind）：

<div class="bg-blue-500 p-6 rounded-lg">
  <h2 class="text-2xl font-bold text-white">タイトル</h2>
  <p class="text-white mt-4">説明文</p>
</div>

変換後（React/TypeScript）：

interface CardProps {
  title: string;
  description: string;
}

export function Card({ title, description }: CardProps) {
  return (
    <div className="bg-blue-500 p-6 rounded-lg">
      <h2 className="text-2xl font-bold text-white">{title}</h2>
      <p className="text-white mt-4">{description}</p>
    </div>
  );
}

GitHub Pagesへの自動デプロイ：ghコマンド活用

最後のステップは、完成したWebサイトの公開です。Shin氏のワークフローでは、 ghコマンド（GitHub CLI）を使った自動デプロイが推奨されています。

Claude Codeでのデプロイ自動化

デプロイプロンプト：

「ghコマンドを使ってGitHub Pagesにデプロイして」

このプロンプトで、Claude Codeは以下のタスクを自動実行します：

GitHubリポジトリ作成：

gh repo create my-landing-page --public --source=. --remote=origin

初回コミット：

git add .
git commit -m "Initial commit: Figma design implementation"
git push -u origin main

GitHub Pages設定：

gh api repos/{owner}/{repo}/pages \
--method POST \
-f source[branch]=main \
-f source[path]=/

デプロイ確認：
```
gh browse
```

所要時間：わずか1-2分で、Figmaのデザインが世界中からアクセス可能なWebサイトになります。

実践例：ランディングページを30分で完成させる

実際のワークフロー適用事例

あるスタートアップ企業が、Shin氏のワークフローを使って製品LPを作成した事例を紹介します。

プロジェクト概要：

目的：SaaS製品のランディングページ制作
要件：ヒーローセクション、機能紹介、価格表、問い合わせフォーム
デザイン：モダンでミニマル、ブランドカラー（#3b82f6）統一
納期：即日公開

タイムライン：

時間	作業内容	使用ツール
0:00-0:05	Figma Makeでベースデザイン生成	Figma Make
0:05-0:15	ブランドカラー適用、コンテンツ差し替え	Figma Design
0:15-0:20	HTMLコード生成（Tailwind CSS）	Claude Code + MCP
0:20-0:25	Next.jsへ変換、フォーム機能追加	Claude Code
0:25-0:30	GitHub Pagesデプロイ、動作確認	gh CLI

結果：

従来手法なら2-3日かかる作業が30分で完了
デザイナーとエンジニアの連携不要でコスト90%削減
Figmaデザインとの100%一致を実現
即座に本番公開可能なプロダクションレベルのコード

技術的考察：このワークフローが可能になった背景

3つの技術革新の融合

Shin氏のワークフローが実現できたのは、以下3つの技術革新が同時期に成熟したためです：

デザインツールのAPI化
- Figma APIの充実（2023年〜）
- デザインデータのプログラマティックアクセス
- リアルタイム同期機能
大規模言語モデルの進化
- Claude Opus 4.1の視覚理解能力
- コンテキスト長の拡大（200kトークン）
- マルチモーダル処理の高精度化
MCP標準化
- Anthropicによるプロトコル策定
- 外部ツール統合の標準化
- エコシステムの急速な拡大

これら3つが組み合わさることで、 「デザインを見せればコードが生成される」時代が到来しました。

今後の展望：ノーコードを超える「ローコード×AI」

Figma×Claude Codeワークフローは、従来の「ノーコード」ツールとは異なるアプローチです：

特性	ノーコードツール	Figma×Claude Code
柔軟性	テンプレート制約	完全カスタマイズ可能
コード品質	ブラックボックス	可読性高い標準コード
拡張性	プラットフォーム依存	任意のフレームワーク対応
学習曲線	ツール特有の操作	標準的なWeb技術
所有権	プラットフォーム依存	完全に自己所有

この「ローコード×AI」アプローチは、 エンジニアの生産性を10倍にする可能性を秘めています。

実装時の注意点とトラブルシューティング

よくある課題と解決策

実際にワークフローを導入する際、以下の課題に直面することがあります：

課題1: Figma Dev Mode MCPサーバーが起動しない

原因：Figma Access Tokenの権限不足
解決：Figma設定で「File content」「Read only」権限を付与

課題2: 生成されたコードがデザインと微妙に異なる

原因：Figmaのデザイントークン（変数）が反映されていない
解決：「Figmaのデザイントークンを尊重して」とプロンプトに追加

課題3: Next.js変換時にビルドエラー

原因：画像パスの設定ミス
解決：「next/imageを使用し、public/ディレクトリ構成で」と明示

課題4: レスポンシブデザインが不完全

原因：Figmaで複数画面サイズを用意していない
解決：Figma Designでモバイル/タブレット版も作成してから変換

まとめ：AI時代のデザイナー・エンジニアの新しい役割

Shin氏が提唱するFigma×Claude Codeワークフローは、単なる効率化ツールではありません。 デザインと実装の境界を曖昧にする、パラダイムシフトです。

このワークフローで変わること

デザイナー：実装可能性を気にせず、理想のデザインに集中できる
エンジニア：手作業のコーディングから解放され、ロジックや体験設計に注力できる
プロジェクト：デザイン→実装のフィードバックループが劇的に高速化
コスト：従来の10分の1のリソースで同等以上の成果

重要なのは「AIに何をさせるか」の設計

このワークフローを最大限活用するには、以下のスキルが重要になります：

デザイン思考：ユーザー体験を深く理解し、適切なデザインを生成させる能力
プロンプトエンジニアリング：Claude Codeから最高の成果を引き出す指示の技術
品質判断：生成されたコードの適切性を評価し、必要に応じて修正する眼力
アーキテクチャ設計：全体のシステム構成を設計し、適切なフレームワークを選択する能力

「AIデザインっぽさ」から脱却するカギは、技術の組み合わせ方にある——Shin氏のワークフローは、まさにこの真理を体現しています。

今日から始められるアクションプラン

このワークフローを実践したい方は、以下のステップで始めてください：

Figma無料アカウント作成（Figma Makeにアクセス）
Claude Codeインストール（公式サイトから）
Figma Dev Mode MCP設定（Figma Access Token取得）
簡単なLP作成で練習（シングルページから開始）
GitHub Pagesデプロイ（実際の公開まで体験）

1つ1つのステップは決して難しくありません。 最初の1回を完走すれば、2回目からは30分で完結します。

AI時代のデザイン・開発ワークフローは、すでに始まっています。Figma×Claude Codeの組み合わせを今すぐ試して、「AIデザインっぽさ」から垢抜けた、プロフェッショナルな成果物を生み出しましょう。

参考リンク：

Shin氏のX投稿：https://x.com/Shin_Engineer/status/1971532637337755742
Figma公式ドキュメント：https://www.figma.com/developers
Claude Code公式：https://claude.ai/code
MCP仕様書：https://modelcontextprotocol.io

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【Figma×Claude Code完全ガイド】AIデザインっぽさから垢抜ける6ステップ実践法：Figma Dev Mode MCPで実現するデザイン→コード自動変換

AIデザインの「垢抜けない問題」を解決する革新的ワークフロー

6ステップワークフロー全体像：デザイン→実装→デプロイまで完結

従来手法との決定的な違い

ステップ①-②：Figma MakeでAIデザイン生成とカスタマイズ

Figma Makeとは何か

「AIっぽさ」を脱却するカスタマイズのポイント

ステップ③：Figma Dev Mode MCPサーバー起動の技術的背景

MCPとは：Model Context Protocolの革新性

Figma Dev Mode MCPサーバーのセットアップ

ステップ④-⑤：Claude Opus 4.1でピクセルパーフェクトなコード生成

なぜClaude Opus 4.1なのか

効果的なプロンプト設計

実際の生成プロセス

ステップ⑥：React/Next.jsへのシームレスな移行

UIを維持したままフレームワーク変換

実際の変換例

GitHub Pagesへの自動デプロイ：ghコマンド活用

Claude Codeでのデプロイ自動化

実践例：ランディングページを30分で完成させる

実際のワークフロー適用事例

技術的考察：このワークフローが可能になった背景

3つの技術革新の融合

今後の展望：ノーコードを超える「ローコード×AI」

実装時の注意点とトラブルシューティング

よくある課題と解決策

まとめ：AI時代のデザイナー・エンジニアの新しい役割

このワークフローで変わること

重要なのは「AIに何をさせるか」の設計

今日から始められるアクションプラン

コメント

コメントするコメントをキャンセル

【Figma×Claude Code完全ガイド】AIデザインっぽさから垢抜ける6ステップ実践法：Figma Dev Mode MCPで実現するデザイン→コード自動変換

AIデザインの「垢抜けない問題」を解決する革新的ワークフロー

6ステップワークフロー全体像：デザイン→実装→デプロイまで完結

従来手法との決定的な違い

ステップ①-②：Figma MakeでAIデザイン生成とカスタマイズ

Figma Makeとは何か

「AIっぽさ」を脱却するカスタマイズのポイント

ステップ③：Figma Dev Mode MCPサーバー起動の技術的背景

MCPとは：Model Context Protocolの革新性

Figma Dev Mode MCPサーバーのセットアップ

ステップ④-⑤：Claude Opus 4.1でピクセルパーフェクトなコード生成

なぜClaude Opus 4.1なのか

効果的なプロンプト設計

実際の生成プロセス

ステップ⑥：React/Next.jsへのシームレスな移行

UIを維持したままフレームワーク変換

実際の変換例

GitHub Pagesへの自動デプロイ：ghコマンド活用

Claude Codeでのデプロイ自動化

実践例：ランディングページを30分で完成させる

実際のワークフロー適用事例

技術的考察：このワークフローが可能になった背景

3つの技術革新の融合

今後の展望：ノーコードを超える「ローコード×AI」

実装時の注意点とトラブルシューティング

よくある課題と解決策

まとめ：AI時代のデザイナー・エンジニアの新しい役割

このワークフローで変わること

重要なのは「AIに何をさせるか」の設計

今日から始められるアクションプラン

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル