「Microsoft Edge」と「Google Chrome」のブラウザ上で、ページ全体をスクリーンショットする方法

更新履歴
2023年12月11日：記述内容の修正
2022年12月30日： 操作手順に画像を追加
2022年8月10日 ：Google Chromeのスクリーンショットの記述内容を一部修整
2022年3月3日：関連記事のリンクを追加
　

パソコンを使ってWebページを閲覧していると、気になるページや記事の一部分をメモ代わりなどで利用したいときがあります。

そんなときは、スクリーンショット撮影（画面キャプチャー）して、仕事や趣味などに活用している方も多いかと思います。

スクリーンショットする方法はさまざまですが、本記事では、「Microsoft Edge」と「Google Chrome」のWebブラウザ上で、ページ全体をスクリーンショットする方法について解説いたします。

「スクリーンショット」に関する記事については、以下の記事も合わせてご覧ください。

１　Microsoft EdgeのWebキャプチャ

Microsoft Edgeでは「スクリーンショット」ではなく、「webキャプチャ」という言葉を使用しています。

機能は「スクリーンショット」と同意であり、キャプチャする方法は以下の3通りの方法があります。

最も手軽に利用できる方法は1-3の「キャプチャアイコンからキャプチャする」ですが、事前にアイコン表示するための設定をする必要があります。（後述）

1-1　トップ画面のメニューからキャプチャする

1. Microsoft Edgeを起動し、キャプチャしたいWebページを開きます。
   
   
2. 画面右上の「･･･」横三点リーダーをクリックします。
   
   
   
   
   
3. 表示されたメニューから「Webキャプチャ」をクリックします。
   
   
   
   
   
4. 画面上部の「ページ全体をキャプチャ」をクリックするとキャプチャされます。
   キャプチャしたいエリア全部がグレーアウトします。
   
   もし、一部分をキャプチャしたければ「エリアをキャプチャする」をクリックします。
   
   
   
   
   
5. Web キャプチャされた画面が表示されます。
   
   簡単な編集はこの画面からも行えます。
   
   
   
   
   
6. 画面上部の「保存」ボタンをクリックします。
   
   
   
   
   
7. すると、ダウンロードフォルダに自動的に「jpeg」として保存されます。
   
   
   
   
   
8. 手順⑥で保存された画像内の「･･･」リーダーと「コピー」を順にクリックすると、「クリップボード」に保存され、画像編集ソフトなどで編集できます。

1-2　ショートカットキーでキャプチャする

1. Microsoft Edgeを起動し、キャプチャしたいWebページを開きます。
   
   
2. ショートカットキー「Ctrl」+「Shift」+「ｓ」を同時に押下します。
   
   キャプチャしたいエリア全部がグレーアウトします。
   
   画面上部に表示された「ページ全体をキャプチャする」をクリックします。
   
   
   
   
   
3. 画面上部の「保存」をクリックします。
   
   
   
   
   
4. ダウンロードフォルダに保存されます。
   
   

1-3　キャプチャアイコンからキャプチャする

あらかじめMicrosoft Edgeのツールバーに「Webキャプチャ」アイコンを表示しておきましょう。以降はアイコンをクリックすればキャプチャ画面が開きます。

1. Microsoft Edgeを起動し、画面右上の「･･･」横三点リーダーをクリックし「設定」を開きます。
   
   
   
   
   
2. 左ペインの「外観」をクリックし、右ペインの「Webキャプチャボタン」を「オン」にします。
   
   
   
   
   
   
3. 「設定」画面の右上ツールバーのプロフィールアイコン左に「Webキャプチャ」アイコンが表示できました。
   
   
   
   
   
   
4. 以降は、この「Webキャプチャ」アイコンをクリックすれば、上述1-1、1-2と同様の操作でページ全体をキャプチャできます。

２　Google Chromeのスクリーンショット

Google Chromeの場合、スクリーンショット機能の表示はありませんが、以下2-1の設定をすることでページ全体のスクリーンショットが可能です。

2-2の方法はエリアを指定してスクリーンショットすることは可能ですが、Webページ全体のスクリーンショットはできません。

2-1　デベロッパーツールから行う

方法１

1. Google Chromeを起動します。
2. 画面右上の「︙」縦三リーダー、「その他のツール」「デベロッパーツール」と順にクリックして「デベロッパーツール」を起動します。次の方法でも「デベロッパーツール」を起動できます。
   
   ＊ファンクションキー「F12」を押下します。
   ＊ショートカットキー「Ctrl」+「Shift」+「I」を同時に押下します。
   
   
   
   
   
3. デベロッパーツールが開いたら、この画面のままショートカットキー「Ctrl」+「Shift」+「Ｐ」を同時に押下します。
   
   
   
   
   
4. 画面上部の「Run」>　の右にfullと入力します。
   
   
   
   
   
5. 画面右上に表示された「Screenshot」をクリックします。
   
   
   
   
   
6. ページ全体がキャプチャされ、自動的にダウンロードフォルダに「png」として保存されます。

方法2

1. Google Chromeを起動し、上述2-1の方法で「デベロッパーツール」を起動します。
   
   
2. 画面上部に表示された「デバイスアイコン」（スマホとタブレット両方が表示されたアイコン）をクリックします。
   
   
   
   
   
3. 左ペインに表示された「Dimensions: Responsive▼」をクリックし、「Responsive」を選択します。
   
   
   
   
   
4. 画面サイズ欄の右横「︙」縦三リーダーをクリックし、「Capture full size screenshot」を選択するとWebページ全体をスクリーンショットすることができます。
   
   表示されているページだけをスクリーンショットする場合は、「Capture screenshot」を選択します。
   
   
   
   
   
5. Webページ全体が撮影されて、ダウンロードフォルダ内に自動的に「png」として保存されています。

2-2　スクリーンショット機能を有効化する

Google Chromeでは、スクリーンショット機能を実装しているものの、初期状態では無効化されています。以下の方法で有効化すると、スクリーンショット機能を利用することができます。

しかし、この方法ではWebページ全体はスクリーンショットすることができず、選択した範囲のスクリーンショットになります。

ただ、アドレスバー右の「共有ハブ」にコマンドが追加されているので、手軽にスクリーンショットができると思います。

1. アドレスバーに「chrome://flags」と入力して「Enter」を押下します。
   
   
   
   
   
2. 「Experiments」という試験段階の機能が表示されます。
   
   
   
   
   
3. 画面上部の検索欄に「Desktop Screenshots」と入力して「Enter」を押下すると、以下の画面が表示されます。ここで右下の「Default」を「Enabled」に変更します。
   
   
   
   
   
4. 画面右下に「 relaunch」（ブラウザの再起動）ボタンが表示されるので、それをクリックします。
   
   
   
   
   
5. アドレスバー右の「共有」ハブに「スクリーンショット」のコマンドが追加されました。
   
   
   
   
   
6. 以降は「共有ハブ」からスクリーンショットを起動できます。

windows 標準機能や拡張機能などを使ってスクリーンショットはできますが、本記事ではWebブラウザの機能を利用して行う、スクリーンショットの方法について解説いたしました。