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

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

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

平均閲覧時間：約9分

  • 01迷ったら上位3つ — Figma（チーム・定番）、Uizard（手描き・スクショから）、Google Stitch（完全無料・文章から）
  • 02無料で試せる — Google Stitch・Uizard・Visily・Banani・UXMagic は無料で使える（Figmaも無料Starterあり）
  • 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
比較
2

Uizard

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

スクショ→UI ◎ 無料枠 あり 速さ 得意
手描き派の本命
AIでのUIデザインを早くから手がけてきたツールで、Autodesignerという機能が看板。文章はもちろん、紙の手描きラフや既存アプリのスクリーンショットを読み込んで、編集できるマルチ画面のUIに起こしてくれるよ。アイデアから複数画面のプロトタイプまで数分で形にできる速さが魅力。デザイン未経験でも触りやすく、FigmaやSVGへの書き出しにも対応しているんだ。
4.6
比較
3

Google Stitch（旧Galileo AI）

Geminiベースの無料UIジェネレーター。文章からUIとコードを生成

料金 完全無料 コード書き出し HTML エンジン Gemini
無料で始めやすい
UI生成で人気だったGalileo AIがGoogleに加わって生まれ変わったツール。Geminiを使って、文章からアプリやWebのUIをデザインし、HTML/Tailwindのコードまで書き出せるよ。2026年6月時点ではGoogleアカウントだけで完全無料に使えて（1日ごとの生成クレジット上限あり）、Pro modeではより高性能なモデルが使える。お金をかけずにUIのたたき台をどんどん作りたい人の入り口にぴったりだよ。
4.5
比較
4

Visily

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

入力 多彩 無料枠 あり 図解 得意
非デザイナー向け
スクリーンショット・テキスト・手描きスケッチなど、いろんな入力からUIのモックアップやプロトタイプを作れるツール。テンプレートが豊富で、フローチャートや図も一緒に扱えるから、企画職やPMが画面イメージを素早く形にして共有するのに向いてるよ。無料プランから始められて、月のAIクレジットを使い切るならProへ。チームでのレビューもしやすいんだ。
4.4
比較
5

UX Pilot

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

Figma連携 ◎ ハイファイ 得意 画面フロー あり
文章から高精細（ハイファイ）なUI画面を素早く生成できるツールで、Figmaプラグインとして使えるのが特徴。スクリーンフロー（画面遷移）の設計や、画像からのデザイン、セクション単位の編集にも対応していて、Figma上のコンポーネントを活かしながらデザインを進められるよ。無料で約15画面ぶん試せて、本格的に使うならStandardやProへ。デザインワークフローを一気に速めたい人向けだね。
4.3
比較
6

Banani

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

テキスト→UI ◎ 無料枠 あり 料金 明瞭
「予約アプリのカレンダー画面」みたいに文章で伝えると、編集できるUIをさっと作ってくれるツール。1クレジット＝1生成・1編集という分かりやすい料金で、無料でも月20クレジット＋毎日の補充があるから、ちょっと試すぶんには困らないよ。シンプルにテキストからUIのたたき台を出して、関係者と画面イメージをすり合わせたいときに気軽に使えるんだ。
4.2
比較
7

UXMagic

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

価格 安い Figma-ready ◎ 無料枠 あり
文章からUIを作って、Figmaへそのまま渡せる形で書き出せるツール。月7ドルからと価格が手ごろで、まずコストを抑えてUI生成を試したい人にうれしいよ。無料の30クレジットでカード不要のお試しもできるし、Premiumなら約80画面、Ultimateなら約250画面ぶん作れる。年払いで最大3割ほどお得になるから、継続して使うなら年プランも検討してね。
4.1
比較
8

Relume

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

サイトマップ ◎ ワイヤー 大量生成 書き出し Figma/Webflow
Webサイトやランディングページのサイトマップ（ページ構成）からワイヤーフレームを一気に生成できるツール。膨大なセクションのライブラリを組み合わせて、ページの骨組みを素早く作れるよ。作ったものはFigma・Webflow・Reactへ書き出して仕上げる流れ。アプリ画面というよりWeb制作・LP設計の上流をスピードアップしたいチーム向けだよ。料金はやや高めだけど、Web案件をたくさん回す人には強い味方だね。
4.0

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

03CHAPTER 03

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

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

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

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

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

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

③ 無料で使えるか

無料枠の有無と量。Google Stitchは完全無料、Uizard・Visily・Banani・UXMagicにも無料プラン、Figmaにも無料Starterがあるよ。

④ 日本語・使いやすさ

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

⑤ 価格・チーム利用

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

04CHAPTER 04

目的別おすすめ早見表

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

チームで本格設計

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

推しFigma

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

手描き・スクショから

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

推しUizard

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

完全無料で文章から

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

推しGoogle Stitch

Geminiで文章からUIとコードを。今は完全無料だよ。

非デザイナーが手早く

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

推しVisily

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

Figmaでまとめて作りたい

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

推しUX Pilot

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

Web/LPの構成から

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

推しRelume

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

05CHAPTER 05

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

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

多くがドル月額だけど、席数課金（Figma）やクレジット制も混ざるよ。代表的なプランを表でまとめたよ。最終的な金額・条件は各公式で確認してね（2026年6月時点の目安）。

ツール無料枠代表的な料金向いてる用途
Figmaあり（Starterプラン）Professional フルシート 月16ドル（年払い・月払い20ドル）・Devシート 月12ドルチーム設計・定番
Uizardあり（上限あり）Pro 月12ドル（年払い・月払い19ドル）/ Business 1クリエイター 月39ドル手描き・スクショから
Google Stitch完全無料完全無料（2026年6月時点・有料は今後予定）無料で文章から
Visilyあり（AIクレジット）Pro 月11ドル（年払い・月払い14ドル）非デザイナーの素早い作成
UX Pilotあり（約15画面）Standard 月14ドル / Pro 月29ドルFigma連携・まとめて作成
Bananiあり（月20クレジット）Plus 月12ドル（年払い・月払い20ドル）/ Pro 無制限テキストから手早く
UXMagicあり（30クレジット）Premium 月7ドル〜 / Ultimate（年払い最大30%off）低価格・Figma-ready
Relume無料試用Starter 月38ドル / Pro 月48ドル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/コードで書き出して、デザイナーやエンジニアが余白・文言・実データを整える。商用で使うなら規約も確認してね。

07CHAPTER 07

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

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

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

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

結論：Google Stitchはいまのところ完全無料（Googleアカウントだけ）で使えるよ。Uizard・Visily・Banani・UXMagicにも無料プランがあって、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）とアクセシビリティを確認してから進めてね。