パソコンで縦長Webページのスクリーンショットを撮影する方法! Chrome画面全体のキャプチャを保存しよう [Windows/Mac]

スポンサーリンク
Google Chrome

Warning: Undefined array key 5 in /home/truni7/sp7pc.com/public_html/wp-content/themes/cocoon-child-master/functions.php on line 521

パソコンのブラウザで表示しているページは、様々な方法で全体を1つの画像として撮影できます。

本記事では下記ブラウザを例に、縦長Webページ全体のスクリーンショットを撮影する方法について紹介します。

  • ChromeのアイコンChrome
  • FirefoxのアイコンFirefox
  • Microsoft EdgeのアイコンMicrosoft Edge
  • SafariのアイコンSafari

(Safariを除き)どのブラウザも、パソコンのOSはWindows / Mac両方に共通で利用できます。

 

スポンサーリンク
スポンサーリンク

PCでページ全体のスクリーンショットを撮影する方法まとめ

ブラウザごと撮影方法と特徴のまとめです(ブラウザ名をタップして、撮影手順の説明へジャンプ)。

ブラウザ 方法 特徴
Chromeのアイコン
Chrome
  • 拡張機能で撮影する
  • 操作が簡単
  • デベロッパーツールで撮影する
  • 標準機能だけでOK
Firefoxのアイコン
Firefox
  • Firefox Screenshotsで撮影する
  • 操作が簡単
  • 標準機能だけでOK
Microsoft Edgeのアイコン
Edge
  • 拡張機能で撮影する
  • 操作が簡単
  • 開発者ツールで撮影する
  • 標準機能だけでOK
Safariのアイコン
Safari
  • 開発メニューで撮影する
  • 標準機能だけでOK
どのブラウザも標準機能だけで撮影できますが、使い勝手が微妙です。そこでChromeのアイコンChromeとMicrosoft EdgeのアイコンEdgeは、代替案として拡張機能も紹介します。SafariのアイコンSafariは残念ながらオススメできる拡張機能がないため、標準機能のみ紹介します。FirefoxのアイコンFirefoxは標準機能「Firefox Screenshots」が優秀なため、拡張機能(アドオン)の説明を割愛しています。

それぞれ順番に解説します。

Chromeで縦長Webページをキャプチャする方法

ダウンロード パソコン版Google Chrome

2つの方法を紹介します。

方法 メリット デメリット
①:拡張機能で
撮影する
  • 操作が簡単
  • 保存形式を選べる
    (PNG or PDF)
  • 拡張機能の
    導入が必要
②:デベロッパーツール
で撮影する
  • 標準機能だけで
    撮影可能
  • 操作が少し
    面倒
  • 保存形式は
    PNGのみ
頻繁に撮影するなら①がオススメです。たまにしか撮らないなら、②の手順を知ってると便利です。

方法①:GoFullPage – Full Page Screen Captureで画面スクロールを撮る使い方

方法②:デベロッパーツールで撮影する手順は、コチラをタップしてジャンプ。

拡張機能メニューより、拡張機能GoFullPageのアイコンGoFullPageを固定しておくと使いやすいです。

拡張機能GoFullPageでChromeの画面スクロールを撮る手順1

①拡張機能メニューを開き、②固定すればOK。

撮影したいWebページを開き、拡張機能の拡張機能GoFullPageのアイコンGoFullPageアイコンをクリックします。

拡張機能GoFullPageでChromeの画面スクロールを撮る手順2

するとページ全体の撮影のため、自動で画面スクロールが始まり、

拡張機能GoFullPageでChromeの画面スクロールを撮る手順3

自動スクロールで撮影中の画面。

ページ全体のスクリーンショット画像が別タブに表示されます。

そのまま希望するファイル形式(PDF or 画像)でダウンロードも可能です。

拡張機能GoFullPageでChromeの画面スクロールを撮る手順4

もしスマートフォンやタブレットなど、好きなデバイスからの表示形式で撮影したい場合、デベロッパーツールと組み合わせれば実現できます。が、ちょっと面倒です。。。

ChromeのアイコンChromeのメニューより、その他のツールデベロッパーツール と開き、

拡張機能GoFullPageでChromeの画面スクロールを撮る手順5

Chromeデベロッパーツールのツールバーアイコンをクリックしてツールバーを有効にし、

拡張機能GoFullPageでChromeの画面スクロールを撮る手順6

画面サイズを変更した状態で、拡張機能の拡張機能GoFullPageのアイコンGoFullPageアイコンをクリックすれば、指定の画面サイズで保存できます。

拡張機能GoFullPageでChromeの画面スクロールを撮る手順7

拡張機能GoFullPageのアイコンGoFullPageアイコンをクリックするだけで、ページ全体の撮影が完了するため、ChromeのアイコンChromeユーザーに最もオススメな方法です。

方法②:デベロッパーツールで画面スクロールを撮る使い方

方法①:拡張機能で撮影する手順は、コチラをタップしてジャンプ。

撮影したいWebページでChromeのアイコンChromeのメニューより、その他のツールデベロッパーツール と開きます。

デベロッパーツールでChrome画面スクロールを撮る手順1

または右クリックメニューより 検証 を選ぶ手順でも、デベロッパーツールは開けます。

デベロッパーツールでChrome画面スクロールを撮る手順2

Chromeデベロッパーツールのツールバーアイコンをクリックしてツールバーを有効にし、

デベロッパーツールでChrome画面スクロールを撮る手順3

メニューより Capture full size screenshot を実行すれば、ページ全体のスクリーンショット画像をダウンロードできます。

デベロッパーツールでChrome画面スクロールを撮る手順4

また画面サイズを指定することで、スマートフォンやタブレットなど、好きなデバイスからの表示形式で撮影可能です。

デベロッパーツールでChrome画面スクロールを撮る手順5

ちょっと撮影手順が多く面倒ですが、拡張機能の導入に抵抗があるChromeのアイコンChromeユーザーにオススメできる方法です。

Firefoxで縦長Webページをキャプチャする方法

ダウンロード パソコン版Firefox

FirefoxのアイコンFirefoxには標準で「Firefox Screenshots」という機能が搭載されており、簡単な操作でページ全体のキャプチャを撮影できます。

撮影したいWebページでFirefoxのアイコンFirefoxのメニューより、スクリーンショットを撮る を実行します。

Firefoxで縦長Webページをキャプチャする手順1

撮影範囲を選べるので、ページ全体を保存 をクリック。

Firefoxで縦長Webページをキャプチャする手順2

撮影結果が表示され、ダウンロード よりそのまま保存できます。

Firefoxで縦長Webページをキャプチャする手順3

また画面サイズを指定することで、スマートフォンやタブレットなど、好きなデバイスからの表示形式で撮影可能です。

FirefoxのアイコンFirefoxのメニューより ウェブ開発 へ進み、

Firefoxで縦長Webページをキャプチャする手順4

開発ツールを表示 を選択。

Firefoxで縦長Webページをキャプチャする手順5

Firefox開発ツールのツールバーアイコンをクリックしてツールバーを有効にし、

Firefoxで縦長Webページをキャプチャする手順6

画面サイズを指定。

Firefoxで縦長Webページをキャプチャする手順7

この状態でFirefoxのアイコンFirefoxのメニューより、スクリーンショットを撮る を実行すれば、指定の画面サイズで保存できます。

Firefoxで縦長Webページをキャプチャする手順8

標準機能「Firefox Screenshots」はとても使いやすいため、すべてのFirefoxのアイコンFirefoxユーザーにオススメできる方法です。

Edgeで縦長Webページをキャプチャする方法

ダウンロード パソコン版Microsoft Edge(macOSもインストール可能)

Chromium版EdgeのアイコンMicrosoft Edgeは2020年1月より、リニューアルしたChromium版が配信されています。本記事もChromium版Edgeを前提に説明をします。

2つの方法を紹介します。

方法 メリット デメリット
①:拡張機能で
撮影する
  • 操作が簡単
  • 拡張機能の
    導入が必要
②:開発者ツール
で撮影する
  • 標準機能だけで
    撮影可能
  • 操作が少し
    面倒
頻繁に撮影するなら①がオススメです。たまにしか撮らないなら、②の手順を知ってると便利です。

方法①:One Click Full Pageスクリーンショットで画面スクロールを撮る使い方

方法②:開発者ツールで撮影する手順は、コチラをタップしてジャンプ。

ダウンロード 拡張機能One Click Full PageスクリーンショットのアイコンEdgeアドオン – One Click Full Pageスクリーンショット

撮影したいWebページを開き、拡張機能のOne Click Full Pageスクリーンショットの撮影アイコンOne Click Full Pageスクリーンショットアイコンをクリックします。

アドオンOne Click Full PageスクリーンショットでEdgeの画面スクロールを撮る手順1

するとページ全体の撮影のため、自動で画面スクロールが始まり、

アドオンOne Click Full PageスクリーンショットでEdgeの画面スクロールを撮る手順2

自動スクロールで撮影中の画面。

ページ全体のスクリーンショット画像が別タブに表示され、Download より保存可能です。

アドオンOne Click Full PageスクリーンショットでEdgeの画面スクロールを撮る手順3

もしスマートフォンやタブレットなど、好きなデバイスからの表示形式で撮影したい場合、デベロッパーツールと組み合わせれば実現できます。が、ちょっと面倒です。。。

Chromium版EdgeのアイコンEdgeのメニューより、その他のツール開発者ツール と開きます。

アドオンOne Click Full PageスクリーンショットでEdgeの画面スクロールを撮る手順4

Edge開発者ツールのツールバーアイコンをクリックしてツールバーを有効にし、

アドオンOne Click Full PageスクリーンショットでEdgeの画面スクロールを撮る手順5

画面サイズを変更した状態で、拡張機能のOne Click Full Pageスクリーンショットの撮影アイコンOne Click Full Pageスクリーンショットアイコンをクリックすれば、指定の画面サイズで保存できます。

アドオンOne Click Full PageスクリーンショットでEdgeの画面スクロールを撮る手順6

One Click Full Pageスクリーンショットの撮影アイコンOne Click Full Pageスクリーンショットアイコンをクリックするだけで、ページ全体の撮影が完了するため、Chromium版EdgeのアイコンMicrosoft Edgeユーザーに最もオススメな方法です。

方法②:開発者ツールで画面スクロールを撮る使い方

方法①:拡張機能で撮影する手順は、コチラをタップしてジャンプ。

撮影したいWebページでChromium版EdgeのアイコンEdgeのメニューより、その他のツール開発者ツール と開きます。

開発者ツールでEdgeの画面スクロールを撮る手順1

または右クリックメニューより 開発者ツールで調査する と選んでもOK。

開発者ツールでEdgeの画面スクロールを撮る手順2

Edge開発者ツールのツールバーアイコンをクリックしてツールバーを有効にし、

開発者ツールでEdgeの画面スクロールを撮る手順3

メニューより フルサイズのスクリーンショットをキャプチャする を実行すれば、ページ全体のスクリーンショット画像をダウンロードできます。

開発者ツールでEdgeの画面スクロールを撮る手順4

また画面サイズを指定することで、スマートフォンやタブレットなど、好きなデバイスからの表示形式で撮影可能です。

開発者ツールでEdgeの画面スクロールを撮る手順5

ちょっと撮影手順が多く面倒ですが、拡張機能の導入に抵抗があるChromium版EdgeのアイコンMicrosoft Edgeユーザーにオススメできる方法です。

Safariで縦長Webページをキャプチャする方法

Windows版Safariは長年アップデートされていないため、Mac向けの内容となります。
SafariのアイコンSafariはオススメできる拡張機能がないため、標準の開発メニューを使った方法のみ紹介します。

事前にメニューバー Safari より 環境設定 を開き、

Safariで縦長Webページをキャプチャする手順1

「詳細」タブで メニューバーに”開発”メニューを表示 を有効にします。

Safariで縦長Webページをキャプチャする手順2

撮影したいWebページでメニューバー 開発 より Webインスペクタを表示 を開き、

Safariで縦長Webページをキャプチャする手順3

Safari開発メニューの要素タブアイコン要素タブを表示。

Safariで縦長Webページをキャプチャする手順4

なおここまでの手順は、右クリックメニューより 要素の詳細を表示 と選んでも同じ画面を開けます。

Safariで縦長Webページをキャプチャする手順5

Safari開発メニューの要素タブアイコン要素タブで表示されるコードのうち、bodyタグを選択した状態で右クリックメニューを開き、スクリーンショットを取り込む を実行。

Safariで縦長Webページをキャプチャする手順6

ページ全体のスクリーンショット画像をダウンロードできます。

Safariで縦長Webページをキャプチャする手順7

また画面サイズを指定することで、スマートフォンやタブレットなど、好きなデバイスからの表示形式で撮影可能です。

メニューバー 開発 より レスポンシブ・デザイン・モードにする を開き、

Safariで縦長Webページをキャプチャする手順8

スマートフォンやタブレットなど、好きな画面サイズへ変更した後、右クリックメニューより 要素の詳細を表示 へ。

Safariで縦長Webページをキャプチャする手順9

bodyタグを選択した状態で スクリーンショットを取り込む を実行すれば、指定の画面サイズで保存できます。

Safariで縦長Webページをキャプチャする手順10

Safari開発メニューの要素タブアイコン要素タブで表示されるコードを理解できれば、撮影範囲を自由にコントロールできるメリットもありますが、何より撮影手順が分かりづらいです。。。が、残念ながらその他の選択肢(例:拡張機能など)に乏しいため、SafariのアイコンSafariユーザーなら試す価値アリです。

補足:PCでウェブサイトをPDF変換する方法

ファイル形式PDFでページ全体のスクリーンショット撮影したい場合、ブラウザごとオススメの方法があります。

ブラウザ 方法 特徴
Chromeのアイコン
Chrome
  • 印刷メニューでPDFを作成する
  • 拡張機能の導入が不要
  • 拡張機能でPDFを作成する
  • レイアウトが崩れにくい
Firefoxのアイコン
Firefox
  • 印刷メニューでPDFを作成する
  • アドオンの導入が不要
  • アドオンでPDFを作成する
  • レイアウトが崩れにくい
Microsoft Edgeのアイコン
Edge
  • 印刷メニューでPDFを作成する
  • 拡張機能の導入が不要
  • 拡張機能でPDFを作成する
  • レイアウトが崩れにくい
Safariのアイコン
Safari
  • 標準機能でPDFを作成する
  • 拡張機能の導入が不要
  • レイアウトが崩れにくい
どのブラウザも印刷メニューで撮影できますが、レイアウトが崩れやすいです。そこで拡張機能(アドオン)を使った方法がオススメです。SafariのアイコンSafariのみ、標準機能が最も使いやすく、高性能です。

より詳細な情報を、関連記事【パソコンでWebページをPDF化する方法! PCのChromeやSafariでサイト全体を保存しよう [Windows/Mac]】で解説しています。

パソコンでWebページをPDF化する方法! PCのChromeやSafariでサイト全体を保存しよう [Windows/Mac]
この記事では、PCでWebページをPDF化する方法を解説します。Chrome/Firefox/Edge/Safariそれぞれで最適な手順を説明しています。

 

〆:ブラウザごと工夫すれば縦長画面も撮影できる!

以上、パソコンで縦長Webページのスクリーンショットを撮影する方法! Chrome画面全体のキャプチャを保存しよう [Windows/Mac] の説明でした。

ブラウザごと手順は様々ですが、ページ全体を撮影する何らかの方法は用意されています。

縦に長いWebサイト全体をスクリーンショットで残したいなら、ぜひお試しあれ。

参考 Googleデベロッパー – Chrome DevTools

参考 Mozillaサポート – Firefox Screenshots

参考 Microsoft – Edge開発者ツール

参考 Appleサポート – MacのSafariで「開発」メニューのデベロッパツールを使用する

参考 Appleサポート – MacのSafariでWebページの一部または全体を保存する

Google Chrome
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

タイトルとURLをコピーしました