Claude Design × Claude Code × Codexで、Biz職でも凝ったスマホアプリを作るフローとテクニック

最近、Claude Design と Claude Code の組み合わせでiOSアプリを作ってみたのですが、想像以上のクオリティのものが作れてしまって感動しています。

私は普段、新規事業立ち上げや事業成長の支援を仕事にしていて、自分の手で iOS アプリを開発した経験はありません。それでも今回、iOSアプリを、コンセプト設計からUIデザイン、SwiftUI によるアプリ実装まで、AIとの会話だけで完走できました。
（現在Apple Developer Programの承認で止まっており公開は追って）

これまでも個人開発でWebサービスは作っていましたが、新しく出た Claude Design を Claude CodeやCodexと組み合わせる形で設計→デザイン→実装が相当ハイレベルに実現できる、ということが実感できました。

本noteでは、Claude Design × Claude Code × Codexを組み合わせて個人アプリをつくる4段階のワークフローと、それぞれで何を AI に指示し、何が実用的だったかを共有します。

前提：今回作ったもの

「neru」という、寝る前のだらだらスマホを防ぐための入眠ルーティン実行アプリをつくりました。

早く寝たいのに SNS や動画を見続けてしまう自分の課題から発想したもので、指定したアプリを開けない状態にして、寝る前のルーティンを順番にこなしていく設計にしました。

主な機能はこんな感じです。

• 入眠ルーティンの作成（歯磨き、明日の準備、瞑想など、所要時間付きでステップ登録）

• ルーティン実行タイマー（自動進行、円形プログレス、一時停止・スキップ・時間調整）

• ルーティン実行中の SNS / 動画アプリなど指定したアプリのブロック

• 連続日数や入眠スコアによる継続支援

• ヒーリングサウンドの自動再生

技術スタックは Swift / SwiftUI で iOS ネイティブアプリとして実装し、課金は StoreKit 2、アプリブロックは FamilyControls APIという構成です。

全体ワークフロー：4つの段階

UX デザインの古典的フレームワークである UX 5 レイヤーに基づきつつ、ツールとレイヤーを明確に紐付けた4段階で進めました。

ざっくり言うと、

• 設計段階でClaude Code が「言葉で詰める層」を、Claude Design が「ビジュアルで固める層」を詰めていく

• 実装段階ではClaude Codeで粗く全体を作って、細部をCodexで詰めていく

という役割分担です。

それぞれの AI が得意な粒度に合わせて役割を分けたことが、今回の開発フローで一番効きました。

補足）UX の 5 レイヤーとは

Jesse James Garrett が 2000 年に提唱した、UX を5つの抽象層で捉える考え方です。

以下のように下から上へ建物の土台から組み立てていくように抽象・基盤的な内容からプロダクトの設計をしていくフレームワークです。

▼ 参考

ベースが固まっていればその表層は早く決まります。逆に、Strategy がブレれば Scope もブレるし、Structure が雑だと Skeleton も歪みます。

「いきなりデザインさせたり実装させる」のではなく、ベースとなる3層を文章で固めてから表層の2層をつくることで、プロダクトのクオリティと精度は一気に高まります。

以降で具体的なフローやどんな指示を送ったかを紹介します。

具体的なステップや指示文も載せているので、以下一連の流れを読むことで実際に皆さんがこれらのAIツールを使って実際にアプリをつくるイメージが掴めるはずです。

【フェーズ①】 基盤設計 ── Claude Code にベース3層の設計書を書かせる