Figma Makeとは？
Figma Makeは、Figmaが提供するAI搭載のWebアプリ開発支援プラットフォームです。従来はデザイン→プロトタイプ→手動コーディングという段階を踏んでいたWeb開発が、AIの介入によってワンクリックでコード化可能になりました。
主な用途は以下の通り
- デザインからのMVP（Minimum Viable Product）開発
- スピーディなプロトタイピング
- 初心者向けのコーディング教育
- 企業のUI/UX最適化サイクルの高速化
Figma Makeの特徴と機能
1. AIドリブンなコード生成
Figmaのデザインデータを元に、AIがリアルタイムで以下を生成します：
- 構造化されたReactコンポーネント
- 最適化されたTailwind CSSクラス
- レスポンシブなレイアウト
- インタラクティブなUI要素
2. 最新の技術スタックに対応
生成されるコードは、以下のモダンライブラリをベースに構成されています：
- shadcn/ui：高品質なUIコンポーネント
- Lucide React：洗練されたアイコンセット
- Recharts：ビジュアル重視のグラフ表示
- Framer Motion：洗練されたアニメーション
- React Hook Form：効率的なフォーム管理
3. Figmaとのシームレスな統合
デザインシステムとの連携により、デザインとコードの乖離がほぼゼロ。一貫性のある開発体験を実現します。
実際に使ってみた
今回作ったサイト↓
https://online-parse-74269654.figma.site
さっそくfigma makeを使ってみました
まずはとりあえず「会社のホームページを作って」と会社の情報だけ与えると
！！！？？？？？
一発でここまでのクオリティが出るのは正直驚きでした。
必要な要素（会社紹介・サービス概要・お問い合わせなど）は自動で補完され、レイアウトやデザインも他の生成AIより明らかに安定しています。
変更もプロンプトで完結
- セクションの追加・削除
- コンテンツの修正
- デザインの調整
これら全てがプロンプト入力のみで完結できます。
もちろん、生成されたコードを直接編集することも可能ですが、プロンプトで編集した方が安定性が高くおすすめです。
（直接編集した場合、再編集でレイアウトが崩れることもありました）
特にすごかった点
1.画像生成の精度が抜群
どんな生成AIよりも高品質で適切な画像を提案してくれます。
Claudeでは画像付きのサイトをうまく作れなかったので、これはとても便利でした。
そして本当にやばかったのが二つ目
2.洗練されたレイアウト
どんな指示でもプロ並みのレイアウト・デザインに仕上げてくれます。
アイコンの統一感もあり、細部にまでこだわりが感じられました。
逆にちょっと気になった点
・自分のイメージ通りのレイアウトにするには慣れが必要
・テキストの変更もプロンプトベースでやや手間かかる
・添付可能なのが画像ファイルのみ（PDFなど非対応）
・ブログ機能が未対応（投稿にはWordPressなど別ツールが必要）
効率的な作成方法
1.大枠の指示
例：
「化粧品の商品紹介LPを作って」
これだけでOKです！
2.セクションの追加、削除
例：
「お客様の声セクションを追加して」
「実績セクションは削除して」ョンを追加、削除していきます。
3.コンテンツの編集
プレビューで該当部分を確認して、具体的に指示します。
例：
「商品紹介セクションの“◯◯◯◯”という文を“△△△△”に変更して」
たったこれだけで、完成度の高いサイトが出来上がります！
感想
色々と生成ツールを試してみた私ですが、サイトを作る上ではFigma Makeは、もはや“便利なツール”ではなく、“次世代の開発スタイルそのもの”だと感じました！バイブコーディングが支流となっていくであろう今後の先駆けとなっているとても良いツールだったので、皆さんもぜひ試してみてください！