Image Prep

---
user-invocable: true
description: "生成AI画像（niji/Midjourney等）をWebに重ねられる透過レイヤーへ加工する手順。ImageMagickで脱色→暗さのalpha化→白透過→中立色での塗り直しを行う。生成画像のUI統合、線画オーバーレイ作成、画像の透過・色加工で使う。"
---

# [画像加工] 生成画像 → Web透過レイヤー（image-prep）

手書きSVGでは出せない具象・繊細な線画を生成AIで作り、コードと役割分担してWebに統合する手順。

## 役割分担の思想

| 担当 | 役割 |
|---|---|
| 生成AI（niji/Midjourney等） | **線＝構造**（具象・繊細な描画力） |
| コード（p5js/CSS等） | **色＝動き**、**配置** |

- 静的な色と動く色を二重にしない: 画像側の色は**中立化**し、色の物語はコード側に一本化する

## 前提ツール

- **ImageMagick**（`brew install imagemagick`）: デファクトスタンダード・更新継続・ライセンス健全（ImageMagick License）
- 将来拡張: **potrace** によるSVGベクター化（拡大耐性が必要になったら）

## 手順

### 1. 生成
- **線主体・背景は純白・色は最小**のプロンプトで生成する（後工程の透過化精度が上がる）
- 生成プロンプトと原本画像は再現できるよう保存する（プロンプトは `doc/input/design/` 等にメモ）

### 2. 透過レイヤー化（ImageMagick）

脱色 → 暗さをalpha化 → 白を透過 → 中立色で塗り直し:

```bash
# 暗い線ほど不透明になる透過PNGを作り、単色で塗り直す
magick src.png \
  \( +clone -colorspace Gray -negate -level 0%,100% \) \
  -compose CopyOpacity -composite \
  -fill '#XXXXXX' -colorize 100 \
  out.png
```

- `-level 0%,100%` は無変換（恒等）の起点。素材のコントラストに合わせて調整する（淡い線を残すなら白側を下げる）
- `#XXXXXX` は載せる先に馴染む**中立色**（純黒 `#000` は浮くので避ける）
- **白線画×黒背景の場合**: 上記レシピは「暗い線×白背景」前提（`-negate`で暗→不透明）。生成画像が逆（白線画×黒背景）なら `-negate` を外し「明るいほど不透明」でalpha化する。塗り直し色はテーマのアクセント色にすると、シェーディングがalpha濃淡として保存され暗い背景ページで原画と等価に見える

### 3. Webへ重ねる
- 透過PNGを `mix-blend-mode: multiply` 等で背景表現の上に重ねる
- 動く背景（生成アニメーション等）に重ねる場合、静止した線画は**静止の焦点アンカー**として機能する（`animation-principles` 参照）

## よくある落とし穴

- 生成画像に色が多いと中立化が破綻する（生成段階で色を絞る）
- 純黒で塗り直すと背景から浮く（馴染む中立色を選ぶ）
- 原本・プロンプトを残さず、再生成・再加工ができなくなる
- 実鍵や個人情報を含む画像をそのまま公開アセットに置く（内容確認してから配置）