AIにスクショを撮らせると下半分が白い？lazy loadの落とし穴

AIにページ全体のスクリーンショットを撮らせたところ、下半分の画像が白くなりました。ページの不具合ではなく、loading="lazy"と自動撮影の相性が原因でした。

full page撮影は閲覧操作ではない

ページ全体キャプチャは、必ずしも上から下へスクロールしません。表示領域を広げて一度に描画すると、ビューポートへ近づいたときに読み込む画像が発火せず、高さだけ白く残る場合があります。

撮影前にスクロールする

通常のビューポートで開き、一定量ずつ最下部までスクロールし、読み込みとレイアウト安定を待ってから先頭へ戻します。

async function warmUp() {
  const step = Math.max(300, innerHeight * 0.8);
  for (let y = 0; y < document.documentElement.scrollHeight; y += step) {
    scrollTo(0, y);
    await new Promise((r) => setTimeout(r, 150));
  }
  scrollTo(0, 0);
}

無限スクロールには最大回数を設けます。撮影前には[...document.images].filter(img => !img.complete || img.naturalWidth === 0)で未読込画像も確認します。CSS背景やdata-src型の実装は別途確認が必要です。

白い領域をAIが「コンテンツなし」と誤認しないよう、依頼にはスクロール、待機、未読込件数、ビューポートを含めます。スクショは撮る前の状態作りまでが検査です。

今回は以上です。