今日のテーマは「実務の素材づくり」。アプリアイコン、favicon、SNSシェア用のOGP画像、SNSヘッダーバナー――どれも“ちゃんと動く”ためにサイズと安全マージンのルールが決まっている素材です。本記事ではその規格に合わせて、コピペで試せるオリジナルの生成プロンプトを4本、狙いと効いている理由つきで紹介します。
作例1：アプリストア用マスターアイコン（1024×1024）
①狙い：Apple Human Interface GuidelinesとGoogle Playのアイコン仕様はどちらも「1枚の正方形マスター画像から自動で角丸・縮小版を生成する」前提。だから元画像は文字なし・単一モチーフ・十分な余白が必須です。GPT ImageやNano Banana Proのような高精細モデル向けの作例です。
A single, minimal app icon design: a friendly paper airplane folded from a soft gradient (indigo #4F46E5 to sky blue #38BDF8), viewed from a three-quarter front angle, centered with generous padding on all sides, flat vector-illustration style, subtle soft shadow beneath the object only, no text, no border, no drop shadow frame, solid clean background color #F5F7FF filling the entire square canvas, 1:1 square composition, crisp clean edges, silhouette must stay recognizable when scaled down to a very small size③解説：「a single」「no text」でモチーフを一つに絞るのは、Google Playの仕様にある「15〜18%の内側セーフゾーン」を守るため——複雑な絵柄は自動の角丸トリミングで欠けます。「no border, no drop shadow frame」は、Google Playが2026年3月末から自動で30%の角丸を適用するようになり、自前で縁取りや影を足すと二重になってしまうため明示的に除外しています。「solid clean background color」で背景全面を塗りつぶすのは、透過部分があるとOS側のマスク処理で意図しない切り抜きが起きるのを防ぐためです。
作例2：favicon・PWAアイコン（極小サイズ対応）
①狙い：faviconはブラウザタブで16×16という極小表示になるため、アイコンセット作例（作例1）よりもさらに図形を単純化する必要があります。輪郭とコントラストだけで押し切るデザインです。
Extremely simplified glyph-style icon: a single bold letter "W" formed from two overlapping mountain-peak triangles, thick uniform stroke weight, high-contrast white glyph on a solid deep teal background (#0F766E), no gradients, no fine details, no drop shadow, no additional text beyond the single letterform, perfectly centered, square canvas, geometry bold and simple enough to stay legible when scaled down to 16x16 pixels③解説：「thick uniform stroke weight」と「no gradients, no fine details」が最重要ワード。グラデーションや細線は16pxまで縮小すると潰れて灰色の塊になってしまうため、単色のベタ塗りと太い線だけで構成するよう明示しています。「high-contrast」は視認性の担保で、実務では32×32のfavicon本体に加え180×180のApple Touch Icon、192/512のAndroid・PWA用アイコンも同じマスターから書き出すため、単純な図形の方が全サイズで破綻しにくくなります。
作例3：OGPシェア画像（1200×630）
①狙い：SNSでリンクをシェアされたときに表示されるOGP画像は、プラットフォームごとに微妙にクロップ位置が異なります。文字入りレイアウトが得意なIdeogramやNano Banana Proで、中央のセーフゾーンにテキストを収めた作例です。
Wide social share card, 1200x630 landscape composition. Left third of the frame: bold sans-serif headline text "5 Prompts for Clean UI Icons" in white, large size, left-aligned, positioned well inside the center-safe area away from all four edges. Right two-thirds: a softly blurred abstract background of layered indigo and violet gradient shapes with a faint grid pattern, a small cluster of flat line-art icons (gear, pen, sparkle) scattered in the lower right corner. Small logo mark reading "AI NEWS" in the top-left corner, white, compact size. Strong contrast between text and background, keep the center 1080x600 area free of clutter③解説：見出しを引用符で囲む("5 Prompts for Clean UI Icons")のは、Ideogramの公式的な作法で「引用符内の文字列はそのまま画像内テキストとして描画される」という仕様を利用するためです。「keep the center 1080×600 area free of clutter」は、OGP画像の実質的な業界標準サイズが1200×630(1.91:1)で、各SNSが表示時に周囲を削ることがあるため中央1080×600のセーフゾーンに主要素を収めるための指定です。og:imageというプロパティ自体はOpen Graphプロトコルで定義されていますが、具体的な推奨サイズはFacebookが提示したものが業界標準として定着しています。
作例4：SNSヘッダーバナー（後乗せロゴ前提の背景）
①狙い：X(旧Twitter)やLinkedInのヘッダーは横長比率で、ロゴやプロフィール文字を後から重ねる運用が多いため、あえて「文字なし・中央に余白のある背景素材」だけを生成します。高解像度・広い横長構図が得意なSeedream 4.0向けの作例です。
Ultra-wide banner background, 3:1 aspect ratio, abstract flowing ribbon shapes in a brand gradient from deep navy (#111827) to electric blue (#3B82F6), soft diffused lighting, subtle fine grain texture, no text, no logos, no faces, a large empty negative-space zone in the exact center third of the frame reserved for a logo to be placed later, smooth gradient falloff toward both edges, clean minimal composition suitable as a website or social header background③解説：「no text, no logos」を明記するのは、後工程でロゴやハンドル名を重ねる前提だから——AIが勝手に架空のロゴや文字を描き込むと後処理でトラブルになります。「a large empty negative-space zone in the exact center third」は構図指定で、ヘッダー画像は多くのSNSでプロフィール写真が左下や中央下に重なるため、その部分をあらかじめ空けておくと差し替えが楽になります。「subtle fine grain texture」はのっぺりしたグラデーションが安っぽく見えるのを防ぐための質感補強語です。
用途別・推奨サイズ早見表
| 用途 | 推奨サイズ | アスペクト比 | 備考 |
|---|---|---|---|
| iOS/macOSアプリアイコン（マスター） | 1024×1024px | 1:1 | PNG・不透明・全面塗り。Xcodeが自動で各サイズを書き出す |
| Google Playアイコン | 512×512px | 1:1 | 32bit PNG・1024KB以内。角丸・影は自動付与 |
| favicon本体 | 32×32px（16/32/48を1つのicoに） | 1:1 | 単色・太線推奨 |
| Apple Touch Icon | 180×180px | 1:1 | PNG限定。ホーム画面用 |
| Android/PWAアイコン | 192×192px・512×512px | 1:1 | スプラッシュ画面やアプリ一覧に使用 |
| OGP/SNSシェア画像 | 1200×630px | 1.91:1 | 中央1080×600をセーフゾーンに |
| Xヘッダー | 1500×500px前後 | 3:1 | 中央下にプロフィール画像が重なる想定で余白を確保 |
| LinkedInカバー画像 | 1584×396px前後 | 4:1 | 左下にプロフィール写真が重なる |
主な情報源
- App Icons – Human Interface Guidelines（Apple）
- Google Play icon design specifications（Android Developers）
- Introducing our latest image generation model in the API（OpenAI）
- GPT Image Generation Models Prompting Guide（OpenAI Cookbook）
- Gemini 3 Pro Image – Nano Banana Pro（Google DeepMind）
- Image generation（Google AI for Developers）
- Ideogram（公式サイト）
- Ideogram 4.0 Prompt Guide: JSON, Color Control, and Text Rendering
- Seedream 4.0（ByteDance Seed）
- The Open Graph protocol
- OG Image Size: 1200×630, Ratio, Official Notes
- Favicon Size Guide – All Favicon Sizes
サンプルプロンプトは本メディアのオリジナル例です。各モデル・サービスは提供元の規約に従ってご利用ください。生成物の権利・商用条件は各規約をご確認ください。情報は公開時点のもの。収集・要約はAI、公開判断は人。