【アドオン不要】ブラウザでWebページ全体のスクリーンショットをキャプチャーする方法を解説

こんにちは、現役エンジニアの inno_tech です。

ブラウザで表示したWebページの全体をスクショする方法をお探しでしょうか？それ、Chromeならアドオンなし(拡張機能なし)で実現する方法があります！

本記事を見れば、Webページ全体のスクリーンショットをキャプチャーし、1つの画像として保存できるようになります。

本記事では、Windows / Google Chromeで動作確認しています。

実現したいこと

今回実現したいのは、下の画像のようにスクロールバーが表示された長いWebページにおいて、スクロールした先も含めた全体のスクリーンショットを撮ることです。

早速、やり方を説明します。Google ChromeでWebページを開いた状態から解説を始めます。

Webページ全体のスクリーンショットをキャプチャ

Google Chromeで確認したいページにアクセスし、Ctrl + Shift + IでChrome開発者ツールを起動します。

次に開発者ツール上で、Ctrl + Shift + Pを押してください。

すると、「Run >」と表示されたコマンドパレットが開きます。コマンドパレットに「Capture」と入力し、コマンドの候補を表示します。

Webページ全体をキャプチャする場合は、「Capture full size screenshot」をクリックしてください。

「Capture full size screenshot」の実行後、Webページ全体のスクリーンショットが撮影され、ファイル保存ダイアログが起動します。好みの名前で保存してください。 PNG形式(画像保存フォーマットの一種) でのみ保存できます。

下の画像が試しにキャプチャーした画像ですが、本来はスクロールしないと見えないページの最下部まで撮影できていることが分かります。この例では、画素数 横1058 x 縦 2646 pixelというかなり縦長の画像になりました。

Chrome開発者ツールが邪魔な場合

今回紹介した方法では、Webページの表示ウィンドウサイズと同じサイズでスクリーンショットが保存されます。しかしながらChrome開発者ツールを開くと、その分ウィンドウが狭くなるという問題が出てきます。

この問題を解決するには、開発者ツールを別ウィンドウで開くという対策があります。詳しくはこちらの記事をご確認ください。

あわせて読みたい

【解説】Chrome 開発者ツールを別ウィンドウで開く方法(表示位置変更も) Google Chromeの開発者ツール(デベロッパー ツール) で 別ウィンドウで表示する方法、位置を変更する方法 をお探しでしょうか？ 本記事を見れば、Chrome 開発者ツールを...

まとめ

2021年の全国の本屋さんで最も売れた年間ベストセラー本が気になる方はこちら。

あわせて読みたい

ブラウザのページ読み込み中の画面を時系列でキャプチャする方法 ブラウザのページ読み込み中の画面を時系列でキャプチャする方法をお探しでしょうか？それ、Chrome開発者ツールを使ってできます！ 本記事を見れば、ブラウザのページ読...

参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!