更新履歴
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日 見出しと書式変更 １ スクリーンショット機能とは？ Windows 10によるスクリーンショット機能は、パソコン画面上の情報を画像としてキャプチャし、保存す[…]
１ Microsoft EdgeのWebキャプチャ
Microsoft Edgeでは「スクリーンショット」ではなく、「webキャプチャ」という言葉を使用しています。
機能は「スクリーンショット」と同意であり、キャプチャする方法は以下の3通りの方法があります。
最も手軽に利用できる方法は1-3の「キャプチャアイコンからキャプチャする」ですが、事前にアイコン表示するための設定をする必要があります。（後述）
1-1 トップ画面のメニューからキャプチャする
- Microsoft Edgeを起動し、キャプチャしたいWebページを開きます。
- 画面右上の「･･･」横三点リーダーをクリックします。
- 表示されたメニューから「Webキャプチャ」をクリックします。
- 画面上部の「ページ全体をキャプチャ」をクリックするとキャプチャされます。
キャプチャしたいエリア全部がグレーアウトします。
もし、一部分をキャプチャしたければ「エリアをキャプチャする」をクリックします。
- Web キャプチャされた画面が表示されます。
簡単な編集はこの画面からも行えます。
- 画面上部の「保存」ボタンをクリックします。
- すると、ダウンロードフォルダに自動的に「jpeg」として保存されます。
- 手順⑥で保存された画像内の「･･･」リーダーと「コピー」を順にクリックすると、「クリップボード」に保存され、画像編集ソフトなどで編集できます。
1-2 ショートカットキーでキャプチャする
- Microsoft Edgeを起動し、キャプチャしたいWebページを開きます。
- ショートカットキー「Ctrl」+「Shift」+「ｓ」を同時に押下します。
キャプチャしたいエリア全部がグレーアウトします。
画面上部に表示された「ページ全体をキャプチャする」をクリックします。
- 画面上部の「保存」をクリックします。
- ダウンロードフォルダに保存されます。
1-3 キャプチャアイコンからキャプチャする
あらかじめMicrosoft Edgeのツールバーに「Webキャプチャ」アイコンを表示しておきましょう。以降はアイコンをクリックすればキャプチャ画面が開きます。
- Microsoft Edgeを起動し、画面右上の「･･･」横三点リーダーをクリックし「設定」を開きます。
- 左ペインの「外観」をクリックし、右ペインの「Webキャプチャボタン」を「オン」にします。
- 「設定」画面の右上ツールバーのプロフィールアイコン左に「Webキャプチャ」アイコンが表示できました。
- 以降は、この「Webキャプチャ」アイコンをクリックすれば、上述1-1、1-2と同様の操作でページ全体をキャプチャできます。
２ Google Chromeのスクリーンショット
Google Chromeの場合、スクリーンショット機能の表示はありませんが、以下2-1の設定をすることでページ全体のスクリーンショットが可能です。
2-2の方法はエリアを指定してスクリーンショットすることは可能ですが、Webページ全体のスクリーンショットはできません。
2-1 デベロッパーツールから行う
方法１
- Google Chromeを起動します。
- 画面右上の「︙」縦三リーダー、「その他のツール」「デベロッパーツール」と順にクリックして「デベロッパーツール」を起動します。次の方法でも「デベロッパーツール」を起動できます。
＊ファンクションキー「F12」を押下します。
＊ショートカットキー「Ctrl」+「Shift」+「I」を同時に押下します。
- デベロッパーツールが開いたら、この画面のままショートカットキー「Ctrl」+「Shift」+「Ｐ」を同時に押下します。
- 画面上部の「Run」> の右にfullと入力します。
- 画面右上に表示された「Screenshot」をクリックします。
- ページ全体がキャプチャされ、自動的にダウンロードフォルダに「png」として保存されます。
方法2
- Google Chromeを起動し、上述2-1の方法で「デベロッパーツール」を起動します。
- 画面上部に表示された「デバイスアイコン」（スマホとタブレット両方が表示されたアイコン）をクリックします。
- 左ペインに表示された「Dimensions: Responsive▼」をクリックし、「Responsive」を選択します。
- 画面サイズ欄の右横「︙」縦三リーダーをクリックし、「Capture full size screenshot」を選択するとWebページ全体をスクリーンショットすることができます。
表示されているページだけをスクリーンショットする場合は、「Capture screenshot」を選択します。
- Webページ全体が撮影されて、ダウンロードフォルダ内に自動的に「png」として保存されています。
2-2 スクリーンショット機能を有効化する
Google Chromeでは、スクリーンショット機能を実装しているものの、初期状態では無効化されています。以下の方法で有効化すると、スクリーンショット機能を利用することができます。
しかし、この方法ではWebページ全体はスクリーンショットすることができず、選択した範囲のスクリーンショットになります。
ただ、アドレスバー右の「共有ハブ」にコマンドが追加されているので、手軽にスクリーンショットができると思います。
- アドレスバーに「chrome://flags」と入力して「Enter」を押下します。
- 「Experiments」という試験段階の機能が表示されます。
- 画面上部の検索欄に「Desktop Screenshots」と入力して「Enter」を押下すると、以下の画面が表示されます。ここで右下の「Default」を「Enabled」に変更します。
- 画面右下に「 relaunch」（ブラウザの再起動）ボタンが表示されるので、それをクリックします。
- アドレスバー右の「共有」ハブに「スクリーンショット」のコマンドが追加されました。
- 以降は「共有ハブ」からスクリーンショットを起動できます。
windows 標準機能や拡張機能などを使ってスクリーンショットはできますが、本記事ではWebブラウザの機能を利用して行う、スクリーンショットの方法について解説いたしました。
