連載
» 2019年07月24日 05時00分 公開

Google Chrome完全ガイド:【拡張機能不要】Chromeでスクロール必須の長いページ全体を1回でキャプチャする

Webブラウザで開いているWebページのスクリーンショットを撮るとき、スクロールするまで隠れている領域も含めてページ全体を保存するには? Google Chromeの標準機能だけでキャプチャーする方法を紹介します。

[島田広道,デジタルアドバンテージ]

この記事は会員限定です。会員登録(無料)すると全てご覧いただけます。

「Google Chrome完全ガイド」のインデックス

連載目次

いちいちスクロールしないでWebページ全体をキャプチャーしたい

 Webページをキャプチャーしてスクリーンショットを保存する際、ページ全体を撮ろうとして苦労したことはありませんか?

長大なWebページの上から下まで丸ごとキャプチャーしたい 長大なWebページの上から下まで丸ごとキャプチャーしたい

 たいていWebページの長さに比べるとディスプレイの高さが足りないため、そこに表示されるWebブラウザではページ全体を見るのにスクロールを繰り返す必要があります。しかしOS標準のキャプチャー機能では、撮る瞬間に表示されている領域しかキャプチャーできず、スクロールするまで隠れている(表示されていない)領域は撮れません。

 かといって、手動でスクロールしながらキャプチャーを繰り返し、後で全スクリーンショットをつなぎ合わせる、なんて作業は非常に面倒です。

 そこで本稿ではWindows OS版およびmacOS版Google Chrome(以下、Chromeと略)を対象として、Webページ全体をキャプチャーする方法を紹介します。拡張機能は使わず、Chrome標準装備の「デベロッパーツール」のみ用います(デベロッパーツールは開発者に限らず、利用者でも使用できます)。またPC向けとスマホ(スマートフォン)向けのレイアウトをキャプチャーする手順が若干異なるので、それぞれ説明します。

 なお、Android版やiOS(iPhone)版のChromeでは、標準機能だけでWebページ全体をキャプチャーする方法はないようです。

 以下ではWindows OS版Chromeの画面で説明していますが、基本的にmacOSでも同様です(ショートカットキーは両方とも記しています)。

PC向けのWebページ全体をキャプチャーする

 PC(デスクトップ)向けレイアウトのWebページをキャプチャーするには、デベロッパーツールのコマンド入力ダイアログで「Capture full size screenshot」を実行します。

 それにはまず、キャプチャーしたいWebページを開いた状態で以下のショートカットキーを押してデベロッパーツールを開きます(以下の画面のようにメニューアイコンから起動しても構いません)。

  • Windows OS: [F12]キーまたは[Ctrl]+[Shift]+[I]キー
  • macOS: [command]+[option]+[I]キー

 ここでデベロッパーツールをブラウザウィンドウとは別のウィンドウに分離しておきます。

PC向けのWebページ全体をキャプチャーする(1/6) PC向けのWebページ全体をキャプチャーする(1/6)
Windows OSなら[F12]キーまたは[Ctrl]+[Shift]+[I]キー、macOSなら[command]+[option]+[I]キーを押して、デベロッパーツールを開いても構いません。
PC向けのWebページ全体をキャプチャーする(2/6) PC向けのWebページ全体をキャプチャーする(2/6)

 次に、ブラウザペインでWebページを一番上までスクロールした後、デベロッパーツールにフォーカスを移してから、次のショートカットキーを押してコマンド入力ダイアログを開きます。

  • Windows OS: [Ctrl]+[Shift]+[P]キー
  • macOS: [command]+[shift]+[P]キー

 コマンド入力ダイアログには「capture」と入力し、絞り込まれた選択肢の中から「Capture full size screenshot」をクリックすると、ページ全体のスクリーンショットが撮られ、PNGファイルでダウンロードされます。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。