画面に表示されてる部分だけじゃなくて、その下にスクロールした部分、つまりページの全体像をスクショしたい、ってことありません？
Screenpressoでもウェブページ全体のフルスクリーンショットは可能なんですが、作業がちょっと面倒なのと、不便な点があるんですよね。
そこで今回は、【chromeのディベロッパーツール】と【chromeの拡張機能「Full Page Screen Capture」】、どっちが簡単にフルスクリーンショットを撮ることができるのか、使い比べてみました！
Contents
chromeのディベロッパーツールでフルスクリーンショットをとる
ブログのカスタマイズやスマホ表示の確認をするのに便利な、chromeのディベロッパーツール。
ディベロッパーツールのショートカットキーは、
WindowsならF12
Macなら⌘+option+i
です。
開くと以下のような画面がでてきます。
この画面で詳細機能を呼び出します。
Macなら、⌘ + Shift + P
開いたウィンドウの中から「Capture full size screenshot」を探してクリックするか、検索窓に「full」と入力してEnterキーを押すとフルサイズでのスクリーンショットがダウンロードされます。
でもたまにしか使わないと、詳細機能のショートカットとかすぐ忘れちゃうんだよね…
ディベロッパーツールを開くと、キャプチャしたいwebページが左側に表示されますが、画像上のほうにある▼マークのところから、表示サイズの切り替えができるようになっています。
Responsiveを選択して、横並びになっているグレーのマスをそれぞれクリックしていくとすると、Laptopや4Kでの表示を選択できます。
ここがいまいちよくわからなかったんですが、PC表示に一番近いLaptopを選択して、右上に3つ並んでる点（詳細機能）をクリックすると、「Capture full size screenshot」が表示されるのでクリックすると、フルスクリーンショットがダウンロードされました。
ディベロッパーツールのイマイチなとこ
どのみちダウンロードしたフルスクリーンショットは、他のツールを使って加工するんですが、ディベロッパーツールを使ったダウンロード画像は、なぜかフッターの下が表示されてるんですよね。
なんだこの余計な部分は…？
どっちの方法で試してみても結果は同じ。（デモサイトが悪いのかな…）
ちょっと手間がかかっちゃう点がマイナス。
chromeの拡張機能「Full Page Screen Capture」を使用する
もう一つ試してみたのが、chromeの拡張機能を使う方法。
chromeウェブストアfa-external-linkより、「 Full Page Screen Capture 」と検索して拡張機能を追加します。
追加すると、カメラのアイコンが表示されます。
フルスクリーンショットを取りたい画面を表示して、カメラマークをクリックするだけで…
簡単にキャプチャされました！
画面右上のダウンロードアイコンをクリックして保存。（歯車の設定画面でJPEGへの変更も可能）
こちらはしっかりフッターまでが保存されていました。
フルスクリーンショットを簡単にとれたのは…？
というわけで今回、chromeのディベロッパーツールと拡張機能を使って、ページ全体のスクリーンショットを取り比べてみましたが、
拡張機能「Full Page Screen Capture」を使った方が、断然簡単で無駄も少なかったです。
拡張機能とか増やしたくない人はディベロッパーツールを選択すればいいかと思います。
以上、webページ全体のスクリーンショットを簡単に取るツール比較でした。
参考になれば幸いです。
