この記事では、初心者でも迷わずプロトタイプを作れるよう、Uizardの使い方を画面キャプチャつきで丁寧に解説します。

Uizardはドラッグ＆ドロップだけで本格的なUIデザインが作れるツールです。さらに、AIが自動でレイアウトを提案し、テキスト入力だけで複数画面のプロトタイプを生成してくれるので、デザイン経験がなくても安心して使えます。

それでは早速、始めてみましょう！

 

 

Uizardの使い方

それでは早速、Uizardの使い方を紹介します。Uizardを使いこなすために、次の6つのステップを理解していきます。

1. 　ユーザー登録をする
2. 　テンプレートを使ってみる
3. 　ゼロから作ってみる
4. 　AIツール（Autodesigner）を使ってみる
5. 　スクリーンショットからデザインを作る
6. 　デザインをエクスポートする

 

1.　ユーザー登録をする

まずは、Uizardのユーザー登録をします。

Uizard公式サイトにアクセスし、「Sign Up For Free」を押します（右上の赤枠）。

名前と姓、メールアドレス、パスワードを登録します。

アンケートに答えると料金プランが表示されます。Freeプラン（赤枠）を選びましょう。まずは無料から始めて、機能に慣れてからアップグレードするのがおすすめです。

 

2.　テンプレートを使ってみる

最も手軽にデザインを始める方法がテンプレートの活用です。テンプレート画面から好みのデザインを選ぶだけで、プロ品質のUIが即座に手に入ります。

選んだデザインが表示されます。

文字をクリックすると、自由に内容を変更できます。

文字のフォントサイズも自由に変更できます。

変更したい画像をクリックして「Image」を選ぶと、画像を差し替えられます。

画像の素材集が表示されるので、探している画像のキーワードを入力することで無料の素材を探せます。

素材集だけでなく、Uploadsを選べば自分のパソコンにある画像にも差し替えられます。

テンプレートには複数の画面の雛形があり、画面間のリンクもあらかじめ設定されています。

リンクの設定を編集する場合は、水色の雷マークをクリックします。

リンク先のページを自由に設定できます。

出来上がってきたら、右上の「Preview」を押すと実際の見え方を確認できます。

設定したページ遷移も、クリックして動作を確認できます。

 

3.　ゼロから作ってみる

テンプレートを使わずに、デザインをゼロから作る方法を紹介します。完全にオリジナルのUIを作りたい場合に使う方法です。

まず、メインメニューから「New Blank Project」を選びます。

プロジェクトタイプ（Desktop・Tablet・Mobile）を選びます。作りたいUIの表示デバイスに合わせて選択しましょう。

空のプロジェクトが作られ編集画面が表示されます。各スクリーンに必要なコンポーネント（ボタン・テキスト・画像など）を配置していきます。

左パネルからRectangleを選び、ドラッグ＆ドロップでキャンバスに配置します。

続いてボタンを追加します。

さらにフォームを追加します。

Imageを選び、追加したい画像をドラッグ＆ドロップすることで、画像を配置できます。

ゼロから作るのは手間がかかります。次の章では、AIでデザインを一気に生成する方法を紹介します。テキストを入力するだけでおしゃれなUIが完成するので、ぜひ試してみてください！

 

4.　AIツール（Autodesigner）を使ってみる

UizardのAI機能「Autodesigner」を使って、テキスト入力だけでUIデザインを自動生成する方法を紹介します。最も手軽にクオリティの高いプロトタイプを作れる方法です。

管理画面トップにある「Generate with Autodesigner」を選びます。

AIが質問をするので、回答します（チャット上に回答例が表示されるので、選ぶだけで進められます）。

次に、どんなデザインを作ってほしいかを自由に指示します（日本語で入力できます）。

画面のデザイン案が4つ生成されます。気に入ったデザインを選びましょう。

選んだデザインをもとに、編集を始めます。

日本語で指示をしても意図をくんだデザイン案を作ってくれるので非常に便利です。なお、崩れる場合は「3-column cards」「primary CTA」などの英語キーワードを併記すると安定します。

 

5.　スクリーンショットからデザインを作る

Uizardは手書きのスケッチやスクリーンショットをもとに、編集可能なUIデザインを自動生成することもできます。既存サイトを改善したい場合や、競合デザインを参考にリデザインしたい場合に特に便利な機能です。

管理画面トップにある「Start from Screenshot」を選びます。

画像をアップロードする場合は、左側のアップロードボタンを選びます。

画像をアップロードして「Import」を選びます。

Uizardにインポートが完了しました。文字やデザインを編集していきます。

 

6.　デザインをエクスポートする

デザインが完成したら、エクスポートしてチームと共有したり、開発者に渡したりできます。デザインをエクスポートする場合は、Ctrl＋Aなどでエクスポートしたい箇所を選択し、右メニューのHandoff＜/＞を選びます。

その後、出力するファイル形式（PNG・JPEG・SVG・PDF）を選びます。

エクスポートが完了すると、ダウンロードが自動的に行われます。

 

料金プラン

ここまで紹介した内容はUizardのFreeプランでも体験できます。Uizardの料金プランは4つあります。

プラン	Free	Pro（※1）	Business	Enterprise
料金	$0	$12/月（年額請求）	$39/月（年額請求）	要問い合わせ
プロジェクト数	2	100	無制限	無制限
AI生成回数	月3回	月500回	月5,000回	無制限
AIエンジン	Autodesigner 1.5	Autodesigner 2.0	Autodesigner 2.0	Autodesigner 2.0
テンプレート数	10	すべて	すべて	すべて
カスタムブランドキット	✗	✗	○	○

（※1）Proプランは年額請求の場合は月12ドル、月額請求の場合は月19ドルです。1年以上継続利用の見込みがある場合は年額プランがお得です。

 

 

よくある質問

 

 

 

 

まとめ

この記事では、Uizardの使い方を6ステップで解説しました。Uizardでデザインを作るには3つのアプローチがあります。

• 　テンプレートを使う（最も手軽・初心者向け）
• 　AI（Autodesigner）でテキストから自動生成する（スピード重視）
• 　スクリーンショットや手書きスケッチを読み込んでリデザインする（既存改善向け）

使ってみた感触では、テンプレートを使う方が自分のイメージに近いプロトタイプを作りやすいです。一方で、アイデアがまだ固まっていない段階ではAutodesignerで方向性を探るのが効率的です。

無料プランから始められるので、まずは気軽に試してみてください。

Uizardの公式サイト

なお、AIを使ったプレゼン資料作成ツールについては、こちらの記事もあわせてどうぞ。

AIでプレゼン資料を自動作成！スライド作成ツールおすすめ10選

また、図解・インフォグラフィックをAIで作りたい方には、Napkin AIも便利です。

Napkin AIの使い方！アイデアを見える化！資料作成AIツール

イラストをAIで作れるツールについては、別記事でもまとめています。

【画像生成AI】レオナルドAIの始め方と使い方を徹底解説！