エンジニアから見たFigma Make - 高品質なサイト生成の要因を探る -

はじめに

はじめまして。
トライベック株式会社でフロントエンドエンジニアをしている鈴木です。

近頃、AIを活用したツールが次々と登場しておりますが、その進化の速さには驚くばかりです。
2025年7月にはデザインツールのFigmaから「Figma Make」という新機能がリリースされました。これは自然言語で指示するだけで高品質なWebサイトやWebアプリを短時間で作成することができるAIツールですが、実際に使ってみると、その生成結果のクオリティの高さに衝撃を受けました。

本記事では、Figma Makeがどのようにしてクオリティの高い生成結果を生み出しているのかを探っていきます。

Figma Makeとは

Figma Makeを使うことでデザイナーやプロダクトチームが自然言語の指示だけで、動作するWebアプリケーションを生成できます。

Supabaseと連携すれば実際のデータを使用したWebアプリを制作することが可能です。
また、執筆時点でベータ版ではありますが、「Figma Site」という機能と連携することで制作したページをそのままWeb上に公開できます。

実際に使ってみる

シンプルに「IT企業のコーポレートサイトを作って」とだけお願いしてみます。

上記のリンクから生成されたサイトを見ることができます。

このようにかなり高クオリティなサイトが出来上がります。
デザインも整っていてスタイル崩れも見当たりません。
レスポンシブ対応もされています。
特に驚いたのは情報量の多さで、
「IT企業のコーポレートサイトを作って」とシンプルな要望にもかかわらず、必要な要素をAIが自ら考え情報量の多いサイトに仕上げてくれています。

Claudeでの生成結果と見比べてみる

Claudeを使って同じプロンプトで作成した場合と比べて、どのくらいクオリティに差があるのかを見てみます。

以下が生成結果です。

正直これでも十分すごいとは思いますが、Figma Makeと比べると以下の違いがあります。

• 画像がない
• 情報量が少ない
• Figma MakeはSVGアイコンを使う部分でClaudeは絵文字を使っている

どうしてこれほどまでの差がでるのでしょうか。

なぜFigma Makeは高クオリティなサイトを作ることができるのか

Figma Makeがなぜここまで高クオリティな成果物を出せるのかを調査していきます。

LLMはClaude Sonnet 4

Since Figma Make uses Anthropic's Claude Sonnet 4, the same prompting best practices for Anthropic's models also apply to Figma Make.

（日本語訳）
Figma MakeはAnthropicのClaude Sonnet 4を使用しているため、Anthropicのモデルに対するプロンプト作成のベストプラクティスはFigma Makeにも同様に適用されます。

Figmaが公開している「8 essential tips for using Figma Make」という記事によるとLLMはClaude Sonnet 4が使われているようです。（2025年9月時点）

生成されたコードをダウンロードして中身を確認

まずは生成されたコードをダウンロードしてみて技術スタックを確認してみました。

ディレクトリ構造

/
├── index.html              # エントリーポイントHTML
├── package.json             # 依存関係・スクリプト管理
├── README.md               # プロジェクト説明書
├── vite.config.ts          # Vite設定ファイル
└── src/
    ├── App.tsx             # ルートコンポーネント
    ├── main.tsx            # アプリエントリーポイント
    ├── index.css           # グローバルCSS
    ├── Attributions.md     # 利用素材のクレジット
    ├── components/
    │   ├── About.tsx       # 会社概要セクション
    │   ├── Contact.tsx     # お問い合わせセクション
    │   ├── Footer.tsx      # フッターコンポーネント
    │   ├── Header.tsx      # ヘッダーナビゲーション
    │   ├── Hero.tsx        # メインビジュアル
    │   ├── Services.tsx    # サービス紹介セクション
    │   ├── Team.tsx        # チーム紹介セクション
    │   ├── Testimonials.tsx # お客様の声セクション
    │   ├── figma/
    │   │   └── ImageWithFallback.tsx # Figma連携画像コンポーネント
    │   └── ui/             # 汎用UIコンポーネント群
    │       ├── accordion.tsx
    │       ├── alert-dialog.tsx
    │       ├── alert.tsx
    │       ├── avatar.tsx
    │       ├── badge.tsx
    │       ├── button.tsx
    │       ├── card.tsx
    │       ├── dialog.tsx
    │       ├── input.tsx
    │       ├── table.tsx
    │       ├── tabs.tsx
    │       ├── tooltip.tsx
    │       ├── utils.ts    
    │       └── use-mobile.ts
    ├── guidelines/
    │   └── Guidelines.md   # 開発ガイドライン
    └── styles/
        └── globals.css     # グローバルスタイル

package.json

{
    "name": "Corporate Website for IT Company",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@radix-ui/react-accordion": "^1.2.3",
        "@radix-ui/react-alert-dialog": "^1.1.6",
        "@radix-ui/react-aspect-ratio": "^1.1.2",
        "@radix-ui/react-avatar": "^1.1.3",
        "@radix-ui/react-checkbox": "^1.1.4",
        "@radix-ui/react-collapsible": "^1.1.3",
        "@radix-ui/react-context-menu": "^2.2.6",
        "@radix-ui/react-dialog": "^1.1.6",
        "@radix-ui/react-dropdown-menu": "^2.1.6",
        "@radix-ui/react-hover-card": "^1.1.6",
        "@radix-ui/react-label": "^2.1.2",
        "@radix-ui/react-menubar": "^1.1.6",
        "@radix-ui/react-navigation-menu": "^1.2.5",
        "@radix-ui/react-popover": "^1.1.6",
        "@radix-ui/react-progress": "^1.1.2",
        "@radix-ui/react-radio-group": "^1.2.3",
        "@radix-ui/react-scroll-area": "^1.2.3",
        "@radix-ui/react-select": "^2.1.6",
        "@radix-ui/react-separator": "^1.1.2",
        "@radix-ui/react-slider": "^1.2.3",
        "@radix-ui/react-slot": "^1.1.2",
        "@radix-ui/react-switch": "^1.1.3",
        "@radix-ui/react-tabs": "^1.1.3",
        "@radix-ui/react-toggle": "^1.1.2",
        "@radix-ui/react-toggle-group": "^1.1.2",
        "@radix-ui/react-tooltip": "^1.1.8",
        "class-variance-authority": "^0.7.1",
        "clsx": "*",
        "cmdk": "^1.1.1",
        "embla-carousel-react": "^8.6.0",
        "input-otp": "^1.4.2",
        "lucide-react": "^0.487.0",
        "next-themes": "^0.4.6",
        "react": "^18.3.1",
        "react-day-picker": "^8.10.1",
        "react-dom": "^18.3.1",
        "react-hook-form": "^7.55.0",
        "react-resizable-panels": "^2.1.7",
        "recharts": "^2.15.2",
        "sonner": "^2.0.3",
        "tailwind-merge": "*",
        "vaul": "^1.1.2"
    },
    "devDependencies": {
        "@types/node": "^20.10.0",
        "@vitejs/plugin-react-swc": "^3.10.2",
        "vite": "6.3.5"
    },
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    }
}

技術スタックがわかりました。
フレームワークはReactを使っているようです。
大きな発見として、コンポーネントライブラリの「Radix UI」とCSSフレームワークの「Tailwind CSS」を使っていることがわかりました。
Radix UIとTailwind CSSの組み合わせによって機能性とデザインの統一感が自動的に担保されることが、安定して整ったデザインで生成される理由の一つと考えられます。

技術スタック

• React + TypeScript
• Vite（ビルドツール）
• Radix UI（UIコンポーネント）
• Lucide React（アイコン）
• Tailwind CSS（スタイリング）

生成時の思考プロセスをみてみる

次に生成時のAIの思考プロセスを見てみます。
こちらは何パターンかを見比べてみました。

「推論」を見るとAIが以下の点を考えていることがわかりました。

• 必要なセクションの洗い出し
• Supabaseが必要かの判断
• Unsplashから画像を取得するかの判断

画像はUnsplashから取得しているということがわかりました。
また、ユーザーから受けた要望を「PureFrontend」「SupabaseRequired」「SupabaseSuggest」のどれかに分類することでSupabaseを利用すべきかを判断しているようです。

わかったことまとめ

Tailwind CSS・Radix UIによる品質担保

Tailwind CSSやRadix UIといったライブラリを使うことで高いクオリティと整ったデザインを担保していることがわかりました。
これにより色やサイズ、余白などが統一され、全体的に整った見た目になります。

Unsplashを使うことにより高クオリティな画像を使用

画像はUnsplashを利用していました。
AIが最適な画像を判断して選定しているようです。

生成前に必要なセクションを考えている

生成の過程を見ると、要望である「IT企業のコーポレートサイト」に必要なセクションをしっかり考えてから制作に取り掛かっているようでした。
これによりコンテンツの充実したWebサイトが生成されるのかもしれません。

Claudeで試してみる

同じようにデザインライブラリとUnsplashの画像を使えばClaudeでも高クオリティなWebサイトを作れるのでしょうか？
実際に試してみました。

本来は全く同じ技術スタックで試したいところですが、
ClaudeでReactコンポーネントを作成するのは複雑になるため、今回はシンプルにHTML、CSS、JSでの実装とします。
そのためRadix UIも使えなくなってしまうのですが、Tailwindだけでもデザインは担保されるだろう……ということで、Radix UIの使用は見送ります。

また、特に指示をしないとファーストビューに画像が入らないことがあったのでプロンプトで指示をしています。

以下のプロンプトでClaudeに生成をしてもらいます。

IT企業のコーポレートサイトを作ってください。
不足する情報は補い情報量を多くしてください。
メインビジュアルには必ず画像を含めてください。

使用技術
-  HTML、CSS、JavaScript
- 画像: Unsplashを使用
- アイコン: Lucideを使用 
- スタイル: Tailwind CSSを使用
ライブラリはCDNでインポートしてください。

制作手順
1. まず、IT企業に必要なセクションを洗い出してください
2. その後、実装に移ってください

Claudeのプレビュー機能で確認するつもりでしたが、CDNがContent Security Policyでブロックされてしまうので、HTMLファイルをダウンロードしてブラウザで確認しました。

結果がこちらです。

かなりクオリティが上がりました！
最初の生成結果と比べると段違いです。
Figma Makeに近づいたのではないでしょうか？

AIが苦手とするデザイン面をTailwind CSSのようなUIライブラリで補うことによって、高品質なデザインを担保していることがわかりました。
そしてユーザーが簡単なプロンプトを与えたとしても、高クオリティな生成結果を返す工夫がされているようです。

おわりに

Figma Makeを使ってみて感動したのは簡単なプロンプトでも想像以上の作り込みで生成をしてくれる点でした。

大胆なアイデアから風変わりで奇抜なもの、そしてごく小さなひらめきまで、あらゆる可能性を探って、本当に価値あるアイデアを見つけましょう。忠実度の高いプロトタイプを作成すれば、見ている人全員にあなたのビジョンが伝わります。
https://www.figma.com/ja-jp/make/

Figmaは、Figma Makeというサービスを「AIでWebサイトやWebアプリを作るツール」ではなく「価値あるアイデアを見つけプロトタイプを作成する」ツールとして紹介しています。

これを見ると、簡単なプロンプトでも想像以上の作り込みをしてくれることにも納得がいきます。
小さなアイデアの段階から実際に動く物を作り、アイデアを広げていくことができる素晴らしいツールだと感じました。