本文へスキップ
NextCode.ltd

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

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から作って。チグハグ過ぎます』。

最初の60%版(シミュレーター)。ホームは画面案どおりでも、ほかの画面は標準の部品が混ざっていた
最初の60%版(シミュレーター)。ホームは画面案どおりでも、ほかの画面は標準の部品が混ざっていた

原因ははっきりしていて、画面案がホームしか無かったことです。ほかの画面は、決まりの無いまま作ったので、ばらばらになりました。そこで、作る前に、テーマごとに全画面の画面案を描くことにしました。

3画像AIで画面案を描く ― 2回失敗した

使ったのは gpt-image-2.5-flare です。最初は、ホームの画面案を『お手本』として渡して、ほかの画面を描かせました。

失敗1: 部品の見本帳は描けない。 まずタブバー・ボタン・カードなどを並べた『見本帳』を描かせようとしました。縦長で頼むとお手本のホームをほぼそのまま返し、『写さないで』と書くと、今度は部品ではなく、まったく別の旅行アプリの画面を描いてきました。

部品の見本帳を頼んだのに、別の旅行アプリの画面を描いてきた(失敗)
部品の見本帳を頼んだのに、別の旅行アプリの画面を描いてきた(失敗)

失敗2: お手本を渡すと、全部ホームの写しになる。 1画面ずつ『このホームと同じ部品で、ワクチンの画面を描いて』と頼むと、36枚全部が『上にペットのカード、下にメニュー』のホームの写しになりました。頼んだ中身(ワクチンの記録や設定の項目)も描かれていません。

10画面を頼んで、全部ホームの写しになった(失敗)
10画面を頼んで、全部ホームの写しになった(失敗)

4うまくいった描き方

効いたのは2つです。

  • 1枚の横長の絵に、3画面を並べて描かせる。 1枚の中なら、画像AIはタブバー・ボタン・カードをそろえて描きます
  • お手本の絵は渡さず、文章だけで描かせる。 お手本を渡すと見た目はそろっても中身を守りません。代わりに、テーマの決まり(色は何色だけ、カードは何の形、ボタンは何の素材、タブは何個)を細かく文章で書いて、毎回同じ文章を渡しました

これで12画面を4枚に分けて描いても、テーマの中で見た目がそろいました。

5南国は4案から選んだ

『カラフルでトロピカル、今までのアプリに無い感じ。SNSで紹介されて、かわいいと思われるように』という狙いで、南国を4つの方向で描きました。選んだのは①の南国リゾートです。

① 南国リゾート(採用)
① 南国リゾート(採用)
② トロピカル・ポップ
② トロピカル・ポップ
③ 切り絵の島
③ 切り絵の島
④ フルーツパーラー
④ フルーツパーラー

6できた4つの世界(各12画面)

最初に出るテーマは『フェルト人形のピクニック』にしました。ストアのスクショにもこれを使います。画像を押すと、元の大きさで開きます。

フェルト人形のピクニック(最初のテーマ)

フェルト人形のピクニック:ホーム
フェルト人形のピクニック:ホーム
フェルト人形のピクニック:ペットの一覧
フェルト人形のピクニック:ペットの一覧
フェルト人形のピクニック:ペットの編集
フェルト人形のピクニック:ペットの編集
フェルト人形のピクニック:タグに書きこむ
フェルト人形のピクニック:タグに書きこむ
フェルト人形のピクニック:ワクチン
フェルト人形のピクニック:ワクチン
フェルト人形のピクニック:せいちょう日記
フェルト人形のピクニック:せいちょう日記
フェルト人形のピクニック:せってい
フェルト人形のピクニック:せってい
フェルト人形のピクニック:まいごポスター
フェルト人形のピクニック:まいごポスター
フェルト人形のピクニック:シェアする
フェルト人形のピクニック:シェアする
フェルト人形のピクニック:Pro
フェルト人形のピクニック:Pro
フェルト人形のピクニック:はじめの説明
フェルト人形のピクニック:はじめの説明
フェルト人形のピクニック:迷子モードのホーム
フェルト人形のピクニック:迷子モードのホーム

パスポートと旅

パスポートと旅:ホーム
パスポートと旅:ホーム
パスポートと旅:ペットの一覧
パスポートと旅:ペットの一覧
パスポートと旅:ペットの編集
パスポートと旅:ペットの編集
パスポートと旅:タグに書きこむ
パスポートと旅:タグに書きこむ
パスポートと旅:ワクチン
パスポートと旅:ワクチン
パスポートと旅:せいちょう日記
パスポートと旅:せいちょう日記
パスポートと旅:せってい
パスポートと旅:せってい
パスポートと旅:まいごポスター
パスポートと旅:まいごポスター
パスポートと旅:シェアする
パスポートと旅:シェアする
パスポートと旅:Pro
パスポートと旅:Pro
パスポートと旅:はじめの説明
パスポートと旅:はじめの説明
パスポートと旅:迷子モードのホーム
パスポートと旅:迷子モードのホーム

おさんぽの町

おさんぽの町:ホーム
おさんぽの町:ホーム
おさんぽの町:ペットの一覧
おさんぽの町:ペットの一覧
おさんぽの町:ペットの編集
おさんぽの町:ペットの編集
おさんぽの町:タグに書きこむ
おさんぽの町:タグに書きこむ
おさんぽの町:ワクチン
おさんぽの町:ワクチン
おさんぽの町:せいちょう日記
おさんぽの町:せいちょう日記
おさんぽの町:せってい
おさんぽの町:せってい
おさんぽの町:まいごポスター
おさんぽの町:まいごポスター
おさんぽの町:シェアする
おさんぽの町:シェアする
おさんぽの町:Pro
おさんぽの町:Pro
おさんぽの町:はじめの説明
おさんぽの町:はじめの説明
おさんぽの町:迷子モードのホーム
おさんぽの町:迷子モードのホーム

南国リゾート

南国リゾート:ホーム
南国リゾート:ホーム
南国リゾート:ペットの一覧
南国リゾート:ペットの一覧
南国リゾート:ペットの編集
南国リゾート:ペットの編集
南国リゾート:タグに書きこむ
南国リゾート:タグに書きこむ
南国リゾート:ワクチン
南国リゾート:ワクチン
南国リゾート:せいちょう日記
南国リゾート:せいちょう日記
南国リゾート:せってい
南国リゾート:せってい
南国リゾート:まいごポスター
南国リゾート:まいごポスター
南国リゾート:シェアする
南国リゾート:シェアする
南国リゾート:Pro
南国リゾート:Pro
南国リゾート:はじめの説明
南国リゾート:はじめの説明
南国リゾート:迷子モードのホーム
南国リゾート:迷子モードのホーム

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時間受け付けています。

この記事が役に立ったらシェアしてください