Claude Code
Claude Code を使って公開ページやログイン後ページを一括取得し、調査、監視、監査タスク向けの Markdown レポートを出力できます。
# Install from Plugin Marketplace (package id: doc-image-agent)
/plugin marketplace add Felo-Inc/felo-skills
/plugin install doc-image-agent@felo-ai
Claude Code プラグイン · サイトスクリーンショット自動化
Website Screenshot Agent for Claude Code — 端末からサイトのスナップショットを自動取得
Website Screenshot Agent を Claude Code に追加すると、サイトをまとめて取得し、ページの変化を追跡しながら、スクリーンショットを構造化された Markdown レポートに整理できます。競合調査、サイト監査、ランディングページの追跡、定期スナップショットのワークフローに最適です。
doc-screenshot-agent process cases/competitor-monitoring.md
Reading capture plan and preparing browser sessions...
Capturing websites and writing the Markdown report...
Markdown report written to output/reports/competitor-monitoring.md
Built for competitor research, website monitoring, and recurring snapshot workflows.
調査対象が増えると、手作業のサイトスクリーンショットはすぐ破綻する
競合調査、サイト監視、監査記録を行うチームは同じ問題に直面します。手動でページを取得する作業は遅く、不揃いで、対象サイトが増えるほど維持できなくなります。
競合ページを見終える前に、スクリーンショットが古くなる
価格表、ファーストビューのコピー、CTA、機能ページは数日で変わることがあります。手作業でスクリーンショットレポートをまとめ終える頃には、証拠の一部がすでに古くなっています。
20、50、200 件の URL を手作業で回すのは無理がある
ページを開き、ブラウザを調整し、目的の位置までスクロールし、スクリーンショットを撮り、ファイル名を付け直して、正しいフォルダへ移す。対象サイトが増えるほど、この流れはすぐに破綻します。
構造のない生スクリーンショットは、最終的に使えない証拠になる
スクリーンショットが大量に入ったフォルダだけでは調査成果物になりません。チームに必要なのは、何を取得したのか、出典は何か、なぜ重要なのかが読める Markdown レポートです。
エージェントがサイトを取得し、Markdown レポートまでまとめてくれる
Website Screenshot Agent は、Markdown の収集指示書を読み取り、サイトスクリーンショットを取得し、ログイン後ページを処理し、素材を整理したうえで、チームがレビュー・共有・コミットしやすい構造化 Markdown レポートを出力します。
- Markdown、見出しメモ、一覧表から収集指示を読み取る
- ランディングページ、価格ページ、ドキュメント、ダッシュボードなどを自動で取得する
- 競合調査、サイト監視、定期スナップショットに使える
- 認証情報を設定すればログインが必要なページも取得できる
- スクリーンショットを適切な章に整理した Markdown レポートを出力する
1
PlanList the pages, URLs, and sections you want to capture in Markdown
2
CaptureThe agent opens each site, handles auth, and captures screenshots
3
CompileScreenshots are inserted into a structured Markdown report
4
ShareExport the report for research reviews, audits, or recurring monitoring
Claude Code に Website Screenshot Agent を導入する
プラグインを Claude Code に追加し、端末から直接サイトスクリーンショット自動化ワークフローを実行できます。
Claude Code 導入ガイド
Website Screenshot Agent でできること
使い捨ての手作業スクリーンショットではなく、再現可能なサイトスナップショットと Markdown 成果物を必要とするチーム向けの 6 つの機能です。
サイトスクリーンショットの自動収集
製品ページ、ランディングページ、価格ページ、ドキュメント、ダッシュボードなどの対象ページを自動で開き、適切なビューポートと解像度で整ったスクリーンショットを生成します。
競合・市場ページの監視
同じ収集プランを再利用して、競合コピー、価格ページ、公開ページ、市場変化を継続的に追跡できます。毎回ワークフローを作り直す必要はありません。
Markdown レポート生成
画像を書き出すだけでは終わりません。スクリーンショットを読みやすい Markdown レポートへ整理するため、非同期レビュー、ナレッジ蓄積、バージョン管理、調査の引き継ぎにそのまま使えます。
差分更新と再実行
大半のページをすでに取得済みなら、ワークフローを再実行して変更部分だけを更新できます。最初から全部取り直す必要はありません。
ログイン後ページの取得
認証情報を一度設定すれば、保護ページ、内部ツール、SaaS ダッシュボードなどのログイン後コンテンツも同じ自動化フロー内で取得できます。
チーム運用向けの構造化出力
生のスクリーンショット、処理済み素材、最終 Markdown レポートを予測しやすいディレクトリ構成に保存するので、レビュー、コミット、比較、定期運用に載せやすくなります。
Website Screenshot Agent が特に向いている場面
ここで必要なのは散発的なスクリーンショットではなく、素早く再現可能なサイトスナップショットです。
競合ランディングページ調査
背景： プロダクトマーケティングチームがポジショニング検討前に、競合のトップページ、価格ページ、機能ページ、登録導線の最新スクリーンショットを必要とするケースです。
選定した競合の対象 URL を取得し、会社別・ページ種別ごとに整理した Markdown 調査レポートを出力してください。
サイト変更の監視とスナップショット保管
背景： 自社サイト、パートナーサイト、競合ページを週次で取得し、コピー、デザイン、構造の変化を記録したいケースです。
定期収集プランを実行し、対象ページを再取得して、今回の監視分の Markdown スナップショットレポートを新しく生成してください。
プロダクト・コンテンツ・営業チーム向け監査パック
背景： リリースレビューや バトルカード（競合比較資料）プロジェクトで、公開ページとログイン後ページのスクリーンショットを 1 本のレビュー用レポートにまとめたいケースです。
必要な公開ページとログイン後ページを取得し、証拠を構造化 Markdown の監査ドキュメントとして整理してください。
収集指示から Markdown レポートまで 4 ステップ
このワークフローは、その場しのぎのスクリーンショットではなく、再利用できるサイト収集フローのために作られています。
1
Markdown で取得したいページを書く
インライン記法、見出しメモ、一覧表を使って、レポートに入れたい URL、対象エリア、証拠ポイントを書きます。
2
スキルを実行する
Claude Code または OpenClaw から Website Screenshot Agent を実行します。収集プランを読み取り、ブラウザ環境を整えてワークフローを開始します。
3
サイトページを取得して整理する
各ページを開き、必要に応じてログイン処理を行い、スクリーンショットを取得し、生データと処理済み素材を分かりやすい出力構成に保存します。
4
Markdown レポートを生成する
最終出力は、スクリーンショットが適切な章に配置された構造化 Markdown レポートです。調査レビュー、監査、非同期共有、リポジトリへのコミットにそのまま使えます。
Website Screenshot Agent を使ったチームの声
初期ユーザーは、場当たり的なスクリーンショット作業を、再現可能なサイト収集と Markdown レポートに置き換えています。
★★★★★
“以前は競合レビューの前に、スクリーンショットを集めるだけで半日かかっていました。今は 1 つの収集指示から、証拠が正しい順序で並んだ Markdown レポートが出てきます。”
★★★★★
“一番大きいのは一貫性です。今ではランディングページレビューのたびに同じサイトスナップショットフローを使うので、抜け漏れの議論ではなく発見そのものに集中できます。”
★★★★★
“定期的なサイト監査や社内レポートに使っています。ログイン後ページの取得と Markdown 出力の組み合わせが、今のチームの進め方にぴったり合っています。”
Website Screenshot Agent がもたらす主要成果
1 本のフロー
収集計画からレポートまで
0 手作業
ブラウザ撮影の手順
Markdown
成果物として出せるレポート
再現可能
監視・監査の実行
Website Screenshot Agent に関するよくある質問
ScreenshotOne のようなスクリーンショット API と何が違いますか？
スクリーンショット API は通常、単一 URL を画像に変換するためのエンドポイントです。Website Screenshot Agent はワークフローツールで、Markdown の収集指示書を読み取り、複数サイトを開き、認証を処理し、スクリーンショットを取得し、素材を整理し、最終的な Markdown レポートまで出力します。
Website Screenshot Agent にはどんな入力が必要ですか？
Markdown の収集指示書が必要です。インライン記法、見出しベースの指示、Image Summary テーブル（画像要約用の表）を使って、URL、ページグループ、必要な証拠、レポート構成を指定できます。
ログインが必要なページも取得できますか？
はい。環境変数で認証情報を設定すれば、ダッシュボード、内部ツール、その他の保護ページを取得する前に自動でログインできます。
競合調査や定期的なサイト監視にも向いていますか？
とても向いています。まさにそのための代表的なワークフローです。チームは同じ Markdown 収集プランを再利用して、競合の最新スクリーンショットを集め、定期的なサイトスナップショットレポートを作成し、監査証拠を継続的に蓄積できます。
サイトのスクリーンショットを手作業で撮るのはもうやめましょう
サイト取得、スナップショット保管、Markdown 調査レポートの出力を、再利用できる 1 本のワークフローでまとめて実行できます。Website Screenshot Agent を導入して、手作業のスクリーンショット業務を 1 つのコマンドに置き換えましょう。
導入は無料です。Claude Code と OpenClaw に対応しています。競合調査、サイト監視、監査ドキュメントのワークフローに最適です。