ソフト

【Google Chrome】ページ全体のスクリーンショットを取得する【Windows】

2022-07-17

本サイトの記事内にアフェリエイト広告が含まれている場合があります。
Amazonのアソシエイトとして、当メディアは適格販売により収入を得ています。

【Google Chrome】ページ全体のスクリーンショットを取得する【Windows】

matchan

しがない会社員。 自分への備忘録や記録、少しでもプラスになる情報を発信できたらと思います。

スポンサーリンク

こんにちは。matchanです。

Google Chromeで、表示しているページの全体のスクリーンショットを取得する方法を備忘録がてらご紹介。

Windowsでのやり方になります。

ページ全体のスクリーンショットを取得する

一般的にスクリーンショットを取得するのは「画面に表示されている部分」のみです。

しかし、たまにページ全体のスクリーンショットが欲しい時があります。一画面のスクリーンショット取得→下にスクロール→スクリーンショット取得・・・と繰り返せばいいのですが、それは面倒です。

今回は拡張機能を使わずスクリーンショットを取得する方法をご紹介します。

ページ全体のスクリーンショットを取得する方法:デベロッパーモードを利用

Google Chromeのデベロッパーモードを利用する方法です。

  • Google Chromeで「Ctrl」「Shift」「I(アルファベットのアイ)」のキーを同時に押してデベロッパーモードを開く。
  • 「デバイスのツールバーを切り替え」ボタンをクリック。
  • 表示されたメニューから表示用サイズで「レスポンシブ」を選択する。
  • 「・」が縦に3つ並んだボタンをクリックし、「フルサイズのスクリーンショットをキャプチャ」をクリック。
  • 少し待つと、画像ファイルの保存先を訊いてくるので、任意の場所に保存する。

実際にスクリーンショットを取得してみたのがこんな感じ。ちゃんとページ全体が写っていることが分かります。

全体的にはこんな感じ(縮小加工してます)
スクリーンショットの一部表示

拡大率を変更すればスクリーンショットのサイズ調節も可能

先ほど取得したスクリーンショットを見ると、左右の余白がなく画面いっぱいに表示されていました。これは拡大率の変更で調節できます

拡大率を75%にしてみます

拡大率を75%にしてスクリーンショットを取得したのが以下になります。左右の余白が多くなりました。お好みのサイズになるよう調節しましょう。

拡大率75%だとこんな感じ。左右の余白が多くなりました

スマホのサイズでもスクリーンショットを取得できる

上記の手順2でスマホから閲覧時の画面を再現してスクリーンショットを取得することもできるようです。

  • Google Chromeで「Ctrl」「Shift」「I(アルファベットのアイ)」のキーを同時に押してデベロッパーモードを開く。
  • 下図のアイコンをクリックする。
  • 画面表示を再現させたいスマホの機種を選択する。ここでは「iPhone 12 Pro」を選択しています。選択欄に無い場合は一番下の「編集」から探すこともできます。
  • 「F5」キーを押し、一旦ページを再読み込みする。
  • 「・」が縦に3つ並んだボタンをクリックし、「フルサイズのスクリーンショットをキャプチャ」をクリック。
  • 少し待つと、画像ファイルの保存先を訊いてくるので、任意の場所に保存する。

上記3~4で表示させたいスマホを選択→一旦ページを更新することが必要で、それ以外の方法は全く同じです。スマホサイズから再度PCサイズへ戻す場合はデベロッパーモードを閉じてリロードします。

実際にスクリーンショットを取得したらこんな感じ。指定したスマホ画面でスクリーンショットを取得できました。

スポンサーリンク

-ソフト
-