iBitzEdge

Chromeで拡張機能を使わずにウェブページ全体のスクリーンショットを撮る方法

Pey

Google Chromeは、数日前にアップデートがありバージョン59.0が利用可能となった。59.0で、これまでになかったウェブページ全体のスクリーンショットが可能となり、拡張機能をインストールする必要なく撮れるようになったようだ。
現在のところ、その方法も拡張機能ほどすばやくできる便利なものではないが、拡張機能をあまりインストールしたくないというユーザーにはありがたいアップデートかもしれない。

ここでは、Google Chromeブラウザv59.0を使用して、閲覧しているウェブページ上のスクロール分を含む全体のスクリーンショットを撮影する方法をかんたんに説明する。

注意：

方法1. PC表示でフルサイズのスクリーンショットを撮影

  1. デベロッパーツールを開く

    以下のいずれかの方法で、Chromeのデベロッパーツール(DevTools)を開く。

    • Chromeメニューを選択し[その他のツール] > [デベロッパーツール]を選択
    • 任意のウェブページ上で右クリックし[検証]を選択
    • Ctrl+Shift+I（Macの場合はCommand＋Option+I）
  2. コマンドメニューを開く

    デベロッパーツールが開いている状態で、Windowsの場合は[Ctrl+Shift+P]、Macの場合は[Cmd+Shift+P]を押してコマンドメニューを表示させる。

  3. フルサイズのスクリーンショットを撮影

    コマンドメニューを開いている状態で、「Capture full size screenshot」(capと入力した時点で候補が表示)と入力してエンターまたは選択する。また「Capture screenshot」を選択した場合は、現在Chromeブラウザで表示されている領域のみ撮影することができる。

    エンター後はすぐにページ全体のスクリーンショットが撮影され自動的にダウンロードさる。ダウンロードした画像はChromeで設定されているダウンロードフォルダーに保存される。

方法2. Device Modeでもう少し簡単に撮影

方法1で説明した場合は、コマンドメニューからコマンドを検索して実行する必要があった。しかし、Device Modeを使用すればもう少しだけシンプルに撮影することができる。

  1. デベロッパーツールを開く

    以下のいずれかの方法で、Chromeのデベロッパーツール(DevTools)を開く。

    • Chromeメニューを選択し[その他のツール] > [デベロッパーツール]を選択
    • 任意のウェブページ上で右クリックし[検証]を選択
    • Ctrl+Shift+I（Macの場合はCommand＋Option+I）
  2. Device Modeに切り替える

    デベロッパーツールの上部のメニューにあるデバイスアイコンをクリック、もしくはWindowsの場合は[Ctrl+Shift+M]、Macの場合は[Cmd+Shift+M]を押してDevice Modeに切り替えて、任意のデバイスのプリセットもしくは、Editから自由に表示させるサイズを編集することができる。

  3. フルサイズのスクリーンショットを撮影

    Device Modeの状態で、右上のメニューをクリックし、「Capture full size screenshot」を選択する。また「Capture screenshot」を選択した場合は、現在Chromeブラウザで表示されている領域のみ撮影することができる。

    選択後はすぐにページ全体のスクリーンショットが撮影され自動的にダウンロードさる。ダウンロードした画像はChromeで設定されているダウンロードフォルダーに保存される。

出典・情報