資料づくりやクリエイティブ作業のための参考サイト探しにサイト全体のスクリーンショットを集めたいけど、手間がかる…といった経験はありませんか？

特にそれが複数ページ、PCもスマホも、、と用意しないといけないとなってくるとその手間はかなり大きなものになってきます。

このプロンプトを使ってClaude CodeなどのAIエージェントに依頼すると、指定した複数URLのフルページキャプチャを一括で取得できます。PC・スマホ・タブレットなどビューポート別の撮影も、AIエージェントへのプロンプト一つで同時に行えます。

本記事ではMethodアプリの仕様を前提に説明しますが、以下のプロンプトをコピーし、冒頭の「入力項目」の内容を差し替えるだけでも利用できます。

フルページスクリーンショット取得

入力項目

▼URL一覧 {キャプチャしたいURLを入力(複数まとめて取得したい場合は改行)}

▼ビューポート（幅x高さ）

⚠️以下のうち不要なものは削除⚠️ 1440px × 900px（PC標準） 375px × 812px（スマホ標準） 768px × 1024px（タブレット標準） 1920px × 1080px（PCワイド）

▼ファイル格納先 {ここにパス名を入力}

手順

PlaywrightをNode環境にインストールして使うこと（npm i playwright && npx playwright install chromium）

各URL×各ビューポートの組み合わせごとに以下を実行: a. 指定サイズでページを開き、networkidleまで待機 b. lazy-load・演出対策として、ビューポート高さの80%ずつページ最下部までスクロールし、各位置で3秒待ってからスクリーンショットを順次撮影して保存する c. 撮影した画像を上から順に結合し、1枚のフルページ画像（PNG）を生成する。重複領域は座標基準で正確に切り落とし、継ぎ目がズレないようにすること

固定ヘッダー・追従バナーがある場合は、2枚目以降の撮影前に CSSで position:static に変えるか非表示にして、繋ぎ目に二重に写り込まないようにすること

ファイル名は/{title}/{title}{幅}{高}.png 形式でファイル格納先のディレクトリに保存すること

完了後、生成した全ファイルの一覧とサイズを報告すること

注意

ログインが必要なページに遭遇したら停止して報告する

ページ高さが極端に長い場合（30000px超）は分割保存も併用する

撮影結果に欠けや半透明の要素があった場合は、該当ページのみ待機時間を延ばして撮り直すこと（スクロール連動の演出の場合もありえるので、10秒以上待って表示が変わらない場合は10秒時点のキャプチャを採用する）

こんなときに使えます

Web制作で、参考サイトの見せ方をPC表示・スマホ表示の両方で集めたいとき
複数の参考URLの内容を、まとめて手元で確認したいとき
提案書やレポートに、サイトのフルページキャプチャを載せたいとき
リニューアル前の現状記録や、公開後の表示確認を複数デバイス分まとめて残したいとき

使い方

1. 3つの入力項目を埋める

「キャプチャ取得」プロンプトを開き、右側の「変数・入力」で3項目を設定します。

「URL一覧」──撮影したいページのURLをリストに追加します。今回はMethodのトップページと特徴ページの2件を入れました
「ビューポート（幅×高さ）」──1440×900（PC標準）/ 375×812（スマホ標準）/ 768×1024（タブレット標準）/ 1920×1080（PCワイド）の4種から選びます。複数選ぶと、同じページを選んだ数だけ撮影します。ビューポートをカスタムしたい場合は、自由入力で選択肢追加も可能です。
「ファイル格納先」──キャプチャを保存するローカルフォルダのパスを入れます