これまでGemini Canvas、v0、開発ツール3つの比較と、同じ課題を各AIに投げて実機検証してきました。

今回はFigma Makeです。デザインツールの本家Figmaが作ったAIアプリビルダー——ここには他と違う問いが立ちます。

デザイン会社のAIは、エンジニア系のAIより「きれいな」ものを作るのか？

結論から言うと、答えはYES。ただし、いちばん遅い。 その中身を実機の記録で書きます。

検証は2026年8月、編集部が実機で実施。Figmaにログインした状態で、これまでの検証とまったく同じ指示文を使っています。AIの出力は日々変わるため、細部は時期・モデルにより異なります。

投げた指示（他ツールと共通）

シンプルな割り勘計算アプリを作って。合計金額と人数を入力すると1人あたりの金額が計算される。端数（割り切れない分）を誰か1人が多めに払う設定も選べるようにして。日本語UI、スマホでも使いやすいレイアウト、やさしい配色で。

割り勘は「1万円を3人で割ると割り切れない」ため、端数処理と計算の正確さが一発で分かる題材です。

入口：figma.com/make に入力欄がある

Figma Makeのページを開くと、いきなり「何を作りたいですか?」という入力欄が出ます。例として並んでいるのは 「オンボーディングフロー」「データダッシュボード」「グラデーションギャラリー」——この時点で、明確にUI・デザイン寄りの製品だと分かります。

指示を送ると、ファイル名が自動で「割り勘計算アプリ」になり、生成が始まりました。

⏱ 所要時間は約7分。今回いちばん遅い

生成中の表示が独特でした。

  1. 「考え中…」＋レイアウト骨格のスケルトン（点線の四角が並ぶ）
  2. 「詳細を詰める」フェーズへ
  3. 完成

まるでデザインの工程をなぞるような段階表示です。ただし時間はかかりました。

ツール 完成までの時間
v0 約1分49秒
Google AI Studio 132秒（※4回目で成功）
Figma Make 約7分
ChatGPTサイト 7分31秒

ChatGPTサイトと並ぶ最遅クラス。v0の約4倍です。「デザインまで作り込むぶん遅い」と考えれば納得はできますが、待たされるのは事実です。

🎨 デザイン：ここが明確に違った

出てきたものを見て、正直「あ、違うな」と思いました。理由は3つです。

① iPhoneのモックアップの中に表示される

他の5ツールはすべてブラウザ幅のプレビューでした。Figma Makeだけが、デバイスのモックアップに収めて見せてきます。「スマホで使いやすく」と指示したものを、スマホの枠で確認させる——デザインツールらしい振る舞いです。

② 日本語の書体を自分で選んでいる

AIの説明にこう書かれていました。

Noto Sans JP でくっきり読みやすい日本語

日本語タイポグラフィに言及したツールは、6つの中でFigmaだけでした。他は「日本語UI」を満たしはしても、書体まで踏み込んだ説明はしていません。

③ 情報に「主従」をつけている

これがいちばん効いていました。計算結果の見せ方がこうです。

  • 「基本の1人あたり」→ 緑・特大
  • 「端数を負担する1人」→ オレンジ・小さめ

他ツールは、2つの金額を横並びで同格に並べていました。Figmaだけが「利用者がまず知りたいのはどっちか」を決めて設計しています。しかも端数を負担する人だけオレンジのアクセント色で、一目で「自分は多い方か」が分かる。

これは配色の good/bad ではなく、情報設計のレベルが一段違うという話です。

⚙️ 機能：気の利いた作り込みが多い

  • 人数のクイック選択ボタン（2人〜6人） — 他ツールにはありませんでした。飲み会の人数なんて大体その範囲、という現実的な割り切り
  • 端数処理3モード — 「1人多めに払う／1人少なめに払う／端数なし（小数あり）」
  • 「全員の内訳を見る」で展開 — 1人目に「端数負担」バッジ付きで金額を表示
  • リセットボタン

✅ 計算：3モードすべて正確。しかも「合計」を自分で出す

公開したアプリで、1万円÷3人を実際に入力しました。

「1人多めに払う」

  • 基本の1人あたり ¥3,333／端数を負担する1人 ¥3,334
  • 内訳：¥3,334 ＋ ¥3,333 ＋ ¥3,333 = ¥10,000 ✓

「1人少なめに払う」

  • 基本の1人あたり ¥3,334／端数を負担する1人 ¥3,332
  • 内訳：¥3,332 ＋ ¥3,334 ＋ ¥3,334 = ¥10,000 ✓

「端数なし」

  • ¥3333.33 と小数表示に切り替わる ✓

そして特筆したいのが、内訳の最後に「合計 ¥10,000」の行が出ることです。

これは検証した6ツールでFigmaだけでした。他はどれも1人あたりの金額を出して終わりです。利用者が自分で検算できるように、合計を見せる——ここまで気が回っているのは、正直かなり丁寧だと思いました。

中身のコード：本格的なViteプロジェクト

コードビュー（<>）を開くと、単一のHTMLではなく複数ファイルのプロジェクトでした。

  • React + TypeScript + Vite + Tailwind CSS + shadcn/ui + lucide-react（パッケージ管理は pnpm）
  • src/app/App.tsx、src/app/components/
  • src/styles/ を5ファイルに分離（fonts.css / globals.css / index.css / tailwind.css / theme.css）
  • guidelines/、ATTRIBUTIONS.md、default_shadcn_theme.css

スタイルを5つに分けているのが目を引きます。フォント、グローバル、テーマを別ファイルに切る構成は、デザインシステムを意識した作りです。他ツールはここまで分けていませんでした。

コード自体も、useMemo で計算をまとめ、端数モードを type RoundingMode = "none" | "up" | "down" と型で定義し、金額表示は toLocaleString("ja-JP") で日本語ロケール指定——という、ちゃんとしたものでした。

公開：.figma.site で公開できる

右上の「公開」から、数クリックで公開URLが手に入りました。課金設定などは不要です。

今回できたURLがこちら（実際に触れます）。

→ https://nature-light-20437169.figma.site

カスタムドメインの接続も用意されています。また「コミュニティで公開」という別トグルもあり、こちらはFigmaの公開ギャラリーに載せるものなので、用途が違います（今回はオフのまま）。

ひとつ気になったのは、URLが nature-light-20437169 という自動生成の文字列だったこと。ChatGPTサイトが warikan-calculator.… と内容に沿ったURLを作ったのと比べると、そのままでは人に見せにくいURLです。

正直な短所

  • 遅い（約7分／v0の約4倍）
  • URLが自動生成の無意味な文字列（カスタムドメインを繋げば解決はする）
  • Figmaのアカウントとプランに乗るため、気軽に使い捨てる用途には重い

なお検証中、Figma内の埋め込みプレビュー上では端数モードの切り替えが反応しない場面がありました。ただし公開後のサイトでは3モードすべて正常に動作しています。プレビュー特有の挙動と判断し、不具合としては扱っていません。

結論：「速さ」を捨てて「仕上がり」を取るツール

6ツールを同じ課題で検証してきて、Figma Makeの立ち位置ははっきりしました。

評価
速さ ❌ 最遅クラス（約7分）
デザインの仕上がり ⭐ 6ツール中トップ
機能の厚み ⭕ 3モード＋クイック選択＋内訳＋合計
計算の正確さ ⭕ 3モードすべて正確
コードの質 ⭕ React/TS/Viteの本格構成
公開のしやすさ ⭕ 数クリック・課金設定不要

「デザイン会社のAIはデザインが上手いのか」への答えは、YES。しかも配色の話ではなく、情報設計のレベルで。

こんな人に向く

  • 人に見せる前提のものを作りたい（提案、プロトタイプ、社内デモ）
  • すでにFigmaを使っている
  • 待てる——7分を「作り込みの時間」と思える人

向かないとき

  • とにかく速く動くものが見たい → v0
  • 今すぐ軽く試したいだけ → Gemini Canvasなどの手軽ティア

この記事は、v0やGemini Canvasなど手軽な生成AIは知っているが、Figma Makeは試したことがない人を想定しています。Figmaのアカウント登録以上の専門知識は前提にしていません。

つまずきどころ：自分で試すと起きること

症状 原因 対処の順番
プレビュー画面で機能が反応しない（端数モードの切り替えなど） 埋め込みプレビュー特有の挙動である場合がある 1. まず公開後のURL（.figma.site）で同じ操作を試す 2. 公開後も再現するなら不具合として扱う
生成が7分前後かかり、途中で止まったように見える 「レイアウト骨格→詳細を詰める」という2段階の処理を経るため、単発HTML生成のツールより時間がかかる 1. 「詳細を詰める」の表示が出ていれば処理中と判断してそのまま待つ 2. 表示が変わらず数分動きがなければ指示を出し直す
公開URLが nature-light-20437169 のような読めない文字列になる Figma Makeの自動生成URLの仕様 1. 人に見せる用途ならカスタムドメイン接続を検討する 2. 社内デモなど一時利用ならそのまま使う
Figmaのプランや料金が記事の記載と合わない 料金体系は変更される場合がある 1. 契約中のFigmaプランの詳細を公式サイトで確認する 2. 無料枠の範囲は都度最新情報を確認する

やってはいけないこと

  • プレビュー画面の不具合だけで「動かない」と結論づける：記事内でも触れた通り、埋め込みプレビュー特有の挙動で、公開後は正常に動くことがあります。公開してから判断してください。
  • 自動生成のURLをそのまま人に共有する：nature-light-20437169 のような文字列は初見の人に内容が伝わりません。人に見せる用途ならカスタムドメインを検討しましょう。
  • Figmaの契約プランを確認せずに使い始める：Figma Makeを使うにはFigmaへのログインが前提です。プランごとの利用条件は変わる可能性があるため、事前に公式サイトで確認してください。
  • 「デザインが良い＝コードの質も良い」と早合点する：見た目の作り込みとコードの保守しやすさは別の評価軸です。中身のコード構成も合わせて確認しましょう。

よくある質問

Q. Figma Makeを使うにはFigmaのアカウントが必要ですか？ A. はい。検証時も「Figmaにログインした状態」が前提でした。無料アカウントでどこまで使えるかは変更される可能性があるため、最新の条件は公式サイトで確認してください。

Q. プレビューで動作がおかしいときはどうすればいいですか？ A. まず公開後のURL（.figma.site）で同じ操作を試してください。記事内の検証でも、埋め込みプレビューだけで反応しなかった機能が、公開後は正常に動作したケースがありました。

Q. 生成されたコードはそのまま実務で使えますか？ A. React/TypeScript/Vite/Tailwind CSS/shadcn/uiという構成で出力され、スタイルもファイル分割されているため土台はしっかりしています。ただし実務投入する前に、他ツール同様、公開前の動作確認は自分の目で行ってください。

Q. v0やGemini Canvasと比べてどちらを先に試すべきですか？ A. 「とにかく速く動くものを見たい」ならv0やGemini Canvas、「見た目の作り込みを優先したい」ならFigma Make、という順番で選ぶと分かりやすいです。

Q. 公開したURLの見た目が気になる場合はどうすればいいですか？ A. 自動生成される文字列のままだと内容が伝わりにくいため、人に見せる用途ではカスタムドメインの接続を検討してください。社内デモなど一時的な用途であればそのままでも支障はありません。

Q. Figma Make以外の選択肢と比べて検討したい場合は？ A. 同じお題で検証したAIアプリ開発ツール3つの比較や、v0、Gemini Canvasの記事もあわせてご覧いただくと、速度と仕上がりのトレードオフが把握しやすくなります。

まとめ

  • Figma Makeは約7分と最も遅いが、デザインの仕上がりは6ツール中トップ。
  • 強さは配色ではなく情報設計——デバイス表示、Noto Sans JPの指定、金額の主従、そして内訳の「合計」行。
  • 計算は3モードすべて正確（1万円÷3人で検算済み）。
  • 中身はReact+TypeScript+Vite+Tailwind+shadcnの本格プロジェクトで、スタイルは5ファイルに分離。
  • .figma.siteで数クリック公開できる。ただしURLは自動生成の文字列。
  • 結論：速さを捨てて仕上がりを取るツール。

次に読む