デザイナーでなくてもUIデザインが作れる！?　Uizardとは？

Writer： otsubo　更新日：2024/11/29

こんにちは、デジナーレ福岡オフィスの大坪です。
ChatGPTやCopilot、Midjourneyなど、AIツールが私たちの生活や仕事を大きく変えつつある昨今、文章作成、画像生成、音声合成...といった「AI×〇〇」という組み合わせで次々と新しいAIのツールが登場しています。
もはやAIは特別なものではなく、私たちにとって日常的な存在となっています。AIの登場でかつては専門知識が必要だった領域に、今では誰もが挑戦できるように感じます。

そんな中、デザインの分野でもAIは活躍しています。今回は、AIの力でデザイナーでない人でも簡単にUIデザインが作れる画期的なツール「Uizard」について解説していきましょう。

Uizardとは？AIの魔法で誰でもデザインが可能に

Uizard(ウィザード)は、AIを活用してデスクトップ、タブレット、スマートフォン向けのUIを、専門知識がなくても自動生成できる画期的なデザインツールです。
2017年にデンマークのコペンハーゲンでpix2codeという機械学習研究プロジェクトとして画像ベースのGUIから自動的にプログラムコードを生成する技術の研究をスタートし、その後2018年にUizardを設立。現在のUizardはpix2codeの技術を応用し、AIを使ってプロトタイプ作成やモックアップ生成を簡素化し、だれでも直感的にUIを作れるツールとして進化しました。
Uizardは、2021年に正式リリースされています。

CEOであるトニー・ベルトラメリは、Uizardについてこんな思いを語っています。

『今日、業界を問わず、すべての企業はソフトウェア企業であり、顧客、従業員、またはその両方に役立つユーザーフレンドリーな製品を構築する必要があります。それにもかかわらず、ほとんどの従業員はソフトウェア設計の専門家ではありません。
Uizard の使命は、設計を民主化し、誰もが自分のアイデアを簡単かつ迅速に実現、伝達、テストできるようにすることです。』
トニー・ベルトラメリ

このことから、Uizardはデザインの専門知識を持たない人でも、質の高いUIデザインを手軽に作れる環境を実現したいという思いで作られているように感じます。

例えば、プロダクトマネージャーが新サービスのプロトタイプを急いで作りたい時。クライアントへの企画書にイメージ図を添付したい時。デザイナーが不在の中、エンジニアが急遽UIを作らなければならない時。
こんな場面でUizardは本当に心強い味方になってくれると考えられます。

Uizardでは、白紙のキャンバスからのデザイン作成も可能ですが、AI機能を活用すれば、数回の簡単な質問に答えるだけで、わずか1分程度で洗練されたUIデザインを生成できます。

Uizardが「Magic」という言葉をツール内で使っているのですが、あっという間に素敵なデザインができあがる様子は、まさに魔法そのものです。

Uizardの主要機能

Uizardが非デザイナーでも簡単に扱えるサービスというのは理解できましたが、既に世界的にシェアを誇っているデザインツールとUizardは何が違うのでしょうか？ここではUizardにどんなことが出来るのかAutodesigner, Wireframe scanner, Screenshot scannerこの３つの機能を中心に見ていきます。

Autodesigner ：オートデザイナー

オートデザイナーはChatGPTのような会話形式でデザインができる、AIアシスタント機能です。テキストで意図を伝えるだけで、リアルタイムでデザインを生成・修正できます。

最新のAIのバージョンである２.０版(有料版のみ)では、AIと会話しながらデザインできる機能が追加されました。例えば、「ここにボタンを追加して」「このセクションの色を変更して」といった具合に、普通の言葉で指示するだけで、すぐにプロトタイプが作れてしまいます。

 

使い方

自分のダッシュボードの「Start Creating」項目内の「Generate with Autodesignare」を選びます。

 

AIに対して指示を行う画面に遷移したら、生成するプロジェクトの指示を与えていきます。

• Q１．Which device are you designing for?(どのデバイス向けにデザインしますか？)
  ⇒モバイルを選択します。
• Q２．Describe your project in plain English (あなたのプロジェクトをわかりやすい英語で説明してください)。
  ⇒今回は「従業員を管理できるアプリケーション。勤怠管理、休憩時間管理、従業員のスケジュール確認などの機能があります。」と指示を出してみます。

 

 

生成スタイル選択画面に遷移します。ここでは何を使ってUIを生成したいのか選ぶことが出来ます。
今回は「Prompt」を選択します。

 

最後に作成するプロジェクトのスタイルについて聞かれます。

• Q３．Describe the preferred style for your project (あなたのプロジェクトに適したスタイルについて説明してください)
  ⇒こちらでは「使いやすさを重視したクリーンでモダンなデザイン。項目やレポートが見やすい。モバイルフレンドリーなレイアウトを重視。」という指示をしました。
• 色味やテイストをタグで選ぶ項目では、Light、Modern、Corporateのタグを選択しました。

その後プロジェクト生成ボタンを押して、１分ほど待つだけで１０画面も作成してくれました！

 

レスポンシブは同時に作成できなかったので、同様のステップでデスクトップの作成してみます。

こちらは９画面作成してくれました。

アイコンのサイズやボタンの余白などが画面ごとに違うといった気になるところはありますが、いずれも叩き台としては十分な精度ではないでしょうか？

 

Wireframe Scanner : ワイヤーフレームスキャナー

続いてワイヤーフレームスキャナーという機能です。こちらは手書きのワイヤーフレームを写真に撮ったものや、スクリーンショット等の画像をアップロードするだけで、 AI が画像を認識しデザインを書き起こしてくれるというものです。

 

使い方

まず新しいプロジェクトを開き、左側のサイドメニューの中にある「Magic」の中の「Wireframe Scanner」をクリックします。するとAIのチャット画面が表示され、どのデバイス向けのプロジェクトを作成したいか聞かれます。今回はデスクトップを選択しました。その後パソコンから画像をアップロードするかQRコードを使ってスマホから画像をアップロードするか選択できます。
今回はQRコードを使ってスマホからデータを送ることにしました。

スマホでQRコードを読み込むとすぐにブラウザが開きました。(画面左)そこで「select from files」をクリックし、画像を選択します。
今回は手書きで書いたワイヤーフレームをスマホで撮影したものをアップロードしてみることにします。
画像の送信が終わると同時にパソコンもデータを読込み、生成が始まりました。

完成したのはこちらです。

じつはこの画面、弊社のコンタクトページを手書きで書き起こしてみたのですが、大枠は捉えているといったところでしょうか・・・驚いたのは、このツール自体は日本語のサポートが一切ないのにもかかわらず、手書きの日本語をちゃんと読み取れている所です。手書きでもう少し丁寧にワイヤーフレームを作成すれば、もっと精度は上がるかもしれません。
次は、同じ画像を今度はパソコンからアップロードして再度トライしてみたいと思います。
どうでしょうか？同じ画像を使ったのですが、こちらの方がまとまりが出ているように見えますね。しかし、どちらもそのまま使うことはできなさそうです。ここからAIに指示を出して修正をするか、人間の手で修正をしていく必要がありそうです。

 

Screenshot Scanner：スクリーンショットスキャナー

最後に紹介するのがショートカットスキャナーです。こちらは名前の通りスクリーンショットしたものをAIがUIに変換するというものです。公式ページによると生成されたUIは自由に編集ができるようです。ではさっそく使っていきましょう。

 

使い方

ワイヤーフレームスキャナーと同様の手順で進み、今度は「Screenshot Scanner」を選択します。するとAIのチャット画面が表示されるので、ワイヤーフレームスキャナーの手順で進みます。今回はパソコンからスクリーンショットをアップロードすることにします。

こちらでも引き続き弊社のコンタクトページを使おうと思います。スクリーンショット取ったものをアップロードしてました。こちらではデスクトップとモバイルの両方生成してもらいます。

生成されたものがこちら

こちらは30秒ほどでUIを出力してくれました。ざっと見た感じ大きなレイアウト崩れがあるわけでもなく、コンテンツの位置など正確に把握しているように見えます。ところどころ文字が切れているとこが散見しますが、テキストボックスの幅が狭いだけで、幅を広げたら文字もほとんど正確に読み取ることが出来ているようでした。
テキストは内容だけでなく、フォントのサイズ、フォントの種類、色も自由に編集可能です。ロゴやテキストフィールド、必須のラベルはうまくスキャンできなかったようで、こちらが提供した画像をそのまま出力しているようです。
こちらもここから手を加えるにしても、クオリティは高いのではないのでしょうか？

料金

最後に気になる料金やそれぞれのプランでできることを見ていきます。
Uizardは４つのプランを提供しています。そのうち３つのプランを紹介します(Enterprise プランは金額や機能が機能のオーダーメイドの為省略しています。)

 

まとめ

いかがだったでしょうか？UizardはAIの力を活用することで、デザインの専門知識がなくても質の高いUIデザインを作成できる画期的なツールです。
主な特長として

• テキストベースでのUIの自動生成
• 手書きワイヤーフレームのデジタル化
• スクリーンショット等の既存デザインのスキャンからUIの再現

といった機能がありましたね。
また、Uizardはテンプレートも豊富に用意しています。LPやデリバリーサービスのアプリなど、自分が作成したいデザインに近いものをここから探してもいいでしょう。

 

次回は今回紹介できなかった機能、生成したUIからコード(React、CSS)に変換する機能について見ていきたいと思います！
次回もお楽しみに。

引用元：Uizard