どうも、株式会社SNACのまつです。
Windows10（Windows11）でWebページ全体をスクリーンショットする方法を解説します。
Google Chromeなどを使っていて「スクロールしながら画面キャプチャしたい」と思うことってありますよね。
でも通常のスクリーンショットキー(Windowsキー＋PrtSc)では画面に見えない部分は保存してくれません。縦に長いページ全体をフルでスクリーンショットするには別の方法を使う必要があります。
この記事ではWindowsのパソコンを使っている人向けに
など、ブラウザ毎にWebページのスクロールスクショ方法、スクロール画面を範囲指定して保存する方法を解説します。
Windows10(11)でスクロール画面をスクリーンショットする方法
Windows10(11)でWebページ全体のスクロールスクリーンショットをキャプチャする方法は主に3種類あります。
拡張ツールなどを使わなくても使用可能なのでぜひ使ってみてください。
主にはブラウザの機能を使いますが、
の3つを使ってそれぞれブラウザ上の操作でページ全体のスクショを撮ることができます。
①Chromeでスクロールスクリーンショットを撮る方法
Google Chromeでスクロール部分（Webページ全体）をスクショする方法です。
Google Chromeでは「デベロッパーツール」と言われる開発者ツールを使ってかんたんにスクロールスクショを撮影できます。
最初は難しいと感じますが、拡張ツールを使わずにスクショができるのでこの記事の通りにやってみてくださいね。
操作の流れは以下の３ステップです。
- Ctrl＋Shift＋I
- Ctrl＋Shift＋P
- Capture full screenshotでスクショ
Google Chromeでこのまんま作業すれば出来ます。では実際にやってみましょう。
まずはGoogle Chromeでウェブページを表示します。
「Shift＋Ctrl＋I」を同時押ししましょう。
デベロッパーツールが開きます。英語の文字列がずらずらと出てきますが無視して「Shift＋Ctrl＋P」を同時押ししてください。
「Run >～」という検索バーが出てくるので、「screeenshot」と入力してください。
「Capture full size screenshot」を選択します。
キャプチャした画像を好きなフォルダに保存しましょう。
慣れるまで複雑に感じるかもしれませんが、
- Ctrl＋Shift＋I
- Ctrl＋Shift＋P
- Capture full screenshotでスクショ
とほぼショートカットキーで済むので、慣れるまで何度も反復して覚えてみてくださいね。
②Firefoxでスクロールスクリーンショットを撮る方法
次はFirefoxでWebページ全体をスクショする方法です。FirefoxならGoogle Chromeよりもかんたんにスクロール画面のキャプチャもできちゃうのです。
では実際にスクロールスクショをやってみましょう。まずはFirefoxのブラウザを開いてください。
「>>」のマークをクリックしてください。
「ツールバーをカスタマイズ」を開きます。
- 左側：アイテム一覧
- 右側：ツールバー内に表示するアイテム
となります。左側にあるアイテム一覧を右側のドラッグすることで、すぐにアイテムが取り出せるようになります。
今回はスクリーンショットを使うので、スクショアイテムを左から右側に移動してみます。
「スクリーンショット」を右側にドラッグしてください。
完了をクリックします。これでツールバーから簡単にスクリーンショットが使えるようになりました。では実際にスクショを撮影してみましょう。
好きなウェブページで赤枠内のアメーバのようなアイコンをクリックします。
「ページ全体を保存」を選択してください。
無事ウェブページ全体がスクショできました。
たまに画像が真っ白になったり、一部が見切れていたりなどのバグが発生することがあるので、確認してからダウンロードしましょう。
これでFirefoxでウェブページ全体をスクショする方法は以上です。
③Edgeでページ全体のスクロールキャプチャを撮る方法
Microsoft Edgeでウェブページ全体をスクリーンショットする方法を解説します。
実はMicrosoft Edgeにはデフォルトでスクショ機能が付いているので、拡張ツールなどは必要ありません。
では実際にウェブページ全体をスクショしてみましょう。まずはMicrosoft Edgeを開いてください。
「…」をクリックします。
「Webキャプチャ」をクリックしてください。よく使う人は「Ctrl+Shift+S」でも開けるので覚えておくといいです。
「ページ全体をキャプチャ」を選択しましょう。これでPC画面で見えない部分を含め、Webページをキャプチャしてくれます。
キャプチャできたら保存しましょう。
フロッピーディスクのようなマーク(古い)をクリックすれば保存できます。もうちょっと拡大してみましょう。
やっぱりフロッピーディスクですよね。
好きなフォルダに保存します。
【Windows10/11】スクロール画面を範囲指定してスクリーンショットする方法
次は「Webページ全体からスクロール範囲を指定してキャプチャする方法」について解説します。
スクロールスクショでも全部ではなく、部分的にスクロール領域を選択→スクショしたい時ってありますよね。
スクロール領域を選択してのキャプチャはデフォルトでは不可能なので、「Awesome Screenshot」という拡張ツールを使って行います(無料)。
Awesome Screenshotでは画面をキャプチャして画像や動画として保存することができます。具体的な機能は以下の通りです。
| 名称 | できること | 機能一覧 |
| レコード | 画面録画をする |
|
| キャプチャ | 画面を画像保存する |
|
こんな機能が無料で使えちゃいます。
詳しくはAwesome Screenshotの使い方を読んでみてください。
Awesome Screenshotはブラウザ毎にインストールページが分かれているので、以下のリンクからそれぞれ使用するブラウザをクリックしてください。
- Google ChromeでAwesome Screenshotをインストールする
- Google ChromeでAwesome Screenshotをインストールする
- Microsoft EdgeでAwesome Screenshotをインストールする
それぞれインストールが終わったらこのページに戻ってきてくださいね。ではAwesome Screenshotがインストールできたらそれぞれお使いのブラウザでAwesome Screenshotを開いてみましょう。
まずはブラウザを開きます。だいたい拡張ツールはアメーバみたいなマークなのですぐわかりますよ。
【Google Chromeの場合】
【Firefoxの場合】
【Microsoft Edgeの場合】
こんな感じで全部アメーバみたいなマークです。
この記事ではGoogle Chromeの画面で解説しますが、FirefoxもMicrosoft Edgeも画面は同じなので見たまま操作してみてください。
では拡張ツールを開いた画面から解説します。
「素晴らしいスクリーンショットとスクリ…」がAwesome Screenshotです。
ちなみにピンをクリックするとツールバーに保存されます。保存しておくとワンクリックで起動出来るので便利ですよ。
では実際にアイコンを押して起動してみましょう。
「キャプチャ」をクリックしてください。
「選択範囲」をクリックしましょう。
左クリックを押しながら好きな範囲を選択します。範囲が決まったら左クリックを離してください。
「キャプチャ」をクリックします。又は別ブラウザだと「保存」と表示されているかもしれません。コピーだとクリップボードに保存されるだけなので、必ず画像として保存してください。
「Done」をクリックしましょう。
ダウンロードマークをクリックして保存します。
これでAwesome Screenshotを使って好きなスクロール範囲を指定してキャプチャする方法は終了です！
Windows PCでスクロールスクリーンショットができない原因と対処法
次にWindows PCでスクロールスクリーンショットができない原因と対処法についてまとめてみました。
ブラウザ別の原因と対処法をまとめているので、以下から読んでみてください。
拡張ツールを使わない方法を書いていますが、もし上記の方法がすべてダメだったらAwesome Screenshotなどの拡張ツールを使ってスクショするしかないかもです。
①Chromeで全体のスクリーンショットができない場合の対処法
Google Chromeでページ全体のスクリーンショットができない場合があります。
たとえばスクショ自体はできたけど真っ白になる、あるいは画像だけがスクショできないなどです。
その場合は以下の対処法を行なってみましょう。
- ハードウェア アクセラレーションをONにする
- 高さ制限を確認する(16,385pxまで)
- 別のブラウザを使用する(Firefoxなど)
１.ハードウェア アクセラレーションをONにする
まずはハードウェアアクセラレーションをONにしてみましょう。ハードウェアアクセラレーションは画像をなんか、アレするやつです(5歳児)。
Chromeのパフォーマンスを向上させる機能で、主に画像や動画などの処理をしているそうです。スクショしてるのに画像が真っ白になる場合に改善できるかもしれません。
やり方はまずGoogle Chromeを開きます。
右上の「︙」マークをクリックしてください。
「システム」をクリックします。
「ハードウェアアクセラレーションが使用可能な場合は使用する」をONにしましょう。
これでOKです。OFFからONにすると再起動を求められるので、再起動してからもう一度Chromeでスクロールスクショを試してみてください。
２.高さ制限を確認する(16,385pxまで)
Chromeのデベロッパー ツールのCapture full size schreenshotには高さ制限があり、16,384pxまでです。
長いウェブページの場合、16,385px以降はキャプチャされません。
高さ制限に関しては他のブラウザには記載がありませんが、縦長過ぎるページをスクショすると後半の画像が真っ白になるなどはよくありますね。縦長過ぎるページキャプチャは拡張ツールを使わないと難しいかもしれません。
３.別のブラウザを使用する(Firefoxなど)
Chromeがダメな場合は別のブラウザを使用してみましょう。
ChromeがダメでもEdgeやfirefoxならなぜかスクショできルパターンも多数あります。
FirefoxとEdgeのブラウザを同時に起動しておいて、URLをコピペして試してみましょう。やり方は当記事にて記載していますが、以下のリンクから飛んでみてくださいませ。
- FirefoxのWebページ全体スクショ方法
- Microsoft EdgeのWebページ全体スクショ方法
②Firefoxでスクロールスクリーンショットができない場合の対処法
Firefoxでスクロールスクリーンショットができない場合の対処法です。
Firefoxで主に起こるであろうトラブルは、右クリックのスクリーンショットが消えたり、画像が真っ白になるなどです。
もしFirefoxでスクロールスクショができない場合は以下の方法を一つずつ試してみてください。
- 画像を読み込ませてからスクショする
- 別のブラウザを使用する(Edgeなど)
１.画像を読み込ませてからスクショする
スクロールスクリーンショットを撮る前に、ページ全体をスクロールして画像を表示させてからスクショをしてみてください。
WordPressなどのサイトでページ高速化をしている場合、スクロールに合わせて画像を表示したりしますので、スクロールしないと正常にスクショができません。
スクリーンショットを撮る分のページをスクロールしてから、スクショツールを開いてキャプチャしてみてください。
２.別のブラウザを使用する(Edgeなど)
Firefoxがダメな場合は別のブラウザを使用してみましょう。
Chromeがダメな場合と同様、EdgeやChromeならスクショできるパターンを狙います。
ChromeやEdgeのブラウザを同時に起動して、URLをコピペして試してみましょう。やり方は当記事にて記載していますが、以下のリンクから飛んでみてくださいませ。
- ChromeのWebページ全体スクショ方法
- Microsoft EdgeのWebページ全体スクショ方法
③Edgeでスクロールキャプチャができない場合の対処法
Edgeでスクロールキャプチャができない場合の対処法です。
Edgeの対処法もfirefoxと変わらないのですが
- 画像を読み込ませてからスクショする
- 別のブラウザを使用する(firefoxなど)
の2つを試してみましょう。
個人的にはfirefox→Edge→Chromeの順にスクショの精度が高い感覚がありますので、FirefoxかEdgeを使えば問題ないと思います。
もしいずれの方法でもブラウザでスクロールスクショが上手くできない場合は、以下の拡張ツールなどを使ってキャプチャするしかないかもですね。
まとめ
今回は、Windows10/11でスクリーンショットをする時にウェブページ全体を撮る方法について解説しました。
もし復習したい方は
- GoogleChromeのWebページ全体スクショ方法
- FirefoxのWebページ全体スクショ方法
- Microsoft EdgeのWebページ全体スクショ方法
- スクロール範囲を指定してスクリーンショットする方法
の4つから当てはまるブラウザをクリック or タップしてお進みください。
パソコンで仕事をする人にとってウェブページのスクリーンショットは日常的な作業の一つですが、会社によっては拡張ツールやフリーソフトを推奨しないところもありますよね。
この方法ならほぼデフォルトツールでスクショが出来るのでまったく問題ないはずです。ぜひ仕事の効率化などに役立ててくださいね。