👌

デザイン自動生成ができるUizard を使ってみる

2023/12/20に公開

この記事は mob Advent Calendar 20日目の記事です。

今回はデザインツールである uizard に デザイン自動生成機能を試してみたという記事です。

https://uizard.io/

とりあえず生成してみる

アカウントを作ったら、ひとまず作ってみることにします。

このような入力をしました。

  • Q. Which device are you designing for?

    • A. Mobile
  • Q. Describe your project in plain English

    • A. A social media app for gamers
  • Q. Describe a design style, pick keywords, or both

    • A. Like Facebook but purple

出来上がった画面がこちらです。些細な気になるところはあるかもですが、かなりそれっぽいです。

Welcome Login Screen Social Media Explore
Search Message Sent Profile

モックを動かす

画面遷移みたいなものも定義してくれております。

上記が定義されているのもあって、 Preview から実際にモックを触ってみることもできます。

画面を追加する

ゲーム一覧画面も欲しかったので、Promptに 「game list」と入れて、生成してもらいます。
下記のようにいくつか候補が出てくるので、希望に合ったものを選び、なければ Prompt をいじって 「Try Again」をおします。

テーマを変更する

「Generate Theme」という機能があります。

Prompt, ScreenShot, URL, Scratch の4種類の生成方法があります。
Prompt を選び、下記のような入力をして生成してみます。

このような画面が出てくるので、気に入れば Apply 、気に入らなければ Reset をします。今回は Apply しました。

適用前のものに、新しいデザインが全ての画面に適用されました。


適用前


適用後

便利です。

ただ、一つ困ることがあります。テーマの一部を変更したいというのが現状はできないようです。。

https://support.uizard.io/en/articles/7947511-using-theme-generator#h_b0e95e26a5

まとめ & 所感

  • アプリを作る時、初回のデザイン + テーマの生成には結構使えると思いました
    • 特にデザインが得意ではない個人開発エンジニアはめちゃくちゃ良い製品かも
  • 一方で、AI生成機能だけで全部作り切るのはかなり厳しい
    • 画面追加時など思ったよりも思い通りの生成がされないなと感じました
      • スクリーンショット から生成でワイヤーフレームの写真を渡せるのでそれでうまくいく可能性もあります
    • テーマは結構いいなと思っても、微妙な部分があったらはじめから、、、みたいなリセマラ的なことをしないと厳しいので早く編集機能が追加されるといいなと思います

Discussion