jpskill.com
🎨 画像AI コミュニティ

nano-image-generator

Gemini 3 Pro Previewを活用し、アプリのアイコンやロゴ、マーケティングバナーなど、様々なビジュアルコンテンツを、参照画像を用いてスタイルを維持しながら生成するSkill。

📜 元の英語説明(参考)

Generate images using Nano Banana Pro (Gemini 3 Pro Preview). Use when creating app icons, logos, UI graphics, marketing banners, social media images, illustrations, diagrams, or any visual assets. Supports reference images for style transfer and character consistency. Triggers include phrases like 'generate an image', 'create a graphic', 'make an icon', 'design a logo', 'create a banner', 'same style as', 'keep the style', or any request needing visual content.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Gemini 3 Pro Previewを活用し、アプリのアイコンやロゴ、マーケティングバナーなど、様々なビジュアルコンテンツを、参照画像を用いてスタイルを維持しながら生成するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o nano-image-generator.zip https://jpskill.com/download/19621.zip && unzip -o nano-image-generator.zip && rm nano-image-generator.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19621.zip -OutFile "$d\nano-image-generator.zip"; Expand-Archive "$d\nano-image-generator.zip" -DestinationPath $d -Force; ri "$d\nano-image-generator.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して nano-image-generator.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → nano-image-generator フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
3

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Nano Image Generator

Nano Banana Pro (Gemini 3 Pro Preview) を使用して、あらゆるビジュアルアセットのニーズに対応する画像を生成します。スタイル転送やキャラクターの一貫性のために参照画像をサポートしています。

クイックスタート

# 基本的な生成
python scripts/generate_image.py "A friendly robot mascot waving" --output ./mascot.png

# スタイル参照を使用 (同じビジュアルスタイルを維持)
python scripts/generate_image.py "Same style, new content" --ref ./reference.jpg --output ./new.png

スクリプトの使用方法

python scripts/generate_image.py <prompt> --output <path> [options]

必須:

  • prompt - 画像の説明
  • --output, -o - 出力ファイルパス

オプション:

  • --aspect, -a - アスペクト比 (デフォルト: 1:1)
    • 正方形: 1:1
    • ポートレート: 2:3, 3:4, 4:5, 9:16
    • 風景: 3:2, 4:3, 5:4, 16:9, 21:9
  • --size, -s - 解像度: 1K, 2K (デフォルト), 4K
  • --ref, -r - 参照画像 (複数回使用可能、最大14枚)

参照画像

Gemini は、以下の目的で最大14枚の参照画像をサポートしています。

スタイル転送

参照画像からビジュアルスタイル (色、テクスチャ、雰囲気) を維持します。

python scripts/generate_image.py "New scene with mountains, same visual style as reference" \
  --ref ./style-reference.jpg --output ./styled-mountains.png

キャラクターの一貫性

複数の画像でキャラクターの外観を維持します。

python scripts/generate_image.py "Same character now in a forest setting" \
  --ref ./character.png --output ./character-forest.png

マルチ画像融合

複数の参照画像から要素を組み合わせます。

python scripts/generate_image.py "Combine the style of first image with subject of second" \
  --ref ./style.png --ref ./subject.png --output ./combined.png

シリアル画像生成 (バッチワークフロー)

一貫したスタイルで一連の画像を生成する場合:

  1. 最初の画像を生成します。
  2. 最初の画像を後続の画像の --ref として使用します。
  3. 新しい画像はそれぞれ、確立されたスタイルを継承します。
# カバーを生成
python scripts/generate_image.py "Tech knowledge card cover" -o ./01-cover.png

# スタイル参照を使用して後続のカードを生成
python scripts/generate_image.py "Card 2 content, same style" --ref ./01-cover.png -o ./02-card.png
python scripts/generate_image.py "Card 3 content, same style" --ref ./01-cover.png -o ./03-card.png

ワークフロー

  1. 出力場所を決定する - 文脈的に適切な場所に画像を配置します。

    • アプリアイコン → ./assets/icons/
    • マーケティング → ./marketing/
    • UI要素 → ./src/assets/
    • 一般 → ./generated/
  2. 効果的なプロンプトを作成する - 具体的に、かつ記述的にします。

    • スタイルを含める: "flat design", "3D rendered", "watercolor", "minimalist"
    • コンテキストを含める: "for a mobile app", "website hero image"
    • 詳細を含める: 色、雰囲気、構図
    • 参照の場合: "same style as reference" または "keep the visual style" と言及する
  3. 適切な設定を選択する:

    • アイコン/ロゴ → --aspect 1:1
    • バナー/ヘッダー → --aspect 16:9 または 21:9
    • モバイル画面 → --aspect 9:16
    • Xiaohongshu カード → --aspect 3:4
    • 写真 → --aspect 3:2 または 4:3

アプリアイコン:

python scripts/generate_image.py "Minimalist flat design app icon of a lightning bolt, purple gradient background, modern iOS style" \
  --output ./assets/app-icon.png --aspect 1:1

マーケティングバナー:

python scripts/generate_image.py "Professional website hero banner for a productivity app, abstract geometric shapes, blue and white color scheme" \
  --output ./public/images/hero-banner.png --aspect 16:9

Xiaohongshu ナレッジカード:

python scripts/generate_image.py "Tech knowledge card, dark blue purple gradient, neon cyan accents, code block style, Chinese text '标题'" \
  --output ./xiaohongshu/card.png --aspect 3:4

スタイル転送:

python scripts/generate_image.py "Transform this photo into watercolor painting style" \
  --ref ./photo.jpg --output ./watercolor.png

新しいシーンのキャラクター:

python scripts/generate_image.py "Same character from reference, now sitting in a cafe, warm lighting" \
  --ref ./character.png --output ./character-cafe.png --aspect 3:2

プロンプトのヒント

  • 具体的にする - "an apple" ではなく "A red apple on a wooden table"
  • スタイルを含める - "in the style of pixel art" または "photorealistic"
  • 目的を述べる - "for a children's book" は出力スタイルに影響します
  • 構図を記述する - "centered", "rule of thirds", "close-up"
  • 色を指定する - 明示的なカラーパレットはより良い結果をもたらします
  • 参照プロンプト - "same style as reference", "keep the visual aesthetic", "match the color palette" を使用します
  • 避けるべきこと - 画像内の複雑なテキストを要求しない (代わりにオーバーレイを使用する)

制限事項

  • 1リクエストあたりの参照画像は最大14枚です
  • テキストのレンダリングは不完全な場合があります (テキストは別途オーバーレイする方が良いです)
  • 非常に特定のブランドロゴは正確に再現されない場合があります
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Nano Image Generator

Generate images using Nano Banana Pro (Gemini 3 Pro Preview) for any visual asset needs. Supports reference images for style transfer and character consistency.

Quick Start

# Basic generation
python scripts/generate_image.py "A friendly robot mascot waving" --output ./mascot.png

# With style reference (keep same visual style)
python scripts/generate_image.py "Same style, new content" --ref ./reference.jpg --output ./new.png

Script Usage

python scripts/generate_image.py <prompt> --output <path> [options]

Required:

  • prompt - Image description
  • --output, -o - Output file path

Options:

  • --aspect, -a - Aspect ratio (default: 1:1)
    • Square: 1:1
    • Portrait: 2:3, 3:4, 4:5, 9:16
    • Landscape: 3:2, 4:3, 5:4, 16:9, 21:9
  • --size, -s - Resolution: 1K, 2K (default), 4K
  • --ref, -r - Reference image (can use multiple times, max 14)

Reference Images

Gemini supports up to 14 reference images for:

Style Transfer

Keep the visual style (colors, textures, mood) from a reference:

python scripts/generate_image.py "New scene with mountains, same visual style as reference" \
  --ref ./style-reference.jpg --output ./styled-mountains.png

Character Consistency

Maintain character appearance across multiple images:

python scripts/generate_image.py "Same character now in a forest setting" \
  --ref ./character.png --output ./character-forest.png

Multi-Image Fusion

Combine elements from multiple references:

python scripts/generate_image.py "Combine the style of first image with subject of second" \
  --ref ./style.png --ref ./subject.png --output ./combined.png

Serial Image Generation (Batch Workflow)

For generating a series with consistent style:

  1. Generate first image
  2. Use first image as --ref for subsequent images
  3. Each new image inherits the established style
# Generate cover
python scripts/generate_image.py "Tech knowledge card cover" -o ./01-cover.png

# Generate subsequent cards with style reference
python scripts/generate_image.py "Card 2 content, same style" --ref ./01-cover.png -o ./02-card.png
python scripts/generate_image.py "Card 3 content, same style" --ref ./01-cover.png -o ./03-card.png

Workflow

  1. Determine output location - Place images where contextually appropriate:

    • App icons → ./assets/icons/
    • Marketing → ./marketing/
    • UI elements → ./src/assets/
    • General → ./generated/
  2. Craft effective prompts - Be specific and descriptive:

    • Include style: "flat design", "3D rendered", "watercolor", "minimalist"
    • Include context: "for a mobile app", "website hero image"
    • Include details: colors, mood, composition
    • For references: mention "same style as reference" or "keep the visual style"
  3. Choose appropriate settings:

    • Icons/logos → --aspect 1:1
    • Banners/headers → --aspect 16:9 or 21:9
    • Mobile screens → --aspect 9:16
    • Xiaohongshu cards → --aspect 3:4
    • Photos → --aspect 3:2 or 4:3

Examples

App icon:

python scripts/generate_image.py "Minimalist flat design app icon of a lightning bolt, purple gradient background, modern iOS style" \
  --output ./assets/app-icon.png --aspect 1:1

Marketing banner:

python scripts/generate_image.py "Professional website hero banner for a productivity app, abstract geometric shapes, blue and white color scheme" \
  --output ./public/images/hero-banner.png --aspect 16:9

Xiaohongshu knowledge card:

python scripts/generate_image.py "Tech knowledge card, dark blue purple gradient, neon cyan accents, code block style, Chinese text '标题'" \
  --output ./xiaohongshu/card.png --aspect 3:4

Style transfer:

python scripts/generate_image.py "Transform this photo into watercolor painting style" \
  --ref ./photo.jpg --output ./watercolor.png

Character in new scene:

python scripts/generate_image.py "Same character from reference, now sitting in a cafe, warm lighting" \
  --ref ./character.png --output ./character-cafe.png --aspect 3:2

Prompt Tips

  • Be specific - "A red apple on a wooden table" vs "an apple"
  • Include style - "in the style of pixel art" or "photorealistic"
  • Mention purpose - "for a children's book" affects the output style
  • Describe composition - "centered", "rule of thirds", "close-up"
  • Specify colors - Explicit color palettes yield better results
  • Reference prompts - Use "same style as reference", "keep the visual aesthetic", "match the color palette"
  • Avoid - Don't ask for complex text in images (use overlays instead)

Limitations

  • Maximum 14 reference images per request
  • Text rendering may be imperfect (better to overlay text separately)
  • Very specific brand logos may not reproduce exactly

同梱ファイル

※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。