デザインもAIに任せる！iPhoneで行うiOS開発

2026/02/10 に行われた「ZOZO.swift #2」で発表した登壇資料です。
https://zozotech-inc.connpass.com/event/380901/

株式会社ZOZO
ブランドソリューション開発本部 FAANS部 フロントエンドブロック
上田 壱成 (@15531b)

Transcript

1. デザインもAIに任せる！ iPhoneで行うiOS開発 株式会社ZOZO ブランドソリューション開発本部 FAANS部 フロントエンドブロック 上田壱成 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 株式会社ZOZO ブランドソリューション開発本部 FAANS部 フロントエンドブロック イッセー / 上田 壱成 2024年4月に株式会社ZOZOに新卒入社し、ショップス タッフ向けの販売サポートツール「FAANS」のiOSアプリ 開発に従事。 趣味は個人開発、筋トレ、青雑貨集め。 2
3. © ZOZO, Inc. 3 目次 1. 背景 2. iPhoneでの開発の全体像 3. 最後に
4. © ZOZO, Inc. 4 背景 個人開発をする上で • 喫茶店やお洒落なカフェではMacBookを開きづらいと感じることがある。 ◦ 外出先でもiPhoneで開発が行える環境を整えたい。 • 思いついたアイデアをすぐに実際の形にしてみたい。 • デザインセンスに自信がないが、UIのクオリティには妥協したくない。 ➢ これらを実現できるiPhoneでの開発フローを考えた。
5. © ZOZO, Inc. 5 iPhoneでの開発の全体像 2 Claude Code GitHub Actions で開発 1 sleek.designで デザインを生成 3 TestFlightで 動作確認
6. © ZOZO, Inc. 6 1. sleek.designでデザイン生成 UIにはこだわりたいため、AIを活用した デザインツール「sleek.design」を使用。 チャット形式で要件を伝えるだけで、 モダンなモバイルアプリのモックが数分で完 成する。 https://sleek.design/
7. © ZOZO, Inc. 7 1. sleek.designでデザイン生成 試しに「iOSでシンプルなメモアプリの デザインを生成して」と頼むと...
8. © ZOZO, Inc. 8 1. sleek.designでデザイン生成 以下のようなデザインが生成される。
9. © ZOZO, Inc. 9 「Copy AI Prompt」をタップすると、 生成したデザインを再現できるプロンプトを コピーできる。 Figmaに書き出すことも可能。 1. sleek.designでデザイン生成
10. © ZOZO, Inc. 10 レポジトリ上でissueを作成し、 その説明欄にsleek.designでコピーした プロンプトなどを記載する。 ※ 予め、GitHubのレポジトリの作成と Claude Code GitHub Actionsの設定を 済ませておく。 2. Claude Code GitHub Actionsで開発
11. © ZOZO, Inc. 11 2. Claude Code GitHub Actionsで開発 issue上でClaudeにメンションし、 PRを作成するようコメントとして指示する。 「Create PR」をタップすると、 PRを作成してくれる。
12. © ZOZO, Inc. 12 3. TestFlightで動作確認 pushすると、Xcode Cloudが配布を行う ためのワークフローを実行する。 ※ 予め、Xcode上でXcode Cloudの設定を済ませ ておく。
13. © ZOZO, Inc. 13 3. TestFlightで動作確認 数分待つと、配布ができる状態になった旨のプッ シュ通知が来る。
14. © ZOZO, Inc. 14 3. TestFlightで動作確認 そのタイミングで、App Store Connectから ビルドを追加して配布を行う。 すると、TestFlight経由で動作確認ができる。
15. © ZOZO, Inc. 15 最後に • iPhoneで開発を行う方法自体はこれまでも存在していたが、クオリティの 高いデザインの作成までも行えるようになった。 • 思いついたらすぐに形にする流れが出来上がり、より個人開発が楽しいと 感じるようになった。 • 一方でiPhoneは表示領域が狭く、スクロールや画面遷移が多くなり、 変更内容を把握しづらい。