Microsoft EdgeでWebページ全体のスクリーンショットを撮る方法


Windows PCを利用されているユーザーは、主にWindows 10からデフォルトで搭載されているEdgeブラウザでWeb観覧されると思います。

プライベートでも仕事でも、観覧しているWebページのスクリーンショットが必要になることがあります。
画面に表示されている部分だけでしたら、今までどおりPCの機能などを使って撮ることができましたが、ページ全体となると拡張機能などが必要になってきたり、意外と面倒ではありました。
Google ChromeやFirefoxなど、別のブラウザを利用すれば問題ないですが。。。

旧Edgeブラウザでは面倒な作業が必要となりましたが、Chromiumベースの新しいMicrosoft Edgeでは、ページ全体のスクリーンショットも手軽に撮ることができるようになりました。

ここでは、Chromium版 Microsoft EdgeでWebページ全体のスクリーンショットを撮る方法をご紹介します。
新ブラウザからWindowsだけでなく、macOS版のEdgeブラウザも提供されまして、どちらも同じ操作となります。


スクリーンショットの撮り方


ページ全体のスクリーンショットを撮るには、ブラウザに搭載されているデベロッパーツールを利用します。
デベロッパーツールにその機能が用意されています。

ブラウザの画面右上のオプションアイコンから「その他のツール」と進み「開発者ツール」を選択します。
ショートカットキーは、Windowsの場合は「Ctrl + Shift + I」。
他、ファンクションキーの「F12」です。
macOSの場合は、「Command + Option + I」で手早くデベロッパーツールを表示できます。

Microsoft Edgeでのデベロッパーツール の表示



デベロッパーツールを表示させた後に、画面左下のデバイス切り替えアイコンを選択します。
画面を切り替えますと、画面上中央にはResponsiveの設定と表示に関するサイズの設定があり、PCのサイズやスマートフォンのサイズで調整が可能です。

画面右上のオプションアイコンから「Capture full size screenshot」を選択して、設定されている表示のページ全体のスクリーンショットが撮れます。

ページ全体のスクリーンショット



スクリーンショットを撮る表示サイズも、画面上中央の設定を「Responsive」とすることで自由に調整できますが、iOSやiPadOS、Androidなどのスマートフォンや、デスクトップPCの選択も可能です。

デフォルトでは設定機種が制限されていますが、画面右下のオプションアイコンから、いろんな端末を追加することができます。

デベロッパーツールの設定端末の設定



画面右下のオプションアイコンから「Settings」を選択します。

表示する端末追加の設定



Settingsのメニューから「Devices」を選択して、Emulated Devicesの項目から必要な端末にチェックを入れましょう。
iPhoneやGalaxyの古い機種やBlackBerryなど、多くの設定が用意されています。

表示する端末を設定から追加する



旧ブラウザではできなかったWebページ全体のスクリーンショット、いろんな端末での表示ができるようになりました。

Chromiumベースの新しいMicrosoft Edge、一般の方にもWeb開発者の方にも、とても利用しやすいブラウザへと進化しました。

Edgeブラウザでも、手軽にWebページ全体のスクリーンショットが撮れるようになりましたので、ぜひ利用みてください。