今日のテーマは「プロダクトUIのイラスト素材」です。ロゴやアイコンだけでなく、実際のアプリ・Webサービスで使う「オンボーディング画面」「空状態(Empty State)」「404エラーページ」「ローディング/成功画面」向けのイラストを、AI生成でシリーズとして揃える実務的なプロンプトの書き方と、スタイル一貫化のテクニックをまとめます。
プロダクトUIイラストをAIで作る前に知っておきたいこと
ロゴやアイコンと違い、オンボーディングや空状態のイラストは「1枚で完結」ではなく、アプリ内の複数画面で同じ絵柄・同じキャラクターを使い回す前提で作る必要があります。ポイントは大きく2つです。1つは背景の扱い(UI部品の上に重ねるなら透過、ページ全体のヒーロー画像なら不透明)、もう1つはスタイルの固定(色数・線の太さ・キャラクターの造形を複数枚で揃える)です。以下、それぞれのテクニックをサンプルプロンプトつきで解説します。
①オンボーディング/ウェルカム画面用イラスト——背景透過で汎用パーツ化する
OpenAIのImage APIではbackground="transparent"パラメータ(出力はPNGかWebP限定)を指定すると背景を透過できますが、公式ガイドは「プロンプト内でシーンや背景を描写すると透過指定より優先されてしまう」と注意しています。つまりプロンプトには背景の話を一切書かず、被写体だけを孤立させて指示するのがコツです。Nano Banana Proのような会話型モデルでも同様に、スタイル語彙を具体的な形容(色数・線の太さ)まで落とし込むと安定します。
A friendly flat vector illustration of a small robot mascot waving both hands beside a rocket ship, for a mobile app onboarding welcome screen. Rounded geometric shapes, soft pastel palette of mint green, coral, and cream, thick 4px outlines, flat solid colors with no gradients, centered composition with generous even padding on all sides, isolated subject with no backdrop, no scenery, no shadow, flat 2D illustration style, friendly and approachable mood.「isolated subject with no backdrop / no scenery」で背景描写そのものを消し、透過パラメータの効きを妨げないようにしています。「generous even padding」は、あとでUI側にボタンやテキストを重ねる余白を確保するための指定です。「thick 4px outlines」「flat solid colors with no gradients」は色数と線を絞り込むための具体的な数値語彙で、Nano Banana系のガイドが推奨する「抽象的な形容詞ではなく具体的な数値・語彙で指定する」実践にあたります。
②空状態(Empty State)イラスト——スタイル参照で複数パターンを揃える
検索結果0件、受信箱が空、タスクリストが空——同じアプリの中で何パターンも必要になるのが空状態イラストです。Ideogramの Style Reference は最大3枚の参照画像から絵柄だけを抽出して別テーマの生成に転用できる機能で、Character Reference と併用すればキャラの造形とスタイルを別々に固定できます。まず基準となる1枚を作り、その画像をスタイル参照にして被写体だけ差し替えるのが効率的です。
[基準プロンプト]
Flat vector illustration, minimal empty state graphic for a SaaS dashboard: a magnifying glass hovering over an empty rounded rectangle card, small floating dot particles around it, muted palette of soft lavender, slate gray, and white, thin 2px outlines, flat solid colors, plenty of negative space, calm and reassuring mood, centered composition, isolated on white background.
[スタイル参照で被写体だけ差し替え]
An open envelope with a small crescent-moon icon sleeping above it, floating dot particles around it, same flat vector style, same muted lavender and slate gray palette, thin 2px outlines, centered composition, isolated on white background.2枚目のプロンプトでは「same flat vector style」「same muted lavender and slate gray palette」のように1枚目の語彙をそのまま繰り返している点が重要です。Style Referenceに画像を渡していても、テキスト側の語彙が矛盾しているとスタイルが揺れやすいため、色名・線の太さ・構図の指定は使い回すようにします。
③404エラーページ用イラスト——ネガティブプロンプトが使えないモデルの書き方
Black Forest Labsの公式プロンプトガイドは、FLUXファミリー(FLUX.1/FLUX.1 Kontext/FLUX.2)がネガティブプロンプトに対応していないことを明記しています。「〜なし」ではなく「欲しい状態」を肯定文で描写するのが原則です。404ページのような「余白に見出しテキストを乗せたい」ケースでは、「no text」と書く代わりに「空のスペースを確保する」ことを直接指示します。
Flat vector illustration of a small compass character with googly eyes looking confused at a signpost pointing in three different directions, for a website 404 error page. Warm palette of terracotta, mustard yellow, and off-white, bold 5px outlines, solid flat colors, uniform soft ambient lighting across the whole scene, wide empty sky area on the left third of the frame reserved for heading text, whimsical and lighthearted mood, wide landscape composition, 16:9 aspect ratio.「uniform soft ambient lighting across the whole scene」は「影を作らないで」という禁止形の代わりに、光の状態そのものを肯定文で指定した表現です。同様に「wide empty sky area on the left third of the frame reserved for heading text」も、「文字を入れない」ではなく「見出し用の余白を確保する」という前向きな指示に言い換えています。FLUX系モデルでプロンプトが効きにくいと感じたときは、まず文中の否定形を探して肯定文に書き換えると改善しやすい、というのが公式ガイドの立場です。
④ローディング/成功画面セット——数値スタイルコードでシリーズ化する
Midjourneyの Style Reference(–sref)は画像URLの代わりに数値コードを指定でき、公式ドキュメントも「数値コードは画像URLより再現性が高い(固定されたスタイルベクトルを参照するため)」としています。ローディング画面と成功画面のように「同じキャラクター・同じ絵柄で状態だけ変える」セットを作るときは、同じ--sref番号を使い回すのが最も安定した方法です。
[ローディング画面]
A small paper airplane character flying in a gentle circular loop trailing a soft dotted line, flat vector illustration for an app loading screen, playful rounded geometric shapes, palette of sky blue, sunshine yellow and white, medium 3px outlines, flat solid colors, centered composition with generous margin --sref 1234567890 --sw 250 --ar 1:1
[成功/完了画面]
The same small paper airplane character landing gently on a fluffy cloud with a checkmark badge appearing beside it, flat vector illustration for an app success confirmation screen, playful rounded geometric shapes, palette of sky blue, sunshine yellow and white, medium 3px outlines, flat solid colors, centered composition with generous margin --sref 1234567890 --sw 250 --ar 1:12つのプロンプトで--srefの番号を完全に一致させ、色パレットや線の太さの語彙も揃えていることで、キャラクターの造形や配色がブレにくくなります。--sw(style weight、0〜1000、既定値100)を高めに設定するとスタイル参照の効きが強くなるので、シリーズ全体の統一感を優先したいときは200前後まで上げると安定します。
ツール別・スタイル固定と背景透過の主な機能
| ツール | 主な一貫性/透過の機能 | 実践ポイント |
|---|---|---|
| GPT Image 2 | background=”transparent”パラメータ(PNG/WebP出力) | プロンプトに背景描写を書かない。被写体を孤立させる語彙(isolated / no backdrop)を使う |
| Midjourney | –sref <数値コード> + –sw <0-1000> | 数値コードは画像URL指定より再現性が高い。シリーズ化するなら同じ番号を使い回す |
| Ideogram | Style Reference(最大3枚)+Character Reference併用、カラーパレット指定 | スタイルとキャラを別々に固定できる。テキスト語彙も1枚目から使い回すと安定 |
| FLUX.2 | ネガティブプロンプト非対応 | 「〜なし」ではなく欲しい状態を肯定文で描写する。プロンプトは自然文の情景描写にする |
| Imagen 4 | アスペクト比 1:1 / 3:4 / 4:3 / 9:16 / 16:9 の5種 | UI用途(正方形バナー/縦長モバイル/横長ヒーロー)に応じてVertex AI Studioで選択 |
用途別・推奨パラメータ早見表
| 用途 | 推奨アスペクト比 | 背景 | スタイル固定の主な手段 |
|---|---|---|---|
| オンボーディング/ウェルカム画面 | 1:1 または 4:5 | 透過(PNG/WebP) | 語彙(色数・線の太さ)の統一 |
| 空状態(Empty State) | 1:1 | 白背景 or 透過 | Style Reference画像 + 語彙の使い回し |
| 404/エラーページ | 16:9 | 不透明(背景込み) | 肯定文での状態指定(ネガティブプロンプト非対応モデル向け) |
| ローディング/成功画面セット | 1:1 | 透過 | 数値スタイルコード(–sref等)の使い回し |
主な情報源
- OpenAI API — Image prompting guide
- Midjourney — Style Reference
- Ideogram — Style Reference
- Black Forest Labs — FLUX Prompting Guide
- Google Cloud Vertex AI — Set output resolution (Imagen)
- Leonardo.Ai — Nano Banana Prompt Guide
サンプルプロンプトは本メディアのオリジナル例です。各モデル・サービスは提供元の規約に従ってご利用ください。生成物の権利・商用条件は各規約をご確認ください。情報は公開時点のもの。収集・要約はAI、公開判断は人。