AIにiOSアプリのデザインを任せられるのか #フェンリルxSansan勉強会

AIにiOSアプリのデザイ ンを任せられるのか @shu223

自己紹介 • • • 堤 修一 @shu223 (GitHub, Zenn, Qiita, note, Docswell, 𝕏, YouTube, Podcast, etc...) 書籍（商業出版4冊、個人出版多数 @BOOTH）:

• https://github.com/shu223
• https://x.com/shu223
• https://www.youtube.com/@shu223
• https://shu223.booth.pm/items

「AIでiOSアプリ開発を効率化したい」シリーズ 各種ツールの比較 docswell.com/s/shu223/ZP2L2G-ios-ai AIエージェント編 docswell.com/s/shu223/51R4GG-ai-agent-ios

• https://www.docswell.com/s/shu223/ZP2L2G-ios-ai
• https://www.docswell.com/s/shu223/51R4GG-ai-agent-ios

今日はUIデザイン編 • 実装面ではAIが大活躍 • 残りのボトルネックはデザイン • UIデザイン • アイコンデザイン

期待値 • 「思いついたからちょっと作ってみた」程度の雑な個人開発ア プリ の見た目をサクッといい感じに整えたい • 会社での開発やちゃんとした個人開発では当然プロのデザイ ナーさんと協業する → デザインできない自分よりベターであればOK プロのデザイナーさん >>>> AI > 自分

調べてみるといろいろある • v0・・・WebフロントエンドのUI生成が強み • Uizard・・・UIデザイン全般をAIでサポートするツール • Galileo AI・・・Uizardとスコープは同じっぽい／まだ試してない → 今回はUizardについて

Uizardとは • 会社としては2018年に設立、2021年に正式リリース 2 • テキストプロンプト／手書きスケッチ／スクリーンショット等からUIデザインを生成 2 ChatGPTの登場が2022年なので、生成AIブーム前夜から存在

Uizardの「iOS app design template」 「iOS 15」というのが微妙に古くて気になるが、見た感じ良さそう

iOSテンプレートから始めてみる

1. "Start from Template" ボタンをク リック 2. テンプレート選択画面で iOS app design template を選択 以上

・・・で？ このデザインを自分が作りたいアプリに適用するには？

ここから編集していく ということらしい

思ってたのと違った • テンプレートを編集して自分のアプリに近づけていくみたいなのは めんどくさい（もちろんAIのサポートはあるにしても） • アプリの仕様を渡すと選択したテンプレートに準じたUIデザインを 生成してくれる、みたいなのを期待していた • こういうのはUizardでは「テーマ」と呼ぶらしい 1 1 "iOS"を冠したテーマはない／テンプレートからテーマを抽出する機能もない

Autodesigner テキストプロンプトを入力するだけで、複数の画面からなるUIデザイン を自動生成

Autodesigner でUIデザインを生成してみる

プロジェクトの概要を伝える • モバイル／タブレット／デスクトップから選択 • テキスト（英語のみ／300文字まで）でプロ ジェクト概要を記述 ここでは "Try example" ボタンで生成されたテキ ストをそのまま利用： "Plant shop for people who forget to water the plants" （水やりを忘れてしまう人向けの植物ショップ）

スタイルを伝える 1/2 以下から選択 • スクリーンショット • プロンプト • URL • Brand kit ここでは「プロンプト」を選択

スタイルを伝える 2/2 好ましいスタイルをテキストとタグで指定す る ここでは "Try example" ボタンで生成された テキストをそのまま利用（タグも自動選 択）： Green and minimalist

生成結果

• グレーアウトしている画面を触るに は要課金 • 無料プランでは1プロジェクトにつき 5画面まで

• パッと見良さげ • しかしそこはかとないB級感も • それでもデザインができない自分が 時間をかけてこねくりまわすよりは 良さそう

ここからどう実装に落とし込むか？ UizardにはSwiftコードを生成する機能はない • 画像をエクスポートしてCursorやv0に読ませてSwiftUIコード を生成してもらう • React等のコードを生成してもらい、他の生成AIでSwiftUIの コードに変換する • デザインを見ながら（AIの力も借りつつ）実装する

Price • 月払いだと19ドル • 比較表をみると一見Freeでもそれなりに使 えそうな気がするが、実用するなら課金が 必要になると思う • プライベートプロジェクトが作れない • AI生成が3回まで • 高解像度の画像をエクスポートできない

できないこと • CursorのDocsのように、URLでHIGを読み込ませて準拠させる 3 • 生成したデザインをFigmaにエクスポート 4 • アイコンデザインの生成 • テンプレートからのテーマ抽出 3 スタイル指定時にURLを渡すことはできるが、ドキュメントとして読んでくれるのではなく「そのサイトのデザインのスタイル」を参考にしてくれるという機能のようだ 4 エクスポートはできる

個人的所感 • 得意ではないデザインを自分でこねくりまわして時間を費やすよりは、 $19 課金して頼ったほうがコスパ（タイパ）は良いように思う • iOS標準に則って一切味付けをしないのであれば、SwiftUIでプレーンに 実装し、CursorのDocsにHIGのURLを読み込ませて整えてもらう、ぐら いで十分かもしれない