ドクペ好きのデザイナーが、Claudeと10日でiOSアプリを作ってApp Storeに出した話

おひさしぶりです、ケリーです🦄

突然ですが、iPhoneアプリを作りました。

その名も「DPMC(Dr Pepper Map Club)」。ドクペ(ドクターペッパー)が買える自販機やお店と、その値段を、みんなで地図に登録して共有するアプリです。

▼ App Store はこちら(無料です)
https://apps.apple.com/app/dpmc/id6824478644

以前の自己紹介の記事で「個人開発に勤しんでいたことも、今では遠い昔の話」なんて書いていた私ですが、まさかの再開です。しかも今回はWebサイトではなく、ネイティブアプリ。（人生なにが起こるかわからない）

今回はアプリの紹介と、AIの「Claude」と一緒に作り始めてから App Store で公開されるまでを、ざっくり書いてみようと思います。

🥤DPMC ってどんなアプリ？

私ドクペが大好きなんです。

ただ、ドクペって飲みたい時に限って見つからないんですよね。コンビニにもない、自販機にもあんまりない。「あの駅の自販機にあったはず…」というあやふやな記憶を頼りに歩き回った経験、ドクペ好きなら一度はあるはず。（あるよね？）

そこで、見つけた人が地図に登録して、みんなで共有できたら便利なんじゃないかと思い、作ったのがこのアプリです。

できることはこんな感じ。

• 近くのドクペを地図で探す(自販機・お店で絞り込み、安い順の並べ替え、駅名での検索も)

• 見つけたら登録する(自販機は地図でピンを合わせるだけ、お店は近くのお店の一覧から選ぶだけ)

• 値段が変わっていたら、誰でも最新の値段に更新できる

• 登録した場所までの徒歩の時間や経路がわかる

• 登録や更新でポイントがたまって、ブロンズ → シルバー → ゴールドとランクが上がる

ログインは不要で、ニックネームとアイコンも最初からランダムで用意されているので、開いてすぐ使えます。

※DPMC は非公式のファンアプリで、ドクターペッパーの製造・販売元とは関係ありません。

😢実は6年前に一度あきらめていた

実はこのアプリ、今回が初めての挑戦ではありません。

6年前、同じアイデアを Web アプリで作ろうとしたことがあります。地図を表示するところまではなんとかできたのですが、「地図の好きな場所をタップしてピンを立てる」という、アプリの一番大事なところがどうしても作れず…。

文字にすると「ピンを立てるだけ」なんですが、当時の私にはその「だけ」がとてつもなく高い壁でした。必死にググっても答えにたどり着けず、そのままそっと閉じてしまったのです。

そして6年の月日が流れ…。ふと「Claude を使えば、今なら余裕で作れるのでは？」と思い立ったわけです。

🤖Claude と一緒に作った

今回、実装はほぼ Anthropicの「Claude Code」にお任せしました。

役割分担はざっくりこんな感じです。

• 私: 何を作るか決める、Figma でデザインする、動きを見て「ここ違う」と言う

• Claude: SwiftUI での実装、データベース(Firebase)の設計、セキュリティのルール、審査に出すための準備まで

Figma で作った画面を Claude に見てもらいながら、「この画面作って」「このボタンもうちょい小さく」と、ほぼ会話だけで進めていきました。デザイナー的には、デザインを渡して実装されたものをチェックする、いつもの仕事とあまり変わらない感覚です。相手が人間のエンジニアさんか AI かの違いくらい。

やってよかったこと

・ルールを1つのファイルにまとめておく

Claude Code には「CLAUDE.md」というファイルにプロジェクトのルールを書いておけて、毎回それを読んでから作業してくれます。私はここに、ブランドカラーや文言のトーン、データの持ち方、やっちゃダメなことなどを全部書いていました。

・お金がかからない作りにしてもらう

個人開発で怖いのが、サーバー代の請求。こちらの記事を参考に、「地図に表示している範囲しか読まない」「勝手に再読み込みしない」など、無料枠に収まる作りを最初からお願いしました。おかげで今のところ0円です。

https://note.com/aoki_monpro/n/nf638929329ed

・本番のデータを触らない

開発中は手元のパソコンの中だけで動く「エミュレーター」を使って、本番のデータは触らないようにしてもらいました。テストのつもりで本番にゴミデータを入れる、みたいな事故が起きないので安心です。

📅公開までのスケジュール

実際の流れはこんな感じでした。

• 1日目: 作り始める。地図、登録、詳細画面までその日のうちに動いた（ここで目玉が飛び出た）

6年前に越えられなかった「好きな場所にピンを立てる」は、なんと初日にあっさりクリア。地図に自分でピンを立てられた瞬間は、ちょっと泣きそうになりました。（6年分の想いがこもってる）

続きはこんな感じ。

• 2日目: ダークモード、ランク、ポイント、ランクアップのお祝い演出など

• 3日目: 広告、スクリーンショット作成、アカウント削除の機能を足して審査に提出

• 4〜8日目: 審査で3回返ってくる（後述）

• 11日目: 承認！App Store で公開

作り始めてから約10日。Claude への修正のお願い(コミット)は100回を超えました。

🍎審査で3回返ってきた

App Store に出すには Apple の審査を通る必要があるのですが、すんなりとはいきませんでした。

1回目は「ユーザーが投稿するアプリなら、嫌なユーザーをブロックできる機能を付けて」という指摘。これは確かに必要だったので、ユーザーのプロフィール画面と、ブロック・通報の機能を追加しました。

2回目は位置情報の許可をお願いする画面。私は「位置情報を使う」と「あとで」の2つのボタンを置いていたのですが、「あとで」はダメで、必ず OS の許可ダイアログに進ませてね、という指摘でした。

UX デザイナーとしては、ユーザーに逃げ道を用意する優しさのつもりだったのに…。Apple のルールにはしっかり従います。（素直）

3回目は「投稿をどうやって見つけるの？」という質問だったので、操作の手順を返信して無事承認されました。

審査への返信文も Claude と一緒に考えたので、英語が苦手な私でもなんとかなりました。

👋最後に

デザイナーとして、自分でデザインしたものが、そのまま App Store に並ぶのはやっぱり嬉しいです。しかも6年前に一度あきらめたアイデアなので、嬉しさもひとしおです。

コードを書けなくても、何を作りたいかと、どう見せたいかがはっきりしていれば、AI と一緒にアプリを形にできる時代になったんだなと実感しました。デザイナーこそ AI での個人開発に向いているのかもしれません。

ただし、なにも知らなくて大丈夫かというと、そうでもありません。GitHub に push してコードを保存する仕組みや、Xcode でビルドしてシミュレーターで動かす流れ、Firebase や App Store Connect の管理画面の操作など、開発のざっくりした仕組みは知っておいた方がいいです。Claude が「これやっといて」と言ってきたときに、何をお願いされているのか分かるくらいの知識はあった方が、ぐっとスムーズに進みます。（私は昔の個人開発の時に習得した知識や普段の仕事でのノウハウに、かなり助けられました）

ドクペが好きな方も、そうでない方も、近くでドクペを見つけたらぜひ登録してみてください。そしてもっとこうした方がいいなどフィードバックもガンガン募集しています。
日本のドクペ好きに幸あれ！

▼ DPMC(無料)
https://apps.apple.com/app/dpmc/id6824478644

それではみなさん、またnoteでお会いしましょう。