【Chrome】Webページ全体のスクリーンショットを撮る方法！

ChromeでWebページ全体のスクリーンショットを撮る方法をご紹介します。
拡張機能を使わない方法なので、拡張機能を追加することに抵抗のある方もご安心ください。

WebマーケティングやWebデザイナー関連の仕事をされている方は、Webページ全体のスクリーンショットを撮りたいときが多々あると思います。
そんな方のお力になれたら幸いです！

（拡張機能なし）Chromeでスクリーンショットを撮る方法

拡張機能を使わずにWebページ全体のスクリーンショットを撮る方法をご紹介します。

デスクトップ表示とスマホ表示でスクリーンショットの撮り方が少々異なるので、該当する箇所をご覧ください。

デスクトップ表示を撮る場合

手順は以下の通りです。

手順1でデベロッパーツールが開きます。
以下のような画面が表示されていたら大丈夫です。

次に手順2に進むと、以下のような候補一覧が表示されると思います。

最後に手順3に進みましょう。
候補一覧の検索窓に「full」と打ち込むと「Capture full size screenshot」が表示されるので、クリックするとWebページ全体のスクリーンショットを撮ることができます。

スマホ表示を撮る場合

基本的にデスクトップ表示を撮る場合と同じ手順を踏みます。
異なる点は、スクリーンショットを撮る前に「スマホ表示」に変更することです。

手順を以下に掲載します。

手順1でデベロッパーツールを開きます。

次に手順2でデスクトップ表示からスマホ表示に切り替えます。
以下の赤枠箇所をクリックすることでもスマホ表示に切り替え可能です。

スマホ表示に切り替えができたら、手順3と手順4に進んでいただくとスマホ表示でWebページ全体のスクリーンショットを撮ることができます。

念のため、スクリーンショットの拡張機能もご紹介

ここまで拡張機能を使わずにChromeでWebページ全体のスクリーンショットを撮る方法をご紹介してきました。

とはいえ、「拡張機能も知りたい！」という方もいると思いますので、スクリーンショットを撮るChromeの拡張機能もご紹介します。

オススメの拡張機能を3つ載せてありますので、活用してください！

FireShot

Full Page Screen Capture

Awesome Screenshot

まとめ

Webページ全体のスクリーンショットを撮る作業がスムーズになると、仕事の効率も上がります。
本記事でご紹介した方法をぜひ試してみてください！

またWebページ全体のスクリーンショットを撮るだけなら、ChromeよりFirefoxの方が簡単です。
よかったら以下の記事もご覧ください。