★悩み★
・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ページ全体のスクリーンショットを採取するために、ページを少しずつずらしながらスクリーンショットを数回行っているあなた」にこの記事が少しでも役に立てれば幸いです。
コメント