Uizard(ウィザード)は、WebサイトやアプリのUIデザインを作成できるAIツールです。企業のマーケティング担当者のなかには「効果的なUIデザイン作成方法を導入したい」「Uizardの活用方法を知りたい」という方もいるのではないでしょうか。
そこで今回は、Uizardの概要や主な特徴、他のUIデザインツールとの違い、使い方、料金プランを解説します。Uizardを実際に使ってみて感じたことについても述べていきますので、ぜひ最後までご覧ください。
Uizard(ウィザード)とは
Uizardは、AIを活用してWebサイトやアプリなどのUIデザインを効率的に作成できるツールです。プロンプトによるテキスト指示や手描きのスケッチ、スクリーンショットを使った画像指示などを行うことで、AIが短時間でUIデザインの要素(ワイヤーフレームやモックアップなど)を作成します。
UIデザインは、Webサイトやアプリのなかでユーザーが最初に目に触れる部分となるため、ユーザーの離脱率を減らすうえでとても重要です。Uizardを使えば、効率的にUIデザインを作成でき、担当者の負担軽減や工数削減につながります。
UIデザインに慣れていない担当者でも簡単にUIデザインのプロトタイプなどを作成できることから、Uizardは世界中の多くのユーザーに利用されています。
Uizardの主な特徴
Uizardには、主に以下の5つの特徴があります。
- 豊富なテンプレートを活用できる
- デザインを自動変換できる
- 複数人で共同編集を行える
- コードを自動で生成できる
- デザインの編集を行いやすい
それぞれ確認していきましょう。
豊富なテンプレートを活用できる
Uizardには豊富なテンプレートがあり、それらを活用することで効率的にUIデザインの作成が可能です。テンプレートには、UIデザイン全体がまとまったタイプのものには、アプリ用のデザイン、Webサイトのデザイン、タブレットアプリ用のデザインなどさまざまな種類があります。
また、以下のようにパーツごとに分かれたテンプレートもあります。
- ボタン
- カード
- カレンダー
- ヘッダー
- フッター など
テンプレートを活用することで、知識が少なくても効率的にUIデザインを作成できます。
デザインを自動変換できる
Uizardでは、手描きのスケッチやスクリーンショットをユーザー側であらかじめ準備して読み込ませることで、UIデザインに自動変換できます。そのため、デザインが苦手な方でも、思い描く形を簡単に実現可能です。
イメージや素案が決まっている場合は、準備したファイルをアップロードすることで効率的にUIデザインを作成できるでしょう。
複数人で共同編集を行える
Uizardにはデザインの共有機能があり、部署内やチーム内の複数人で共同編集を行えます。共同編集をする際は、表示されるカーソルで、誰がどこを見ているか・編集しているかを把握可能です。
UIデザイナーやディレクターなどのチームメンバー間でリアルタイムに共有・編集ができるため、UIデザインのアイデア出しやレビューを効率化できるでしょう。
コードを自動で生成できる
生成したUIデザインから、自動でフロントエンド部分のコードを作成することも可能です。
従来は完成したUIデザインを基にエンジニアがコーディングを行う必要がありましたが、Uizardを使えばコーディングの作業工数を大きく削減できます。また、UIデザイナーとエンジニア間の認識相違を防ぐことも可能です。
デザインの編集を行いやすい
Uizardでは、生成したUIデザインを細かく編集できる多機能編集機能があります。具体的には、以下のような機能が備わっています。
- スタイルの変更
- 色の変更
- 配置の微調整
- アニメーションの追加
- レスポンシブデザインへの対応 など
細部までデザインを編集できるため、最終的な完成度を高めることが可能です。企業サイトでも十分に活用できるUIデザインが作成できるでしょう。
Uizardと他のUIデザインツールとの違い
続いて、Uizardと他のUIデザインツールとの違いを解説します。
UizardとFigmaの違い
UizardとFigmaはどちらもUIデザインに役立つツールですが、Figmaのほうがやや専門的なツールとなっており、複雑なデザインプロジェクトなどのビジネスシーンに向いています。
一方でUizardはプロンプトやスクリーンショットを使ったサポート機能などがあり、デザイナー以外の幅広いユーザーにとって使いやすいツールといえるでしょう。Uizardは、アイデアを迅速にプロトタイプとして可視化したい場合などのビジネスシーンに適しています。
UizardとCanvaの違い
UizardとCanvaはどちらも簡単に使えるデザインツールですが、おもな利用用途が異なります。Canvaはプレゼンテーションやロゴなどのコンテンツ制作に向いている一方で、UizardはアプリやWebサイトのUIデザイン作成に適しています。
そのため、企業サイトや商品アプリの制作にはUizard、企業ロゴの制作にはCanvaのように使い分けるとよいでしょう。
Uizardの使い方
ここからは、Uizardの使い方について、以下の項目に分けてアカウントの開設からツールの利用まで解説していきます。
- 【利用前の準備】アカウントを開設する
- テンプレートを使用する方法
- テキストを使用する方法(Autodesigner)
- スクリーンショットを使用する方法(Screenshot Scanner)
- 手描きスケッチを使用する方法(Wireframe Scanner)
Uizardの導入を検討している方は、ぜひ参考にしてください。
【利用前の準備】アカウントを開設する
まずはUizardのアカウントを開設します。Uizardの公式サイトにアクセスし、画面右上にある「Sign up for free」を選択します。
参照:Uizard
Sign up画面が表示されるため、氏名とメールアドレス、パスワードを入力しましょう。GoogleアカウントまたはMicrosoftアカウントを持っている場合は、いずれかのアカウントを使ったログインも可能です。
その後、ユーザー自身の職種や役割を選択する画面が表示されるため、適切な項目を選択します。
職種・役割を選択後、利用用途の確認画面に移るため、画面にある4つの選択肢から選択します。
Uizardの利用動機を聞かれるため、画面にある4つの選択肢のなかから最も近いものを選択しましょう。
続いて、ほかのメンバーの招待画面が表示されます。Uizardを共同で利用するチームメンバーなどがいる場合は、対象のメールアドレスを代表者がまとめて入力することで招待することが可能です。招待する対象者がいない場合は、スキップすることもできます。
Uizardを知ったきっかけについて質問されるため、リスト内の選択肢より最も近いもの選択してください。
次に、Uizardで行いたいことを、画面内の4つの選択肢から選びましょう。
最後にプラン選択の画面が表示されるため、好きなプランを選択します。まずは無料で利用したい場合は、Freeプランの「Continue to Uizard (free)」を選択してください。
以下のトップ画面が表示されたら、アカウント開設は完了です。
以降では、Uizardの利用方法について解説していきます。
テンプレートを使用する方法
デザインやワイヤーフレームの制作経験が乏しい方でも、テンプレートを活用すればレベルの高いデザインを制作できます。
ホーム画面左メニューの「Templates」を選択すると、以下の「All Templates」と記載された画面が表示されるため、好きなテンプレートを選択します。Freeプランの場合は「Pro」マークのない10種類のテンプレートのみ利用可能です。
任意のテンプレートを選択後「Use this template」をクリックすると、テンプレートが反映された以下の画面が表示されます。
テンプレート内にあるそれぞれのオブジェクトを選択して、スタイルや色の変更をすることも可能です。
テキストを使用する方法(Autodesigner)
テンプレートを使用せず、テキスト(プロンプト)を入力してデザインを制作する方法をご紹介します。「具体的な参考サイトなどはないが、取り入れたいイメージや使いたい色などがある」という場合に活用できます。
まず、ホーム画面のなかにある「Generate with Autodesigner」を選択します。
対象デバイスの選択およびUIデザインの説明文(英文)を入力後「Continue」をクリックしてください。ここでは、対象デバイスを「Desktop」にし「Try Example」で表示された英文「A relaxation and meditation app for stressed UX designers」を入力します。
次に、生成するUIデザインのスタイルを指定する画面に遷移します。Freeプランではスクリーンショット、プロンプト、URLの3種類が選択可能で、BusinessプランとEnterpriseプランのみ「Brand kit」(カラー指定などができる機能)も使用できます。ここでは「Prompt」を選択します。
続いて、プロンプトでUIデザインのスタイルとイメージタグを選択します。ここでは「Try Example」で生成した英文「Yellow like a banana」を使用して「Generate my project」をクリックします。
数分後、以下のようにUIデザインが生成されます。ログイン画面やホーム画面をはじめ、複数のUIデザイン画面が生成されました。
今回は「バナナのような黄色」を指定したので明るい黄色を使ったデザインになりましたが、生成後でもUIデザイン内の各オブジェクトのスタイルや色は編集することが可能です。
スクリーンショットを使用する方法(Screenshot Scanner)
他社や自社のサイトなど、参考にしたいサイトのスクリーンショットから、それに似たデザインを作成することもできます。
まず、ホーム画面のなかにある「Start from screenshot」を選択します。
サンプルのスクリーンショットが2つ表示されるため、利用したい場合は選択してください。スキップすることも可能です。ここでは、左側のサンプルを選択して「Import」をクリックします。
その後、以下のようにサンプルのスクリーンショットが反映されたUIデザインが生成されました。
UIデザイン内の各オブジェクトのスタイルや色は、編集も可能です。
手描きスケッチを使用する方法(Wireframe Scanner)
自らイメージを手書きして、それを基にデザインを生成することも可能です。
まず、ホーム画面左メニューの「Magic」から「Wireframe Scanner」を選択します。
端末タイプを聞かれるため、モバイル・タブレット・デスクトップのなかから選択します。次に手描きスケッチ(ワイヤーフレーム)を、ファイルアップロードまたはQRコードスキャンによって読み取ります。サンプルの手描きスケッチを利用することも可能です。
ここでは、端末タイプをモバイルにし、サンプルの手描きスケッチ(画面左側)を利用します。入力後、サンプルの手描きスケッチが適用されたUIデザインが生成されました。
UIデザイン内の各オブジェクトのスタイルや色は編集することも可能です。
Uizardの料金プランとそれぞれのプランの特徴
Uizardには、無料プラン・有料プランを含めて以下の4つのプランがあります。
- Freeプラン
- Proプラン
- Businessプラン
- Enterpriseプラン
それぞれのプランの料金や特徴は以下のとおりです。
|
Freeプラン |
Proプラン |
Businessプラン |
Enterpriseプラン |
料金 |
無料 |
年払い:月額12ドル 月払い:月額19ドル |
月額39ドル |
要問い合わせ |
AI生成 |
月3回まで |
月500回まで |
月5,000回まで |
無制限 |
AIエンジン |
Autodesigner 1.5 |
Autodesigner 2.0 |
Autodesigner 2.0 |
Autodesigner 2.0 |
プロジェクト数 |
2個まで |
100個まで |
無制限 |
無制限 |
プライベートプロジェクト |
利用不可 |
利用可 |
利用可 |
利用可 |
テンプレート数 |
10個 |
全て |
全て |
全て |
カスタムテンプレートの保存 |
5個まで |
100個まで |
無制限 |
無制限 |
プロジェクトごとのスクリーン数 |
5個まで |
無制限 |
無制限 |
無制限 |
生成コンポーネント数 |
400個まで |
無制限 |
無制限 |
無制限 |
Reactコード生成 |
利用不可 |
利用可 |
利用可 |
利用可 |
カスタムアイコン |
利用不可 |
利用不可 |
利用可 |
利用可 |
カスタムフォント |
利用不可 |
利用不可 |
利用可 |
利用可 |
カスタムワークスペース |
利用不可 |
利用不可 |
利用不可 |
利用可 |
カスタマーサポート |
なし |
メール・チャット |
優先サポート |
最優先サポート |
オンボーディング |
なし |
なし |
なし |
あり |
SSO認証 |
利用不可 |
利用不可 |
利用不可 |
利用可 |
2要素認証(2FA) |
利用不可 |
利用不可 |
利用不可 |
利用可 |
参照:Uizard「Pricing」
Freeプランでは、プロジェクト数が2個までといった制限があります。ビジネスシーンで利用する場合は、利用規模に応じてProプランまたはBusinessプランを選択するとよいでしょう。
Uizardを実際に使ってみて感じたこと
最後に、Uizardを実際に使ってみて感じたことを、良かった点と改善を期待したい点に分けてそれぞれ述べていきます。
良かった点
Uizardを実際に使ってみて良いと思った点は以下のとおりです。
- 無料(Freeプラン)でも試せる
- テンプレートやサンプルのデザインを使える
- プロンプトやスクリーンショット、手描きスケッチなど作成方法が複数ある
UIデザインを作成したいものの、ゼロから作成することに不安を感じる方や具体的なアイデアが思い浮かばない方は、Uizardの機能が大いに役立つでしょう。
改善を期待したい点
一方でUizardを実際に使ってみた結果、改善を期待したいと感じた点は以下のとおりです。
- 無料(Freeプラン)ではプロジェクト数が2個までであり、多くのUIデザインを保存しておくことができない
- 全て英語表記のため、英語の読解が苦手な方は使いにくさを感じる可能性がある
Freeプランでは機能制限があるため、ビジネスシーンで本格的に利用したい場合は、ProプランまたはBusinessプランをおすすめします。
また、画面の案内やプロンプト入力が全て英語となっているため、多くの担当者にとって使いやすいツールとなるよう日本語対応に期待したいところです。
まとめ:Uizardで効率的にUIデザインを作成しよう
Uizard(ウィザード)は、AIを活用してWebサイトやアプリのUIデザインを作成できるツールです。豊富なテンプレートを活用でき、デザインの自動変換や複数人での共同編集などができる点が主な特徴です。
Uizardを利用する際は、テンプレートを使用する方法やテキスト・スクリーンショット・手描きスケッチなどを基にUIデザインを生成する方法などがあります。
Uizardには複数の料金プランがあり、Freeプランであれば無料で試すことができるため、まずはFreeプランで使用感を確かめてみるとよいでしょう。ただし、Freeプランにはプロジェクト数などの制限があるため、ビジネスシーンで利用する場合はProプランまたはBusinessプランに切り替えていくことをおすすめします。
SEデザインでは、コンテンツマーケティング支援サービスを中心に「AI導入コンサルティング」サービスも提供しております。「AIを活用して記事制作を内製したい」「業務効率化に生成AIを活用したい」などとお考えの際は、お気軽にご相談ください。