デザインもAIに任せる！ iPhoneで行うiOS開発 株式会社ZOZO ブランドソリューション開発本部 FAANS部 フロントエンドブロック 上田壱成 Copyright © ZOZO, Inc. 1 

© ZOZO, Inc. 株式会社ZOZO ブランドソリューション開発本部 FAANS部 フロントエンドブロック イッセー / 上田 壱成 2024年4月に株式会社ZOZOに新卒入社し、ショップス タッフ向けの販売サポートツール「FAANS」のiOSアプリ 開発に従事。 趣味は個人開発、筋トレ、青雑貨集め。 2 

© ZOZO, Inc. 3 目次 1. 背景 2. iPhoneでの開発の全体像 3. 最後に 

© ZOZO, Inc. 4 背景 個人開発をする上で ● 喫茶店やお洒落なカフェではMacBookを開きづらいと感じることがある。 ○ 外出先でもiPhoneで開発が行える環境を整えたい。 ● 思いついたアイデアをすぐに実際の形にしてみたい。 ● デザインセンスに自信がないが、UIのクオリティには妥協したくない。 ➢ これらを実現できるiPhoneでの開発フローを考えた。 

© ZOZO, Inc. 5 iPhoneでの開発の全体像 2 Claude Code GitHub Actions で開発 1 sleek.designで デザインを生成 3 TestFlightで 動作確認 

© ZOZO, Inc. 6 1. sleek.designでデザイン生成 UIにはこだわりたいため、AIを活用した デザインツール「sleek.design」を使用。 チャット形式で要件を伝えるだけで、 モダンなモバイルアプリのモックが数分で完 成する。 https://sleek.design/ 

© ZOZO, Inc. 7 1. sleek.designでデザイン生成 試しに「iOSでシンプルなメモアプリの デザインを生成して」と頼むと... 

© ZOZO, Inc. 8 1. sleek.designでデザイン生成 以下のようなデザインが生成される。 

© ZOZO, Inc. 9 「Copy AI Prompt」をタップすると、 生成したデザインを再現できるプロンプトを コピーできる。 Figmaに書き出すことも可能。 1. sleek.designでデザイン生成 

© ZOZO, Inc. 10 レポジトリ上でissueを作成し、 その説明欄にsleek.designでコピーした プロンプトなどを記載する。 ※ 予め、GitHubのレポジトリの作成と Claude Code GitHub Actionsの設定を 済ませておく。 2. Claude Code GitHub Actionsで開発 

© ZOZO, Inc. 11 2. Claude Code GitHub Actionsで開発 issue上でClaudeにメンションし、 PRを作成するようコメントとして指示する。 「Create PR」をタップすると、 PRを作成してくれる。 

© ZOZO, Inc. 12 3. TestFlightで動作確認 pushすると、Xcode Cloudが配布を行う ためのワークフローを実行する。 ※ 予め、Xcode上でXcode Cloudの設定を済ませ ておく。 

© ZOZO, Inc. 13 3. TestFlightで動作確認 数分待つと、配布ができる状態になった旨のプッ シュ通知が来る。 

© ZOZO, Inc. 14 3. TestFlightで動作確認 そのタイミングで、App Store Connectから ビルドを追加して配布を行う。 すると、TestFlight経由で動作確認ができる。 

© ZOZO, Inc. 15 最後に ● iPhoneで開発を行う方法自体はこれまでも存在していたが、クオリティの 高いデザインの作成までも行えるようになった。 ● 思いついたらすぐに形にする流れが出来上がり、より個人開発が楽しいと 感じるようになった。 ● 一方でiPhoneは表示領域が狭く、スクロールや画面遷移が多くなり、 変更内容を把握しづらい。 

No content