UIデザイン生成AIを使ってみる – ｢Uizard｣編

こんにちは。UIデザイナーのカヒブンです。

以前のブログで、AIを使ってUIページを生成することについて書きました。その中で、Galileo AI、Uizard、ChatGPTを紹介しました。実際にGalileo AIを操作した成果や感想については、こちらのブログ記事をご覧ください。今回は実際にUizardを使用して、このツールが現状のUIデザイン業務にどの程度役立つかを確認してみようと思います。

まず、｢Uizard｣とは？

Uizardは、テキストやスクリーンショットを送信するだけで、AIがUIデザインを自動生成してくれるツールです。このツールを活用することで、短時間でモックアップやワイヤーフレームなどのUIデザインを効率的に作成することが可能です。

｢Uizard｣を実際に触ってみた

Uizardでは、下記3つの方法でUI画面が生成できます。

テキストからUIデザインの自動生成（Generate with Autodesigner）

Uizardは「自然言語処理」技術を使い、ユーザーが入力したテキストを基に自動的にUIを生成します。たとえば、「ログインページを作成」という指示を入力すれば、Uizardはそれに応じたログイン画面のデザインを提案します。これにより、デザイン経験が少ない人でも、簡単にプロトタイプを作成できます。Galileo AIとは異なり、Uizardはデスクトップやスマートフォンのページデザインに加えて、タブレットのページデザインもサポートしています。

やってみよう
飲食業向けの求人アプリを作成してもらいました。Galileo AIとは異なり、テキストを入力した後、すぐにデザインが生成されるわけではなく、まずデザインスタイルを選ぶように聞いてくれました。そこで、私は試しにTabelogのURLを入力してみました。果たしてどのような結果が得られるのでしょうか？

生成結果

感想
いかがでしょうか。個人的には非常に驚きました。まず、Galileo AIとUizardの両方を使った際、どちらもページ数を指定しなかったのですが、Galileo AIは1ページしか生成されなかったのに対して、Uizardは9ページも生成してくれました（ただし、そのうち5ページしか編集できません。5ページを超えるとメンバーシップのアップグレードが必要です）。また、この9ページは、求職アプリに必要な基本的な機能をほぼカバーしていました。さらに、デザインスタイルについても、事前に希望するスタイルを選ぶことができたため、結果はほぼ期待通りのものでした。

イメージからUIデザインの自動生成（Start from sreenshot）

Uizardのもう一つの機能が、スクリーンショットをAIが自動的にデジタルデザインに変換する機能です。

やってみよう
スクリーンショットをUizardの選択肢から選んでアップロードしました。また、スマートフォンで撮影したスクリーンショットをアップロードしたい場合は、画面右側に表示されるQRコードをスマートフォンで読み取ることで、直接Uizardにスクリーンショットをアップロードすることができます。

生成結果
約1分ほどでデザインの生成が完了しました。

感想
Uizardは画像を完璧にレイヤー付きの、編集可能なデザインファイルに変換してくれました。残念ながら、UizardではデザインファイルをFigmaにインポートする方法が見つかりませんでした。これにより、デザイナーにとってはこのソフトを使いこなすための学習コストが増えてしまうかもしれませんので、デザイナーにとって少し不便に感じます。Uizardには独自のデザイン編集ツールがあるため、おそらく自社のデザインプラットフォームを利用することを推奨しているのかもしれません。

もう一つおすすめされている機能は、スケッチからUIページやワイヤーフレームを生成する機能です。私は試しにインターネット上で見つけた白黒の手描きのログインページのワイヤーフレームをアップロードしてみましたが、生成された結果はあまり理想的ではありませんでした。手描きのワイヤーフレームが精密でなかったのか、この機能がまだベータ版だからかは分かりませんが、期待していた結果を得ることはできませんでした。ただ、個人的には、紙とペンを使って手描きのワイヤーフレームを作成するよりも、デザインソフトを使ってワイヤーフレームを作る方が効率が良いと感じます。現代のUX/UIデザイナーで、手描きのワイヤーフレームを作る人はどれくらいいるのでしょうか。

テンプレートから作成（Start from template）

テンプレートの種類は豊富で、デスクトップ、タブレット、スマートフォン向けに分かれています。ただし、これらのテンプレートはすべて無料ではないので、まずは機能を試してみたい場合は、無料のテンプレートを選ぶことをお勧めします。そして「Use this template」をクリックすると、数秒後に編集可能な画面が生成されます。他の機能と同様に、テンプレートから生成されたページもFigma形式に変換できないのが残念ですね。

リアルタイムコラボレーション

Figmaのように、Uizardもリアルタイムコラボレーション機能を提供しています。チームメンバーは同時にプロジェクト上で作業することができ、デザインの修正、コメントの追加、フィードバックのやりとりが即座に行えます。これにより、リモートチームや複数の部署が関わるプロジェクトでもスムーズにコミュニケーションを取ることができます。

最後に

個人的な感想ですが、Uizardはデザイナーが使うというより、デザイナーが不足しているプロダクトや開発チーム向きだと思います。テキストやスクリーンショットを送信して、Uizardに希望するデザインのイメージを伝えることで、ある程度の良い結果を得られるかと思いました。

今回の記事では、Uizardの使い方と現状のUIデザイン業務にどの程度役立つかの感想を紹介しました。最後までお読みいただきありがとうございました！