拡張機能なしでChromeでページ全体をキャプチャする方法

Webページを閲覧しているとスクロールのあるページ全体をキャプチャしたい時ってありませんか?

資料作りの参考にしたり、他の人に画面全体を見てもらいたかったりした時に、ページをキャプチャしてスクロール。ページをキャプチャしてスクロール。スクロールが最後のところまでいったら画像をつなげてスクロールのあるページ全体のキャプチャ画像をつくる。これだとかなり面倒くさいですよね。

そんな時はChromeの機能を使えば簡単にスクロールのあるページ全体をキャプチャできるんです!しかも拡張機能も不要なんです。

それでは早速キャプチャする方法をみていきましょう。

PCサイトのキャプチャ方法

デベロッパーツールを開く

まずChromeの画面右上の点が縦に3つ並んだアイコンをクリックします。
そして「その他のツール」=>「デベロッパーツール」をクリックして下さい。

もしくは

  • WinはF12
  • MacはCommand + Option + i

でも開くことができます。

またはChrome上で右クリックして


「検証」をクリックすることでもデベロッパーツールを開くことができます。

capture方法

デベロッパーツールを開いたら

  • WinはCtrl + Shift + p
  • MacはCommand + Shift + p

を押して詳細機能を開いて下さい。詳細機能を開いたら「capture」と入力して下さい。

そうするといくつかコマンドの候補がでてきます。その中から「Capture full size screen shot」を選択して下さい。

そうすると、ページ全体のキャプチャが開始されます。2, 3秒するとダウンロードされるのでダウンロードフォルダの中の画像を見てみてください。

このようにスクロールのあるWebページ全体のキャプチャが拡張機能なしで取得することができました。

モバイルサイトのキャプチャ方法

先ほどはPCのWebページ全体のキャプチャ方法を紹介しましたが、モバイルサイトの見た目をキャプチャしたいときもありますよね。Chormeなら簡単にモバイルサイトの表示に切り替えることができるので紹介します。

先程のデベロッパーツールの左上の左から2個目のアイコンをクリックして下さい。

これをクリックすることでモバイルサイトの表示に切り替わります。

また画面の上の方を見てみると「Responsive」という表示が出ていると思います。これをクリックするといろいろなモバイル端末の名前が出てきます。この中のモバイル端末の名前をクリックすると、その端末の画面サイズに変更することができるのです。iPhoneXでの表示やiPadでの表示などを簡単に確認することができるのです。

端末を選択したあとは先程と同じ手順で「Capture full size screenshot」をすることでモバイルサイトのスクロールのあるWebページ全体をキャプチャすることができます。

まとめ

今回は拡張機能機能なしでChomeを使ってスクロールのあるWebページ全体をキャプチャする方法を紹介しました。PCサイトだけでなくモバイルサイトの見た目もキャプチャすることができるので是非試してみて下さい!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です