🍌Nano-Bananaでいい感じのAppスクリーンショットを楽に作ろう

この記事は株式会社ドットログによる
コンストラク体操日記 Advent Calendar 2025 の 14日目 の記事です。

今回も個人開発ネタしていきます。

まずは、最近私がリリースしたアプリのスクリーンショットを時系列順に見てもらいたい。

1.営魚魚（えいぎょうお）

2.Suvy

3.ichie

どんどんしょぼくなっている...！！！！！！

スクリーンショット作るのめんどくさいしおもんない

一回でもAppStoreにアプリを公開した人には分かってもらえると思いますが、AppStoreの審査に提出するのが一番めんどくさい。

頑張って思い描いてたアプリ作りきったぞ〜早速公開しよ〜と思った時に立ちはだかるこの壁。アホほどでかい。

そんな中でも「スクリーンショット」の作成が一番難しいと思うんですよ。なんて言ったって正解がない上にいくらでもこだわれるけどこだわらなくてもいいのにインストール数稼ぐのに一番大事なんですから。

説明文とかアプリ名の横につけるキャッチコピーとサブタイトルとかは文字列だから、AIと壁打ちしていい感じのやつ採用すればいいんだけど、スクリーンショットはそうとはいかない。

それに、いざ「頑張って作ろう！」と思ってFigmaとかで頑張って作るじゃないですか...

iPad版も作らなくちゃいけないんですよ！

デーン

さらに、多言語対応もすると...

デデデーン

もうやってらんないっすよね〜💢

やっとラスボス倒したと思ったら、裏ボスがぞろぞろ出てきたみたいな気分。
シミュレータでひたすら各デバイス・言語のスクリーンショットを撮影して、フレームに当てはめて、日本語のメッセージをいい感じの長さの英語に翻訳して書き込みつづける。
やってる時は気が狂いそうになりました。趣味個人開発者には荷が重すぎるんですよ！

英語にしか対応してないからまだマシですけど、中国語とか韓国語とかもやろうとしたら3倍,4倍って所要労力が積み上がっていきます。

こんなことに時間使うくらいなら、埃をかぶってるアプリアイデア達を一つでもいいから実現させたい...

救世主、来たる...?

そんな悩みを抱えていたところ、Googleからみなさんご存知のNano-Banana🍌が登場しました。

なんでも、画像中の被写体を一貫して登場させたり、画像の特定の部分だけを編集したり、Nano-Banana-Proになると鮮明で正確なテキストを含む画像を生成できるそうな。

こりゃあ僕ちんの悩みを吹き飛ばしてくれるかもしれねぇと思いましたよ。

救世主の力、いかほどか...？

---

---

---

また、くだらないことに電力を使ってしまった...
Nano-Bananaって最初聞いた時下ネタかと思った

キャラクターの複雑な模様が3枚全てで一貫して描かれている、にもかかわらずユーザーの要望に忠実に周囲の環境の変更やオブジェクトの追加ができる。素晴らしいですね。

ここまではProではないNano-Bananaを使ってきましたが、Proを使うと下のように文字を入れられます。

こりゃいけそうだぜ。

スクリーンショットを作り出す

まずは、こちらのプロンプトでGemini3Proくんに案を出してもらいました。
プロンプトにはichieの既存のスクリーンショット（アプリを本当にスクショしただけのやつ）を添付しました。

プロンプトの参考にした会話

あるiOSアプリのスクリーンショットを作成する手伝いをしてください。

このアプリは添付した画像のように毎日AI生成アートをユーザーに提供します。

ユーザーがダウンロードしたい！と感じる素晴らしいスクリーンショットの案を考えてください。

その案はNanoBananaで画像生成の形で実現するので、それを考慮してください。



以下はアプリの説明文です。


ichieは、あなたの一日に“ひとつのアート”をそっと置くアプリです。



忙しさや情報であふれる毎日の中で、少しだけ静かに気持ちを整えたい。

そのためにこのアプリは、一日一枚だけ、AIが生み出すアートをお届けします。



アプリを開くと、白い壁と静けさに包まれた“美術館のような空間”が広がり、

今日の作品がゆっくりと現れます。

派手な通知やSNS的な賑やかさはありません。

ただ、作品を眺めるための時間だけが流れていきます。



受け取ったアートは日々の記録として並び、

あなたの毎日に寄り添う、静かなギャラリーとなって残っていきます。



忙しい日々の中に、小さな余白を置きたい人へ。

ichieが、あなたの“一日一会”を届けます。

回答はこんな感じでした。

添付いただいた画像とアプリの説明文、とても素敵ですね。
「ichie」という名前と、「忙しい毎日に余白を置く」「美術館のような空間」というコンセプトが、画像からも直感的に伝わってきます。静けさと余韻を大切にしているアプリだと感じました。

ユーザーがストアで見た瞬間に「この静かな世界観に浸りたい」と感じ、ダウンロードしたくなるようなスクリーンショット構成案（全5枚）を提案します。

NanoBanana（スクリーンショット作成ツール）を使用されるとのことですので、**「余計な装飾を削ぎ落とし、余白を活かす」**デザイン構成にしています。

---

### コンセプト: 「手のひらの上の、静かな美術館」
NanoBananaの設定では、背景は「単色（白、または極めて薄いグレー）」や「ぼかし」を使い、アプリのUI（白い壁）と一体感を持たせるのがおすすめです。

#### 1枚目：【掴み・世界観】
最も重要な1枚目です。アプリの「美しさ」と「何をするアプリか」を一瞬で伝えます。

* **ビジュアル:**
    * デバイス：中央に大きく配置。
    * 画面：一番映えるアート（例えば、添付の「夕焼けと雲海」や「灯台」のような、感情に訴えるもの）が表示されている「今日の作品」画面。
* **キャッチコピー（上部または下部に大きく）:**
    * **一日一会。あなたへ届く、今日だけのアート。**
    * （サブテキスト）：AIが紡ぐ、日々の彩り。
* **狙い:** 「美しい」「毎日届く」というコア価値を伝えます。

#### 2枚目：【体験・感情】
アプリを開いた時の「静かな気持ち」や「余白」を強調します。

* **ビジュアル:**
    * デバイス：少し斜めに配置するか、ズームアップしてアートの質感を見せる。
    * 画面：「コーヒー」や「森のランタン」のような、落ち着きのあるアート画像。
* **キャッチコピー:**
    * **忙しい日々に、小さな「余白」を。**
    * （サブテキスト）：喧騒を離れ、心を整える静寂の時間。
* **狙い:** ターゲット層（忙しい人）のニーズ（癒やし、静寂）に刺さるメッセージにします。

#### 3枚目：【機能・コレクション】
続けていく楽しさ（ギャラリー機能）を見せます。

* **ビジュアル:**
    * デバイス：真正面、または2台並べて過去のアートが見える様子。
    * 画面：添付の「カレンダー/グリッド表示（2025/11の画面）」を使用。アートが並んでいる様子。
* **キャッチコピー:**
    * **積み重なる、日々の記憶。**
    * （サブテキスト）：あなただけの、静かな美術館が出来上がります。
* **狙い:** 「長く使うと自分だけのギャラリーになる」という継続メリットを伝えます。

#### 4枚目：【シンプルさ・哲学】
機能が少なく、シンプルであることをあえてアピールします。

* **ビジュアル:**
    * デバイス：下半分を隠すようなレイアウトや、部分的なクロップ。
    * 画面：あえてシンプルな空の画像（添付の青とピンクのグラデーションなど）。
* **キャッチコピー:**
    * **通知も、ノイズもない場所で。**
    * （サブテキスト）：ただ、作品と向き合う時間だけが流れます。
* **狙い:** 「SNS疲れ」している層に、「邪魔されない」という安心感を与えます。

#### 5枚目：【クロージング】
最後にもう一度、ブランドイメージを印象づけます。

* **ビジュアル:**
    * デバイス：3台ほどの端末を前後に重ね、異なる美しいアート（海、山、空などバリエーション豊かに）を表示。
* **キャッチコピー:**
    * **ichie - 日々の暮らしに、アートをひとつ。**
* **狙い:** アートのバリエーションの豊かさと、アプリ名を記憶に残します。

---

### NanoBananaでの作成アドバイス

1.  **フォント選び:**
    * 明朝体や、細めのゴシック体（Noto Sans JP Lightなど）を選ぶと、アプリの繊細な雰囲気にマッチします。太くポップな文字は避けたほうが良いでしょう。
2.  **背景色:**
    * アプリの背景が白ベースなので、スクショの背景も「純白(#FFFFFF)」または「ごく薄いグレー(#F5F5F5)」にして、**「端末の枠（ベゼル）だけが浮いている」**ような、ミニマルな表現にすると非常に洗練されて見えます。
3.  **端末モックアップ:**
    * NanoBananaに「Clay（クレイ/粘土風）」のモックアップがあれば、それの「白」または「ライトグレー」を選ぶと、アプリの優しい世界観に合います。リアルな金属質のiPhoneよりも、柔らかい印象になります。

この構成であれば、「ichie」の持つ静謐で美しい世界観を損なうことなく、ユーザーに魅力を伝えられると思います。とても素敵なアプリになりそうですね。

ここから参考に、以下のプロンプトで画像を生成しました。
アプリアイコンと灯台のスクリーンショットを添付しました。この時Nano-Bananaは最後に添付された画像のサイズで画像を生成するようなので、後者を後の方に添付しました。

背景は添付したアプリアイコンを踏襲。中央にiPhone 15 Proのモックアップを配置。デバイスの画面には、添付画像を表示する。この時スクリーンショット中の灯台の画像だけを抽出してモックアップに嵌め込むのではなく、添付スクリーンショット全体をモックアップにはめ込むこと。デバイスの上部に大きな明朝体のテキストで「一日一会。あなたへ届く、今日だけのアート。」、その下に小さく「AIが紡ぐ、日々の彩り。」と配置。全体的に温かみがありつつモダンな美術館のような印象を演出。

結果はこちら！

シンプルだけどいい感じですね。これをFigmaで作ろうと思うと、モックアップにスクショをピッタリ合わせる作業とかフォントサイズとか、色々めんどくさいのでAIを使って1発で出せるのはありがたいです。

ちょっと背景がギラギラすぎるなと思ったので、「もうちょっと温かみを出して」と伝えるたら反映してくれました。

素晴らしいですね。

ただ少し難点なのが、Geminiが吐き出してくれた画像のサイズが添付画像と全く同じになるわけではなく、そのままAppStoreにあげられないことです。
ただ、アスペクト比はほぼ同じになっているようで、ローカルでサイズ変更すればそのままAppStoreにあげられました。
（補足:AppStoreはスクリーンショットのサイズをピクセル単位で決めているので、それに合わせないと設定できない）

多言語対応（日本語->英語)

先ほど作成したスクリーンショット画像の英語版を作ってもらいます。
構図はそのままに、メッセージだけいい感じにしてくれるとありがたいですね。

元画像を添付して「メッセージを英語にして」と伝えるだけでできてしまいました。

文章も日本語の意味をうまく表現してくれてそう。この使い方はめちゃくちゃ実用的だと思います。

デバイス対応（iPhone -> iPad)

次はiPhoneのスクリーンショットをiPadにしてもらいます。

こんな感じにできました。
ワンショットではできなかったのでチャット履歴をおいておきます。
チャット履歴

ポイントは、参考にするiPhone版のスクリーンショットをただ添付するのではなく、AppStoreに要求されるiPadスクリーンショットのサイズに拡張したことです。
これにより、適切なアスペクト比で画像を生成させることができます。

私はFigmaを使い、透明なフレームで囲んだ後にExportすることで、サイズを変更しました。
Macのプレビューアプリでも試しましたが、無理そうでした。

スクリーンショットを一気に作る

ここまでの検証で一枚のスクリーンショットを多言語・複数デバイスで作成できることがわかりました。

ここからは以下のように、隣り合ったスクリーンショットがつながっている、おしゃれなスクリーンショットを作れるか試していきます。

上に掲載した他アプリのスクリーンショット（まとまったまま）と、該当アプリのスクリーンショット（iPhoneで撮ったまま）を雑に食わせてできるか確かめてみます。

失敗1
失敗2
失敗3
失敗4

色々試したんですが、ちょっとダメそうでした。

おしゃれなレイアウトの1枚を作成

レイアウト全体を1発で作成させるのは無理そうだったので、そのうちの一枚ずつを編集していけるか試してみます。

失敗だけど、なんかいい感じ
こっちも思っていたのとは違うけどうまくいきそう

多分いけそう。

「このスクリーンショットのレイアウトパクりたい！」っていうのを見つけたら、それと自分のアプリのスクリーンショットを食わせれば当てはめてくれそうです。フレームを跨いだ文章やレイアウトがある場合には二つの画像をうまく編集して食わせればいけるんじゃないかな。

むすび

Nano-Banana-Proを使えば、シンプルなレイアウトのスクリーンショットを作成できることがわかりました。
また、作成したスクリーンショットの文字を他の言語に変更することや、iPad版を作成することも可能です。

しかし、凝ったレイアウトのスクリーンショットを作ることは現状では難しかったです。
こういうデザインを作りたい！というのが決まっているセンスのある人がちゃんとfew-shotで指示を出していけば、また結果は違うのかもしれません。

デザインとかよくわからん自分みたいな開発者は、AppStoreやPintarestから「このスクリーンショットおしゃれだな〜」「自分のアプリにも合いそうだな〜」と思うスクリーンショットを探してきて、一枚ずつNano-Banana-Proで自分のアプリに合わせたものへ変更していく。というような使い方が実用的なのかなと思いました。