はじめに
iOSアプリのアイコンをAI画像生成ツール(Gemini、ChatGPT/DALL-E、Midjourney等)で作る際、Apple Human Interface Guidelines(HIG)に準拠した画像を一発で生成するのは意外と難しいです。
よくある失敗:
- 角丸が事前に適用されている(iOSが自動で角丸マスクをかけるので不要)
- 四隅に白い隙間がある
- テキストが入っている
- 細かすぎて小サイズで潰れる
本記事では、これらの問題を回避するプロンプトテンプレートを紹介します。
テンプレート
A flat, square 1024x1024 app icon for an iOS app called "{{APP_NAME}}"
that {{APP_DESCRIPTION}}.
Design requirements:
- Fill the entire canvas edge-to-edge with a uniform {{BACKGROUND_COLOR}}
background. No white areas, no transparency, no empty corners.
- Do NOT include frames, borders, or decorative edges of any kind.
- Center illustration: {{ILLUSTRATION_DESCRIPTION}}, rendered in
{{INK_COLOR}} line art style.
- Include one {{ACCENT_COLOR}} {{ACCENT_ELEMENT}} placed on the
illustration to {{ACCENT_PURPOSE}}.
- {{OPTIONAL_ELEMENT}}
- Style: elegant, minimal color palette ({{COLOR_PALETTE}}), flat design,
no gradients on illustration, no shadows, no 3D effects.
- 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.
```text
## 変数一覧
| 変数 | 説明 | 例 |
|------|------|-----|
| `APP_NAME` | アプリ名 | IIIF AR |
| `APP_DESCRIPTION` | 機能を1文で | places historical maps in AR |
| `BACKGROUND_COLOR` | 背景色 | warm cream (#F0E4CC) |
| `ILLUSTRATION_DESCRIPTION` | 中央イラストの内容 | a Japanese landscape with mountains |
| `INK_COLOR` | イラストの線画色 | dark navy (#1A237E) |
| `ACCENT_COLOR` | アクセント色 | blue (#1565C0) |
| `ACCENT_ELEMENT` | アクセント要素 | AR pin marker |
| `ACCENT_PURPOSE` | アクセントの意図 | suggest spatial placement |
| `OPTIONAL_ELEMENT` | 追加要素(不要なら行ごと削除) | a subtle perspective grid |
| `COLOR_PALETTE` | 色パレットの説明 | cream + navy + blue accent |
## 使用例
### 歴史的絵図ARアプリ
```text
A flat, square 1024x1024 app icon for an iOS app called "IIIF AR"
that places high-resolution cultural heritage images in augmented
reality at real-world scale.
Design requirements:
- Fill the entire canvas edge-to-edge with a uniform warm
cream/parchment (#F0E4CC) background. No white areas, no
transparency, no empty corners.
- Do NOT include frames, borders, or decorative edges of any kind.
- Center illustration: a stylized composition showing overlapping
cultural heritage imagery — such as a fragment of a traditional
Japanese landscape painting with mountains, water, and architecture
— rendered in dark navy (#1A237E) line art style.
- Include one blue (#1565C0) location/AR pin marker placed on the
illustration to suggest spatial placement.
- Optionally include a subtle perspective grid (2-3 thin lines) at the
bottom to hint at AR floor placement.
- Style: elegant, minimal color palette (cream + navy ink + one blue
accent), flat design, no gradients on illustration, no shadows, no
3D effects.
- 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.
```text
### くずし字OCRアプリ
```text
A flat, square 1024x1024 app icon for an iOS app called "KotenOCR"
that recognizes classical Japanese cursive script (kuzushiji) using
on-device AI.
Design requirements:
- Fill the entire canvas edge-to-edge with a uniform warm ivory
(#FAF3E8) background. No white areas, no transparency, no empty
corners.
- Do NOT include frames, borders, or decorative edges of any kind.
- Center illustration: a stylized fragment of a classical Japanese
manuscript page with elegant brushstroke characters, rendered in
dark sumi ink (#2C1810) line art style.
- Include one teal (#00897B) scanning/recognition indicator (such as a
viewfinder bracket or highlight box) placed over one character to
suggest OCR recognition.
- Style: elegant, minimal color palette (ivory + sumi ink + one teal
accent), flat design, no gradients on illustration, no shadows, no
3D effects.
- 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.
```text
## Apple HIG準拠チェックリスト
生成後に以下を確認してください。
- [ ] 正方形(1024×1024px)で、角丸なし
- [ ] 四隅まで背景色で塗りつぶされている(透明や白の隙間なし)
- [ ] テキストが含まれていない
- [ ] 写真ではなくイラスト/グラフィック
- [ ] 29pxに縮小しても何のアプリかわかる
- [ ] Apple製品のレプリカが含まれていない
- [ ] カスタムのハイライトやドロップシャドウがない
## 適用方法
```bash
# 生成した画像を配置
cp ~/Downloads/generated_icon.png \
{PROJECT}/Assets.xcassets/AppIcon.appiconset/AppIcon.png
# ビルドして確認
xcodegen generate
xcodebuild build -project {PROJECT}.xcodeproj -scheme {SCHEME} ...
```text
## 参考
- [Apple Human Interface Guidelines - App Icons](https://developer.apple.com/design/human-interface-guidelines/app-icons)