ウェブページ全体のスクリーンショット：どのページも画像で保存する方法

最終更新日：2026年9月13日。以下の測定値は、公開されているWikipediaの記事をヘッドレスChromium 151で読み込んで得たものです。

スクリーンショットキーで撮れるのは、モニターに収まっている範囲だけです。ところがウェブページはたいていそれよりずっと縦に長く、スマートフォンでは表示が変わり、一部の画像はスクロールして近づいたときに初めて読み込まれます。キャプチャがうまくいかない原因は、ほぼこの3つで説明できます。最初の画面で切れる、「モバイル版」が実はデスクトップ版のまま、下半分がグレーの枠だらけ、のいずれかです。

結論：ウェブページ全体のスクリーンショットを撮るには？

ログインしているページはブラウザ内蔵のページ全体キャプチャを使い、公開ページを特定のデバイス幅で撮りたいときはオンラインのHTML画像変換ツールを使います。Firefoxではページを右クリックして「スクリーンショットを撮る」を選び、「ページ全体を保存」を押します。ChromeではDevToolsを開き、コマンドメニューから「Capture full size screenshot」を実行します。

公開ページなら、アドレスをHTMLを画像に変換に貼り付け、デスクトップ・タブレット・モバイルの幅を選んで、ページ全体をオンにします。共有する前に、仕上がった画像を一度スクロールして、下のほうの画像、レイアウトの幅、ページの終わりの位置を確認してください。

用途に合うキャプチャ方法はどれ？

• ログインすると内容が変わるページには、ブラウザの機能を選びます。
• 初めて訪れた人と同じ表示や、パソコンからスマホ幅のキャプチャが欲しいときは、オンラインツールを選びます。
• スクリプトは、保守の手間に見合う量があるときだけ選びます。

Chrome公式のDevToolsでスクリーンショットを撮る方法では、範囲指定や要素単位のキャプチャも紹介されており、ページの一部だけが必要なときに便利です。MozillaもFirefoxのスクリーンショット機能として、ページ全体の保存方法を案内しています。

「最初の画面」と「ページ全体」は実際に何を写す？

最初の画面のキャプチャは、ちょうど1ビューポート分です。一般的なデスクトップ設定なら1280×800ピクセルになります。ページ全体のキャプチャは、スクロールできる文書全体を1枚の縦長画像に描き出します。その差は、多くの人が思うよりはるかに大きくなります。

Wikipediaの「Cat」の記事を幅1280ピクセルで測ったところ、スクロールの高さは42,077ピクセルでした。最初の画面を52枚以上積み重ねた長さです。当サイトのツールはページ全体のキャプチャを12,000ピクセルまでにしています。それ以上長い画像は見るのも共有するのも難しく、無限スクロールのページではいつまでも終わらないためです。さらに長いページは、区切って撮影してください。

高さは形式の選択にも関係します。WebPは縦横どちらかが16,383ピクセルを超える画像を保存できないため、とても長いキャプチャはPNGやJPGでは保存できても、WebPでは失敗することがあります。

ウェブページのキャプチャにはどの形式を使う？

文字やUIが中心のページにはPNG、ウェブで共有するならWebP、どちらも受け付けない提出先にだけJPGを選びます。画像の多い「Cat」の記事を1280×12,000ピクセルでキャプチャし、同じ画像を3つの形式で保存しました。

平坦な文字やUIが中心のページは、この写真の多いページよりPNGでずっと小さく収まるのが普通です。そのため、UIのキャプチャでは今でもPNGが標準になっています。JPEGで小さな文字が崩れる理由はスクリーンショットの形式ガイドで、形式ごとの違いはWebP・JPEG・PNGの比較で詳しく解説しています。形式を変えずに後から小さくしたい場合は、画像圧縮ツールを使ってください。

ページ全体のスクリーンショットで画像が抜けるのはなぜ？

最近のページの多くは、画像を遅延読み込みしています。ブラウザは、スクロールして近づいた画像から順に取得します。ページ全体のキャプチャはスクロールしないため、下のほうの画像は撮影の時点でまだ空の枠のままになりえます。この仕組みはMDNの遅延読み込みの解説で説明されています。

実際に測ると、影響ははっきり表れました。「Cat」の記事では58枚の画像のうち55枚に遅延読み込みが指定されています。すぐにキャプチャすると、最初の2画面より下にある45枚のうち44枚がまだ空白でした。ページを最後までスクロールしてから先頭に戻ると、空白は0枚になりました。

• DevToolsやFirefoxで撮る前に、いちばん下までスクロールして戻ります。
• スクロールしたあと1〜2秒待ち、最後の画像の読み込みが終わるのを待ちます。
• 仕上がった画像は、抜けが出やすい下の3分の1から確認します。

当サイトのHTML画像変換ツールは、上の数値を測ったあとで改良し、ページ全体のキャプチャではこのスクロールを自動で行うようになりました。

モバイルのスクリーンショットがデスクトップ版になるのはなぜ？

幅の狭いウィンドウは、スマートフォンと同じではありません。多くのサイトは、ウィンドウの幅ではなくブラウザのユーザーエージェント文字列を見て、送るレイアウトを決めています。このユーザーエージェントによる判定と、それが今も広く使われている理由はMDNで解説されています。

Wikipediaの「Screenshot」の記事を、幅390ピクセルのビューポートで2回読み込みました。デスクトップのユーザーエージェントでは、デスクトップ用のレイアウトが狭い幅に押し込まれ、高さは7,544ピクセルでした。スマートフォンのユーザーエージェントでは本来のモバイル版が送られ、高さは2,299ピクセルでした。

つまり、デスクトップのブラウザを細くしても、スマホの利用者に見えている画面はほとんどわかりません。Chromeのデバイスモードは幅と一緒にユーザーエージェントも切り替えます。当サイトのモバイル・タブレットのオプションも同様です。

オンラインツールでlocalhostや社内網、ログイン後のページを撮れないのはなぜ？

オンラインのキャプチャツールは、自分のサーバー上で、Cookieのない新しいブラウザを使ってページを読み込みます。あなたが保存しているログイン情報は見えないため、ログインが必要なページはログイン画面として写ります。

また、localhostや192.168.x.x、社内イントラネットのようなプライベートネットワークのアドレスも拒否します。匿名の訪問者がサーバーに任意のアドレスを取得させられる状態は、サーバーサイドリクエストフォージェリ（SSRF）と呼ばれるよく知られた脆弱性で、OWASPのSSRF解説に詳しく載っています。慎重に作られたツールは、入力されたアドレスだけでなく、リダイレクトを含めてページが行うすべての接続を確認します。

こうしたページは、自分のブラウザのページ全体キャプチャで撮ってください。自分のパソコン上、自分のセッションの中で動くので、あなたが見ているとおりに写せます。

キャプチャがうまくいかないときの対処法

内容を隠すバナーや固定ヘッダーは、撮り直すより後から消すほうが簡単です。画像切り抜きツールで取り除いてください。

キャプチャを共有する前のチェックリスト

1. 幅が想定する端末と合っているか確認する。
2. 下の3分の1に空白の画像がないか見る。
3. ページが想定の位置で終わっているか確認する。
4. 大事な内容をバナーが隠していないか見る。
5. 初めての訪問者には見えない個人情報を消す。
6. 文字の多いページはPNGで保存する。
7. あとで参照できるよう撮影日を記録する。

ウェブページは絶えず変わります。キャプチャを証拠やデザインの参考、不具合報告に使うなら、撮影日もその記録の一部です。

よくある質問

ログインが必要なページのスクリーンショットは撮れますか？

オンラインツールはアカウントにアクセスできないため撮れません。ログインした状態で、ブラウザ自身のページ全体キャプチャを使ってください。

ページ全体のスクリーンショットが途中で切れるのはなぜですか？

高さに上限を設けているツールが多く、当サイトは12,000ピクセルまでです。スクロールするたびに内容が増えるページには、そもそも終わりがありません。

HTMLを画像に変換するのと、ウェブサイトのスクリーンショットは同じですか？

普段の使い方ではほぼ同じです。どちらもブラウザでページを描画し、その結果を画像ファイルとして保存します。

モバイルのキャプチャにはどの幅を選べばいいですか？

最近の多くのiPhoneのCSS幅である390ピクセルを、スマートフォンのユーザーエージェントと組み合わせて使うと、サイトが本来のモバイル版を送ってきます。

一部の画像が空白の枠になるのはなぜですか？

遅延読み込みの画像がまだ取得されていないためです。撮る前にページをスクロールするか、自動でスクロールするツールを使ってください。

ページの一部分だけをキャプチャできますか？

できます。Chrome DevToolsでは要素単位で撮れますし、ページ全体を撮ってから必要な部分を切り抜く方法もあります。

オンラインツールはページのコピーを保存しますか？

画像を作るために一時的なブラウザでページを読み込みます。結果がどのくらいの期間保存されるかは、各ツールのプライバシーに関する説明を確認してください。