UI画面生成AI「Uizard」でデザイナーいらず？業務の最前線で使ってみた
こんにちは。CXデザイナー事業本部のスギヤマです。普段はモバイルアプリケーションやLINEアプリケーション開発に携わっております。
「Uizard」は、デンマーク コペンハーゲンのソフトウェア企業が開発しました。AIを利用したUIデザインツールで、ワイヤフレーム、モックアップ、プロトタイプを短時間で作成することが出来ます。手書きスケッチもワイヤフレームに変換し、簡単にプロトタイプ化すること出来ます。
以前から、「手書きのUIスケッチを美しい画面デザインに変換してくれるサービス」として話題だった「Uizard」ですが、昨今の生成AIの機能を搭載した「Generate with Autodesigner」サービスがBeta版としてリリースされました。
ボタン一つで思い通りのUI画面が作成できるとなれば大変なことです！早速、デザインの現場で使ってみました。（英語は翻訳ソフトを使用しています）
使用前の準備
サービスページのトップからサインアップします。
Generate with Autodesignerは有料プランのサービスとなります（無料プランでは使用できません）。「Pro/Business」「月額/年額」を選択します。
料金や機能についてはこちらのページをご覧下さい。
Payments, Pricing & Billing（Unizard ヘルプページ）
サブスクリプションの支払いが完了すると、「prototypes」ページのホームに遷移可能です。「Start creating」から「Generate with Autodesigner（紫色のボタン）」を選択します。
使い方
Generate with Autodesignerのトップです。
Which device are you designing for?（どのデバイス向けに設計していますか?）
モバイル / タブレット / ウェブサイト から選択します。
例：モバイル
Describe your project in plain English（プロジェクトをわかりやすい英語で説明してください）
右上の「Try example」を押すことで例文が出てきます。このボタンは何度も押すことが出来ます。指示は英文のみです。最大３００文字まで。
例：A booking app to rent vacation homes for parties（パーティー用に別荘をレンタルできる予約アプリ）
Describe a design style, pick keywords, or both（デザイン スタイルの説明、キーワードの選択、またはその両方）
こちらも右上の「Try example」を押すことで例文が出てきます。最大１５０文字まで。
例：Green in dark mode（ダークモードで緑色）
テイストボタン
下部のボタンでテイストを決めます。
例：Dark elegant
生成結果
試しに上記の「例」で生成をしてみました。
編集画面が表示され、生成された画面デザインが並んでいますね。各ボタンや画像は自由に移動、編集することが可能です。左側には予め用意されたテンプレート素材があるため、さらに組み合わせて画面を作ることも出来ます。
簡単な遷移も用意されています。
画面右上のエクスポートボタンから全画面がダウンロード可能です。形式は「PNG / JPG / PDF」となります。そのため人気のあるUI制作ツールである「Figma」や「Sketch」など他アプリとの連携はむずかしい（別途作業が必要）でしょう。あくまでもUizard上での編集が前提とされています。
テーマパークの会員証を作成してみる
では実際に現場レベルで使用できるか検証をしてみます。UIはただ綺麗な画面ができればいいというものではありません。実際にユーザーの目的が達成できる画面になっているか、見てみましょう。今回は「テーマパークの会員証」をテーマに生成をしてみます。現場で通用するかを確認したいので、こちらは過去に実在したプロジェクトに大量のフェイクをいれた内容になります（デフォルト例文で出てくるような「魔法使いのマッチングアプリ」「チョコレート中毒の保険アプリ」なんてジョークは入れません！）。はたしてこちらが想定した画面になるでしょうか。
指示内容
Which device are you designing for?（どのデバイス向けに設計していますか?）
Mobile
（モバイル）
Describe your project in plain English（プロジェクトをわかりやすい英語で説明してください）
A new theme park annual passport membership card app. When the staff reads the member's barcode at the venue, points are accumulated. A barcode, membership registration, and a theme park explanation screen are required.
（新しいテーマパークの年間パスポート会員証アプリ。会場でスタッフが会員のバーコードを読み取ると、ポイントが貯まる。バーコード、会員登録、テーマパーク説明画面が必要。）
Describe a design style, pick keywords, or both（デザイン スタイルの説明、キーワードの選択、またはその両方）
The app name is "Fun Future Land". The brand colors are light blue, gentle pink, and green. The user target is from 10 to 40.
（アプリ名は「楽しい未来ランド」。ブランドカラーは水色、優しいピンク、緑です。ユーザーターゲットは10~40代まで。）
テイストボタン
Light / Young
（明るい / 若い人向け）
生成結果
生成できました。パッと見た感じ綺麗ですが、ひとつひとつ画面を確認してみましょう。今回は画面ごとに率直な所感（Good / No good も）をメモしてみました。
Welcome
初回登録トップのような画面です。
- 画像は青色になっています。指定通りです。 Good
- Register（登録）が配置されている。 Good
- タイトルが「ParkPass」？パークの名前は「Fun Future Land」です。 No good
- 説明文「get unlimited access to our theme park and earn points with every（テーマパークに無制限にアクセスでき、毎回ポイントを獲得できます）」思っていた説明と違う。 No good
Signup
新規登録画面のようです。
- サインアップのプライマリーが青になっている。 Good
- トップの画像から前の画面に遷移するのはどうだろう。もっと「戻る」がわかりやすいふるまいにするべきではないか。 No good
- 「Email」が２箇所もある。IDはメールアドレスで管理するのか、パスワードは確認しなくていいのか、沢山の疑問が出てくるフォーム項目。 No good
Home
サインアップ後のホーム画面です。
- 取得バーコードがホームに存在するイメージだった。 No good
- Explore（探索）とRecommend（おすすめ）が分けられているのは良さそう。 Good
- 右上のニュースボタン（鐘のアイコン）とIDアイコンは良さそう。 Good
- Popular Songs（人気の歌）は意味不明。適切なテキストが生成できず、レイアウトを優先したコンポーネントを配置したのだろうか。 No good
Media Player
今回度肝を抜かれた画面がこちら。
- なぜ音楽再生の画面が出来てしまったのだろう。各種コンテンツの詳細説明、などを想定しているのかな？ No good
Profile
- ここでバーコードを呼び出すことができる。バーコードの要件を満たしているのは良い。 Good
- ポイントやメンバーシップレベルはここに表示されてほしかった No good
- メンバーシップはメンバー限定のコンテンツだろうか。元々なかった発想だった。 Good
- 顔写真を設定できるようにするか、どんなコンテンツをここに配置するかなど考慮する必要がある。
さらに生成してみました
他にもさまざまな指示で画面を作成してみましたのでご覧下さい。どれも実際のプロジェクト似せた現実的な内容となっています。
指示内容：女性向けコンビニエンスストアのポイントアプリ
Which device are you designing for?（どのデバイス向けに設計していますか?）
Mobile
（モバイル）
Describe your project in plain English（プロジェクトをわかりやすい英語で説明してください）
An app that collects convenience store points. Collect points by scanning barcodes at the cash register. You can accumulate points of three brands at once with one barcode. Users can get coupons according to points.
（コンビニエンスストアのポイントを貯めるアプリ。バーコードをレジで読み取りポイントを貯める。一つのバーコードで３つのブランドのポイントを一度に貯めることができる。ユーザーはポイントに応じてクーポンが貰える。）
Describe a design style, pick keywords, or both（デザイン スタイルの説明、キーワードの選択、またはその両方）
The target is women in their 20s to 60s. New member registration is required. I want to promote seasonal sweets. The colors are bright orange and pink.
（ターゲットは20代〜60代の女性。新規会員登録が必要。季節のスイーツをPRしたい。カラーは明るいオレンジとピンク。）
テイストボタン
Light / Modern / Elegant
（明るい / モダン / エレガント）
生成結果
指示内容：男性向け高級カフェのモバイルオーダーアプリ
Which device are you designing for?（どのデバイス向けに設計していますか?）
Mobile
（モバイル）
Describe your project in plain English（プロジェクトをわかりやすい英語で説明してください）
Cafe delivery app. Users can order food and drinks at home, specify the time to pick them up at the store, and pick them up. A screen for specifying new member registration, product list, and pick-up time is required.
（カフェの出前アプリ。ユーザーはフードやドリンクを家で注文でき、店に取りに行く時間を指定して、ピックアップする。新規会員登録と商品一覧、ピックアップ時間を指定する画面が必要。）
Describe a design style, pick keywords, or both（デザイン スタイルの説明、キーワードの選択、またはその両方）
The brand colors are purple. For men who like coffee. There is a sense of luxury, and the price of the product is also high. Design with confidence.
（ブランドカラーは紫。男性のコーヒーが好きな方向け。高級感があり、商品の値段も高い。信頼を得られるデザインに。）
テイストボタン
Modern / Artsy / Formal / Elegant
（モダン / 芸術的 / フォーマル / エレガント）
生成結果
指示内容：猫の水彩画を販売するアーティストのポートフォリオサイト
Which device are you designing for?（どのデバイス向けに設計していますか?）
Web
（ウェブ）
Describe your project in plain English（プロジェクトをわかりやすい英語で説明してください）
Portfolio site of an artist who paints cats in watercolour. Users who view his work can purchase paintings and related products.
（水彩画で猫を描くアーティストのポートフォリオサイト。作品を見たユーザーが、絵を購入したり、関連製品を購入できる。）
Describe a design style, pick keywords, or both（デザイン スタイルの説明、キーワードの選択、またはその両方）
Users are cat lovers. Bright and prestigious design. Simple, so that the watercolour paintings stand out.
（猫が好きな人がユーザー。明るく格調高いデザイン。シンプルで水彩画が際立つように。）
テイストボタン
Modern / Artsy / Formal / Elegant
（モダン / 芸術的 / フォーマル / エレガント）
生成結果
テイストの変更
同じ文章で、テイストボタンだけ変更してみます。
テイストボタン
Light / Young / Artsy / Corporate
（明るい / 若い人向け / 芸術的 / 企業らしい）
生成結果
総評
このまま使うのは怖い。しかし画面作成のベースにはなる。
全体的に基本の要件はきちんと満たしていました。しかしよく見ればかなり不思議な箇所もありました。
怖いのはこの生成画面に視覚的に意識が引っ張られ、本来のあるべき姿のアイデアが失われてしまうことでしょう。サービスを作ろうと思ったときに、最初からこの画面生成機能を使うのではなく、ある程度手元のスケッチなどで自分の思い描く画面遷移を制作し、アイデアの補足として使用する方法が良さそうです。
この画面を見ていて、バーコードは本当にプロフィールの位置で良いのか？本当にこのコンテンツ編成でいいのか？テキストは？タイトルは？そもそも最初にサインアップが必要なのだろうか？サインアップしない状態でも使える状態にすることがユーザー獲得に繋がらないか？……などなど、さまざまな疑問が浮かんできました。
「これが正解だ」「これをそのまま使おう」とするのではなく、「ユーザーが目的を達成するために何が必要なのか」というUIの基本的な考え方を探す材料としていきたいです。
また、今はこの精度ですが、将来的にこういった生成AIの精度がさらに上がれば、本当に思ったままの画面が生成できるようになるかもしれません。そのときに我々デザイナーは何をするべきなのか。考えていく必要はありそうです。
タブバーという一等地「二箇所」から何故か同じホーム画面につながる不思議な画面遷移
「サービスの詳細を書いて画面が生成される」体験をぜひ試してみてください。
