UI画面生成AI「uizard」の使い方とは？特徴や料金、事例について紹介

デザイン制作を効率化したい、簡単にプロ仕様のワイヤーフレームをつくりたいと思ったことはないでしょうか。

社内に潤沢なデザイナーリソースがあるといったケースは珍しく、デザイナーのリソースが不足し、業務が逼迫しているといった課題を抱えている企業は少なくありません。

そうした悩みをuizardは解決します。uizardは、手描きのスケッチからワイヤーフレームを制作したり、AIにテキストプロンプトを送ったりすることで、簡単にプロ仕様のデザイン制作を行うことができるサービスです。

デザイナーに頼らずにプロ仕様のデザイン制作が行えるため、効率的かつスピーディに高いクオリティのデザインを作ることができます。

この記事では、uizardの特徴や使い方、事例や料金、他のデザインサービスとの違いについてご紹介します。

uizard とは

uizard とは、AIを利用したUIデザインツールであり、デザインの経験がなくても美しいデザインを制作することができるAIサービスです。

テキストプロンプトや手書きのワイヤーフレームをuizardに伝えることで、UIをAIが自動的に制作してくれます。

また、uizardはリアルタイムでのコラボレーションを可能にし、チームと共に作業することが可能です。使い勝手さとしても、デザイナーだけでなく非デザイナーも使いやすいUXのため、職種混合のチームでも活用することが可能です。

uizard の特徴

UIデザインツールのuizardは、どのような特徴があるでしょうか。今回は、uizardの主な特徴を5つご紹介します。

1. 手書きやスクショでデザインを自動生成
2. コーディングの自動化
3. 高度なデザイン編集
4. 豊富なテンプレート
5. 共同編集

uizardの特徴を知って、使いこなしましょう。

手書きやスクリーンショットでデザインを自動生成

uizardの代表的な機能に、手書きのスクリーンショットでUIデザインがつくれるというものがあります。

使い方はとてもシンプルで、手書きで書いたワイヤーフレームなどのデザインをスマートフォンのカメラで撮影し、uizardにアップするだけです。それにより、美しいUIデザインをあなたの代わりに制作してくれます。

これまで、様々なUIデザインツールを用いてワイヤーフレームを制作していた方は、ワイヤーフレームを制作するわずらわしさから解放されるだけでなく、UIデザイン制作を効率化することが可能です。

コーディングの自動化

制作したデザインから自動でフロントエンド部分のコーディングを行う機能も備えています。

単にUIデザイン制作を行ってくれるだけでなく、コーディングまでしてくれるとなると非常に便利なサービスですね。

例えば、デザイン制作者とコーダーが分かれていて、デザインとコーディングにおける差が生じてしまうといった課題の解決に役立ちます。

高度なデザイン編集

uizardでは、多様なデザイン編集機能も有しています。コンテンツの作成や削除はもちろんのこと、画面遷移を表すことやクリックできる箇所を示すなど様々な編集機能を有しています。

その他、多機能編集が利用可能です。色の調整やレイアウトの修正など詳細な点について編集を行うことができます。

細部までこだわりたい場合には細かく仕様を詰めることができる点がuizardの特徴のひとつです。

豊富なテンプレート

uizardは200種類以上のテンプレートを提供しています。デザインを制作する際、テンプレートから始められるので、デザイン初心者の方にとっても非常に便利な機能です。

テンプレートはwebサイトデザインやアプリデザイン、タブレットのデザインまでカバーしています。また、UIコンポーネントやワイヤーフレームの制作などに向けたテンプレートも用意されています。

一方、テンプレートの中には、Pro版でないと利用できないものがあるので、すべてのテンプレートを利用したい場合はPro版を契約しましょう。

共同編集

uizardの主な特徴のひとつとして、リアルタイムでの共同編集ができる点があります。

デザイン制作は、チームメンバーで共有することも簡単にできます。リアルタイムに編集ができるため、すぐにメンバーからのフィードバックをもらえる上、カーソルが表示されて誰がどこを見ているかを把握できるため、リモート環境でも認識合わせが容易にできます。

デザイン制作がボトルネックにならず、効率的にデザイン制作に向きあうことが可能です。

uizardの使い方

実際にuizardを使ってみたいと思います。以下の手順でuizardの使い方についてご紹介いたします。

1. アカウント登録
2. テンプレートからデザインを制作する
3. AIにテキストプロンプトでデザインを依頼する
4. 手描きのスケッチでワイヤーフレームを制作する

STEP1：アカウント登録

まずは、uizardのアカウントを登録しましょう。

uizardのWebサイトにアクセスすると、右上にSign upボタンがあるため、そちらからアカウント登録が可能です。

氏名とアドレス、パスワードを入力してアカウント登録をする方法とGoogleまたはMicrosoftアカウントで登録する方法があります。

アカウント作成後、いくつかのアンケートに回答すると、実際に利用できるようになります。

STEP2：テンプレートからデザインを制作する

無料プランでも10のテンプレートを利用することができます。ログインした後は、まずはテンプレートを選択してデザイン制作を進めることができます。

用途に応じて適切なテンプレートからデザインを制作しましょう。

STEP3：AIにテキストプロンプトでデザインを依頼する

テンプレートではなく、AIにテキストプロンプトで指示を出してデザインを制作することが可能です。

作りたいサイトのテーマや必要なページについて指示を出すと、指示した通りにサイトのデザインを制作してくれます。

今回は、テキストプロンプトを送ってから3分もかからずにデザイン制作をしてくれました。効率的かつプロ水準のデザインを制作してくれるのは非常に便利ですね。

STEP4：手描きのスケッチでワイヤーフレームを制作する

手描きのスケッチからワイヤーフレームを制作できるという機能があります。

Project内のMagicから「Wireframe Scanner」を選択すると、手描きのスケッチを読み込んでくれます。

今回は、サンプルのデータをそのまま利用してみようと思います。

サンプルのデータを利用してみると、以下のデザインができあがりました。手描きのラフなスケッチから本格的なワイヤーフレームの制作ができました。

uizard を使ったUIデザインの事例

uizardを利用したデザイン事例をご紹介したいと思います。以下の3つの事例についてご紹介したいと思います。

• 事例1：デートアプリ
• 事例2：出前配達アプリ
• 事例3：テーマパークの会員証

事例1：デートアプリ

公式のYouTubeチャンネルからの紹介です。テキストプロンプトでデートアプリのデザインを制作しています。

1行程度の簡単なテキストプロンプトで複数ページのワイヤーフレームが完成しました。一度作成されたワイヤーフレームは、要素を選択することで画像の差し替えやボタンの変更なども行うことが可能です。

また、実際にどのような画面遷移になるかも確認することができます。

事例2：出前配達アプリ

動画のはじめの方では、出前配達アプリではなくリラクゼーション&メディテーションに関するサイトのデザイン制作を行っています。

テキストプロンプトで制作しており、どのようなサイトをつくりたいかやカラーの指定を行うことで、1分程度で7画面程が出来上がっています。

また、後半では出前配達アプリについて紹介しています。こちらでは、Uberのようなサイトを黒基調で制作してとプロンプトで伝えることで、こちらも7画面程度のデザインが出来上がっています。

事例3：テーマパークの会員証

参考：UI画面生成AI「Uizard」でデザイナーいらず？業務の最前線で使ってみた

こちらは、3行程度のプロンプトを送信することで5ページ分程のワイヤーが出来上がっています。デザインとしては、白地に青系のデザインとなっています。

内容を確認したところ、フォーム項目でおかしな点があったり、なぜか音楽再生画面ができてしまったりといくつかの不具合が発生しているようです。

その他は特に大きな問題などなく、適切なワイヤーフレームを制作してくれています。

uizardの料金

3つの基本的なプランとエンタープライズプランの4つのプランがあります。

無料からでも利用することができるため、個人としても利用しやすいことが特長です。

基本的なプランの違いは以下の通りです。

プラン	Free	Pro	Buisiness
1ユーザーあたり料金	$0	$12	$49
プロジェクト数	2	100	無制限
テンプレート数	10	全て	全て
AIデザインアシスト(テキスト)	2	500	無制限
AIデザインアシスト(オートデザイナー)	5	500	無制限

フリープランの場合、無料で利用することは可能ですが、プロジェクト数やテンプレート数、AIデザインアシストの利用回数に制限がかかります。

一方、ビジネスプランの場合はほぼすべての機能が無制限で利用することが可能となります。まずは、フリープランで利用してみて、活用度が上がってきた場合に徐々にプランを上げるといったことも可能です。

AIデザインアシストは、フリープランの場合、利用回数がかなり限定的なため、この機能を利用したいという場合はPro版以上を利用するようにしましょう。

また、コラボレーションに関する管理機能やサポートを利用したい場合には、ビジネスプラン以上を使うようにしましょう。

なお、利用料はどのプランも利用するユーザー数に依存するため、事前に利用するアカウント数を確認しておく必要があります。

uizardと他AIデザインツールの違い

昨今では、様々なAIデザインツールが世の中に出ています。そうした中でも、主要な2サービス（Canva・Figma）とuizardの違いについてご紹介したいと思います。

それぞれの違いについて把握し、適切なサービスを利用しましょう。

uizardとCanvaの違い

誰でも使えるビジュアルツールキットCanvaは、誰でもプロ品質のデザインを制作することができるデザインツールです。

Canvaは主に、プレゼンテーション、ポスター、ビデオ、ロゴの制作に使われます。どちらもデザインツールであるという点では共通ですが、それぞれが得意としている領域が異なります。

Canvaはデザインテンプレートを多く保有しているため、プレゼンテーションやロゴなどを制作したい場合にはとても簡単かつ効率的にデザインを制作することが可能です。

uizardとFigmaの違い

uizardは、時折非デザイナー向けのFigmaと説明されることがあります。Figmaは、専門的なデザイナーも利用する便利なデザインツールです。

どちらもリアルタイムでのコラボレーションを実現できるデザインツールですが、uizardの方がより非デザイナーも利用しやすい特徴があります。

自然言語でAIにデザイン制作を依頼することができる上、手描きのスケッチを読み取ってデザイン制作をしてくれるため、デザインに明るくない人でも利用しやすいという利点があります。

まとめ

uizardの概要や使い方、事例や料金についてご紹介をしてきましたが、いかがでしたでしょうか。

テキストプロンプトでデザイン制作ができたり、手描きのスケッチをワイヤーフレーム化できたりと、デザイナーでなくても簡単にプロ水準のデザインを制作することができます。

様々なAIサービスが世の中に出てきていますが、デザイン制作に関するAIサービスはまだ少なく、uizard自体も今後更に改善されていくと考えられます。

今のうちから使い方に慣れておくとよいでしょう。