「Microsoft Edge」と「Google Chrome」のブラウザ上で、ページ全体をスクリーンショットする方法

更新履歴
2023年12月11日:記述内容の修正
2022年12月30日: 操作手順に画像を追加
2022年8月10日 :Google Chromeのスクリーンショットの記述内容を一部修整
2022年3月3日:関連記事のリンクを追加
 

パソコンを使ってWebページを閲覧していると、気になるページや記事の一部分をメモ代わりなどで利用したいときがあります。

そんなときは、スクリーンショット撮影(画面キャプチャー)して、仕事や趣味などに活用している方も多いかと思います。

スクリーンショットする方法はさまざまですが、本記事では、「Microsoft Edge」と「Google Chrome」のWebブラウザ上で、ページ全体をスクリーンショットする方法について解説いたします。

「スクリーンショット」に関する記事については、以下の記事も合わせてご覧ください。

関連記事

更新履歴2023年12月11日:記述内容の全面刷新2022年7月3日 見出しと書式変更 1 スクリーンショット機能とは? Windows 10によるスクリーンショット機能は、パソコン画面上の情報を画像としてキャプチャし、保存す[…]

スポンサーリンク

1 Microsoft EdgeのWebキャプチャ

Microsoft Edgeでは「スクリーンショット」ではなく、「webキャプチャ」という言葉を使用しています。

機能は「スクリーンショット」と同意であり、キャプチャする方法は以下の3通りの方法があります。

最も手軽に利用できる方法は1-3の「キャプチャアイコンからキャプチャする」ですが、事前にアイコン表示するための設定をする必要があります。(後述)

1-1 トップ画面のメニューからキャプチャする

  1. Microsoft Edgeを起動し、キャプチャしたいWebページを開きます。

  2. 画面右上の「・・・」横三点リーダーをクリックします。




  3. 表示されたメニューから「Webキャプチャ」をクリックします。




  4. 画面上部の「ページ全体をキャプチャ」をクリックするとキャプチャされます。
    キャプチャしたいエリア全部がグレーアウトします。

    もし、一部分をキャプチャしたければ「エリアをキャプチャする」をクリックします。




  5. Web キャプチャされた画面が表示されます。

    簡単な編集はこの画面からも行えます。




  6. 画面上部の「保存」ボタンをクリックします。




  7. すると、ダウンロードフォルダに自動的に「jpeg」として保存されます。




  8. 手順⑥で保存された画像内の「・・・」リーダーと「コピー」を順にクリックすると、「クリップボード」に保存され、画像編集ソフトなどで編集できます。

1-2 ショートカットキーでキャプチャする

  1. Microsoft Edgeを起動し、キャプチャしたいWebページを開きます。

  2. ショートカットキー「Ctrl」+「Shift」+「s」を同時に押下します。

    キャプチャしたいエリア全部がグレーアウトします。

    画面上部に表示された「ページ全体をキャプチャする」をクリックします。




  3. 画面上部の「保存」をクリックします。




  4. ダウンロードフォルダに保存されます。

1-3 キャプチャアイコンからキャプチャする

あらかじめMicrosoft Edgeのツールバーに「Webキャプチャ」アイコンを表示しておきましょう。以降はアイコンをクリックすればキャプチャ画面が開きます。

  1. Microsoft Edgeを起動し、画面右上の「・・・」横三点リーダーをクリックし「設定」を開きます。




  2. 左ペインの「外観」をクリックし、右ペインの「Webキャプチャボタン」を「オン」にします。





  3. 「設定」画面の右上ツールバーのプロフィールアイコン左に「Webキャプチャ」アイコンが表示できました。





  4. 以降は、この「Webキャプチャ」アイコンをクリックすれば、上述1-1、1-2と同様の操作でページ全体をキャプチャできます。
スポンサーリンク

2 Google Chromeのスクリーンショット

Google Chromeの場合、スクリーンショット機能の表示はありませんが、以下2-1の設定をすることでページ全体のスクリーンショットが可能です。

2-2の方法はエリアを指定してスクリーンショットすることは可能ですが、Webページ全体のスクリーンショットはできません。

2-1 デベロッパーツールから行う

方法1

  1. Google Chromeを起動します。
  2. 画面右上の「︙」縦三リーダー、「その他のツール」「デベロッパーツール」と順にクリックして「デベロッパーツール」を起動します。次の方法でも「デベロッパーツール」を起動できます。

    *ファンクションキー「F12」を押下します。
    *ショートカットキー「Ctrl」+「Shift」+「I」を同時に押下します。




  3. デベロッパーツールが開いたら、この画面のままショートカットキー「Ctrl」+「Shift」+「P」を同時に押下します。




  4. 画面上部の「Run」> の右にfullと入力します。




  5. 画面右上に表示された「Screenshot」をクリックします。




  6. ページ全体がキャプチャされ、自動的にダウンロードフォルダに「png」として保存されます。

方法2

  1. Google Chromeを起動し、上述2-1の方法で「デベロッパーツール」を起動します。

  2. 画面上部に表示された「デバイスアイコン」(スマホとタブレット両方が表示されたアイコン)をクリックします。




  3. 左ペインに表示された「Dimensions: Responsive▼」をクリックし、「Responsive」を選択します。




  4. 画面サイズ欄の右横「︙」縦三リーダーをクリックし、「Capture full size screenshot」を選択するとWebページ全体をスクリーンショットすることができます。

    表示されているページだけをスクリーンショットする場合は、「Capture screenshot」を選択します。




  5. Webページ全体が撮影されて、ダウンロードフォルダ内に自動的に「png」として保存されています。

2-2 スクリーンショット機能を有効化する

Google Chromeでは、スクリーンショット機能を実装しているものの、初期状態では無効化されています。以下の方法で有効化すると、スクリーンショット機能を利用することができます。

しかし、この方法ではWebページ全体はスクリーンショットすることができず、選択した範囲のスクリーンショットになります。

ただ、アドレスバー右の「共有ハブ」にコマンドが追加されているので、手軽にスクリーンショットができると思います。

  1. アドレスバーに「chrome://flags」と入力して「Enter」を押下します。




  2. 「Experiments」という試験段階の機能が表示されます。




  3. 画面上部の検索欄に「Desktop Screenshots」と入力して「Enter」を押下すると、以下の画面が表示されます。ここで右下の「Default」を「Enabled」に変更します。




  4. 画面右下に「 relaunch」(ブラウザの再起動)ボタンが表示されるので、それをクリックします。




  5. アドレスバー右の「共有」ハブに「スクリーンショット」のコマンドが追加されました。




  6. 以降は「共有ハブ」からスクリーンショットを起動できます。

windows 標準機能や拡張機能などを使ってスクリーンショットはできますが、本記事ではWebブラウザの機能を利用して行う、スクリーンショットの方法について解説いたしました。

広告
最新情報をチェックしよう!