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

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

役割分担の思想

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

前提ツール

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

手順

1. 生成

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

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

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

# 暗い線ほど不透明になる透過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 参照）

よくある落とし穴

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