Webサイトのヒーロー背景、資料の下地、UIのモック用素材は「主役を置く余白」を先に設計できるかで使いやすさが決まります。今回は背景・テクスチャ・グラデーション・UIモック素材に絞り、コピーして試せるオリジナルのプロンプト4例と、色・余白・ネガティブの書き方を整理します。
素材づくりで最初に決める3つ
- どこに文字やUIを載せるか：背景は「何を描くか」より「どこを空けるか」を指定する。
- 色を何色にするか：色名ではなくHEXコードで対象ごとに指定すると、近い色味に寄せやすい。ただしFLUX.3の検証記事では、出力の色は指定よりやや彩度が落ちたり明るさがずれたりしたと報告されています。ブランド色を厳密に合わせたいなら、生成後に色を測って補正する前提で使います。
- ネガティブをどう書くか：FLUX系にはネガティブプロンプト欄がなく、「人がいない」ではなく「empty」「deserted」のように、あるべき状態を肯定形で書く方針が同記事で紹介されています。
作例1：サイトのヒーロー背景（左に余白、右に被写体）
狙い：SaaSの紹介ページ向け。左半分にキャッチコピーを載せるため、模様を置かず、右側にだけ柔らかい立体形状を置く横長背景。対応：FLUX、Nano Bananaなど自然文に強いモデル。
Abstract 3D hero background for a website, 16:9. The left 55% of the frame is an empty, smooth off-white #F4F1EA surface with a soft vignette, kept clean for headline text. On the right, a cluster of three translucent glass spheres in coral #FF6B5B and deep indigo #2B2D6E, gently overlapping, soft studio lighting from the upper left, subtle shadow on the floor, shallow depth of field, matte minimal aesthetic, high resolution.効いている要素：
- 「left 55% … empty」：余白の位置と割合を数字で指定。「no objects on the left」のような否定より、空の状態を肯定形で書く。
- HEX指定：背景と各オブジェクトに1色ずつ割り当てる。色が混ざりにくい。
- soft studio lighting / matte：質感と光を揃えるとUIの上に載せても主張が強すぎない。
作例2：継ぎ目のないテクスチャ（紙・和紙風）
狙い：パワポやWebの下地に敷く、目立たない紙質テクスチャ。Midjourneyの--tileで繰り返し用の1タイルを作る。
Subtle handmade washi paper texture, fine visible fibers, warm cream color, very low contrast, flat even lighting, no shadows, top-down macro view, seamless repeating pattern --tile --ar 1:1 --stylize 50効いている要素：
- –tile：公式の説明では、繰り返しタイルとして使える画像を生成するパラメータ。1枚のタイルだけが出力されるので、並べて継ぎ目を確認する。
- very low contrast / flat even lighting：下地は主張を抑える。影を消すと繰り返したときの明暗ムラが出にくい。
- –stylize 50：Midjourney既定の美的味付けを弱め、素材らしい地味さに寄せる（0〜1000、既定100）。
作例3：透過したい装飾素材（Ideogram）
狙い：背景に散らす手描き風の葉っぱ飾り。切り抜き不要の透過PNGを狙う。
A loose cluster of hand-drawn eucalyptus leaves in sage green #8FAF8B and soft gold #D9B76E, delicate line illustration with flat color fills, generous empty space around the artwork, transparent background効いている要素：
- transparent background：Ideogramの公式ガイドによると、Autoで「transparent background」を入れるのが簡単な始め方。手動で選ぶなら透過対応モデル（4.0 Transparent、3.0 Transparent）が必要で、通常モデルに同じ語を書いても透過にはなりません。
- artworkそのものを描写：同ガイドは「Tシャツのデザイン」と書くとシャツの絵になりかねないと注意。素材そのものを描写する。
- generous empty space：後で配置・拡縮しやすい余白を確保する。
作例4：UIモック用の素材（ダッシュボード風の背景画面）
狙い：画面の中身は後でFigma等で作る前提で、ぼかした“それらしい”UI背景だけを作る。文字は生成させない。
A blurred, out-of-focus laptop screen showing a clean analytics dashboard with soft blue #3B6EF5 charts on a white interface, desk with a notebook and a ceramic cup, natural window light from the right, shallow depth of field, calm minimal office mood, 3:2, space on the left third for text overlay効いている要素：
- blurred / out-of-focus：読めない文字が崩れて見える問題を避ける。画面内の細部は後から差し替える。
- space on the left third：作例1と同様、載せる要素の位置を先に確保。
- natural window light：光源の向きを書くと影の方向が揃い、他素材と並べても違和感が少ない。
指定の早見表
| やりたいこと | 書き方 | 注意点 |
|---|---|---|
| 余白の確保 | “left 55% empty” / “space on the left third” | 否定でなく、空の状態を肯定形で書く |
| 色の指定 | 対象ごとにHEX（例 coral #FF6B5B） | 出力色はずれうる。厳密な色は後で補正 |
| 繰り返しタイル | Midjourney: --tile |
1タイルのみ出力。継ぎ目を確認 |
| 透過背景 | Ideogram: “transparent background” | 対応モデルを確認 |
| 縦横比 | Midjourney: --ar 16:9 ／ 他は文中で明記 |
モデルごとに対応比率が違う |
| 素材らしい地味さ | low contrast / flat lighting / --stylize低め |
主役を食わない下地にする |
使う前のチェック
- 実寸に当てはめ、文字を載せて読めるか確認する。
- タイルは2×2に並べて継ぎ目を見る。
- 透過素材は細い茎や縁の残りを拡大して確認する。
- 商用利用の可否は各サービスの規約で確認する。
主な情報源
- Ideogram for Print-on-Demand: A Practical Design Guide
- FLUX.3 Image Prompt Guide（Fuser）
- Midjourney Docs（パラメータ一覧・Tile）
- Gemini 画像生成（Nano Banana）
サンプルプロンプトは本メディアのオリジナル例です。各モデル・サービスは提供元の規約に従ってご利用ください。生成物の権利・商用条件は各規約をご確認ください。情報は公開時点のもの。収集・要約はAI、公開判断は人。