Googleで今見ているWEBページを、1枚のスクリーンショットにしたいときってありますよね。

こんな時に便利なのが、Googleのデベロッパーツールを使ったスクショ方法です。

簡単に補足!

Googleデベロッパーツールとは、今見ているWEBページがどんな要素(WEB言語)で構成されているのか確認できるツールです。

Google choromeを開いた状態でWindowsでは[F12]、Macでは[command]+[option]+[I]のキーを押せば表示されます。

Googleデベロッパーツール

 

以前はWEBページ全体のスクリーンショットを撮るために「Fire Shot」や「Full Page Screen Capture」などGoogleの拡張機能を入れる必要がありました。

ですが、Googleのバージョンアップにより拡張機能なしでも可能に!(Googleバージョン59.0~、時期で言うと2017年の夏頃から使えるようになっているはずです)

ブラウザの動作が重くならずに済みますね。

 

では、早速そのやり方を解説していきます!

 

 

Googleのデベロッパーツールを使ってページ全体のスクリーンショットを撮る方法

まずは、全体のスクリーンショットを撮りたいページをGoogleで表示させましょう。その状態で、デベロッパーツールを起動させます。

Windowsでは[F12]、Macでは[command]+[option]+[I]のキーを押します。

Googleデベロッパーツール

 

 

次に、どのデバイスで表示されたときのスクリーンショットを撮るのか?(iPhone表示の時?それともiPad?パソコン?など)項目を1つ選択します。

項目がないときは「Edit...」をクリックすれば追加できます。

Googleデベロッパーツール デバイス追加

 

PCの項目を追加したいときは、

  • Laptop with HiDPI screen(Macに使われている1440×900サイズ)
  • Laptop with MDPI screen(Mac以外の1280×800サイズ)

の2つにチェックを入れておけばいいでしょう。↓↓

Googleデベロッパーツール デバイス追加

 

 

デバイスが決まったら、右上の3つ点が並んだマークをクリックします。

表示された項目の中から、「Capture full size screenshot」をクリック。

Google 全体 スクリーンショット

 

 

2~3秒待つと、png形式の画像ファイルがダウンロードされます。

Google 全体スクリーンショット

 

 

ファイルを開くと、ページ全体のスクリーンショットが撮れているのが確認できます。

ページ全体のスクリーンショット

 

 

jpegよりにじみに少ないpngなので、かなり拡大しても色と色の境目がハッキリしていて見やすいです。

スクショ

 

 

まとめ

拡張機能いらずでWEBページ全体のスクリーンショットを撮る方法を解説しました。

Googleのデベロッパーツールの使い方を覚えれば、簡単ですね。

 

「あぁ~、このページ全体の1枚のスクショが欲しい!」というときには、サクサクっと操作してダウンロードしてみてください。