ノーコードでWebサイトのスクリーンショットを自動化する方法

PlaywrightやPuppeteerのようなスクリプト型ツールは、Webページを正確にキャプチャできます。ただし、Node.js、コードエディター、そしてスクリプトを保守する担当者が必要です。マーケター、デザイナー、QA担当者、リサーチャーも同じ画像を必要としていますが、この環境を用意できないことがよくあります。ほとんどの作業は、4つのノーコードツールのグループのいずれかで対応できます。

この記事では、1つの例を通して説明します。マーケティングチームは、毎週月曜日に公開ページ30件を、デスクトップサイズとモバイルサイズでそれぞれ1回ずつキャプチャします。週60枚、月約258枚のスクリーンショットです。数値があると、各選択肢を時間、ストレージ、コストモデルの観点で比較しやすくなります。

ツールを選ぶ前に作業内容を決める

ツールの候補は、次の3つの質問で絞り込めます。

1. ページ数は。 1ページ、20ページのリスト、または数百ページ。
2. 頻度は。 1回限り、変更があったときにその都度、または定期スケジュール。
3. その後の用途は。 画像のフォルダー、クライアント向けのPDF、ページ変更時の通知、または別のアプリへのファイル送信。

1ページを1回だけキャプチャする場合は、ブラウザーだけで足ります。50ページを毎日キャプチャして変更を通知する場合は、ホステッドサービスが必要です。実際の作業の多くは、その中間にあります。

比較の前に作業内容を書き出す

ベンダーのページに記載されているのは機能であり、自分の作業内容ではありません。3つの質問への回答を短い作業シートに数値で書き出すと、各選択肢と照合できます。一度記入し、URL一覧と併せて保管します。

例の作業の場合、シートには次のように記入されます。60行、Desktop と Mobile、毎週、ログインなし、コンテンツの表示が遅い4ページ、画像のZIPとチーム向けのPDF 1件、ファイルは共有ドライブに保存します。以下の各選択肢は、このシートに照らして評価します。

ページ数ではなくキャプチャ数で数える

料金は、ホステッドツールでは撮影数に応じて決まります。ローカルツールの実行時間も、撮影数に比例します。キャプチャとは、1つのURLを、1つのデバイスサイズで、1つの時点に撮ったものを指します。例の作業は30ページですが、1回の実行で60キャプチャ、月間で258キャプチャになります。

フルページのキャプチャは、ほとんどのホステッドプランでビューポートのキャプチャより高く、どのツールでも時間がかかります。長いランディングページは、画面の高さの8〜12倍になることがあります。チームに必要なのがページ全体か、最初の画面だけかを、早い段階で決めておく必要があります。

選択肢1: URL一覧キャプチャツール

URL一覧キャプチャツールは、貼り付けられたリストのURLを順にブラウザーで開き、URLごとに1枚の画像を保存します。Macでは、Temposhot Website Captureがこの方式で動作します。処理はすべて自分のコンピューター上で行われます。

1. リストを貼り付ける

   Website Capture を Command+2 で開き、Bulk insert を選択して、1行に1つずつURLを貼り付けます。

2. レイアウトを選ぶ

   Desktop 1920×1080、Tablet 768×1024、Mobile 390×844 から選び、Viewport または Full page を選択します。

3. キャプチャのタイミングを設定する

   ほとんどのサイトでは、待機条件として Load のままにします。コンテンツの表示が遅いページでは、Network idle と数秒の遅延を組み合わせます。

4. 実行して書き出す

   Start Capture を選択します。行に Capture complete と表示されたら、セットを ZIP、Images、PDF、MP4 のいずれかで書き出します。

行ごとに個別の設定を持てるため、読み込みの遅いページだけ待機時間を長くし、他の行の設定は変えずに済みます。同時に最大10個のブラウザーを実行でき、既定値は4です。Cookieバナーは最善の努力で処理され、Reject banners、Accept minimal、Hide only、Leave unchanged の4つのモードから選べます。

このグループは、公開ページをオンデマンドでまとめて撮影する用途に向いています。Macの電源が入っていない間はスケジュール実行されません。

30件のURLから60行のリストを作る

Website Captureの各行には、デバイスサイズが1つだけ設定されます。同じページをデスクトップとモバイルの両方で撮るには、2行が必要です。30件のURLをプレーンテキストファイルに保存し、2回貼り付けます。

Temposhotは example.com のような省略形のドメインに https:// を補います。そのため、テキストファイルには短い形式で記入できます。HTTPまたはHTTPS以外のスキームは、「Enter a valid HTTP or HTTPS URL.」と表示されて無効になります。来週の貼り付けでエラーが出ないように、テキストファイル側の該当行も修正しておきます。

週次実行の行の既定設定

週ごとに比較するページには、毎回同じ設定が必要です。待機時間やブロック設定が異なると、画像の位置がそろいません。以下の値は、数秒で読み込みが終わる料金ページやランディングページに適しています。

Hide only はバナーを応答せずに取り除きます。そのため、ページのレイアウトは再訪問のユーザーが見る状態に最も近くなります。Reject banners は、一部のサイトでページの再読み込みを引き起こすことがあります。撮影後にページの見え方が変わった場合は、判断する前に Leave unchanged のプレビューと比較します。

読み込みが遅いページとモバイル行の上書き設定

例に含まれる30ページのうち4ページは、Loadイベントの後にスクリプトで料金表を読み込みます。これらの行は、遅延時間だけを長くして、他の既定値を維持します。モバイル行はビューポートのみで撮影します。チームが知りたいのは、スマートフォンのユーザーが最初に目にする画面だからです。

行パネルで Render preview を選択すると、実行前に上書き設定を確認できます。プレビューをダブルクリックすると拡大表示されます。設定を後から変更すると、プレビューには Out of date と表示されます。その場合は、Render preview を再度選択して更新します。

実行時間を見積もる

実行時間は、ページの容量、ネットワーク速度、遅延の設定によって変わります。1行をストップウォッチで計測し、その値に行数を掛けて見積もります。例では、1行の開始からファイル保存までに約8秒かかります。

週次実行の規模であれば、既定値の4で十分です。Concurrent browsers を10に近づけるのは、リストが数百行を超え、Macに空きメモリがある場合に限ります。Macの負荷が高い場合、Temposhotは低い値を推奨する注意表示を出します。

1行の実行過程をたどる

すべての行は、バッチの他の行とは独立した状態を順に進みます。以下のタイムラインは、遅延が2秒のデスクトップ行を示しています。1行ずつ追うと、タイミングに関する問題の大半が分かります。

行が Capturing のまま長く続く場合、通常は待機条件の成立を待っています。ネットワーク通信を継続的に行うページでは、Network idle がタイムアウトすることがあります。そのような行は Load に切り替え、短い遅延を設定します。

失敗した行を再実行せずに対処する

失敗した行があっても、バッチは停止しません。Retry ボタンが表示されたら、その行で Retry を選択します。行は Retry pending の状態に戻ります。原因が分かっている場合は、先に設定を変更します。

バッチの終了時に一部が失敗した場合、セッションの状態は Partial と表示されます。完了したスクリーンショットは引き続き書き出せます。Stop Capture は残りの作業を終了しますが、完了済みのスクリーンショットは保持されます。

結果を書き出して保存する

書き出し先は、Settings > General で設定した Export path です。Open Export Folder を選択すると、そのフォルダーがFinderで開きます。例の作業では、アーカイブ用にZIPを1つ、月曜の会議用にPDFを1つ書き出します。

urls.txt を週のフォルダーごとにコピーすると、その実行に含まれたページが正確に記録されます。第45週にURLが追加された場合、その変更は後から確認できます。フォルダー名は任意に決められます。Temposhotは Export path にファイルを書き出します。アーカイブへの移動は手動で行います。

Export path に同じ名前のファイルがすでにある場合、Temposhotは新しいファイル名に番号を付けます。既存のファイルは上書きされません。各実行は Capture History にもセッションとして保存され、既定では30セッションが保持されます。

作業を毎週繰り返す

設定が安定すれば、毎週の手順は短く済みます。順序が重要です。書き出しの前に行を確認し、次週の実行を始める前に書き出しを終えます。

新しく貼り付ける前に Clear all を選択します。先週の行が二重に実行されないようにするためです。Bulk insert で追加された行には、実行時の既定値が適用されます。行の上書き設定の一覧は overrides.txt などの別ファイルに保存し、貼り付けのたびに再適用します。

選択肢2: オートメーションプラットフォームとスクリーンショットAPI

オートメーションプラットフォームは、トリガーとアクションでアプリを連携させる汎用サービスです。スクリーンショットAPIと組み合わせると、スプレッドシートに行が追加された時、フォームが送信された時、またはスケジュールトリガーが発火した時にページを撮影できます。その後、画像はクラウドストレージ、チャットチャンネル、データベースに渡されます。

この方法は一般的な意味ではコードを必要としません。ただし、各サービスのアカウントとAPIキーが必要で、フィールドの対応付けに注意が必要です。プラットフォームとAPIの料金は、通常どちらも利用量に応じて決まります。構築する前に、各ベンダーの最新の料金ページを確認します。

この方法で例の作業を行う場合

毎週月曜日の08:00にスケジュールトリガーが発火します。ステップがスプレッドシートから30件のURLを読み込みます。ループがURLごとに2回、デスクトップ幅とモバイル幅でスクリーンショットAPIを呼び出します。最後のステップで、60枚の画像をクラウドのフォルダーにアップロードします。

ほとんどのプラットフォームは、ステップまたはループの1周ごとに、課金対象のタスクを1件として数えます。60回のAPI呼び出しと60回のアップロードは、毎週120件を超えるタスクとして数えられることがあります。これに4.3週を掛け、各プランの月間タスク上限と比較します。

構築前に確認する点

• タイムアウト。 オートメーションプラットフォームは、1ステップの実行時間に上限を設けることが多くあります。重いページのフルページキャプチャは、短いステップ上限を超えることがあります。
• 待機オプション。 APIに遅延または待機条件の指定があるかを確認します。ない場合、読み込みが遅い料金は空白で写ります。
• 失敗時の処理。 1回の呼び出しが失敗したときの動作を決めます。最初のエラーで停止するループは、残りのキャプチャを失います。
• ストレージ。 画像はAPIベンダーとプラットフォームを経由してからフォルダーに届きます。両方のベンダーのデータ保持規約を確認します。

選択肢3: Webサイト監視ツール

Webサイト監視サービスは、スケジュールに従ってページを撮影し、各キャプチャを前回のものと比較します。差分がしきい値を超えると、通知を送ります。すべてのキャプチャを保存するアーカイブを持つサービスもあります。

これらのツールは「このページは変わったか」に答えるもので、「スクリーンショットのフォルダーがほしい」という要求には向いていません。価格の追跡、コンプライアンスの確認、競合ページの監視に適しています。ページ、スケジュール、画像はベンダーのサーバー上にあります。

例の作業に監視ツールが向く場合

月曜日のキャプチャが価格変更の確認だけを目的とする場合、監視サービスを使うと手作業のレビューが不要になります。サービスは、Macの電源が切れている間も実行され、ページが変わったときだけ通知を送ります。チームが確認するのは、60枚の画像ではなく、変更された2ページだけになります。

監視サービスが適さないのは、チームが画像そのものを必要とする場合です。たとえば四半期ごとのスライド資料で使う場合がそれにあたります。ホステッドサービスからアーカイブを書き出すには追加の手順が必要になることがあり、形式もベンダーによって異なります。

ローカルツールで手動でキャプチャを比較する

URL一覧のローカル実行には、自動の変更検出機能がありません。同じページの週次キャプチャ2件は、並べて比較できます。無料の Compare Images ツールは、スライダー、フェード、並列表示、ピクセル差分表示を提供します。

比較が有効なのは、2件のキャプチャが同じデバイス、領域、待機、遅延、ブロック設定で撮られた場合だけです。そうでなければ、差分表示には実際の変更ではないレイアウトのずれが表示されます。

選択肢4: ブラウザー拡張機能と単発用の補助ツール

主要なブラウザーはすべて、追加のソフトウェアなしで少なくとも1ページを保存できます。

• Chrome と Edge の DevTools。 DevTools を開き、Shift+Command+P でコマンドメニューを開いて、「Capture full size screenshot」を実行します。
• Firefox。 ページを右クリックし、Take Screenshot を選んでから Save full page を選択します。
• Safari。 File を選び、Export as PDF を選択すると、ページがPDFとして保存されます。

フルページ用の拡張機能は、ツールバーにボタンを追加します。このボタンはページをスクロールしてキャプチャし、1枚の画像に結合します。無料の Temposhot フルページスクリーンショット拡張機能は、Chrome 116以降で動作します。ビューポートをローカルで結合し、Retina解像度のPNGを1件ダウンロードします。

これらの補助ツールは、利用者自身のブラウザーセッション内で動作します。そのため、ログイン済みのページでも問題なく使えます。一度に扱うのは1つのタブです。

キャプチャの後、Image Converter でPNGをJPGまたはWebPに変換できます。Stitch Screenshots は、分割されたスクリーンショットを1枚の縦長の画像に結合します。どちらもブラウザー内で動作し、ファイルをアップロードしません。

1ページのキャプチャを速くするショートカット

補助ツールは、操作手順が決まっている場合に速く動きます。下の表は、ブラウザーのショートカットと、週次作業で使うTemposhotのショートカットを対応させたものです。

ログイン済みページの制約

Website Captureは、各ページを非公開のブラウザーセッションで開きます。このセッションは、実行の間でCookieやサイトデータを保持しません。利用者自身のブラウザーのログイン状態は使われません。そのため、ダッシュボードやアカウントページは、ログインしていない訪問者が見る状態で撮影されます。多くの場合、ログインフォームが写ります。

例のチームでは、注目するページのうち2ページが、パートナー向けのログインの背後にあります。この2ページは、ログイン済みのブラウザーで拡張機能を使ってキャプチャします。残りの58件はURL一覧の実行で撮影します。

コードを書く方が適している場合

次の場合は、ノーコードツールよりコードの方が短い手順になります。

• スクリーンショットをデプロイのたびにCIパイプラインの中で実行する必要がある
• 各ページで、フォームへの入力やメニューを開くといったスクリプトの操作が先に必要である
• 出力が厳密な命名規則または保存規則に従う必要がある
• キャプチャが、ビジュアルリグレッションテストなど、テストスイートの一工程である

これらの場合は、PlaywrightでWebサイトのスクリーンショットを自動化する方法から確認します。

ノーコード構成の限界を示す兆候

切り替えが初日に行われることはほとんどありません。日常作業の手作業部分が、スクリプトを書く時間を上回ったときに切り替えます。以下の兆候が最初に現れます。

ファイル名を pricing__mobile__2026-11-02.png のような厳密な規則に従わせる必要がある場合も、スクリプトが適しています。ノーコードの実行では、毎週60件のファイル名を手作業で変更する時間が、キャプチャ自体の時間を上回ります。テスト用のスクリプト方式については、Playwrightによるスクリーンショットテストのガイドで説明しています。

簡単な判断基準

状況	選択
1ページを今すぐ撮る	ブラウザーの補助機能または拡張機能
公開ページのリストをオンデマンドで撮り、ファイルはローカルに残す	URL一覧キャプチャツール
キャプチャを他のアプリへ自動で送る	オートメーションプラットフォームとスクリーンショットAPI
スケジュールに従い、ページ変更時に通知する	Webサイト監視ツール
テストやデプロイの中でスクリーンショットを撮る	コード

例の作業に判断基準を当てはめる

例のチームは、複数の方法を組み合わせます。公開の58件は、月曜の朝にURL一覧の一括実行で撮影します。ログイン済みの2ページは、ブラウザー拡張機能で撮影します。

今後、価格変更から数時間以内に通知が必要になった場合は、料金ページを監視サービスに移します。その場合、URL一覧の実行には、レポートで使うページだけを残します。URL数、頻度、出力が変わるたびに、作業シートを見直します。

FAQ

ノーコードで、ログインが必要なページをキャプチャできますか？

ブラウザーの補助機能または拡張機能を使います。これらは利用者のログイン済みブラウザーで動作します。自前のブラウザーを使うURL一覧ツールは、ログインしていない訪問者に見える内容を撮影します。

ノーコードのスクリーンショットは、スクリプトで撮ったものより画質が低いですか？

いいえ。どちらも実際のブラウザーエンジンでページを読み込みます。画質は、ビューポートのサイズ、待機のタイミング、画像形式によって決まります。ノーコードツールの多くは、これらを設定項目として公開しています。

URL一覧の実行中、Macをスリープさせないようにする必要がありますか？

はい。ローカルツールの場合は必要です。Website Captureは、Mac上の管理されたブラウザーで動作します。すべての行が完了するまで、アプリを開いた状態にします。

1行でデスクトップとモバイルの両方のサイズをキャプチャできますか？

いいえ。各行には Device の設定が1つあります。同じURLを2回追加し、一方の行を Desktop、もう一方の行を Mobile に設定します。

週次アーカイブにはどの形式を選べばよいですか？

品質85のJPEGは、長いフルページのキャプチャでもファイルサイズを小さく保ちます。小さなインターフェースのテキストを鮮明に残す必要があるページには、PNGが適しています。WebPも利用でき、JPEGと同じ1〜100の品質範囲を指定できます。

同じページが自分のブラウザーと違って見えるのはなぜですか？

Website Captureは、既定で広告とトラッカーをブロックし、Cookieバナーは行の設定に従って処理します。また、自分のCookieを使わずに実行されます。その行のブロックをオフにし、Cookies を Leave unchanged に設定すると、通常の訪問に近い表示になります。

ノーコードでWebサイトのスクリーンショットを自動化したい場合

Temposhot Website Captureは、貼り付けたURL一覧を、Mac上のスクリーンショットのフォルダー、PDF、またはMP4に変換します。Webサイトのスクリーンショット自動化を確認するか、Website Captureのクイックスタートを使います。