これまで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などの手軽ティア

まとめ

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

次に読む