スポンサーリンク

【拡張機能は不要】Chromeで2ステップでページ全体をスクリーンショットする手順

★悩み★
・Webページが縦長すぎて、スクリーンショットを数回する必要があるな。
・縦長なWebページ全体をスクリーンショットできないのかな?
・Chromeを使っているけど拡張機能はインストールしたくないな。


こういった「悩み」に答えます。

★本記事の内容★
① Chromeでページ全体をスクリーンショットする方法をご紹介
② Capture full size screenshotを用いてChromeでページ全体のスクリーンショットする手順のご紹介


これからご紹介する「Chromeで2ステップでページ全体をスクリーンショットする手順」を実践したことで、筆者は5分以内でChromeでページ全体のスクリーンショットができました。

記事の前半では「Chromeでページ全体をスクリーンショットする方法」を解説しつつ、記事の後半では「Capture full size screenshotを用いたページ全体をスクリーンショットする手順」をご紹介します。

この記事を読み終えることで、「Chromeでページ全体をスクリーンショットする手順」を把握した状態になります。

筆者は、約10年間、Chromeを使い込んでいます。

Chromeでページ全体をスクリーンショットする方法

Chromeでページ全体をスクリーンショットする方法をご紹介します。

結論から述べますと、Chromeで縦に長いWebページ全体のスクリーンショットを行いたい場合、Chromeの標準機能の一つであります「Capture full size screenshot」を使いましょう。

ちなみに、Chromeで縦に長いWebページ全体をスクリーンショットする方法として、以下があります。

★Chromeでページ全体をスクリーンショットする方法★
① Chromeの標準機能である「Capture full size screenshot」を利用
② Chromeの拡張機能である「Full Page Screen Capture」を利用


まずは、Chromeの標準機能で縦長なWebページ全体をスクリーンショットする方法についてご紹介します。

続いて、Chromeの拡張機能で縦長なWebページ全体をスクリーンショットする方法についてご紹介します。

Chromeの標準機能でページ全体をスクリーンショットする方法

Chromeの標準機能でページ全体をスクリーンショットする方法をご紹介します。

Chromeの標準機能である「Capture full size screenshot」でページ全体をスクリーンショットすることができます。

「Capture full size screenshot」は、タブレット端末が流行りだした2017年ぐらいからChromeの標準機能として備わりました。

★Capture full size screenshotの実装時期について★
2017年4月に標準機能としてChromeで使えるようになったそうです。
Chromeの標準機能でページ全体をスクリーンショット可能になった時期


後ほど、Chromeの標準機能である「Capture full size screenshot」でページ全体をスクリーンショットする手順に関してご紹介します。

以上が、「Chromeの標準機能でページ全体をスクリーンショットする方法」となります。

Chromeの拡張機能でページ全体をスクリーンショットする方法

Chromeの拡張機能でページ全体をスクリーンショットする方法をご紹介します。

Chromeの拡張機能である「Full Page Screen Capture」でページ全体をスクリーンショットすることができます。

筆者は、2016年までは、ページ全体のスクリーンショットを採取するために「Full Page Screen Capture」を愛用していました。


「Full Page Screen Capture」を利用し、以下の欠点に気づきました。

★Chromeの拡張機能を利用したページ全体のスクリーンショットの欠点★
Chromeのバージョンアップデート直後だと、「Full Page Screen Capture」が正常に動作しないことが多々ありました。
(拡張機能のアップデートが間に合わなかったのでしょう。)


そういったこともあり、2017年からは、縦長ページの全体のスクリーンショットを採取したい場合は、Chromeの標準機能である「Capture full size screenshot」を利用するようになりました。

以上が、「Chromeの拡張機能でページ全体をスクリーンショットする方法」となります。

ページ全体をスクリーンショットする場合、Chromの標準機能である「Capture full size screenshot」をオススメします。

Capture full size screenshotを用いてChromeでページ全体のスクリーンショットする手順

Capture full size screenshotを用いてChromeでページ全体のスクリーンショットする手順をご紹介します。

★Capture full size screenshotでページ全体スクリーンショットする手順★
ステップ1:Chromeのデベロッパーツールを起動
ステップ2:ページ全体のスクリーンショットを採取
ステップ3:採取した「縦長Webページ全体」のスクリーンショットを確認


上記のステップでChromeのCapture full size screenshotを用いてページ全体のスクリーンショットを採取できます。

今回は、縦に長いWebページの代表格であります「Yahoo! JAPAN」を用いて、上記ステップをご紹介します。

ステップ1:Chromeのデベロッパーツールを起動

Chromeのデベロッパーツールを起動に関してご紹介します。

それでは、お手元にあるChromeを起動し、「https://www.yahoo.co.jp/」にアクセスしましょう。

その後、アドレスバーの一番右にあるアイコン(下図の赤枠部分)をクリックします。

次に、下図の黄緑枠部分にある「その他のツール(L)」をクリックします。

最後に、下図の青枠部分にある「デベロッパーツール(D)」をクリックすることで、「デベロッパーツール」を起動することができます。


上記操作後、以下の画面(下図の赤枠部分)が立ち上がっていれば、「デベロッパーツール」が正常に表示されたことになります。



以上で、「ステップ1:Chromeのデベロッパーツールを起動」は完了です。

ステップ2:ページ全体のスクリーンショットを採取

ページ全体のスクリーンショットを採取に関してご紹介します。

アイコン(下図の赤枠部分)をクリックしましょう。



その後、下図の赤枠部分をクリックします。
そうすることで、ディスプレイサイズを変更することができます。

今回は、「Laptop with MDPI screen」を選択することにしましょう。

「Laptop with MDPI screen」が下図の青枠部分にない場合は、Edit(下図の黄緑枠部分)をクリックすることで「Laptop with MDPI screen」を青枠部分に追加することができます。



次が核心部分であります、縦長Webページ全体のスクリーンショットです。

アイコン(下図の黄緑色部分)をクリックしましょう。

その後、”Capture full size screenshot”(下図の赤枠部分)をクリックします



そうすることで、現在閲覧している縦長Webページ全体のスクリーンショットが生成されます。(下図の赤枠部分)


以上で、「ステップ2:ページ全体のスクリーンショットを採取」は完了です。

ステップ3:採取した「縦長Webページ全体」のスクリーンショットを確認

採取した「縦長Webページ全体」のスクリーンショットを確認に関してご紹介します。

先ほどご紹介した手順によって作成された「Webページ全体のスクリーンショット」は、以下の画像になります。

YAHOO! JAPANのトップページは、とても縦長なWebページだということが分かりますね。



以上で、「ステップ3:採取した「縦長Webページ全体」のスクリーンショットを確認」は完了です。

ChromeのCapture full size screenshotを用いて2ステップでページ全体のスクリーンショットができます。

【まとめ】Chromeで2ステップでページ全体をスクリーンショットする手順

今回の記事を通して、Chromeの標準機能の1つであります「Capture full size screenshot」を用いた縦長なWebページのスクリーンショットの手順をご紹介することで、以下の悩みを解消しました。

★悩み★
・Webページが縦長すぎて、スクリーンショットを数回する必要があるな。
・縦長なWebページ全体をスクリーンショットできないのかな?
・Chromeを使っているけど拡張機能はインストールしたくないな。


「縦長なWebページ全体のスクリーンショットを採取するために、ページを少しずつずらしながらスクリーンショットを数回行っているあなた」にこの記事が少しでも役に立てれば幸いです。

コメント

タイトルとURLをコピーしました