Webページ全体のスクリーンショットをGoogleChromeで撮る方法

拡張機能やアプリをインストールする必要もなし!
縦に長いWebページ全体のスクリーンショットをGoogleChromeで撮る方法です。

この記事はこんな人にオススメ!

  • WEBページ全体のスクリーンショットがほしい
  • 拡張機能やアプリなど余計なインストールしたくない
  • ブラウザに「GoogleChrome」を使っている

スクリーンショットのとり方

当サイト同様に、パソコン操作などの説明で、今見ている画面のスクリーンショットがほしい場合があります。

部分的には、Windowsに標準搭載された「SnippingTool]で簡単に切り取ることが出来ます。

また、画面全体のスクリーンショットがほしい時は、キーボードの「PrintScreen」キーをが簡単です。

(キーボードによって表示の違いはありますが、だいたい右上にあります)

ただ、これも画面で見える範囲までです

場合によっては、画面全体のスクロールした部分までのスクリーンショットがほしい時があります。

ブラウザに「GoogleChrome」を使っているのなら、それも簡単に行えます。それも拡張機能など余計なインストールを行わなくてもできるのです。

GoogleChromeのデベロッパーツール

GoogleChrome の右上にある三点リーダーをクリックして『その他のツール(L)』⇒『デベロッパーツール(D)』と選択します。

デベロッパーツールは表示位置を見やすい位置に変更出来ます。

デベロッパーツールの三点リーダーをクリックして「DockSide」で表示位置を選択できます。

ここで「Ctrl」+「Shift」+「P]を押します。

操作メニューがドロップダウンされるので、その中から

「Capture full size screenshot」

を選択します。

すぐに「名前を付けて保存」のダイアログが出るので、適当な名前をつけて画像として保存します。

保存した画像を確認してみると・・・

実に簡単だと思いませんか?

スマホ画面のスクリーンショット

スマホ画面のスクリーンショットがほしい場合は右上のアイコンをクリックします。

プレビュー画面もスマホ表示(レスポンシブ)の幅に変更されます。しかし、幅はスマホ表示幅でも表示はパソコン表示と同じなので、ここでページの再読込をします。
ファンクションキーの「F5」を押すか、左上の再読込アイコンをクリックします。

スマホ画面が確認出来たら、先程と同じ様に「Ctrl」+「Shift」+「P]を押して「Capture full size screenshot」を選択して保存します。

保存した画像を確認すると・・

かなり下に長いですが、スマホ表示の全体のスクリーンショットが取れます。

最後に

以前に比べると、スクリーンショットの取得が断然簡単になったと思います。
資料作成やホームページの資料に活用できたら良いかと思います。