人気ランキング.com
UI・画面モックアップ作成AI おすすめ比較

UI・画面モックアップ作成AIの比較

結論：チームで本格的に設計するなら定番の Figma（Figma Make）。手描きやスクショから一気にUIを起こすなら Uizard、文章からUIを作るなら Google Stitch が頼れるよ。「画面生成の手軽さ・書き出し（Figma/コード）・無料枠・日本語・価格」の5つの視点で、知りたい順にまとめたよ。

読むめやす：約14分

最終更新日：2026年11月3日

  • 01迷ったら上位3つ — Figma（チーム・定番）、Uizard（手描き・スクショから）、Google Stitch（Google Labs・文章から）
  • 02無料で試せる — Uizard・Visily・Banani・UXMagic は無料で使える（Figmaも無料Starterあり・Google Stitchは公式に料金の案内なし）
  • 03あくまで「たたき台」 — AIのUIや書き出しコードは、操作の流れと実データを人が整えてから使うのが安心だよ

01CHAPTER 01

UI・画面モックアップ作成AIとは？できること

結論：UI・画面モックアップ作成AIは、「フードデリバリーアプリのホーム画面」みたいな文章（プロンプト）や、手描きのラフ・スクリーンショットから、アプリやWebのUI画面を自動で作ってくれるツールだよ。ボタンやリスト、入力欄といった部品が並んだ編集できる画面が出てくるから、画面設計（ワイヤーフレーム）や見た目のたたき台（モックアップ）づくりがぐっと速くなるんだ。

主にこんなことができるよ。文章から複数画面のUIを一気に生成／手描きラフ・スクショをきれいなUIに変換／配色やフォントのテーマ切り替え／タップで動くプロトタイプ化／FigmaへのコピーやHTMLコードの書き出し。アイデア出しから関係者への共有まで、最初のひと回しをまるごと任せられるのが魅力だよ。

このページの結論を先に：チーム設計の定番は Figma、手描き・スクショからの変換は Uizard、文章からなら Google Stitch。下のランキングで詳しく見ていくね。なお、サイトやLPを丸ごと作りたいならAIサイト作成ツール、商品パッケージの商品モックアップは商品モックアップ作成AI、バナーや販促のデザインはAIデザインツールがぴったりだよ。

02CHAPTER 02

UI・画面モックアップ作成AI 比較ランキング8選【2026年6月】

編集部が「画面生成の手軽さ・書き出し（Figma/コード）・無料枠・日本語・価格」の5基準で総合評価して、これから始める人〜チームで本格設計する人まで、幅広く勧めやすい順に並べたよ。料金・規約は変わることがあるから、最終的な可否は各公式サイトで確認してね。

料金のめやすをひと目で比較

「結局このタイプはいくらくらい？」を、月額（ドル）の目安をひとつのものさしに並べたよ。無料で始められるツールも多いから、まずどの価格帯で探すかを決めるとラクだよ。

無料で使える0ドル（無料・無料枠）
個人向け有料月7〜16ドル
本格・チーム月29〜48ドル

横軸は0〜月50ドル。上のランキングのうちドル表記の主要プランを月額の目安で並べたものだよ（席数課金・クレジット追加購入は含まないよ）。料金は2026年時点の目安で、最新は各公式で確認してね。

目的で絞り込み
比較
1

Figma（Figma Make / AI）

UI設計の世界標準。AI生成も取り込めて、共同編集と仕上げに強い

共同編集 ◎ 日本語 ◎ 書き出し Dev/コード
編集部おすすめチームの定番
UI/UXデザインの世界標準ツール。複数人で同じ画面を同時に編集でき、デザインシステムやプロトタイプまで一気通貫で扱えるよ。Figma Makeで文章からUIを生成したり、AIで部品やレイアウトを整えたりもできて、生成した初稿をそのまま仕上げ・入稿データに落とし込めるのが強み。Dev Modeはエンジニアへの受け渡し（コード参照）にも対応。無料のStarterから始められるよ。
4.8
料金無料(Starter) / Professional フルシート 月2,400円(年払い・月払い3,000円)・Devシート 月1,800円(月払い2,250円)・Collabシート 月450円(月払い750円)
無料枠無料のStarterプランあり（ドラフト数は無制限・AIクレジットは1日150／月500まで）。AI機能・Figma Makeを本格的に使うなら有料プラン
向く人チームで本格的に設計・共同編集
商用利用可（プラン規約に準拠）
日本語◎
おすすめ用途チーム設計の定番・仕上げまで
比較
2

Uizard

手描きやスクショを読み込んで、編集できるUIに変える定番AI

スクショ→UI ◎ 無料枠 あり 速さ 得意
手描き派の本命
AIでのUIデザインを早くから手がけてきたツールで、Autodesignerという機能が看板。文章はもちろん、紙の手描きラフや既存アプリのスクリーンショットを読み込んで、編集できるマルチ画面のUIに起こしてくれるよ。アイデアから複数画面のプロトタイプまで数分で形にできる速さが魅力。デザイン未経験でも触りやすく、FigmaやSVGへの書き出しにも対応しているんだ。
4.6
料金無料 / Pro 月12ドル(年払い) / Business 1クリエイター 月39ドル(年払い)
無料枠無料プランあり（月3回のAI生成・2プロジェクトまで）。Autodesignerを使い込むならPro
向く人手描き・スクショから一気にUI化
商用利用可（プラン規約に準拠）
日本語○（UIは英語寄り）
おすすめ用途ラフ・スクショからの高速たたき台
比較
3

Google Stitch（旧Galileo AI）

GeminiベースのUIジェネレーター（Google Labs）。文章からUIとコードを生成

料金 案内なし コード書き出し HTML エンジン Gemini
Google Labs
UI生成で人気だったGalileo AIがGoogleに加わって生まれ変わったツール。Geminiを使って、文章からアプリやWebのUIをデザインし、HTML/Tailwindのコードまで書き出せるよ。Google Labsの試験提供で、公式に料金や利用上限の案内は出ていないよ（使える量はログイン後の画面で確かめてね）。Pro modeではより高性能なモデルが使える。文章からUIのたたき台をどんどん作りたい人の入り口にぴったりだよ。
4.5
料金公式に料金の案内なし（Google Labsの試験提供・2026年10月時点）
無料枠料金・利用上限は公式の案内なし
向く人文章からUIのたたき台を作りたい
商用利用可（規約に準拠・自分で整える前提）
日本語○（日本語プロンプト可）
おすすめ用途文章からUI生成
比較
4

Visily

スクショ・テキスト・図からUIに。非デザイナーにやさしい

入力 多彩 無料枠 あり 図解 得意
非デザイナー向け
スクリーンショット・テキスト・手描きスケッチなど、いろんな入力からUIのモックアップやプロトタイプを作れるツール。テンプレートが豊富で、フローチャートや図も一緒に扱えるから、企画職やPMが画面イメージを素早く形にして共有するのに向いてるよ。無料プランから始められて、月のAIクレジットを使い切るならProへ。チームでのレビューもしやすいんだ。
4.4
料金無料 / Pro 1人月14ドル(年払いの額は公式に表示なし) / Business 月29ドル(1人あたり・年払い)
無料枠無料プランあり（月300 AIクレジット）。使い込むならPro
向く人スクショ・テキスト・図からUI化
商用利用可（プラン規約に準拠）
日本語○
おすすめ用途非デザイナーの素早いモックアップ
比較
5

UX Pilot

Figmaプラグインで高精細なUIをまとめて作成。画面フローも作れる

Figma連携 ◎ ハイファイ 得意 画面フロー あり
文章から高精細（ハイファイ）なUI画面を素早く生成できるツールで、Figmaプラグインとして使えるのが特徴。スクリーンフロー（画面遷移）の設計や、画像からのデザイン、セクション単位の編集にも対応していて、Figma上のコンポーネントを活かしながらデザインを進められるよ。無料でも毎日80クレジットぶん試せて、本格的に使うならプロやチームへ。デザインワークフローを一気に速めたい人向けだね。
4.3
料金無料（毎日80クレジット・カード不要） / プロ 月29ドル（年払いなら月19ドル） / チーム 1人あたり月39ドル（年払いなら月31ドル）
無料枠無料は毎日80クレジット・1日最大13画面（毎日補充・繰り越しなし・カード不要）。続けるならプロ（月750クレジット）かチーム
向く人Figmaと組み合わせて高速デザイン
商用利用可（プラン規約に準拠）
日本語○（英語UI）
おすすめ用途ハイファイ画面をまとめて作成・Figma連携
比較
6

Banani

テキストからUIを生成。シンプルで分かりやすいクレジット制

テキスト→UI ◎ 無料枠 あり 料金 明瞭
「予約アプリのカレンダー画面」みたいに文章で伝えると、編集できるUIをさっと作ってくれるツール。料金はクレジット制（1回の生成は内容によって1クレジットより多くかかることが多いよ）。無料でも月12クレジット＋毎日3クレジットの補充があるから、ちょっと試すぶんには困らないよ。シンプルにテキストからUIのたたき台を出して、関係者と画面イメージをすり合わせたいときに気軽に使えるんだ。
4.2
料金無料(月12クレジット) / Plus 月12ドル(年払い・月払い20ドル) / Pro 月30ドル(年払い・月払い50ドル)
無料枠無料は月12クレジット＋毎日3クレジットの補充。使い込むならPlus/Pro
向く人文章から手早くUIのたたき台
商用利用可（プラン規約に準拠）
日本語○
おすすめ用途テキストから素早くUI生成
比較
7

UXMagic

低価格で始められて、Figmaにそのまま渡せるUIジェネレーター

価格 年払いが割安 Figma-ready ◎ 無料枠 あり
文章からUIを作って、Figmaへそのまま渡せる形で書き出せるツール。Pro は月35ドル（月払い）で、年払いにすると月17.5ドル（年210ドル・50%オフ）になるから、コストを抑えてUI生成を試したい人にうれしいよ。無料でも毎日20クレジット（1日最大3画面）がカード不要で補充されるし、Pro なら月2,400クレジット・最大400画面ぶん作れる。
4.1
料金無料（毎日20クレジット・1日最大3画面） / Pro 月35ドル（月払い）または月17.5ドル（年払い・年210ドル＝50%オフ）で月2,400クレジット・最大400画面
無料枠無料は毎日20クレジット（毎日補充・カード不要・5プロジェクト）。継続はPro
向く人Figmaへ書き出す前提でUIを作りたい
商用利用可（プラン規約に準拠）
日本語○（英語UI）
おすすめ用途Figmaへ渡す前提のUI生成
比較
8

Relume

サイトマップから一気にワイヤーフレーム。Web制作向き

サイトマップ ◎ ワイヤー 大量生成 書き出し Figma/Webflow
Webサイトやランディングページのサイトマップ（ページ構成）からワイヤーフレームを一気に生成できるツール。膨大なセクションのライブラリを組み合わせて、ページの骨組みを素早く作れるよ。作ったものはFigma・Webflow・Reactへ書き出して仕上げる流れ。アプリ画面というよりWeb制作・LP設計の上流をスピードアップしたいチーム向けだよ。料金はやや高めだけど、Web案件をたくさん回す人には強い味方だね。
4.0
料金無料プランあり／Site Builder は Starter 月18ドル〜・Pro 月40ドル〜・Team 月36ドル〜（3ユーザー以上）
無料枠無料で試せる範囲あり。サイトマップ→ワイヤーフレームを本格的に使うならStarter/Pro
向く人Web/LPのサイト構成・ワイヤーから
商用利用可（プラン規約に準拠）
日本語○（英語UI）
おすすめ用途サイトマップ→ワイヤーフレーム

※ 評価は編集部による5基準（画面生成の手軽さ・書き出し・無料枠・日本語・価格）の総合判断だよ（2026年6月時点）。料金・無料枠・商用利用の条件は変わることがあるから、最終的な可否は各公式サイトの利用規約で確認してね。ドル表記は公表通貨のままだよ。

03CHAPTER 03

ランキングの評価基準（＝失敗しない選び方）

UI・画面モックアップ作成AIを選ぶときに迷いやすい5点を基準にしてるよ。あなたの目的でどれを重視するかを決めると、自分に合う1本が見つかるはず。

① 画面生成の手軽さ（入力のしやすさ）

文章・手描き・スクショなど、どこから作れるか。Uizard・Visilyはスクショ/手描きに強く、Google Stitch・Bananiは文章からが得意だよ。

② 書き出し（Figma・コード）

作ったUIを次工程へ渡せるか。Figma連携やHTML/コード生成があると、デザインと開発がつながるよ。UX Pilot・UXMagicはFigmaと相性◎。

③ 無料で使えるか

無料枠の有無と量。Uizard・Visily・Banani・UXMagicには無料プラン、Figmaにも無料Starterがあるよ。Google Stitchは公式に料金の案内が出ていないんだ。

④ 日本語・使いやすさ

日本語のプロンプトやUIに対応しているか。Figmaは日本語UIが充実。海外ツールは英語UIでも操作はやさしいものが多いよ。

⑤ 価格・チーム利用

個人で安く（UXMagic・Banani）か、チームで本格運用（Figma・Relume）か。席数課金かプラン課金かでも変わるよ。

04CHAPTER 04

目的別おすすめ早見表

「結局どれ？」を一発で。あなたの目的にいちばん合う1本はこれだよ。

チームで本格設計

共同編集・仕上げ・開発連携まで

推しFigma

定番の共同編集に、AI生成も取り込めて一気通貫だよ。

手描き・スクショから

ラフや既存画面をUI化したい

推しUizard

スクショや手描きを読み込んで数分でマルチ画面に。

文章から

お金をかけずにUIをたくさん作る

推しGoogle Stitch

Geminiで文章からUIとコードを。Google Labsの試験提供だよ。

非デザイナーが手早く

企画・PMが画面イメージを共有

推しVisily

スクショ・テキスト・図から、テンプレ豊富で作れるよ。

Figmaでまとめて作りたい

ハイファイ画面とフローを高速で

推しUX Pilot

Figmaプラグインで高精細UIと画面遷移をまとめて作成。

Web/LPの構成から

サイトマップ→ワイヤーフレーム

推しRelume

ページ構成から骨組みを一気に。Web制作の上流に。

05CHAPTER 05

料金・無料枠の比較と、商用利用の注意点

料金・無料枠のひと目比較

席数課金（Figma）やクレジット制も混ざるよ。金額は各社が日本向けに出している通貨のまま載せているから、ドル表示のものは支払い時のレートで円の金額が変わるんだ。代表的なプランを表でまとめたよ。最終的な金額・条件は各公式で確認してね（「◯年◯月時点」と書いてある行はその時点、書いていない行は2026年10月時点の目安）。

スマホでは表を横にすべらせると、右のほうまで見られるよ。

ツール無料枠代表的な料金向いてる用途
Figmaあり（Starterプラン）Professional フルシート 月2,400円（年払い・月払い3,000円）・Devシート 月1,800円チーム設計・定番
Uizardあり（上限あり）Pro 月12ドル（年払い）/ Business 1クリエイター 月39ドル（年払い）手描き・スクショから
Google Stitch公式に案内なし公式に料金の案内なし（Google Labsの試験提供・2026年10月時点）文章から
Visilyあり（AIクレジット）Pro 1人月14ドル（年払いの額は公式に表示なし）/ Business 月29ドル（1人あたり・年払い）非デザイナーの素早い作成
UX Pilotあり（毎日80クレジット）無料（毎日80クレジット・カード不要） / プロ 月29ドル（年払いなら月19ドル） / チーム 1人あたり月39ドル（年払いなら月31ドル）Figma連携・まとめて作成
Bananiあり（月12クレジット＋毎日3）無料(月12クレジット) / Plus 月12ドル(年払い・月払い20ドル) / Pro 月30ドル(年払い・月払い50ドル)テキストから手早く
UXMagicあり（毎日20クレジット）無料（毎日20クレジット・1日最大3画面） / Pro 月35ドル（月払い）または月17.5ドル（年払い・年210ドル＝50%オフ）で月2,400クレジット・最大400画面Figmaへ渡す前提の生成
Relume無料試用無料プランあり／Site Builder は Starter 月18ドル〜・Pro 月40ドル〜・Team 月36ドル〜（3ユーザー以上）Web/LPのワイヤー

商用利用と、作ったUIの扱い

商用利用っていうのは、仕事のアプリ・サービスの画面づくり、クライアントワーク、リリースする製品への使用みたいなビジネス・収益目的での使用全般のことだよ。多くのツールは有料プランで商用利用OKだけど、無料プランだと制限があることもあるから、納品や公開の前にプランの規約を確認してね。

仕事で本格運用するなら：チームの共同編集・デザインシステム・開発連携まで揃う Figma が安心だよ。AIで初稿をいくつも作りたいなら Uizard や Google Stitch で作ってFigmaへ渡し、仕上げる流れも使いやすいんだ。

UIをAIで作るとき、気をつけること

便利だけど、AIのUIには落とし穴もあるよ。次の3つを押さえると、安心して使えるよ。

  • 1そのままリリースしない（生成コードや画面は、操作の流れ・余白・実データを人が整えてから使う）
  • 2既存サービスの画面をマネしすぎない（人気アプリの「そっくり」は商標・著作権リスクや、ユーザーの混乱につながるよ）
  • 3社外秘の仕様・個人情報を一般向けAIにそのまま入れない（学習オフ設定や業務向けプラン、伏せ字での入力を）

06CHAPTER 06

初心者向け・使い方3ステップ

むずかしい設定はいらないよ。伝える／読み込む → 画面を整える → 書き出して仕上げるの3ステップで、最初のUIが作れるよ。

  1. 作りたい画面を伝える、またはラフを読み込む：生成タイプなら「家計簿アプリのホーム画面、明るい配色」のように文章で。変換タイプなら、手描きのラフや既存画面のスクショをアップロードしよう。
  2. 画面を見比べて整える：同じ条件でも雰囲気が変わるよ。「ボタンを大きく」「ダークモードで」みたいに条件を足したり、部品を入れ替えたりして、画面の流れ（遷移）も含めて好みに近づけよう。
  3. 書き出して仕上げる：気に入ったらFigmaへコピー、またはHTML/コードで書き出して、デザイナーやエンジニアが余白・文言・実データを整える。商用で使うなら規約も確認してね。

08CHAPTER 08

あわせて聞かれる質問（FAQ）

UI・画面モックアップ作成AIって何ができるの？

結論：「フードデリバリーアプリのホーム画面」みたいに文章で伝えたり、手描きのラフやスクショを読み込んだりすると、アプリやWebのUI画面・ワイヤーフレーム・モックアップをAIが自動で作ってくれるよ。配色やボタン、リストなどの部品が並んだ編集できる画面が出てくるから、設計のたたき台づくりがぐっと速くなるんだ。

無料で使えるUIデザインAIはある？

結論：Uizard・Visily・Banani・UXMagicには無料プランがあって（Google Stitchは公式に料金の案内が出ていないよ）、Figmaにも無料のStarterプランがあるんだ。無料は生成回数や保存数に上限があることが多いから、たくさん作るなら有料プランが快適だよ。

作ったデザインはそのまま開発に使えるの？

結論：多くのツールはFigmaへの書き出しや、HTML/CSS・コードの生成に対応しているよ。ただしAIが出すコードや画面は「たたき台」で、余白・文言・実データとのズレが残ることが多いんだ。そのままリリースせず、デザイナーやエンジニアが整えてから使うのが安心だよ。

ワイヤーフレームとモックアップ・プロトタイプって何が違うの？

結論：ワイヤーフレームは色や装飾を省いた「骨組み（配置の設計図）」、モックアップは配色や文字まで入れた「見た目の完成イメージ」、プロトタイプは実際にタップして画面が動く「触れる試作」だよ。多くのAIはこの3つを行き来できて、ラフ→清書→動く試作まで一気に進められるんだ。

Figmaと専用のUI生成AIはどう使い分ける？

結論：チームで本格的に設計・共同編集するならFigmaが定番で、Figma Makeなどで生成も取り込めるよ。一方、文章や手描きから一気に複数画面のたたき台を出したいときは、UizardやGoogle Stitchのような専用AIが速いんだ。専用AIで初稿を作ってFigmaへ書き出し、仕上げる流れも人気だよ。

UIデザインAIを使うときの注意点は？

結論：AIのUIはそれっぽく見えても、操作の流れや実データとのズレ、似たアプリへの寄りすぎが起きやすいよ。既存サービスの画面をそのままマネしないこと、社外秘の仕様や個人情報を一般向けAIにそのまま入れないことが大切。最後は人が使いやすさ（UX）とアクセシビリティを確認してから進めてね。