ブラウザでWebページをスクリーンショットしてみる

アイキャッチ画像

2022年3月3日 更新
関連記事のリンクを追加

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

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

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

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

関連記事

1 進化したスクリーンショット機能スクリーンショットは、開いているWebページの画面を残してメモ代わりにしたり、トラブル発生時の画面保存、あるいは資料作成のためにアプリの画面などを撮影したりと、普段からお世話になる機会[…]

スクリーンショットの撮り方のアイキャッチ画像
スポンサーリンク

1 Microsoft EdgeのWebキャプチャ

Microsoft Edgeでは「スクリーンショット」ではなく、「webキャプチャ」の言葉を使用していますが、機能は「スクリーンショット」と同意であり、キャプチャする方法は以下の3通りの方法があります。

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

1-1 設定からキャプチャする

  1. Microsoft Edgeを起動し、キャプチャしたいWebページを開きます。
  2. 画面右上の「・・・」横三点リーダーをクリックし「設定」を開きます。

    Webキャプチャ画像

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

    Webキャプチャ画像


  4. 画面上部の「ページ全体をキャプチャ」をクリックするとキャプチャされます。
    もし、一部分をキャプチャしたければ「エリアをキャプチャする」をクリックします。

    Webキャプチャ画像


  5. 「保存」をクリックすると、ダウンロードフォルダに自動的に「jpeg」として保存されます。
    画像内の「・・・」リーダーと「コピー」を順にクリックすると、「クリップボード」に保存され、画像編集ソフトなどで編集できます。
    また、この画面からも手書きなどの簡単な編集もできたりします。

    Webキャプチャ画像

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

  1. Microsoft Edgeを起動します。
  2. キャプチャしたいWebページを開きます。
  3. ショートカットキー「Ctrl」+「Shift」+「s」を同時に押下します。
  4. 画面上部に表示された「ページ全体をキャプチャする」をクリックします。(上述1-1と同じ)
  5. 上述1-1「保存」以降を操作します。

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

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

  1. Microsoft Edgeを起動します。
  2. 画面右上の「・・・」横三点リーダーをクリックし「設定」を開きます。(上述1-1と同じ)
  3. 左ペインの「外観」をクリックし、右ペインの「Webキャプチャボタン」を「オン」にします。

    Webキャプチャ画像


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

    Webキャプチャ画像


  5. 以降は、この「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、方法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ブラウザの機能を利用して行う、スクリーンショットの方法について解説いたしました。

スポンサーリンク
アイキャッチ画像
最新情報をチェックしよう!