ラボ

Nano Banana ゲームデザイン実践:UIアイコン&実績バッジ量産テンプレート10選

UIデザイナーにとって、美しいアイコンを1つ描くことよりも、スタイルが統一されたスキルアイコンを50個描くことの方が悪夢です。Nano Bananaを「アイコン工場」に変えましょう。「グリッド配列」と「スタイルアンカー」技術を駆使して、RPGのスキルアイコンや実績バッジのセットを一括生成します。

Nano Banana ゲームデザイン実践:UIアイコン&実績バッジ量産テンプレート10選 (Iconography & UI Assets)

Nano Banana ゲームデザインシリーズ:

UIデザイナーにとっての悪夢は、1つの美しいアイコンを描くことではなく、50個のスタイルが統一されたスキルアイコンやインベントリアイテムを描くことです。本チュートリアルは、Nano Bananaをあなたの「アイコン量産工場」に変えます。「グリッド配列 (Array Grid)」「スタイルアンカー (Style Anchoring)」 技術を使用することで、RPGのスキルアイコン全セット、高品質なアイテム素材、ランク別実績バッジを一度に生成することができます。

01. 核となるロジック:メタプロンプト解析

アイコン生成の鍵は**「一貫性 (Consistency)」「切り抜きやすさ (Isolation)」**です。モデルに対して、特定の形状仕様(角丸長方形など)と統一された背景に従うよう強制する必要があります。

メタプロンプト (Meta Prompt):

Prompt (英語):

Create a set of [Number] Game/App Icons for [Theme].
Layout: Arranged in a strict Grid Layout (e.g., 4x4) with consistent spacing.
Frame: [Shape: Rounded Rectangle / Circle / Shield-shape].
Style: [Art Style: Skeuomorphic / Flat Vector / Neon / Pixel].
Background: Solid [Color] background for easy masking.
Content: High readability, strong silhouette, distinctive colors.

(解析:**"Strict Grid Layout"* は、アイコン同士の重なりを防ぐ量産の核心です。"Solid Background"(純黒やマゼンタなど)は、後工程でのワンクリック自動選択切り抜きを保証します。)*


02. 徹底実践:厳選UIシナリオ10選 (10 Cases)

1. RPG 元素魔法スキルアイコン (Magic Skill Icons)

RPG 元素魔法スキルアイコンセット

Prompt (日本語):

RPGの元素魔法スキルアイコンセットを作成。16個のアイコンを含む。
レイアウト:4x4のグリッド配列。
フレーム:装飾的な金の縁取りがある暗い正方形のタイル。
スタイル:精巧な手描きデジタルアートスタイル、魔法の輝き (Glow effects) を強調。
内容:火の玉、氷の破片、落雷、癒しの光、盾、影の呪い、風の刃、流星群など。各アイコンは明確な色テーマを持つ。

Prompt (英語):

Create a set of RPG Elemental Magic Skill Icons containing 16 icons.
Layout: 4x4 grid arrangement.
Frame: Dark square tiles with ornate gold borders.
Style: Exquisite hand-painted digital art style, emphasizing magical Glow effects.
Content: Fireball, Ice Shard, Lightning Strike, Healing Light, Shield, Shadow Curse, Wind Blade, Meteor Shower, etc. Each icon has a distinct color theme.

2. カジュアルマッチ3ゲームの資源アイコン (Casual Game Currency)

カジュアルマッチ3ゲームのアイコン

Prompt (日本語):

カジュアルなマッチ3モバイルゲームの資源/通貨アイコンセットを作成。
レイアウト:3x3のグリッド、純白の背景。
スタイル:3Dレンダースタイル、ジューシーで光沢のあるゼリーの質感、高彩度、キャンディのように美味しそうに見える。
内容:金貨(積み上げ)、ピンクのダイヤモンド、エネルギーの稲妻、赤いハートのライフ、爆弾パワーアップ、虹色のハンマー、無限時間の砂時計。

Prompt (英語):

Create a set of Casual Match-3 Mobile Game Resource/Currency Icons.
Layout: 3x3 grid, pure white background.
Style: 3D render style, Juicy/Glossy jelly texture, high saturation, looking appetizing like candy.
Content: Gold coins (stacked), Pink diamonds, Energy bolts, Red heart lives, Bomb power-ups, Rainbow hammers, Infinite time hourglass.

3. FPS キルフィード/HUDアイコン (Kill Feed / HUD Icons)

FPS キルフィードアイコン

Prompt (日本語):

FPSシューターのHUDキルフィード(撃破ログ)アイコンセットを作成。
レイアウト:水平またはグリッド配列、純黒の背景。
スタイル:ミニマリストなフラットホワイトのベクターシルエット、詳細なし、高い視認性。
内容:アサルトライフルの側面図、スナイパーライフル、手榴弾、近接ナイフ、ヘッドショットのドクロマーク、車両衝突マーク、落下ダメージマーク。

Prompt (英語):

Create a set of FPS Shooter HUD Kill Feed Icons.
Layout: Horizontal or grid arrangement, pure black background.
Style: Minimalist Flat White Vector Silhouettes, no details, high readability.
Content: Assault rifle side profile, Sniper rifle, Grenade, Melee knife, Headshot skull symbol, Vehicle impact symbol, Fall damage symbol.

4. SFサバイバル ステータスアイコン (Status Effects)

SF ステータス効果アイコン

Prompt (日本語):

ハードコアSFサバイバルゲームのステータス効果アイコン(バフ/デバフ)セットを作成。
レイアウト:4x4のグリッド。
スタイル:ホログラフィックHUDスタイル、シアンと警告色の赤の配色、半透明のテック感。
形状:六角形のハニカムボーダー。
内容:放射線中毒(バイオハザード記号)、低重力、酸素不足、低体温症(雪の結晶)、骨折、重量超過、ステルスモード。

Prompt (英語):

Create a set of Hardcore Sci-Fi Survival Status Effect Icons (Buffs/Debuffs).
Layout: 4x4 grid.
Style: Holographic HUD style, Cyan and Alert Red color scheme, translucent tech vibe.
Shape: Hexagonal honeycomb borders.
Content: Radiation poisoning (Biohazard symbol), Low gravity, Low oxygen, Hypothermia (Snowflake), Bone fracture, Overencumbered, Stealth mode.

5. リアルなインベントリ食品アイコン (Realistic Inventory Food)

リアルなサバイバル食品アイコン

Prompt (日本語):

リアルなサバイバルゲームのインベントリ用食品アイコンセットを作成。
レイアウト:グリッド配列、灰色の背景。
スタイル:超リアルなスキューモーフィック(擬似実物)デザイン、詳細なテクスチャ、食べられそうに見える。
内容:錆びたスパム缶(半開き)、カビの生えたパン、きれいな水筒、焼いたウサギの脚、赤いリンゴ、圧縮ビスケットのパック。

Prompt (英語):

Create a set of Realistic Survival Inventory Food Icons.
Layout: Grid arrangement, grey background.
Style: Hyper-realistic Skeuomorphic, detailed textures, looking edible.
Content: Rusty spam can (half open), Moldy bread, Clean water bottle, Roasted rabbit leg, Red apple, Pack of compressed biscuits.

6. ランクティアバッジ (Ranked Badges)

競技ランクバッジ

Prompt (日本語):

競技ゲームのランクティアバッジセットを作成。低ランクから高ランクへの進化を示す。
レイアウト:横並び、計7個のバッジ。
スタイル:宝石が埋め込まれた金属的なエンボススタイル。
内容:ブロンズ(粗い)、シルバー(磨かれた)、ゴールド(装飾的)、プラチナ(サファイア付き)、ダイアモンド(結晶質)、マスター(紫のオーラ)、グランドマスター(炎のような複雑な紋章)。

Prompt (英語):

Create a set of Competitive Ranked Tier Badges, showing evolution from low to high.
Layout: Horizontal arrangement, total 7 badges.
Style: Metallic embossed style with gem inlays.
Content: Bronze (rough), Silver (polished), Gold (ornate), Platinum (with sapphire), Diamond (crystalline), Master (purple aura), Grandmaster (fiery complex crest).

7. モダン iOS タブバーアイコン (Tab Bar Icons)

iOS タブバーアイコン

Prompt (日本語):

モダンなiOSスタイルのアプリタブバーアイコンセットを作成。
レイアウト:2行配列。上段はラインアイコン(アウトライン)、下段は同じ内容の塗りつぶしアイコン(アクティブ状態)。
スタイル:Apple SF Symbolsスタイル、丸みを帯びたストローク、ミニマリスト、モノクロ黒。
内容:ホーム(家)、発見(コンパス)、メッセージ(吹き出し)、カート(バッグ)、プロフィール(人型)。

Prompt (英語):

Create a set of Modern iOS style App Tab Bar Icons.
Layout: Two rows: Top row is Line icons (Outlined), Bottom row is Filled icons (Active state) of the same content.
Style: Apple SF Symbols style, rounded strokes, minimalist, monochrome black.
Content: Home (House), Discover (Compass), Message (Bubble), Cart (Bag), Profile (Person).

8. TCG 属性シンボル (TCG Attribute Symbols)

TCG 属性シンボル

Prompt (日本語):

トレーディングカードゲーム (TCG) の属性シンボルアイコンセットを作成。
レイアウト:円形アイコンの配列、透明背景。
スタイル:シンプルなグラデーションを用いたベクターグラフィックデザイン。ハースストーンやMTGのマナシンボルに似ている。
内容:水滴(青)、炎(オレンジ)、葉(緑)、ドクロ(黒)、太陽(黄)、星(無色)。

Prompt (英語):

Create a set of TCG (Trading Card Game) Attribute Symbol Icons.
Layout: Circular icon array, transparent background.
Style: Vector graphic design with simple gradients, similar to Hearthstone or MTG mana symbols.
Content: A Water drop (Blue), A Flame (Orange), A Leaf (Green), A Skull (Black), A Sun (Yellow), A Star (Colorless).

9. ダークファンタジー スキルツリーノード (Skill Tree Nodes)

ダークファンタジー スキルツリーアイコン

Prompt (日本語):

ダークファンタジーのパッシブタレントツリーアイコンセットを作成。
レイアウト:グリッド配列、濃い灰色の背景。
形状:円形の枠、石や骨に似たテクスチャ。
スタイル:モノクロまたはデュオトーン、エッチング/版画スタイル。
内容:筋力アップ(筋肉質な腕)、クリティカル率(目)、ライフスティール(コウモリ)、移動速度(ブーツ)、耐性(ひび割れた盾)。

Prompt (英語):

Create a set of Dark Fantasy Passive Talent Tree Icons.
Layout: Grid arrangement, dark grey background.
Shape: Circular borders, texture resembling stone or bone.
Style: Monochrome or Duotone, Etching / Engraving style.
Content: Strength Up (Muscular arm), Crit Chance (Eye), Life Steal (Bat), Move Speed (Boot), Resistance (Cracked shield).

10. レースシム 計器盤警告灯 (Dashboard Warning Lights)

レースゲーム 計器盤警告灯

Prompt (日本語):

レースシミュレーターのダッシュボード警告灯アイコンセットを作成。
レイアウト:グリッド配列、黒背景。
スタイル:発光するネオンベクタースタイル、高コントラスト。
内容:ABS故障(黄)、エンジン過熱(赤い温度計)、燃料低下(給油機)、タイヤ摩耗(タイヤ断面)、DRS作動(緑)、エンジンチェック(オレンジのエンジン輪郭)。

Prompt (英語):

Create a set of Racing Sim Dashboard Warning Light Icons.
Layout: Grid arrangement, black background.
Style: Glowing Neon Vector style, high contrast.
Content: ABS Fault (Yellow), Engine Overheat (Red Thermometer), Low Fuel (Gas Pump), Tire Wear (Tire section), DRS Active (Green), Check Engine (Orange Engine outline).

03. Nano Banana 失敗しないためのヒント

  1. 文字を入れない (No Text)
    UIアイコンの中に文字(「LV.1」「NEW」など)を絶対に入れないでください。AIが生成する文字はここでは通常使えません。

    • ヒント: 文字は後でPhotoshopやFigmaで追加してください。AIにはグラフィックだけに集中させましょう。
  2. 枠線の統一 (Border Consistency)
    AIは時々、一部のアイコンにだけ枠を付けてしまうことがあります。

    • ヒント: プロンプトで "Uniform shape and border style" (統一された形状と枠線スタイル) または "Borderless" (枠線なし) と明記してください。
  3. 色の修正 (Color Correction)
    セットの中の1つのアイコンだけ色が違う(例:火の玉が緑色)場合。

    • ヒント: 画像全体を描き直さないでください。Nano Bananaの Inpainting (部分書き直し) 機能を使って、その特定のアイコンだけを修正しましょう。