ダーク/ライト両対応アイコン・グラデーションメッシュ・グレインノイズ――差がつくAI生成UI素材プロンプト作例

2026年10月13日

UI素材づくりというと「アイコンを1個ずつ描く」「テクスチャサイトから拾う」のが定番だったが、いまはアイコンセットもグラデーション背景もグレインノイズも、プロンプト1本で実務レベルの完成度まで作れる。今日は特に見落とされがちな3つの実務ネタ——①ダーク/ライト両対応のUIアイコンセット、②ヒーローセクション用のグラデーションメッシュ背景、③フィルムグレイン風ノイズテクスチャ、そしてシームレスタイルパターンの作り方を、自作のサンプルプロンプトと一緒に分解する。

① ダーク/ライト両対応のUIアイコンセット

アプリのアイコンセットは「1個だけ良い出来」では使えない。同じ線の太さ、同じ余白、同じ角丸で並んでいて、かつダークモードの背景でも潰れずに見える必要がある。ベクター出力とスタイル固定に強いRecraftのスタイル保存機能を使うと、1回スタイルを定義してからプロンプトだけ差し替える運用がしやすい。

Flat vector icon of a cloud-upload symbol, single continuous 2px stroke, rounded line caps and joins, no fill except one accent color (#6366F1), centered inside a 48x48px safe area with 6px padding, transparent background, no drop shadow, no gradient, no outline box, geometric and minimal, must stay legible when scaled down to 16px

効いている要素の分解: 「single continuous 2px stroke」で線の太さをセット全体に固定でき、複数アイコンを生成しても線幅の不揃いが起きにくい。「centered inside a 48x48px safe area with 6px padding」は、後でスプライトシートに並べたときの余白のズレを防ぐための実務的な指定。「must stay legible when scaled down to 16px」を入れておくと、細部が潰れやすい複雑な図形を避けた、シンプルな形状に寄ってくれる。ダークモード確認用には、同じプロンプトの末尾に「on a dark navy background (#0B0D12)」を足した検証カットを1枚別途生成し、明暗両方で可読性をチェックするのが実務的。

② グラデーションメッシュのヒーロー背景

2026年のランディングページで増えているのが、単純な2色グラデーションではなく複数の色が有機的に溶け合う「メッシュグラデーション」の背景だ。Nano Banana Proのような高精細モデルは、色の指定と余白の指定を細かく書くほど破綻が減る。

Abstract mesh gradient background, seven soft organic color blobs blending smoothly into each other with no hard edges: indigo #4F46E5, violet #8B5CF6, teal #14B8A6, blush #FB7185, deep colors concentrated in the lower-right corner, the upper-left third left as calm, low-contrast negative space for a headline overlay, very subtle grain at low opacity to avoid banding, no objects, no text, no logos, 21:9 wide crop

効いている要素の分解: 色を「hex + 位置」でセットで指定すると、意図しない場所に主張の強い色が出るのを防げる。「upper-left third left as calm, low-contrast negative space」はテキストを乗せる余白を確保するための構図指定で、単に「シンプルな背景」と書くより効果が安定する。「subtle grain at low opacity to avoid banding」は、なめらかなグラデーションほど発生しやすい色の縞模様(バンディング)をあらかじめ防ぐテクニック的な一言。

③ フィルムグレイン風ノイズテクスチャ(オーバーレイ素材)

のっぺりしがちなAI生成画像に質感を足す定番が、粒状のノイズテクスチャをレイヤーで重ねる手法。単体のオーバーレイ素材として生成しておくと使い回しがきく。

Seamless fine film-grain noise texture, grayscale monochrome, density comparable to 35mm analog photo grain, evenly and randomly distributed with no directional streaks or clumping, subtle micro-contrast, no vignette, no color cast, tileable edge to edge, flat overlay ready to blend at low opacity

効いている要素の分解: 「evenly and randomly distributed with no directional streaks or clumping」は、ノイズ生成でありがちな縞や偏りを明示的に除外する除外構文。「tileable edge to edge」を入れることで、大きなサイズが必要な場面でも継ぎ目なく敷き詰められる素材になる。「flat overlay ready to blend at low opacity」は用途(オーバーレイとして低不透明度で重ねる)を明記し、コントラストが強すぎる出力を避けるための指定。

④ シームレスタイルパターン(背景・パッケージ用)

Midjourneyには継ぎ目のない繰り返し模様を生成する--tileパラメータがあり、背景素材やパッケージ用の柄づくりに向いている。

Seamless repeating pattern of hand-drawn botanical line leaves, single-weight ink strokes, sage green line color on a warm cream background, irregular organic scatter with no large empty gaps, flat vector illustration style --tile --ar 1:1

効いている要素の分解: 「irregular organic scatter with no large empty gaps」は、規則的すぎて不自然に見える柄や、逆に密度がまばらになる失敗を防ぐための密度指定。--tileは生成後にプレビューを実際にタイル状に並べて継ぎ目を確認する必要があり、特にアップスケール後は境界がズレることがあるため、本番に使う前に必ず並べ貼りでチェックする。

実務でよく使うパラメータ・指定語早見表

素材の種類	向いているツール	効く指定語・パラメータ	出力形式
UIアイコンセット	Recraft, Ideogram	stroke weight固定、safe area指定、transparent background	SVG / 透過PNG
グラデーションメッシュ背景	Nano Banana Pro, FLUX.2	hex色+位置指定、negative space、no banding	PNG (21:9など横長)
グレインノイズテクスチャ	Nano Banana Pro, GPT Image	grayscale、tileable、no directional streaks	PNG (正方形・大判)
シームレスタイルパターン	Midjourney	`--tile` `--ar 1:1`、density指定	PNG (要タイル確認)