「AIコーディングで一番難しいのは、デザイン」—この言葉に共感するエンジニアは多いのではないでしょうか。
機能実装や簡単なAI機能はすぐ作れる一方で、洗練されたデザインやストレスのないUXは、まだ人間のセンスに依存する部分が大きいのが現状です。
そんな課題を解決するのがFigma Make。チャットしながら高精度なWebデザインを作成でき、そのままClaude Codeで実装を進められる、まさにデザイン×AIコーディングの最強ワークフローが実現します。
Figma Makeとは？
Figma Makeは、2025年5月にFigmaがローンチしたAI搭載のデザイン・プロトタイピングツールです。デザインをコードに変換し、機能的なプロトタイプやWebアプリを構築できます。
主な特徴
| 機能 | 説明 |
|---|---|
| AIチャットでデザイン生成 | 自然言語で指示するだけで高品質なWebデザインを作成 |
| コード書き出し | HTML/CSS/JavaScriptを自動生成 |
| Supabase連携 | バックエンド・認証・データベースを統合 |
| GitHub統合 | リポジトリ連携でバージョン管理 |
| 独自ドメイン公開 | カスタムドメインでサイトを公開可能 |
| 手動調整対応 | AIで物足りなければFigma上で直接編集 |
なぜ「デザイン」がAIコーディングのボトルネックなのか
AIコーディングツールの能力は飛躍的に向上していますが、デザイン面では依然として課題があります：
AIコーディングの現状
| 得意なこと | 苦手なこと |
|---|---|
| ✅ 機能実装 | ❌ 洗練されたビジュアルデザイン |
| ✅ API連携 | ❌ 細かなマイクロインタラクション |
| ✅ データベース操作 | ❌ ブランドに合ったUI/UX |
| ✅ エラーハンドリング | ❌ 使いやすさの配慮 |
つまり、「動くもの」は作れても「美しく使いやすいもの」を作るのは難しいのです。ここにFigma Makeの価値があります。
Figma Make → Claude Code ワークフロー
従来の「Lovable → Claude Code」ワークフローに代わる、新しいアプローチとして注目されているのが「Figma Make → Claude Code」の組み合わせです。
ワークフローの流れ
| ステップ | ツール | 内容 |
|---|---|---|
| 1. デザイン作成 | Figma Make | AIチャットで高品質なWebデザインを生成 |
| 2. 微調整 | Figma | 必要に応じてFigma上で手動調整 |
| 3. コード書き出し | Figma Make | HTML/CSS/JSを自動生成 |
| 4. 実装・拡張 | Claude Code | 機能追加、ロジック実装、最適化 |
| 5. バックエンド構築 | Supabase | 認証、DB、ストレージを追加 |
| 6. デプロイ | Figma Sites | 独自ドメインで公開 |
Figma MCPによるClaude Code連携
さらに強力なのがFigma MCP（Model Context Protocol）サーバーとの連携です。これにより：
- Claude CodeがFigmaデザインを直接読み取り
- ピクセル完璧なコードを自動生成
- デザイントークン（色、スペーシング、タイポグラフィ）を自動抽出
- 既存のコンポーネントライブラリと統合
「数時間かかっていたUI開発が数分で完了。Figma変数から正確な値を抽出するため、パディングが16pxか20pxか、どの青色を使うべきか迷う必要がなくなりました」
— Claude Code × Figma MCP ユーザー
Supabase統合：フルスタックアプリが作れる
2025年7月、Figma MakeはSupabase統合を正式発表。これにより、バックエンドの専門知識がなくてもフルスタックWebアプリを構築できるようになりました。
Supabase統合で可能になること
| 機能 | 詳細 |
|---|---|
| 認証 | Email/パスワード、マジックリンク、Google/GitHub OAuth |
| データベース | PostgreSQL、リレーショナルテーブル、リアルタイム同期 |
| ストレージ | 画像・PDF等のファイルアップロード、アクセス制御 |
| Edge Functions | サーバーレス関数でカスタムロジック実行 |
| 外部API連携 | Foreign Data Wrappersで外部DBやAPIに接続 |
| AI機能 | Vector埋め込みでセマンティック検索・レコメンド |
バックエンド追加の簡単さ
Figma MakeのAIチャットで「バックエンドを追加して」と指示するだけで、Supabaseプロジェクトのセットアップが自動で行われます。
- モックデータ → 実際のPostgreSQLデータベースに変換
- プレースホルダー認証 → 機能的なログインシステムに
- ファイルアップロード → セキュアなストレージと統合
独自ドメイン公開とGitHub連携
Figma Makeは単なるデザインツールではなく、完全なデプロイメントソリューションを提供します。
Figma Sitesの公開オプション
| プラン | カスタムドメイン数 | 備考 |
|---|---|---|
| 無料 | Figmaサブドメインのみ | *.figma.site |
| Professional | 最大10個 | apexドメイン対応 |
| Organization/Enterprise | 無制限（ベータ期間中） | 2025年末まで無料 |
GitHub連携のメリット
- バージョン管理：変更履歴を完全に追跡
- チーム開発：複数開発者での協業が容易
- CI/CD統合：自動テスト・デプロイパイプライン構築
- Supabaseブランチ同期：開発環境と本番環境の分離
Lovable vs Figma Make：どちらを選ぶべきか
従来人気だった「Lovable → Claude Code」ワークフローと比較してみましょう。
| 項目 | Lovable | Figma Make |
|---|---|---|
| デザイン精度 | 良好 | 非常に高い |
| 手動調整 | コード編集 | Figma UIで直感的 |
| バックエンド | 別途構築 | Supabase統合 |
| チーム連携 | Git経由 | Figma + Git |
| デザイナー協業 | 難しい | シームレス |
| 学習コスト | 低い | Figma知識が必要 |
| 料金 | サブスクリプション | Figmaプラン依存 |
「これまでは Lovable → Claude Code 派でしたが、Figma Make → Claude Code への移行もアリだと感じるレベル感」
— @masahirochaen
Figma Makeの制限事項
完璧なツールではありません。以下の制限を理解しておきましょう：
現在のサポート範囲
- ❌ 複雑なマルチフレームフロー：カルーセルやオンボーディングは個別変換が必要
- ❌ アニメーション：Figmaプロトタイプの直接変換は不可
- ❌ カスタムチャート：特定のライブラリ知識が必要
- ❌ 複雑なインタラクション：手動実装が必要
- ⚠️ データベース：現時点では基本的なKey-Valueストアのみ（フルSQL未対応）
実践的な使い方のコツ
デザイン段階でのベストプラクティス
- セマンティックな命名：Figmaレイヤーに意味のある名前を付ける
- Figma変数を活用：色、スペーシング、タイポグラフィを変数として定義
- コンポーネント化：再利用可能な要素はコンポーネントとして設計
Claude Code連携時のコツ
- 技術スタックを事前に指定：React、Vue、TailwindCSSなど希望を伝える
- コア要素から始める：ボタン、フォームなど基本UIから生成
- 段階的に複雑化：シンプルなコンポーネントから徐々に拡張
まとめ：デザイン×AIコーディングの新時代
Figma Makeは、AIコーディングの最大の課題である「デザイン」を解決する強力なツールです。
- ✅ チャットで高精度なWebデザインを生成
- ✅ 物足りなければFigma上で手動調整可能
- ✅ Claude Codeへシームレスに連携
- ✅ Supabaseでバックエンド構築
- ✅ 独自ドメインで公開まで一貫対応
「デザイン → コード → デプロイ」の全工程をAIがサポートする時代が本格的に到来しました。Lovable派だった方も、Figma Make → Claude Codeワークフローを一度試してみる価値があるでしょう。
ソース：
関連記事：
コメント