なべやすブログ

恐竜好きな2児のオヤジの雑記ブログ

【簡単!】WEBページ全体のスクリーンショットを撮る方法!【Windows編】

スポンサーリンク

f:id:nabeyasukun:20210918224454j:plain

おはようございます、なべやすです。

ブログ記事を作成していると、WEBページ全体(縦長)のスクリーンショット(フルスクリーンショット)を使いたくなるときがあります。

Windows標準機能のスクリーンショットでは、PCモニターに表示されている範囲までしか保存できませんので、画面スクロールが必要な縦長のスクリーンショットを撮る(保存)ことができません。

何となくできそうだと思いながらも、やり方がわからず使わない機能の一つではないでしょうか?

当記事では、Chrome拡張機能およびWEBブラウザのChromeとEdgeを使い、WEBページ全体のスクリーンショット(フルスクリーンショット)を撮って保存する方法をご紹介いたします。

※当記事では、Windows10搭載PCを使い説明をしております。

 

この記事に書かれていること
  • WEBページ全体のスクリーンショットを撮る方法
  • 各ツールのメリット・デメリット
  • おすすめのスクリーンショットツール

 

 

Chrome拡張機能を使ってWEBページ全体のスクリーンショットを保存する方法

WEBページ全体のスクリーンショット(フルスクリーンショット)を保存する方法の中では、簡単で無難な方法といえるChrome拡張機能。

WEBブラウザがGoogleのChromeに限定されてしまいますが、簡単にWEBページ全体のスクリーンショットを保存することができるのでおすすめです。

スクリーンショットを保存する流れ

  • STEP1:Chrome拡張機能追加(インストール)
  • STEP2:WEBページ全体をスクリーンショット
  • STEP3:画像ファイルを保存
  • STEP4:スクリーンショット完了

 

STEP
Chrome拡張機能追加(インストール)

ChromeウェブストアからChrome拡張機能(GoFullPage)を追加(インストール)します。

GoFullPage - Full Page Screen Capture - Chrome ウェブストア

 

f:id:nabeyasukun:20210914151647p:plain
 
 
STEP
WEBページ全体をスクリーンショット
❶スクリーンショットを撮りたいサイトへ移動して、ブラウザの右上(赤マル部分)にあるカメラマークをクリックします。
f:id:nabeyasukun:20210914173424p:plain
 
❷ページ全体のスクリーンショットが始まると、右上に(赤マル部分)進行状況が表示されます。
f:id:nabeyasukun:20210914173454p:plain
 
STEP
画像ファイルを保存

スクリーンショットが完了すると以下の画面が表示されますので、右上赤マル部分)をクリックすると保存することができます。

画像ファイルとしてだけでなくPDFファイルにて保存することも可能です。

f:id:nabeyasukun:20210914173523p:plain
 
STEP
スクリーンショット完了
Chrome拡張機能を使ってWEBページ全体のスクリーンショット(フルスクリーンショット)を撮る方法は、これで完了です。

 

Chromeを使ってWEBページ全体のスクリーンショットを保存する方法

GoFullPageのようなChrome拡張機能を使わなくても、ブラウザのデベロッパーツールを使ってWEBページ全体のスクリーンショットを撮ることができます。

以下は、Windows10搭載のPCでGoogleのWEBブラウザChromeを使い、WEBページ全体のスクリーンショットを撮る方法です。

スクリーンショットを保存する流れ

  • STEP1:Chromeのデベロッパーツールを開く
  • STEP2:WEBページ全体をスクリーンショット
  • STEP4:スクリーンショット完了

 

STEP
Chromeのデベロッパーツールを開く

Chromeでスクリーンショットを撮りたいサイトを開き、ブラウザの右上(赤マル部分)にある①【Chromeの設定】をクリックし、②【その他ツール】から③【デベロッパツール】へと移動します。

①【Chromeの設定】→②【その他ツール】→③【デベロッパツール】

f:id:nabeyasukun:20210914173616p:plain
 
STEP
WEBページ全体をスクリーンショット

❶次に下の画像にある赤マル部分をクリックします。

f:id:nabeyasukun:20210914180412p:plain

 

❷次に下の画像にあるをクリックし、開いたウィンドウの中から【Capture full size screenshot】をクリックすれば、WEBページ全体のスクリーンショットが撮れます。(撮った画像はそのまま自動的に保存されます。)

f:id:nabeyasukun:20210914180437p:plain

 

❸ダウンロードされた画像ファイルを開くと、以下のようにフルスクリーンショットが保存されております。

f:id:nabeyasukun:20210914180458p:plain

 

Windows10搭載PCであれば、以下の操作でもスクリーンショットを撮ることが可能です。

①【Ctrl+Shift+I】→②【Ctrl+Shift+P】 →③【「fullと入力」→Enter】

 
STEP
スクリーンショット完了
Chromeを使ってWEBページ全体のスクリーンショット(フルスクリーンショット)を撮る方法は、これで完了です。

 

Edgeを使ってWEBページ全体のスクリーンショットを保存する方法

マイクロソフトのWEBブラウザEdgeでも、Chromeと同じように拡張機能などを使わず、WEBページ全体のスクリーンショットを撮ることができます。

以下は、WindowsPCでマイクロソフトのWEBブラウザEdgeを使い、WEBページ全体のスクリーンショットを撮る方法です。

スクリーンショットを保存する流れ

  • STEP1:EdgeのWEBキャプチャを開く
  • STEP2:WEBページ全体をスクリーンショット
  • STEP4:スクリーンショット完了

 

STEP
EdgeのWEBキャプチャを開く

❶Edgeでスクリーンショットを撮りたいサイトを開き、ブラウザの右上(赤マル部分)にある【···】をクリックします。

f:id:nabeyasukun:20210916002035p:plain

 

次に開いた設定画面の中から【WEBキャプチャ】をクリックします。

f:id:nabeyasukun:20210916002135p:plain

 

【···】→②【WEBキャプチャ】

 
STEP
WEBページ全体をスクリーンショット

❶【WEBキャプチャ】の画面が表示されたら【ページ全体をキャプチャ】をクリックします。

f:id:nabeyasukun:20210916003430p:plain

 

❷WEBキャプチャの画面にある赤マル部分の【保存】をクリックすれば、WEBページ全体のスクリーンショットが保存できます。

f:id:nabeyasukun:20210916003253p:plain

 

❹ダウンロードされた画像ファイルを開くと、以下のようにフルスクリーンショットが保存されております。

f:id:nabeyasukun:20210916003028p:plain

 

Windows搭載PCであれば以下の操作でもスクリーンショットを撮ることが可能です。

①【Ctrl+Shift+S】→②【ページ全体をキャプチャ】 →③【保存】

 
STEP
スクリーンショット完了
Edgeを使ってWEBページ全体のスクリーンショット(フルスクリーンショット)を撮る方法は、これで完了です。

 

それぞれのメリット・デメリット

当記事で紹介しているWEBページ全体のスクリーンショットを撮る方法は、ブラウザの拡張機能を使う方法と使わない方法の2種類になりますが、それぞれメリット・デメリットがあります。

 

メリット デメリット
拡張機能 簡単に撮れる、保存形式を選べる、簡単な加工・編集ができる インストールが必要、英語表記
Chrome インストール不要 やや難しい、保存先を選べない、保存形式を選べない
Edge 簡単に撮れる、インストール不要 保存先を選べない、保存形式を選べない

 

Chrome拡張機能を使う方法

WEBページ全体のスクリーンショットを簡単に撮って保存するには、Chrome拡張機能を使うことが手っ取り早いです。

保存形式も画像(PNGまたはJPG)だけでなくPDFを選択できたりする点は、拡張機能ならではと言えます。

他にも撮ったスクリーンショットの加工や編集ができたりと、追加(インストール)したメリットを感じる機能を使うことができます。

拡張機能を追加(インストール)しなければならないことや英語表記な点がデメリットとも言えますが、その分、簡単にスクリーンショットが撮れて保存できるメリットは大きいです。

 

Chromeで撮る方法

拡張機能と比べて、スクリーンショットを撮るのが少し難しい(めんどう)です。

保存先も選択できず、スクリーンショットが終わると自動的に保存されてしまいます。

ただし、慣れてしまえば問題ない程度のものだと思います。

ブラウザの標準機能を使うので、端末を選ばずスクリーンショットを撮ることができる点は便利です。

他にも余計な機能を追加(インストール)しなくて良い点は大きなメリットと言えます。

 

Edgeで撮る方法

Chromeと同じくブラウザの標準機能を使うので、余計な機能を追加(インストール)しなくて良い点は大きなメリットです。

それだけでなく、同じブラウザであるChromeと比べても使い方が簡単で、手軽に使える点がとてもいいです。

ブラウザの標準機能でありながら、Chrome拡張機能にも引けを取らない使いやすさと言えます。

デメリットを上げるとすれば、Chromeと同じくスクリーンショットの保存先が選べない(自動保存)ことやファイル形式が画像のみとなっていて選べない点です。

ただし、そのことを感じさせないほど、使い勝手の良さがあります。

 

最後に

ブログに限らずビジネスにも応用が効きそうなWEBページ全体のスクリーンショットは、その方法を知っておいてムダになることはありません。

当記事でご紹介させていただいた方法の中では、Edgeの標準機能を使ってスクリーンショットを撮る方法が、インストール不要で使い方も簡単なのでおすすめです。

Firefox(ファイアーフォックス)など、他のブラウザでも同じような機能が使えるようですので、お使いのブラウザを一度確認してみてはいかがでしょうか。

最後まで読んでいただき、ありがとうございました。

 

あわせて読みたい

www.nabeyasu-blog.com