はじめに

前回の記事では、AI画像生成ツールでApple HIG準拠のiOSアプリアイコンを生成するためのプロンプトテンプレートを紹介しました。

今回はそのテンプレートを実際に使い、3つのApp Store公開アプリのアイコンをGeminiでリデザインした記録です。

デザイントレンドの変化

前回のテンプレートはフラットデザインを前提にしていましたが、iOS 18以降のApple純正アプリを見ると、トレンドが変わっています。

スタイル特徴時期
フラット単色背景、影なし、グラデーションなしiOS 7〜
モダンiOSソフトグラデーション + 微妙な光沢 + 柔らかい奥行き感iOS 17〜
スキューモーフィズム写実的な立体表現iOS 6以前

Apple純正アプリ(写真、マップ、天気等)は完全なフラットからソフトグラデーション + 微妙な光沢へと移行しています。そこで今回は、プロンプトをモダンiOS風に更新しました。

変更点:フラット → モダンiOS

前回のテンプレートからの主な変更点:

- Fill the entire canvas edge-to-edge with a uniform {{BACKGROUND_COLOR}} background.
+ Fill the entire canvas edge-to-edge with a rich {{BACKGROUND_COLOR}} background
+   featuring a smooth radial gradient from a slightly brighter tone at the
+   top-center to a deeper tone at the edges.

- Style: elegant, minimal color palette, flat design, no gradients on
-   illustration, no shadows, no 3D effects.
+ Style: modern iOS aesthetic — smooth gradient background, soft lighting
+   from above, minimal color palette. Subtle depth through lighting,
+   NOT through drop shadows or 3D extrusion.

+ The overall feel should be premium and refined, similar to Apple's
+   native app icons (smooth gradients, gentle highlights, no hard edges).

ポイント:

  • 背景を単色からラジアルグラデーションに
  • 「soft lighting」「gentle highlights」でソフトな奥行きを指示
  • ドロップシャドウや3D押し出しは明確にNGとして残す
  • 「Apple純正アプリ風」と具体的に指示

実践:3アプリのリデザイン

1. KotenOCR(くずし字OCR)

古典籍のくずし字をオフラインで認識するiOSアプリ。

プロンプト:

A polished, square 1024x1024 app icon for an iOS app called "KotenOCR"
that recognizes classical Japanese cursive script (kuzushiji) and
modern printed/handwritten text using on-device AI.

Design requirements:
- Fill the entire canvas edge-to-edge with a rich deep navy background
  featuring a smooth radial gradient from a slightly brighter navy
  (#243B55) at the top-center to a deep navy (#0F1C2E) at the edges.
  No white areas, no transparency, no empty corners.
- Do NOT include frames, borders, or decorative edges of any kind.
- Center illustration: a stylized classical Japanese kanji character
  "典" (meaning "classic/canon") drawn in elegant brushstroke
  calligraphy style, rendered in white (#FFFFFF) with a very subtle
  soft glow effect behind it to give gentle luminosity.
- Include one teal (#4DB6AC) scanning viewfinder bracket (two
  L-shaped corner marks, top-left and bottom-right) surrounding the
  character to suggest OCR recognition. The brackets should have a
  subtle inner glow.
- A few faint, partially visible kuzushiji characters scattered in
  the background at very low opacity (#1A2A3A) to evoke a classical
  manuscript atmosphere, as if emerging from the dark background.
- Style: modern iOS aesthetic — smooth gradient background, soft
  lighting from above, minimal color palette (deep navy gradient +
  white calligraphy + teal accent). Subtle depth through lighting,
  NOT through drop shadows or 3D extrusion.
- The overall feel should be premium and refined, similar to Apple's
  native app icons (smooth gradients, gentle highlights, no hard
  edges).
- The central character should be bold and dominant, clear at small
  sizes (29px). Medium-to-bold weight brushstrokes.
- Do NOT add any text, letters, or labels other than the central
  kanji character.
- Do NOT pre-round corners — perfectly square image. iOS applies
  rounded corners automatically.
- Output: square PNG, 1024x1024 pixels.

Before / After:

BeforeAfter
KotenOCR BeforeKotenOCR After

「典」の背後にソフトグローが効き、スキャンフレームがティール色に光るモダンなアイコンになりました。背景にくずし字が浮かぶ演出も効果的です。

2. IIIF AR(歴史的絵図AR)

高解像度の歴史的絵図をARで実寸大表示するアプリ。

プロンプト:

A polished, square 1024x1024 app icon for an iOS app called "IIIF AR"
that places high-resolution historical Japanese maps and illustrations
in augmented reality at real-world scale.

Design requirements:
- Fill the entire canvas edge-to-edge with a rich warm background
  featuring a smooth radial gradient from a slightly brighter warm
  tone (#3A2F28) at the top-center to a deep dark brown (#1A1410)
  at the edges. No white areas, no transparency, no empty corners.
- Do NOT include frames, borders, or decorative edges of any kind.
- Center illustration: a stylized composition of overlapping
  historical Japanese maps and scrolls — one partially unrolled scroll
  and one flat map, showing fragments of traditional ink landscape art
  (mountains, rivers, architecture in East Asian brushwork style),
  rendered in warm cream/gold (#E8D5A8) line art with a subtle soft
  glow behind the composition.
- Include one teal-blue (#1E88E5) AR location pin marker placed on
  the map to suggest spatial AR placement. The pin should have a
  subtle inner glow.
- Below the maps, include a faint perspective grid (3-4 thin lines
  in #2A2420) to represent the AR floor plane detection.
- Style: modern iOS aesthetic — smooth gradient background, soft
  lighting from above, minimal color palette (dark warm brown
  gradient + cream/gold illustration + one blue accent). Subtle depth
  through lighting, NOT through drop shadows or 3D extrusion.
- The overall feel should be premium and refined, similar to Apple's
  native app icons (smooth gradients, gentle highlights, no hard
  edges).
- The illustration should be detailed enough to be interesting but
  clear at small sizes (29px). Medium-weight lines.
- Do NOT add any text, letters, or characters.
- Do NOT pre-round corners — perfectly square image. iOS applies
  rounded corners automatically.
- Output: square PNG, 1024x1024 pixels.

Before / After:

BeforeAfter
IIIF AR BeforeIIIF AR After

巻物と絵図が重なる構図で、ARピンのブルーグローが印象的。床面グリッドがAR配置を示唆するデザインになりました。

3. JPS Explorer(ジャパンサーチ探索)

ジャパンサーチの文化遺産コレクションを探索するアプリ。

プロンプト:

A polished, square 1024x1024 app icon for an iOS app called
"JPS Explorer" that lets users discover and explore Japan's cultural
heritage collections through Japan Search.

Design requirements:
- Fill the entire canvas edge-to-edge with a rich deep navy background
  featuring a smooth radial gradient from a slightly brighter navy
  (#1E3450) at the top-center to a deep navy (#0C1A2E) at the edges.
  No white areas, no transparency, no empty corners.
- Do NOT include frames, borders, or decorative edges of any kind.
- Center illustration: a stylized magnifying glass tilted slightly
  (handle pointing to bottom-right), with a polished gold/brass frame
  and handle rendered with smooth metallic gradients and soft
  highlights to convey premium quality.
- Inside the magnifying glass lens: a traditional Japanese seigaiha
  (青海波 / blue ocean wave) pattern in gold (#C8A85C) lines on a
  slightly lighter navy background, visible through a subtle glass
  lens effect (very mild refraction/distortion).
- Behind the magnifying glass, faintly visible: a few scattered
  fragments of Japanese cultural imagery at very low opacity
  (#152540) — such as a partial ukiyo-e wave, a torii gate outline,
  or a maple leaf — to suggest the breadth of the collection.
- Style: modern iOS aesthetic — smooth gradient background, soft
  lighting from upper-left, metallic gold with gentle reflections.
  Subtle depth through lighting and metallic sheen, NOT through hard
  drop shadows or 3D extrusion.
- The overall feel should be premium and refined, similar to Apple's
  native app icons (smooth gradients, gentle highlights, elegant
  materials).
- Clear at small sizes (29px) — the magnifying glass shape should
  be immediately recognizable.
- Do NOT add any text, letters, or characters.
- Do NOT pre-round corners — perfectly square image. iOS applies
  rounded corners automatically.
- Output: square PNG, 1024x1024 pixels.

Before / After:

BeforeAfter
JPS BeforeJPS After

金のルーペ + 青海波 + 浮世絵の波・鳥居・紅葉が背景に浮かぶ、最もリッチな仕上がりになりました。ただし角丸が事前に適用されていたため、後処理で対応が必要でした。

3アプリの統一感

アプリ背景色モチーフアクセント
KotenOCR濃紺グラデーション「典」+ スキャンフレームティール
IIIF ARダークブラウングラデーション絵図・巻物 + ARピンブルー
JPS Explorer濃紺グラデーションルーペ + 青海波ゴールド

共通点として、ダーク系グラデーション + ソフトグロー + 1色のアクセントという構造を揃えることで、同じ開発者のアプリだと認識しやすくなります。

生成後の後処理

Geminiで生成したアイコンには、いくつか後処理が必要でした。

1. Geminiのウォーターマーク除去

Geminiは右下に小さな✦マークを入れます。対称にトリミングすることで除去できます。

from PIL import Image

img = Image.open("generated_icon.png")

# 2048x2048の場合
margin = 130
cropped = img.crop((margin, margin, 2048 - margin, 2048 - margin))
resized = cropped.resize((1024, 1024), Image.LANCZOS).convert("RGB")
resized.save("AppIcon.png", "PNG")

2. 角丸の除去

JPS Explorerのアイコンでは角丸が事前に適用され、四隅が白くなっていました。大きめにトリミングすることで角丸の内側だけを使います。

from PIL import Image

img = Image.open("generated_icon.png")  # 2048x2048

# 角丸領域をカット(約180px)
margin = 180
cropped = img.crop((margin, margin, 2048 - margin, 2048 - margin))
resized = cropped.resize((1024, 1024), Image.LANCZOS).convert("RGB")
resized.save("AppIcon.png", "PNG")

3. RGBへの変換

App StoreのアイコンはRGBが必要です。Geminiの出力はRGBA(透明チャンネル付き)のことがあるため、.convert("RGB") を忘れずに。

学んだこと

  1. 「Apple純正アプリ風」と書くと効く — 具体的なリファレンスを示すと、AIの出力品質が上がる
  2. 角丸は防ぎきれない — プロンプトで禁止しても適用されることがある。後処理で対応する前提で
  3. Geminiの✦は必ず入る — トリミングで対処が最も確実
  4. 色パレットの統一が重要 — 複数アプリで「同じ開発者」感を出すなら、アクセント以外の構造を揃える
  5. 背景のくずし字がひらがなになることがある — AIは「classical Japanese characters」と「modern hiragana」を混同しやすい。具体的な文字を指定すると改善する可能性がある

関連記事