テキスト入力だけでUIデザインができる！有料版 Uizard AutoDesigner betaの驚きの機能と使い方を紹介

AIサービスを毎日使っていくWebデザイナーです。こんにちは。 今日は巷で有名になってきている基本無料のUI作成アプリ Uizard のサービスでその中にAI機能が搭載されたみたいなので１ヶ月のつもりが１年で契約してしまったおばかさんな私の有料級レビューになります。

Uizard とは

AIを使ったアプリ、ウェブ、UIデザインツールのことです。Uizardでは、手書きのスケッチやテキストから簡単にデザインを生成したり、ドラッグアンドドロップでデザインを編集したり、コードに変換したりできます。Uizardの有料機能の一つが、Autodesignerです。Autodesignerとは、テキストからデザインを自動生成するAI機能のことです。Autodesignerでは、アプリやウェブサイトのアイデアをテキストで入力するだけで、複数の画面からなるデザインを生成できます。 今回はそのAutoDesigner という他気になる優良機能を徹底的にレビューしてみなさんが必要かどうかしっかり見極めてください。

無料でどんなことができるのか？

基本的なことは無料でもできるが回数制限があるっぽい。

手書きのスケッチやスクリーンショットからデジタルのデザインに変換する機能です。紙に描いたアイデアや他のアプリやウェブサイトの画面をスキャンするだけで、Uizardで編集できるデザインに変換できます。

ドラッグアンドドロップでデザインを編集する機能です。Uizardには多数のテンプレートやコンポーネントが用意されており、自由に配置や変更ができます。また、画面間のインタラクションも設定できます。

デザインをコードに変換する機能です。Uizardでは、作成したデザインをHTML/CSSやReact Nativeなどのコードに変換してダウンロードできます。 Uizardの無料の機能では、最大3つのプロジェクトを作成でき、各プロジェクトには最大10枚の画面を作成できます12。また、Autodesignerというテキストからデザインを自動生成するAI機能は、有料プランでしか利用できません

Uizardの無料の機能は、AIを使ったデザインツールを試してみたい人や、簡単なプロトタイプを作成したい人におすすめです。Uizardに登録すればすぐに無料で使うことができます。

この外人さんが色々と喋ってますがとりあえず画面みたい人はどうぞ。

Uizard Auto Designer は実戦向きか？

結論言っちゃいますw 案件によるです。以上。
ではなぜ案件によるか？というところを具合的に機能に関しての説明を詳細に記していきます。

Autodesigner

テキストからデザインを自動生成するAI機能です。Autodesignerでは、アプリやウェブサイトのアイデアをテキストで入力するだけで、複数の画面からなるデザインを生成できます。生成されたデザインはUizardで編集できます。 例えばこんな感じです。(実際は生成している時間は１分もかかりません)

パターン１

Which device are you designing for? (使用するデバイス) Mobile

Describe your project in plain English(プロジェクトイメージ) Dating app for people with magical powers

Describe a design style, pick keywords, or both(デザインスタイルの説明、キーワードの選択) Pink vibrant startup style

キーワードの選択 Light,Artsy

パターン２

Which device are you designing for? (使用するデバイス) Mobile

Describe your project in plain English(プロジェクトイメージ) A booking app to rent vacation homes for parties

Describe a design style, pick keywords, or both(デザインスタイルの説明、キーワードの選択) Green in dark mode

キーワードの選択 Dark,Elegmant

パターン３

Which device are you designing for? (使用するデバイス) Mobile

Describe your project in plain English(プロジェクトイメージ) A social media app for gamers

Describe a design style, pick keywords, or both(デザインスタイルの説明、キーワードの選択) Like Facebook but purple

キーワードの選択 Tech,Young

パターン４

Which device are you designing for? (使用するデバイス) Desktop(Web)

Describe your project in plain English(プロジェクトイメージ) A landing page for a business that provides supply chain services for messenger pigeons

Describe a design style, pick keywords, or both(デザインスタイルの説明、キーワードの選択) Serious and classic

キーワードの選択 Coporate,Elegant

デザインに注目される部分をヒートマップで表示する機能です。Focus Predictorでは、デザインに画像をアップロードすると、AIが視線の動きを予測してヒートマップを生成します。これにより、デザインの強みや弱みを発見したり、改善点を見つけたりできます。

テキストから画像を自動生成する機能です。Image Generatorでは、テキストで画像の内容やスタイルを指定すると、AIがそれに合った画像を生成します。これにより、デザインに必要な画像を簡単に作成したり、インスピレーションを得たりできます。

デザインをワイヤーフレームに変換する機能です。Wireframe Modeでは、デザインの詳細や色彩を無視して、レイアウトや構造に注目できます。これにより、デザインの全体像やバランスを確認したり、フィードバックを受けたりできます。

画像やURLからUIテーマを自動生成する機能です。Theme Generatorでは、画像やURLを入力すると、AIがそれらから色やフォントなどのUIテーマを生成します。これにより、デザインに統一感や魅力を与えたり、ブランドイメージに合わせたりできます。

スクリーンショットから編集可能なデザインに変換する機能です。Screenshot Scannerでは、アプリやウェブサイトのスクリーンショットをアップロードすると、AIがそれらをUizardで編集できるデザインに変換します。これにより、既存のUIデザインから学んだり、アイデアを発展させたりできます。

手書きのワイヤーフレームから編集可能なデザインに変換する機能です。Wireframe Scannerでは、紙に描いたワイヤーフレームをスキャンすると、AIがそれらをUizardで編集できるデザインに変換します。これにより、手軽にアイデアを形にしたり、素早くプロトタイプを作成したりできます。

デザインにテキストを自動生成する機能です。Text Assistantでは、テキストの種類や内容を指定すると、AIがそれに合ったテキストを生成します。これにより、デザインに必要なテキストを簡単に作成したり、コピーライティングの参考にしたりできます。

ザインに画像を自動生成する機能です。Image Assistantでは、画像の種類や内容を指定すると、AIがそれに合った画像を生成します。これにより、デザインに必要な画像を簡単に作成したり、ビジュアルデザインの参考にしたりできます。

結局使えるのか？

総括としてはプランナーだったり、簡単なアイデア出しに使えるという印象でこれをのまま使ってクライアントに提出してOKとはいかないだろう。今回触ってみて経験年数２０年以上のデザイナーとしての意見をまとめておく。

改善してほしい点

やはりAIの生成制度によるもので特定の単語やセンテンスでそのテンプレートコンポーネントを配置しているだけのような気がします。ですので特定の単語を使うと同じテンプレートや色違いしか生成ができないので、このAIの精度を上げて複雑な要望に応えれるようにしてほしい。個人的には余白なども設定できると嬉しい。

日本語が対応していないので崩れることがある。

こだわって作るデザインには向いてない

生成した UI デザインを書き出すのが画像系(PNG/JPG/PDF)しかできないので Sketch や Figma XD その他のUIツールにも対応してほしい。(有料版だけでもいいと思う)

良い点

簡単にぱぱっとデザインのヒントを探したい人にはピッタリ

初心者でも使いやすいので何かのきっかけになりそう

時短でサクッとできる

ヒートマップなど解析ツールも使えるので他のデザインも参考になる

デザインテンプレートが豊富

最後に

基本的には無料でも使い倒せるし、現役デザイナーとしてはアイデアや既存の競合をチェックする時にAIじゃなくてもデザインテンプレートを拝見することができます。それをそのまま資料として使うこともプロであれば簡単なはずです。今後是非ともアップデートして革命を起こしておほしいな！

以上がUizardの機能についての説明です。Uizardの機能を使って、デザインのプロセスを効率化し、創造性を高めましょう！ 次回は完全無料でAI生成してくれるWebデザインアプリのレビューをします。