DAY 165 / 100本ノック ― NFCドッグタグを『4つの世界』の着せかえに。画像AIで全48画面の画面案を描いた日

画面案がホームしか無いまま作ると、寄せ集めになる。テーマごとに全画面を先に描いてから作る。
2026-10-06、今日は『NFCドッグタグを、4つの世界の着せかえにする』と決めて、画像AIで全48画面の画面案を描いた日です。アプリの中はまだ作り直していません。今日は設計図(画面案)までです。
1なぜ『かわいい+着せかえ』なのか
App Store に出している12本の、7/4〜10/1 の90日の数字です。合計で、ストアに表示された回数 15,904・ダウンロード 112・売上 12円でした。いちばん人が落ちるのは『表示 → ページを開く』で、約5%しか開かれていません。ここはアイコンとスクショの見た目で決まります。
そこで、機能を足すより先に『見た目がかわいい・毎日開きたくなる・人に見せたくなる』に振ることにしました。着せかえは、毎日アプリを開く理由にもなります。
2最初の60%版は『寄せ集め』だった
朝のうちに、ホームの画面案2つ(パスポートと旅・おさんぽの町)から背景・看板・マスコット・タイルの絵を切り出して、全画面に入れた版を作りました。ホームは画面案に近くなりましたが、ほかの画面は iOS 標準のタブバーとアイコン、白いカードのまま、背景の上に乗っているだけでした。見て一言『寄せ集めみたい。テーマごとに全てを1から作って。チグハグ過ぎます』。
原因ははっきりしていて、画面案がホームしか無かったことです。ほかの画面は、決まりの無いまま作ったので、ばらばらになりました。そこで、作る前に、テーマごとに全画面の画面案を描くことにしました。
3画像AIで画面案を描く ― 2回失敗した
使ったのは gpt-image-2.5-flare です。最初は、ホームの画面案を『お手本』として渡して、ほかの画面を描かせました。
失敗1: 部品の見本帳は描けない。 まずタブバー・ボタン・カードなどを並べた『見本帳』を描かせようとしました。縦長で頼むとお手本のホームをほぼそのまま返し、『写さないで』と書くと、今度は部品ではなく、まったく別の旅行アプリの画面を描いてきました。
失敗2: お手本を渡すと、全部ホームの写しになる。 1画面ずつ『このホームと同じ部品で、ワクチンの画面を描いて』と頼むと、36枚全部が『上にペットのカード、下にメニュー』のホームの写しになりました。頼んだ中身(ワクチンの記録や設定の項目)も描かれていません。
4うまくいった描き方
効いたのは2つです。
- 1枚の横長の絵に、3画面を並べて描かせる。 1枚の中なら、画像AIはタブバー・ボタン・カードをそろえて描きます
- お手本の絵は渡さず、文章だけで描かせる。 お手本を渡すと見た目はそろっても中身を守りません。代わりに、テーマの決まり(色は何色だけ、カードは何の形、ボタンは何の素材、タブは何個)を細かく文章で書いて、毎回同じ文章を渡しました
これで12画面を4枚に分けて描いても、テーマの中で見た目がそろいました。
5南国は4案から選んだ
『カラフルでトロピカル、今までのアプリに無い感じ。SNSで紹介されて、かわいいと思われるように』という狙いで、南国を4つの方向で描きました。選んだのは①の南国リゾートです。
6できた4つの世界(各12画面)
最初に出るテーマは『フェルト人形のピクニック』にしました。ストアのスクショにもこれを使います。画像を押すと、元の大きさで開きます。
フェルト人形のピクニック(最初のテーマ)












パスポートと旅












おさんぽの町












南国リゾート












7かかったもの
今日 NFCドッグタグのために描いた絵(gpt-image-2.5-flare)
| 何を | 枚数 | 1枚の出力トークン |
|---|---|---|
| 部品(看板・マスコット・アイコンなど) | 11枚 | 1,372〜1,756 |
| 見本のペットの写真 | 1枚 | 439 |
| 1画面ずつの画面案(うち失敗39枚) | 45枚 | 1,254〜1,372 |
| 3画面ずつの画面案(使ったのは16枚) | 25枚 | 2,127 |
| 合計 | 82枚 | ◎出力の分だけで約3.9ドル(入力した画像の分は含まない) |
失敗した39枚と、使わなかった3画面の絵9枚は、無駄にはしていません。どう頼むと失敗するかの記録として、道具のコメントと開発の記録に残しました。
8つぎにやること
- 画面案どおりに、テーマごとに専用の部品を作る(タブバー・見出し・ボタン・カード・行・入力欄・アイコン)。iOS 標準の部品は使わない
- ペットのカードを、選んでいるテーマの絵で SNS 用の画像にして、シェアできるようにする
- 同じ日に、ビルドの設定から NFC の権限が抜けていて、タグに書き込めなくなっていたのを見つけて直しました。審査に出し直す時は、権限の入った新しいビルドにします
この記事を書いた人
NextCode(沖縄県宜野湾市)は、iOSアプリ・ホームページ/LP・NFCデジタル名刺・AI業務自動化を作っている開発スタジオです。ここで書いているのは、実際に作って公開したものと、その過程で詰まったことだけです。
お問い合わせフォームは24時間受け付けています。






