ページ全体のスクリーンショットを撮る方法をブラウザ別でご紹介

「画面外の部分も含めたページ全体のスクリーンショットを撮りたい。」

実は、お使いのブラウザの機能だけで簡単に撮影できます。拡張機能等は不要です。ページのヘッダーからフッターまで、通常はスクロールしないと見えない箇所まで、1枚のスクリーンショットに収められます。

スマホ（iPhone）で撮影する方法も併せてご紹介いたします。

Chromeで撮影する方法

Google Chromeの場合は、デベロッパーツールを使って簡単に撮影できます。

Chromeのデベロッパーツールを開くショートカット
Windows：Ctrl+Shift+I
Mac：⌘＋option+I

次のような画面が開いたら、赤枠箇所の「▼」をクリックします。

メニューが展開するので、「フルサイズのスクリーンショットをキャプチャ」をクリックすればOKです。

これで次のようなページ全体のスクリーンショットが撮影され、PNG形式のファイルで自動的にダウンロードされます。

ページの一部が読み込み中状態で撮影される場合があるので、一度ページ最下部までスクロールした後に撮影するといいです。

Safariで撮影する方法

MacやiPhoneユーザーにお馴染みのSafariでも簡単に撮影できます。

Mac

Mac Safariで撮影する場合も、開発者（デベロッパー）ツールを開く必要があります。

まず最初にSafariの設定を開いて、詳細タブを開きます。

詳細タブ内の「Webデベロッパ用の機能を表示」にチェックが入っているか確認してください。

ここにチェックが入っていないと開発者ツールを開けません。

チェックを入れたら次のショートカットを使います。

Safariの開発者ツールを開くショートカット
⌘＋option+I

開発者ツールを開いた後は、要素の中から「body」タグを選択して、右クリックを押すとメニューが表示されます。

そこから「スクリーンショットを取り込む」をクリックしてページ全体を撮影可能です。

iPhone

iPhoneのSafariでもページ全体のスクショを簡単に撮影できます。

まず、お使いのiPhoneで通常通りスクリーンショットを撮影します。「音量を上げるボタン」と「右側の電源ボタン」を同時に押せばスクリーンショットが撮影されます。

その後に表示される次の画面で、「フルページ」という項目を選択します。

これで「完了」するとページ全体のスクショを保存できます。

こちらはiPhoneの機能なので、Safariに限らず、どのブラウザでも応用可能です。

Microsoft Edgeで撮影する方法

Microsoft Edgeは、ショートカットのみで簡単に撮影可能です。

Microsoft Edgeでスクリーンショットを撮るショートカット
Windows：Ctrl+Shift+S
Mac：⌘＋Shift+S

Microsoft Edgeで開いたページ上で、上記ショートカットを押すと、次のような画面になります。

「エリアをキャプチャする」か「ページ全体をキャプチャ」というボタンから撮影範囲を選択可能です。

保存する前にプレビューして手書きのメモを入れることも可能です。便利ですね。

Firefoxで撮影する方法

Firefoxもショートカットのみでページ全体を撮影できます。

Firefoxでスクリーンショットを撮るショートカット
Windows：Ctrl+Shift+S
Mac：⌘＋Shift+S

下記画面が表示されますので、右上の「ページ全体を保存」をクリックします。

撮影するとプレビュー画面が表示されます。

ここで「ダウンロード」を押すことで、ページ全体のキャプチャ画像を保存できます。

ブラウザのスクリーンショット撮影機能を活用しよう

主要ブラウザ（Chrome、Safari、Edge、Firefox）で、ページ全体のスクリーンショットを撮影する方法を解説しました。Google Chromeはトップシェアを誇るブラウザですが、ショートカットのみでページ全体のスクリーンショットを撮る事はできません。

EdgeやFirefoxでは、ショートカットのみで撮影できる上に、プレビューや簡単な編集まで可能です。普段使いのブラウザを変更するかは別の話ですが、目的に応じてブラウザを使い分けるのはありですね。

スクリーンショットに関連する記事