---
title: AIにiOSアプリのデザインを任せられるのか
tags:  #ios #swift #ai #uizard #v0  
author: [Shuichi Tsutsumi](https://convert.docswell.com/user/shu223)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/4EZKY4Q4E3.jpg?width=480
description: [フェンリル × Sansan勉強会 - connpass](https://sansan.connpass.com/event/342738/) での発表です。
published: February 21, 25
canonical: https://convert.docswell.com/s/shu223/57RLEG-ios-ai-design
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/4EZKY4Q4E3.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/Y76QD36G7V.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/G75R3L6XE4.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/9J2DZLMQJR.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/DEY2RQXYEM.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VJN8DK1R78.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/YE9KGV5ZE3.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/GE8RVP6YJD.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LELK5199JR.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/4JM23WZVJW.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PJRMQY6WE9.jpg)



# Page. 12

![Page Image](https://bcdn.docswell.com/page/PEXV5GMV7X.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/3EKQ64G5ED.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/L73P6LN1E5.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/87DLVNWKEG.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/VJP2V593J8.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/2EVDZPMNEQ.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/57GY4PG57L.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4EQMG2XLJP.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/KJ4V5L65E1.jpg)

生成結果


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LE13WLV2JG.jpg)



# Page. 22

![Page Image](https://bcdn.docswell.com/page/GEWP6VL2J2.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/47ZKY4M473.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/YJ6QD3NGJV.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/GJ5R3L5X74.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/LE3P6LN4J5.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/8EDLVNW5JG.jpg)

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


