案件LPから商品画像・ロゴを一発で正確に取る仕組み

01全体フロー: LP URL から完成品まで

1回のページ訪問でFVと商品画像/ロゴをセット取得。7つのPhaseを1ターンで走破する

lp-captureは、案件LPを1回開くだけでFVキャプチャと商品画像/ロゴをセットで取得するスキル。バナー等の追加撮影は依頼があった時のみ。

02鉄則: DOM要素直撮り vs 座標推測

毎回ズレる・切れる・余白が入る座標指定を捨て、DOMに直接聞く設計思想

// Phase 1: DOMに聞く（座標を推測しない）
const structure = await page.evaluate(() => {
  const result = [];
  function walk(el, depth) {
    if (depth > 2) return;
    const rect = el.getBoundingClientRect();
    if (rect.height > 10 && rect.y < 1000) {
      result.push({ tag: el.tagName, class: el.className, y: rect.y, h: rect.height });
    }
  }
  for (const c of document.body.children) walk(c, 0);
  return result;
});

03案件タイプで取得対象を切り替える

EC系＝商品パッケージ、サービス系＝ロゴ。判定はtodo.jsonのジャンル情報から

サービス系＝ロゴ2段構え

• 方法A（最善）: header img, [class*=logo] img の src を直接ダウンロード → 元画像そのまま、画質劣化ゼロ
• 方法B（フォールバック）: SVGインライン・CSS background-image でURLが取れない場合、ロゴを包む親要素（h1やロゴリンク）を element.screenshot()

EC系＝商品画像3段構え

• Step1: LPのFV内メイン商品画像を element.screenshot()（img[src*=product], img[src*=item], FV内で最も大きい画像）
• Step2: 失敗or画質NG → WEB検索。公式・Amazon・楽天の白背景クリーン画像を優先（テキスト入り・利用シーン写真は避ける）
• Step3: それでもダメ → ロゴにフォールバック

04背景透過を無料化する: remove.bg ヘッドレス自動操作

API課金なしで商品画像・ロゴの背景を透明化。バックアップ→透過→検証で復元可能に

商品画像・ロゴを案件サイトに貼るとき、白背景のままだとサイト背景から浮いてしまう。remove.bg のヘッドレス自動操作で背景を透明化する。

// Phase 3.5: 背景透過（バックアップ→変換→透過→WebP戻し）
fs.copyFileSync(productWebp, backupWebp);              // 0. バックアップ必須
await sharp(productWebp).png().toFile(tempPng);        // 1. WebP→PNG
execSync(`node scripts/removebg-headless.mjs "${tempPng}"`); // 2. 透過処理
await sharp(removebgPng).webp({ quality: 90 }).toFile(productWebp); // 3. WebP戻し

05白ロゴ問題を自動検知して反転する

白背景のサイトに白ロゴ透過を貼ると消える。validate-logo で検知→SVG色置換 or ラスタ反転

案件サイトは白背景が多い。白いロゴを透過すると真っ白＝見えなくなる。透過後に自動検証をかけ、white-on-transparent 判定なら反転処理に回す。

# 視認性検証（必須・スキップ禁止）
node scripts/lp-capture.mjs validate-logo "pkg-{slug}.webp"
# → visible:true = OK、backup削除して続行
# → visible:false, reason:"white-on-transparent" = 反転処理へ

// 方法B: ラスタ画像の白ピクセル反転（アルファチャネル保持）
const { data, info } = await sharp(productWebp).raw().toBuffer({ resolveWithObject: true });
for (let i = 0; i < data.length; i += info.channels) {
  const r = data[i], g = data[i+1], b = data[i+2];
  if (r > 200 && g > 200 && b > 200) {  // 白〜薄グレー
    data[i] = 0x33; data[i+1] = 0x33; data[i+2] = 0x33;  // ダークグレー化
  }
}