Microsoft Edgeでスクリーンショットを撮る方法|開発者ツールを使った4つの撮影テクニック

ポイント

• ブラウザ右上の三点リーダー「設定など」メニューから「その他のツール」>「開発者ツール」を開きます。DevTools右上の三点アイコン>「コマンドの実行」を選択し、「screenshot」と入力します。
• 選択できるコマンドは4種類です。「範囲のスクリーンショット」「フルサイズのスクリーンショット」「ノードのスクリーンショット」「スクリーンショット」から目的に合ったものを選びましょう。

この記事では、Microsoft Edgeの開発者ツール(DevTools)に組み込まれた隠しユーティリティを使って、スクリーンショットを撮影する方法を詳しく解説します。

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

ブラウザ単体でWebページの全画面キャプチャができる機能は非常に便利です。多くの画面キャプチャソフトは、スクロールが必要な縦長のページをきれいに撮影できないことがありますが、Edgeの開発者ツールを使えば、ページ全体の一括キャプチャを含む4種類のスクリーンショットが簡単に取得できます。

撮影した画像ファイルは、PCの既定のダウンロードフォルダに自動保存されるか、保存先を指定するダイアログが表示されます。

1. WindowsではF12キーまたはCtrl + Shift + Iキーを押して、Microsoft Edgeの開発者ツールを開きます。macOSユーザーはCommand + Option + Iのショートカットキーを使用してください。Edgeのツールバーから開くことも可能です。その場合は、三点リーダーの「設定など」>「その他のツール」>「開発者ツール」の順に選択します。

2. 開発者ツールパネルの右上にある三点(…)アイコンを選択し、「DevTools のカスタマイズと制御」メニューを開きます。

3. 縦型メニューから「コマンドの実行」を選択します(ショートカットキーCtrl + Shift + Pでも開けます)。

4. コマンドパネルに「screenshot」と入力すると、使用可能な4つのコマンドが表示されます。これらのコマンドを使い分けることで、キャプチャしたいWebページの範囲を柔軟に選択できます。

5. 特定の範囲だけを撮影したい場合は、コマンド一覧から「範囲のスクリーンショットをキャプチャ(Capture area screenshot)」を選択します。十字カーソルで左クリックしながらドラッグし、撮影したい範囲の輪郭を囲んでください。選択した部分は暗いグレーでハイライト表示され、視覚的に確認できます。

6. ページ全体を撮影したい場合は、「フルサイズのスクリーンショットをキャプチャ(Capture full size screenshot)」を選択します。このコマンドは、画面に表示されていないスクロール領域も含めたWebページ全体を1枚の画像としてキャプチャします。

7. ページの一部の要素だけを撮影したい場合は、「ノードのスクリーンショットをキャプチャ(Capture node screenshot)」を選択します。開発者ツールの「要素(Elements)」タブで選択したHTMLノードをキャプチャでき、選択したノードを右クリックして直接実行することも可能です。たとえば「header class」を選択すれば、Webページのヘッダー部分だけをきれいに切り取れます。

8. 現在表示されている画面だけを撮影したい場合は、「スクリーンショットをキャプチャ(Capture screenshot)」を選択します。このコマンドはブラウザ内で見えている範囲のみを対象とし、スクロールしても見えない領域は含まれません。

ヒント:デバイスエミュレーションとの組み合わせも便利

ChromeやEdgeなどのChromium系ブラウザでは、他のデバイスやその画面解像度をエミュレートする機能も備わっています。この機能とスクリーンショットコマンドを組み合わせれば、特定のデバイス(スマートフォンやタブレットなど)でWebページがどのように表示されるかをそのままキャプチャできます。

開発者ツールのツールバーにある「デバイス エミュレーションの切り替え(Toggle device emulation)」ボタンを選択するか、Ctrl + Shift + Mキーを押してください。

関連記事:あらゆるデバイスでスクリーンショットを撮る方法