Macでウェブサイトのスクリーンショットを自動で撮る方法

macOS は Shift+Command+5 で画面上の任意の領域をスクリーンショットできますが、撮影は毎回手動で、表示されている範囲しか撮れません。ウェブサイトのスクリーンショットを自動化すると、人がスクロールやクリックをしなくても、ページの読み込みと画像の保存が行われます。Mac 上の Temposhot には2つの方法があり、どちらを使うかは対象ページの場所で決まります。

自動撮影が役立つ場面

撮影作業が繰り返されるようになると、自動化の効果が表れます。

• 1回の作業で10ページ程度を超えて撮影する
• 同じ一覧のページを、リリースやキャンペーンのたびに撮り直す
• 公平な比較のため、同じサイズとタイミングでページを撮影する必要がある
• 長いページで、手動のスクロールと画像の結合に数分かかる

1ページだけを一度撮るなら、ブラウザのツールや Temposhot 拡張機能 のほうが早く使えます。

始める前に作業量を見積もる

短い見積もりで、自動化の設定に見合うかを確認できます。リリースレビューのために、80ページを Desktop と Mobile の2サイズで撮影するチームを考えます。合計は160枚です。スクロールとトリミングを含む手動撮影が1枚あたり1分かかる場合、手作業は約160分になります。Website Capture のバッチは、設定に約10分かかり、その後は実行中に手をかける必要がありません。

見積もりはページ数と、年間のリリースレビューの回数で変わります。1枚あたりの手動時間にレビューごとの画像数を掛け、さらに年間のレビュー回数を掛けます。その合計を設定時間と比べます。多くの場合、2回目のレビューの後に結論が明確になります。

URL 指定とブラウザウィンドウのどちらで撮るか

	URL 指定の撮影	ブラウザウィンドウの撮影
Temposhot のモード	Website Capture	Auto Capture
入力	URL のリスト	開いているブラウザウィンドウ
ブラウザ	Temposhot が管理するローカルブラウザ	ログイン済みの自分のブラウザ
ページごとの出力	1枚の画像（Viewport または Full page）	間隔ごとに1フレーム
向いている用途	公開ページの一括撮影	1つの長いページ、またはログインが必要なページ

URL 指定の撮影 は、各アドレスを Temposhot が管理するブラウザで読み込み、URL ごとに1枚の画像を保存します。複数ページを並列に処理できますが、各ページはログインしていない訪問者として表示されます。

ブラウザウィンドウの撮影 は、すでに開いているブラウザウィンドウを記録します。Auto Capture はフレームを1枚保存し、Page Down などのキーを送り、間隔を待ってから繰り返します。ログイン後のダッシュボードを含め、目に見える任意のページで使えます。キー操作の自動化には Temposhot Pro が必要です。

ウェブサイトのスクリーンショットを自動で撮る

URL リストから撮る

1. Website Capture を開く

   Command+2 を押します。Bulk insert を選択し、1行に1つの URL を貼り付けます。

2. サイズと範囲を選ぶ

   Desktop 1920×1080、Tablet 768×1024、Mobile 390×844 から選びます。アーカイブ用には Full page、ファーストビューの確認には Viewport を選びます。

3. 待機条件を設定する

   多くのサイトでは Load のままにします。コンテンツの表示が遅いページでは Network idle を選び、遅延を1〜3秒に設定します。

4. 実行する

   Concurrent browsers（1〜10、既定は4）を設定し、Start Capture を選択します。セッションは ZIP、Images、PDF、MP4 で書き出せます。

開いているブラウザウィンドウから撮る

1. ページを準備する

   ブラウザでページを開き、先頭までスクロールします。

2. Auto Capture を設定する

   Command+1 を押します。Stop condition を Screenshots に設定し、ページに必要な画面数を入力します。Interval を1秒に設定し、Key press に Page Down を記録します。

3. ウィンドウを選ぶ

   Windows でブラウザウィンドウのサムネイルを選択し、Start Capture を選びます。キー操作を受け取れるよう、3秒のカウントダウン中にブラウザをクリックします。

自動撮影ガイド で Auto Capture の全設定を説明しています。

この設定では、20フレームを1秒間隔で保存します。最初のフレームはカウントダウン後に保存され、最後のフレームは約20秒後に保存されます。フレームの間はページが静止している必要があります。アニメーションするヘッダーがあるページでは、各画面にヘッダーの短いフレームが加わることがあります。間隔は、1回のスクロールが描画を終えるまでの時間に設定します。

上の時間は、カウントダウン後に1秒ごとに1フレーム保存されることを前提にしています。n 枚目は 3 + (n - 1) 秒に保存されます。20枚目は22秒に保存され、そこで実行が終了します。キー操作でページが動かないと、同じフレームが重複して保存されます。そのため、最初に3フレームの短い実行でキー操作の動作を確認します。

2つのサイズで行う25ページの監査

サイト監査では、サイトマップの25ページを Desktop と Mobile で撮影します。撮影数は50枚で、バッチはデバイスごとに25行の一覧2つとして実行します。最初に Desktop の一覧を貼り付け、1行目で Desktop と Full page を設定してプレビューを描画します。その後、Mobile の一覧を開始します。1行目で Mobile を設定し、Desktop のバッチと同じ待機条件、遅延、バナーモードを使います。そうすると、2つのセットの違いはデバイスサイズだけになります。

既定の同時ブラウザ数は4です。そのため、常に4行が同時に撮影されます。残りの行は、ブラウザの空きができるまで Capture pending と表示されます。25行の一覧は、4行ずつ約7回のラウンドで処理されます。各ラウンドは、最も遅いページの時間がかかります。長い遅延を設定したページはスロットを占有するため、1つの遅いページが後ろの行に影響します。監査では遅延を短く保ち、長い遅延は必要なページだけに設定します。

レビュー用に Desktop のバッチを PDF で、アーカイブ用に Mobile のバッチを ZIP で書き出します。PDF はレビューアがスクロールして確認できる1つのファイルになり、ZIP は元のフレームを記録として残します。

同時実行数の決め方

Concurrent browsers は、同時に撮影する行数を設定します。範囲は1〜10、既定値は4です。アクティブな行ごとに Temposhot が管理するブラウザを1つ使うため、値を大きくすると、Mac にメモリの余裕がある場合のみバッチが早く終わります。

まず既定値で実行します。メモリエラーで行が失敗した場合は、値を2に下げて、失敗した行を再実行します。バッチがエラーなく完了し、Mac の応答が保たれている場合は、次のバッチで値を1段階上げ、合計時間を比較します。最適な値は、お使いの Mac でメモリエラーが出ない最大の値です。

ログイン中のウィンドウで Auto Capture を使う

Auto Capture は、ログインの背後にあるレポートに適しています。ブラウザでサイトにログインし、レポートページを先頭に開きます。Command+1 を押し、Stop condition に Screenshots を選び、レポートに必要な画面数を入力します。Interval は1回のスクロールが描画を終えるまでの時間に設定し、Key press に Page Down を記録します。Windows タブでブラウザウィンドウを選びます。

設定が機能したら Save Current Setup を選択し、「Monthly report scroll」などレポート用のプリセット名を付けます。プリセットには Stop condition、Interval、Key press、カウントダウンが保存されるため、翌月も同じ値で開始できます。ソースは保存されないため、開始前にブラウザウィンドウを選び直します。

デバイスサイズと変わる内容

バッチの各行は1つのデバイスサイズを使い、そのサイズがブラウザのビューポートを決めます。Desktop は 1920×1080 で、ほとんどのマーケティングページやダッシュボードに適しています。Tablet は 768×1024 で、スマートフォンとデスクトップの中間の幅のレイアウトを表示します。Mobile は 390×844 で、多くのスマートフォンを縦向きで使うときの幅に合わせています。

デバイスサイズはビューポートであり、デバイスの機能の一覧ではありません。比較できるのは、同じサイズで撮影した画像だけです。同じページの Mobile と Desktop の撮影は、設計上レイアウトが異なります。そのため、2つを並べて比べると、内容の変化ではなくレイアウトの変化を測定することになります。

Viewport と Full page

Viewport は、指定したサイズで見えている範囲を保存します。訪問者が最初に見る内容を確認するための撮影です。Full page は、スクロール可能なページ全体を保存します。ページに何が含まれるかを確認するための撮影です。最初の画面より下の内容は Viewport では保存されないため、アーカイブには通常 Full page が必要です。

ローンチレビューでは両方が必要になることがよくあります。チームがデザインと照合する最初の画面には Viewport を使い、ページ全体の記録には Full page を使います。2つの出力には別の名前を付け、フォルダー内で区別できるようにします。

待機条件、遅延、Cookie バナー

待機条件は、撮影のタイミングを決めます。Load は標準のページ読み込みイベントの後に撮影し、多くのサイトの既定値です。DOM content loaded は、画像とスタイルの読み込みが終わる前に撮影するため、スタイルが一部だけ適用された画像になることがあります。Network idle は、バックグラウンドのリクエストが止まった後に撮影します。遅れて読み込まれるコンテンツに適していますが、ポーリングを続けるページではタイムアウトすることがあります。

Delay は、待機条件の後に0〜60秒を追加します。ページが準備完了を報告した後に表示されるコンテンツ、たとえばアニメーションや遅れて表示されるウィジェットに使います。値はミリ秒または秒で入力します。

Cookie バナー

Cookies は、同意バナーの扱いを設定します。Reject banners は可能な場合にバナーを拒否します。Accept minimal は最小限の同意のみを受け入れます。Hide only は回答せずにバナーを非表示にします。Leave unchanged は、表示されたままのバナーを含めて撮影します。

バナーの処理はベストエフォートで、独自の同意管理システムでは、バナーがスクリーンショットに表示されることがあります。アーカイブでは1つのモードを選び、バッチ全体で使います。そうすると、比較セットのすべての画像が同じバナーの状態を示します。訪問者が見る状態をそのまま示す必要があるローンチレビューでは、Leave unchanged を使います。

形式と画質

Website Capture は既定で JPEG を保存します。PNG と WebP も使えます。画質の設定は JPEG と WebP で 1〜100 の範囲で、PNG は可逆形式のため画質の設定はありません。

文字の小さいフルページでは、PNG は文字がシャープに保たれますが、ファイルは大きくなります。画質80台の JPEG では、ほとんどの文字を読みやすいまま、サイズを小さくできます。比較セットのファイルを揃えるため、バッチ内では1つの形式を選びます。

行ごとの設定とプレビュー

URL の各行には個別のオプションがあり、実行時の既定値より優先されます。行の設定を開くと、パネルの上部にプレビューが表示されます。変更はその行だけに適用されます。オプションを変更すると、プレビューには Out of date が表示され、再描画するまで残ります。

長いバッチの前に、1行でプレビューを使います。Cookie バナー、空白の画像領域、誤ったデバイスサイズを検出できます。チームで共有する見本画像を残す場合は Download preview を選びます。設定を変更したら、プレビューを再描画します。

失敗した行を復旧する

各行は、バッチの残りが続いている間も、それぞれの状態を表示します。行は Capture pending から Capturing に移り、その後 Capture complete または Capture failed になります。キャンセルされた行は Capture cancelled と表示され、失敗またはキャンセルされた行は Retry pending に移れます。

再試行の前に、行のエラーを確認します。無効な URL は行内で修正が必要です。待機条件に間に合わなかったページには、別の待機条件または短い遅延が必要です。自動ブラウジングをブロックするサイト、または描画されないサイトでは、その行の Block ads または Block trackers をオフにするか、後で再試行する必要があります。メモリが不足する Mac では Concurrent browsers の値を下げる必要があります。既定値の4は出発点であり、固定の設定ではありません。

主な用途

1. サイト監査。 サイトマップのすべてのページを Desktop と Mobile で撮影し、1つの PDF で確認します。
2. リデザインの記録。 同じ設定で、ローンチ前の旧サイトとローンチ後の新サイトを撮影します。
3. 競合の追跡。 固定の LP リストを毎月撮影し、セッションを Capture History に残します。
4. クライアントレポート。 バッチを PDF で書き出し、クライアントがブラウザを開かずにページをスクロールして確認できるようにします。
5. ログイン後のダッシュボード。 ブラウザウィンドウで Auto Capture を使い、長いレポートページを記録します。

結果を書き出す

実行後、結果ペインに結果が表示されます。書き出しバーには Images、ZIP、PDF、MP4 があり、Export settings… には GIF と WebP のオプションがあります。少なくとも1フレームを選択するまで、書き出しボタンは無効のままです。

出力に影響する数値は、書き出し設定にあります。JPG と WebP の画質は既定で 85%、MP4 は既定で 15 fps で、5〜60 から選べます。GIF のフレーム間隔は既定で 0.1 秒です。

ZIP には常に、編集されていない元のフレームが含まれます。バッチの PDF には、フレームが順序どおりに、検索可能なテキストレイヤー付きで含まれます。書き出し形式は、読み手が必要とするものに合わせて選びます。画像を比較するレビューアは ZIP を使い、ページをスクロールして確認するクライアントは PDF を使います。

Auto Export は、実行中に各フレームを PNG または JPG で書き出せます。書き出し先は設定の General にある書き出しパスで、結果ペインの Open Export Folder を選ぶと、そのフォルダーが Finder で開きます。

ウェブサイトのスクリーンショットを定期実行できますか

Temposhot では定期実行はできません。Website Capture と Auto Capture はどちらも Start Capture を選択すると開始し、アプリが開いている間に実行されます。クラウドのスケジューラー、ホスト型のアーカイブ、変更通知はありません。

定期チェックには、一般的な方法が2つあります。ホスト型の ウェブサイト監視 サービスは、固定のスケジュールで撮影をサーバー上で実行します。Playwright または Puppeteer のスクリプトは、launchd または CI ジョブから実行できます。月に1回の手動実行で足りる場合は、保存済みの URL リストを1つ残し、毎月1日に実行するのが最も簡単です。定期実行サービスの比較は Stillio の代替サービス の記事にあります。

よくある間違い

• 1つのバッチでデバイスを混在させる。 Desktop 同士で比較します。Mobile は別のバッチで実行します。
• すべてのページで Network idle を待つ。 リクエストを送り続けるページもあり、その行は失敗します。まず Load を使います。
• プレビューを省く。 長い実行の前に、1行で Render preview を選び、Cookie バナーと空白の画像領域を確認します。
• 同時ブラウザ数が多すぎる。 メモリエラーで行が失敗する場合は、Concurrent browsers を2に下げて再試行します。
• Auto Capture 中にブラウザを背面に置く。 キー操作は最前面のアプリに送られます。

FAQ

Website Capture はどの画像形式で保存しますか

既定は JPEG で、PNG と WebP にも対応します。1〜100 の画質設定は JPEG と WebP に適用されます。

Website Capture は Cookie バナーをブロックしますか

試みます。モードは Reject banners、Accept minimal、Hide only、Leave unchanged の4つで、処理はベストエフォートです。

何かがアップロードされますか

いいえ。ページは Mac 上のブラウザで読み込まれ、撮影した画像は Mac に残ります。アカウントは不要です。

Intel Mac で動作しますか

いいえ。Temposhot には macOS 14 以降を搭載した Apple Silicon Mac が必要です。

URL の行に無効と表示されるのはなぜですか

受け付けるのは HTTP と HTTPS のアドレスだけです。example.com のようなドメインのみの入力には https:// が追加されますが、他のスキームは拒否されます。行を修正し、プレビューを再描画します。

ログインが必要なページを撮影できますか

ログイン中のブラウザウィンドウで Auto Capture を使います。Website Capture は管理ブラウザで実行されるため、ログイン状態は使いません。ログインが必要なページは、サイトの利用規約に従う必要があります。

行が Capture pending のまま長く待つのはなぜですか

同時ブラウザのスロットに空きができるまで、行は Capture pending で待機します。50行のバッチを4つの同時ブラウザで実行すると、同時に撮影されるのは約4行のため、ほとんどの行は設計どおり待機します。Mac にメモリの余裕がある場合にだけ Concurrent browsers を上げます。遅いページは完了するまでスロットを占有します。

バッチを停止して完了した画像を残せますか

はい。Stop Capture は残りの処理を終了し、完了したスクリーンショットを残します。実行が落ち着くと、URL リスト、行のオプション、Concurrent browsers のロックが解除されるため、失敗した行を修正して新しい実行を開始できます。

1つのバッチに何ページ入りますか

このガイドでは、バッチのページ数の上限を設定していません。長い一覧は、サイトの1セクションなど自然な区切りで分割すると、各バッチをレビューしやすくなります。バッチあたり25〜50行の一覧は、結果ペインで行ごとに確認しやすい量です。

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

ウェブサイトのスクリーンショット自動化 のページで、Website Capture が URL リストをどう処理するかを確認できます。または ダウンロード から Temposhot を入手し、最初のバッチを実行できます。