アプリ・Webサイトを生成AIのVisilyを使ってデザインする

大枠のデザインをAIに作成してもらう話

今回は個人開発する上でデザインが必要になってきたので
大枠をAIに任せた話したいと思います。アプリのイメージを湧かせてから、
それをデザインに落とし込むのは時間がかかります。
そこで今回、デザインのAIツール「Visily」を使ってみたので
選んだ理由・使用方法・使った感想について話していきます。

私の場合はアプリデザインを作成しましたが、Webデザインも作成することが可能です。

Visilyとは？

Visilyは、スクリーンショット、手書きイメージ、テキストプロンプトを
編集可能なワイヤーフレームおよびプロトタイプに迅速に変換する
AIワイヤーフレームツールです。

話す内容

• Visilyを選んだ理由
• 使用方法
• 使ってみた感想・まとめ

Visilyを選んだ理由

• 無料で使用できる
  • まずは無料で試せるのが良い点です。
    AIツールは有料のものが多く、試してみるまでに敷居が高いことがあります。
    Visilyは無料で使用でき、直感的に操作できます。
    　
• スクリーンショットからデザインを組むことができる
  • 作りたいアプリのデザインがなかなか思い浮かばない時があります。
    そんな時は、既存のアプリからデザインイメージをスクリーンショットして
    Visilyに渡せば、似たようなデザインを生成してくれます。
    (完全に一緒のデザインは生成されません)
    　
• 手書きのデザインイメージ画像をVisilyに渡すと自動でデザインが組まれる
  • Figmaなどのデザインツールを上手に使いこなすには学習コストがかかります。
    しかし、Visilyを使えば手書きのイメージを
    デザインとしてアウトプットすることができます。
    　
  • 直感的にデザインのイメージを描き、あとはVisilyに任せて、
    残りの細かいところを手動で修正するといった使い方ができます。
    　
• 今後はText to Designに対応予定
  • 現段階ではText to Designには対応していませんが、近日公開予定のようです。
    Text to Designが公開されたら、スクリーンショットや手書きの
    イメージから作成したデザインを元に、テキストベースで
    デザインを修正することができます。
    例えば「ここのTabBarがしっくりこない...」と思った時に、テキストベースで修正できるとより便利になります。

スクリーンショットからデザインを作成する方法

• VisilyのWebサイトにアクセスして「Get Visily Free」をタップします。

• アカウントを作成してダッシュボードに移動します。
  Create project → Blank Project → Hi-fi Designを選択します。

• 次に「Screenshot to Design」を選択して、作成したいデザインの
  スクリーンショットをアップロードします。

するとこのように簡単にデザインが完成します。
生成されたデザインを自分で手直しするとかなり仕上がります！

使ってみた感想・まとめ

アプリデザインをある程度はイメージできたとしても、
具体的に「こんな感じにしたい」とイメージするのは難しいです。
そんな時はAIを使用して大枠を作成してもらうのも一つの手段だと思っています。

ある程度のクオリティーのデザインを作成できるので、
システム開発にも時間を割くことができます。
この方法でアプリ・Webのデザインを作成してみてください！

採用情報

最後にお知らせとなりますが、イーディーエーでは一緒に働くエンジニアを募集しております。詳しくは採用情報ページをご確認ください。

みなさまからのご応募をお待ちしております。