拡張機能を使わずにサイト全体のスクリーンショットを撮影する方法

前回の記事でChromeならFull Page Screen Captureという拡張機能でサイト全体のスクリーンショットを撮影するのがオススメだと書きましたが、どうやら拡張機能をインストールしなくても、撮影できたみたいです。

Webrandum

Webサイト全体をキャプチャするならFull Page Screen Captureがおすすめ

https://webrandum.net/full-page-screen-capture

Webサイト全体をキャプチャをしたい場合、Chrome拡張機能の「Full Page Screen Capture」がオススメです。サイトのキャプチャができる拡張機能は、これ以外にも色々あるのですが、Full Page Screen Captureは他の拡張機能に比べてヘッダー等が追尾してくるサイトでも、比較的キレイにキャプチャしてくれます。Full Page Screen CaptureのインストールChromeウェブストアでFull Page Screen Captureをインストールします。Full Page Screen Captureの使い方使い方は簡単で、Google Chromeに追加されたアイコンをクリックすると、キャプ...

デベロッパーツールから撮影する

Chromeの［表示］→［開発 / 管理］→［デベロッパーツール］からデベロッパーツール（開発者ツール）を開いて、表示されるツール左上のスマホアイコンをクリックします。

今回はPC表示の撮影をしたいので、「Responsive」を選択して横幅を決定します。

後は画面右上のメニューアイコンをクリックして「Capture full size screenshot」をクリックすれば、サイト全体の画像がダウンロードできます。

Firefoxの場合

Firefoxにも同様の機能があります（しかもChromeより優秀です）。

アドレスバーの右の三点アイコンをクリックして［スクリーンショットを撮る］を選択すると、スクリーンショットを撮影するモードに切り替わります。

ドラッグすれば選択範囲を撮影できますし、「ページ全体を保存」をクリックすれば全体の撮影ができます。

撮影後には、テキストを入れたりマーカーを引いたりもできます。
デフォルトでここまでできるのはすごいですね。

拡張機能に頼るところ

Chromeの場合は分かりにくいですし、わざわざ「Responsive」を選択して横幅を決める必要が出てくるので、拡張機能の方が早そうです。

また、デフォルト機能だと保存形式がPNGで固定なので、JPGやPDFで保存したい場合は拡張機能を使ったほうがよさそうです。