Webページ全体のスクリーンショットが簡単にできるツールを比較!

画面に表示されてる部分だけじゃなくて、その下にスクロールした部分、つまりページの全体像をスクショしたい、ってことありません?

きじとら
普段はScreenpresso(無料ソフト)を使用しているんですが、きじとらレシピをUPする時はヘッダーからフッターまでの全体像をキャプチャする必要がでてきます。

Screenpressoでもウェブページ全体のフルスクリーンショットは可能なんですが、作業がちょっと面倒なのと、不便な点があるんですよね。

そこで今回は、【chromeのディベロッパーツール】と【chromeの拡張機能「Full Page Screen Capture」】、どっちが簡単にフルスクリーンショットを撮ることができるのか、使い比べてみました!

ブルー
chrome使ってない人はごめんな

chromeのディベロッパーツールでフルスクリーンショットをとる

ブログのカスタマイズやスマホ表示の確認をするのに便利な、chromeのディベロッパーツール

 

きじとら

ディベロッパーツールのショートカットキーは、

WindowsならF12
Macなら+option+i

です。

 

開くと以下のような画面がでてきます。

この画面で詳細機能を呼び出します。

きじとら
Windowsなら、Ctrl + Shift + P
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ウェブストアより、「 Full Page Screen Capture 」と検索して拡張機能を追加します。

追加すると、カメラのアイコンが表示されます。

フルスクリーンショットを取りたい画面を表示して、カメラマークをクリックするだけで…

簡単にキャプチャされました!

画面右上のダウンロードアイコンをクリックして保存。(歯車の設定画面でJPEGへの変更も可能)

こちらはしっかりフッターまでが保存されていました。

はち
2クリックだけでスクショできるのはすごく簡単だな!

フルスクリーンショットを簡単にとれたのは…?

というわけで今回、chromeのディベロッパーツールと拡張機能を使って、ページ全体のスクリーンショットを取り比べてみましたが、

拡張機能「Full Page Screen Capture」を使った方が、断然簡単で無駄も少なかったです。

拡張機能とか増やしたくない人はディベロッパーツールを選択すればいいかと思います。

以上、webページ全体のスクリーンショットを簡単に取るツール比較でした。

参考になれば幸いです。

きじとら
Screenpressoも、必要な部分だけキャプチャがとれるという使い方ができるのはすごく便利なんですけどね。
このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事