# 画像生成プロンプトガイド (Nano Banana)
ダウンロードしたテンプレートには画像参照箇所（ヒーロー背景・サービス写真など）があります。Unsplash 等の外部素材に頼らず、**Nano Banana** でオリジナル画像を生成してテンプレートに差し込む方法を説明します。
---
## Step 1: テンプレートの HTML/CSS を読んで画像参照を洗い出す
`index.html` と CSS ファイルを開き、以下のパターンをすべて列挙します。
- `
` タグ
- CSS の `background-image: url(...)`
- inline `style="background-image: url(...)"` / `style="background: url(...)"`
- 擬似要素 `::before` / `::after` 内の background
各参照について、CSS から**実描画時の形状**を確認します。
| 形状 | 判定の目安 | プロンプトでの表現 |
|---|---|---|
| 横長ヒーロー | 全幅 × 高さ固定 (40〜70vh) | `wide cinematic landscape` |
| 超横長 | `aspect-ratio: 21/9` 相当 | `ultra wide composition` |
| 標準 (16:9 相当) | gallery カードなど | アスペクト比指示なし |
| 縦長 | `aspect-ratio: 9/16` / 縦 grid セル | `vertical composition` |
> **ポイント**: アスペクト比は `16:9` などの数値表記ではなく、上記の**自然言語**で指定してください。
---
## Step 2: 画像1枚につきプロンプト1個を作る
以下の **6要素** を英語で組み合わせて1プロンプトを作ります。
| # | 要素 | 記入内容 | 記入例 |
|---|---|---|---|
| 1 | **シーン / 構成** | 何が映っているか・構図 | `wide cinematic landscape with soft mist, layered distant hills and open sky` |
| 2 | **アスペクト比** | 自然言語で (Step 1 の表を参照) | `wide cinematic` / `vertical composition` |
| 3 | **パレット** | 具体色 3〜5色 | `muted warm gray, pale blue-gray, soft beige` |
| 4 | **ムード** | トーン形容詞 | `calm and refined mood, low contrast, subtle texture` |
| 5 | **役割制約** | 用途を一言で | `as a background image that does not distract from foreground content` |
| 6 | **共通禁則** | 必ず含める | `no people, no logos, no text, photorealistic` |
### プロンプト記述例
```
[1] hero-bg (ヒーロー全幅背景)
Prompt:
Wide cinematic landscape with soft mist, layered distant hills and open sky,
wide cinematic framing,
muted warm gray, pale blue-gray, soft beige,
calm and refined mood, low contrast, subtle texture,
as a background image that does not distract from foreground content,
no people, no logos, no text, photorealistic
Filename:
hero_background_mist_landscape.png
```
---
## Step 3: Nano Banana で画像を生成・保存
1. 各プロンプトを Nano Banana に入力して画像を生成する
2. 生成された PNG をダウンロードする
3. テンプレートフォルダ内の **元ファイルと同じファイル名** で保存する（上書き）
> **ヒント**: HTML の `
` に対応させる場合、PNG をブラウザや変換ツールで WebP に変換してから `hero.webp` として保存すると確実です。ただし PNG のまま `
` に書き換えるだけでも動作します。
---
## よくある画像のパターンと推奨プロンプト語彙
| 用途 | 推奨シーン語彙 | 役割制約語彙 |
|---|---|---|
| ヒーロー背景 | `landscape`, `abstract gradient`, `cityscape at dusk` | `as a full-width background` |
| サービスカード | `close-up product detail`, `workspace scene` | `clean composition for card thumbnail` |
| About / 会社紹介 | `modern office interior`, `team collaboration blur` | `as a section background, light overlay assumed` |
| Stats / 数値セクション | `subtle texture`, `dark low-opacity surface` | `background texture, not the main focus` |
| ギャラリー縦長 | 用途に応じた縦構図 | `vertical composition, 9:16 ratio feel` |