コラボレーター
SELECK

【厳選8つ】UIもコードも一瞬で！実務で使える「生成AI×デザインツール」まとめ

公開日：2025 年 10 月 2 日

ロゴ生成、画像編集、UI・UXデザインまで、デザイン業務を支援するAIツールが続々と登場しています。

「AIと対話しながら瞬時にアイデアを形にできる」ツールへと進化したことで、非デザイナーでも手軽にデザインを生成できるようになり、活用の幅が大きく広がっています。

AdobeやCanva、Figmaなど大手企業も参入し、その市場規模も急拡大。2025年の生成AIデザインツール市場は約61億米ドル、2035年には285億米ドルに達するという予測もあります。

とはいえ、「結局、どれが最も業務に使えるの…？」「非デザイナーでも使いやすいものはどれ？」と悩んでいる方も多いのではないでしょうか。

そこで今回は、生成AIを搭載したデザインツールを8つご紹介します！使用感なども併せてお伝えしていますので、気になるものがあれば、ぜひ実際に使ってみてくださいね。

＜目次＞

Figma連携でデザインシステムを活用可能「Figma Make」
40以上のサービスと連携！機能付与が簡単「Anything」
Googleが開発中のUI・コード生成ツール「Stitch」
まるでFigmaのような使い心地！デプロイまで可能な「Onlook」
プロンプトから思考・計画・修正まで自律的に実行「v0」
テンプレートの豊富さやデザイン性の高さが魅力「Aura」
画像生成・編集からモック作成まで超簡単「Recraft」
AIエージェント主導でブランドを構築「Lovart」

※本記事に掲載している情報は、記事公開時点のものになります。各ツールのアップデートにより情報が記事公開時と異なる可能性がございますので予めご了承ください。最新の情報については、各ツールの公式サイトをご参照ください。また、記事の内容についてご意見や修正のご提案がございましたらこちらまでお願いします。

1.Figma連携でデザインシステムを活用可能「Figma Make」

「Figma Make」は、テキストプロンプトからアプリを制作できる、Figmaに搭載されたAIツールです。2025年7月から正式に提供がスタートし、デザインとエンジニアリングの垣根を越える画期的な機能としてモック話題となりました。

自然言語でのプロンプト入力に対応しており、「こういうユーザーダッシュボード画面を作りたい」と伝えるだけで、プロトタイプから実際に動作するコードまで簡単に作ることができます。生成されたモックはAIと対話しながら要素を追加・修正できます。

また、Figma上で作成した既存のデザインやコンポーネント、コミュニティの素材なども活用できるため、デザインシステムを維持したままコンテンツを生成できるのも嬉しいポイントです。

生成されたコードはタブを切り替えて直接確認・編集でき、ダウンロードしてすぐに動作を確認できます。Web上に公開してURLで共有し、チーム間での作業もスムーズに行えます。

Figma Makeは、無料のStarterプランを含むすべてのユーザーが利用できます。試しに、無料の範囲内で機能を使ってみました！

Figma Makeのページを開き、画面中央に表示されている「データダッシュボード」をクリック。

すると、たった1、2分でこちらのダッシュボードが完成！さすがFigma、シンプルながら見やすいダッシュボード画面が生成されました。

生成したモックは、ワンクリックでデスクトップ版・モバイル版での表示を切り替えられます。

モバイル版に関しては、Android、iPhoneのそれぞれで複数の型番が用意されており、実機での表示確認もスムーズです。

モックが完成したら、画面上部の「Code」でコードを確認できます。無料プランでもコードのダウンロードまでは利用できるようです。

注意点として、このデザインレイヤーをFigmaの作業画面にコピーする機能に関しては、Professionalプランへの変更が必要とのこと。すでにFigmaを使いこなしている人も、これからデザインを始めようとツールを探されている方にも、ぜひ一度試していただきたいツールです。

2.40以上のサービスと連携！機能付与が簡単「Anything」

「Anything（旧：create）」は、テキストプロンプトからWebサイトやアプリを生成できるノーコード／ローコードAIプラットフォームです。2025年8月に「create」からリブランディングし、AIエージェント機能やモバイルアプリ自動生成、外部API連携などの機能が追加されました。

「Turn your words into sites, tools, apps and products — built with code.」というキャッチコピーが示すように、デザイン生成だけでなく、コードの自動生成と機能の自動付与により、すぐに実行可能なアプリケーションの作成を目指しています。豊富なテンプレートが用意されており、非デザイナーでも簡単に始められます。

利用できるAIモデルも多様で、GPT-4o、Claude 3.5 Sonnet、Stable Diffusionなどから、生成スタイルや精度に応じて切り替えできます。さらに、40以上のサービスとのAPI連携により、認証や支払い機能といったものも迅速に組み込めるのも大きなメリットです。

実際に、Anythingを使ってみました！TOPページにいくつかのテンプレートが用意されており、気になるものがあればそれをベースにWebページを作成できます。

今回は試しに、「Create a visually-driven tourism website showcasing the beauty of Hokkaido, Japan」と入力。待つこと約3分、本格的なWebサイトが生成されました…！

コードの切り替えもワンクリックででき、この画面上で直接編集できます。

せっかくなので、アプリ生成機能も使ってみましょう！「地域住民が情報をシェアするアプリを生成したい」と英語で入力してみました。

5分ほど待つと、アプリが生成されました！専用のアプリ「Expo Go」をダウンロードすると自分のスマホで動作を確認できるとのこと。これもまた便利な機能ですね…！！！

生成されたコンテンツはプロジェクトごとに保存され、名前を変更したり、他のユーザーを招待して共同編集したりといったことも可能です。

3.Googleが開発中のUI・コード生成ツール「Stitch」

「Stitch」は、Googleが開発中のUIデザイン・コード生成AIツールです。自然言語でプロンプトを入力するだけで、デザインとフロントエンドコードを生成できます。

Gemini 2.5 Proのマルチモーダル機能を活用しており、テキストプロンプトだけでなく、スケッチやモックアップなどの画像形式でも指示を出せます。例えば、紙やホワイトボードに手書きしたスケッチなどをアップロードし、それらを基にデザインを生成することが可能です。

事前にサイト全体の色使いやフォントなどを指定しておくと、AIがすべてのコンポーネントに自動で適用してくれるため、ブランドの一貫性を保ったデザイン生成も可能です。HTMLやCSSでのエクスポートに対応しているほか、生成されたデザインはFigmaに直接貼り付け可能で、既存のデザインシステムとの統一も図れます。

Stitchは2025年10月時点でベータ版として無料で公開されており、誰でも利用できますが、正式にローンチされた後に有料化される可能性もありますので、ぜひ早めに機能を試してみてくださいね。

それでは、Stitchを試してみようと思います！Googleアカウントでログインすればすぐ利用できます。生成時は、モバイル・ウェブのそれぞれに切り替えて利用できます。

▼Stitchのデザイン生成画面

試しに、ウェブを選択して先ほどと同じく「Create a visually-driven tourism website showcasing the beauty of Hokkaido, Japan」と入力してみました。すると、画面左側のボックスでページ構成を提案してくれました。問題なさそうなので「ok」と伝えます。

待つこと約2分、ページが完成しました！ここからさらにAIとチャットしながらデザインを整えたり、テーマカラーやフォントなどを変更していきます。

さらに、メニューの「Create variants」をクリックすると、他のデザインアイデアを一気に5つほど提示してくれました！イメージをうまく言葉で伝えられなくても、視覚的に選べるのが便利ですね！

コードボタンをクリックすると、以下のようにコードが表示されます。エディタに貼り付けずとも、この画面上で直接編集が可能です。

4.まるでFigmaのような使い心地！デプロイまで可能な「Onlook」

「Onlook」は、ReactやNext.js、Tailwind CSSなどのプロジェクトを編集できるビジュアルコードエディタツールです。

直感的なインターフェースで、視覚的に編集した内容が即座にコードに反映されるのが大きな特徴で、デザインと実装の連携性を高めてくれます。

エディタ画面はFigmaのようなレイアウトで、中央にキャンバス、左側にレイヤーパネル、右側にAIチャット欄が配置されています。レイヤーパネルには、実際のHTML要素が階層表示されるため、デザインとコードの構造がわかりやすいのも嬉しいポイントです。

ドラッグ＆ドロップの操作や、余白・カラー・フォントなどの調整もすべてGUI上で完結でき、デザインを確認しながら、実際の挙動をリアルタイムで修正できます。事前にテーマやブランドアイデンティティを設定すれば、プロジェクト全体に自動で反映させることも可能です。

さらに、Onlookで生成したデザインは、ワンクリックでVSCodeに出力し編集できるほか、そのままデプロイして公開することも可能です。

無料でも基本機能は利用できますが、AIとのメッセージ数やプロジェクト数に制限があります。有料プランは月額25ドルのProプランからで、プロジェクト作成数が無制限になるほか、チームでの共同作業といった機能が開放されます。

実際に、Onlookを使ってみましょう！先ほども使用した「地域住民が情報をシェアするアプリを生成したい」という旨のプロンプトを入力してみます。すると、まずは「Welcome to your app」という文字が表示されました。

そして、待つこと約2分。生成されたアプリがこちらです！

画面左側の「レイヤー」をクリックすると、コンポーネント別に修正できます。まさにFigmaのような使い心地です…！

また、Onlookの特徴として、修正したいパーツを選んだ上でAIとチャットできるという点が挙げられます。こちらも非常に便利ではないでしょうか…！？

Onlookではその場でデプロイして公開することもできます。公開時には、既存のドメインに紐づけることも可能です。これも便利な機能ですね！

5.プロンプトから思考・計画・修正まで自律的に実行「v0」

「v0」は、テキストプロンプトからUI・コードを生成できるAIツールで、ReactコンポーネントやTailwind CSSベースのUIを生成できます。

その最大の特徴は、ユーザーの指示実行に留まらず、自律的に思考・計画・修正まで行う点です。コードの提案からバグ検出まで行い、ユーザーと協力しながらタスクを段階的に完了させます。

そのため、「こんなアプリを作りたい」というイメージを自然言語で伝えるだけで、デプロイまで効率的に実行でき、非デザイナー・非エンジニアの方でも、自由自在にアイデアを形にできるのが魅力です。

さらに、Figmaのデザインファイルを取り込んでコード生成・反映する機能も備わっており、エンジニアとデザイナーの架け橋としての役割も果たしてくれます。

v0は複数のプランが用意されており、無料プランもあります。無料プランは生成回数に制限がありますが、v0の機能を十分に体験できるので、まずは試してから必要に応じて有料プランへの移行を検討すると良いでしょう。

それでは、v0を使ってみようと思います！まず、ダッシュボード画面はこのような形です。

プロンプト入力時に、デザインシステム（テーマカラーなど）の選択が可能なのですが、既存のものから選択、あるいは自身で新しく作成できます。

なお、既存のデザインシステムをカスタマイズすることも可能です。

画面左メニューの「Templates」をクリックすると、アプリやゲーム、ランディングページ、ダッシュボードなどカテゴリ別にテンプレートも用意されていますので、これらを参考にしながらイメージを膨らませても良いですね。

今回も先ほど記入した「地域住民が情報をシェアするアプリを生成したい」という旨のプロンプトを入力してみます。v0は日本語でのプロンプト入力にも対応しています。

待つこと約1分。完成したアプリがこちら！シンプルながら、情報シェアには十分な機能を実装してくれているように思います。

ワンクリックで表示を切り替え、コードも確認できます。

生成したコンテンツは、GitHubに接続したり、そのままデプロイして公開することも可能です。

掲示板に投稿することの有効化や、削除機能を付与するといった細かい調整は必要ですが、最初のアイデア出しとしては十分な内容ではないでしょうか？

公開後はアナリティクス機能を用いて、何人がサイトに訪問したのかなどの数字も確認できます。

6.テンプレートの豊富さやデザイン性の高さが魅力「Aura」

「Aura」はテキストプロンプトからUIデザインを生成できるツールで、テンプレートの豊富さやデザイン性の高さが魅力です。

レスポンシブ対応もされており、デスクトップ・モバイル・タブレットなど、実機での表示を確認しながらリアルタイムでデザインを修正していくことが可能です。

生成したデザインはHTML・CSSとしてそのまま利用できるのはもちろん、Figmaに反映できる形式でもエクスポートできるため、既存のデザインワークフローにもスムーズに統合できます。

デザインテンプレートにはモーションやアニメーション要素も含まれており、静的なモックにとどまらず、動きのある高品質なプロトタイプを手軽に生成できるのが嬉しいポイント。細部にまでこだわったデザインを短時間で生成できます。

料金プランは、1日5回までAIとやりとりができる無料プランが用意されており、まずは使用感を試すことができます。Figmaへのエクスポートは有料プラン限定の機能ですが、HTML形式でのコピーは無料プランでも利用可能なため、コスト面でも安心して始められます。

実際に、Auraを使ってみましょう！TOPページを開くと、まず目に入るのは様々なテンプレート。これを見るだけでも、デザイン性の高さがうかがえますね。

アウトプットのデザインを比較するため、今回も「Create a visually-driven tourism website showcasing the beauty of Hokkaido, Japan」と入力してみます。

入力ボックスの一番左にある「Prompt Builder」では、レイアウトやフレーミング、スタイル、アクセントカラー、背景色、アニメーション、フォントなどを事前に細かく設定できます。

ひとまず何も設定を加えずに、プロンプトを入力してみました。待つこと約5分、Webサイトが生成されました！これはなかなかハイセンスなサイトではないでしょうか…？！

コードの切り替えもワンクリックで簡単です。プレビューをみながらコードの修正ができるのも嬉しいポイントですね。

7.画像生成・編集からモック作成まで超簡単「Recraft」

「Recraft」は、プロンプトベースで画像を生成・編集できるAIプラットフォームです。写実的な画像からイラスト、アート調まで、幅広いスタイルの画像を高品質に生成できる点が大きな特徴です。

生成した画像をその場で編集できるのもRecraftならではの嬉しいポイント。アスペクト比の調整、色調補正、コントラストの調整など基本的な編集機能はもちろん、画像へのテキスト合成、背景除去、モックアップ作成…などなど、非常に幅広い機能が備わっており、画像生成から編集までRecraftだけで完結します。

無限キャンバス形式やレイヤー・フレーム構造のUIを採用し、ユーザーが構造的な編集を行いやすくなっている点も特徴です。複数のアセットを一つのキャンバス上で管理しながら、効率的にデザインができます。

デザイナーやクリエイターの方にとって嬉しい機能が、「ベクター画像」としてダウンロードできる点でしょう。生成した画像をIllustratorなどで直接編集できるため、プロンプトだけでは難しい細かい調整も思いのままです。

Recraftは無料プランも用意されています。毎日クレジットが付与されるので、簡単な画像生成や編集であれば、無料プランでも十分に利用できるかと思います。しかし、商用利用の場合は有料課金が必要です。

それでは、Recraftを試してみましょう！まず、無限キャンバスの作業画面はこのような形。

画面左側のボックスには「Image」「Frame」「Image set」「Mockup」「Import image」「＋Stuyle」の6つのメニューが表示されており、ここから利用用途に合わせて画像を生成できます。