[PC] 縦に長いWebページ全体のScreenShotを保存する方法

縦に長いWebページ全体のスクリーンショット(画像)をそのまま保存したい時ってありますよね、余計なプラグインやらフリーソフトなんかを探したりする必要がない方法をご紹介。
必要なものは”Google ChromeだけあればOK”です。

縦に長いWebページ全体のスクリーンショットを撮る

簡単な流れを箇条書きして行きます。

• スクリーンショットを撮影したいWebページをChromeで開く。
• F12 キー 押しでデベロッパーツールを開く。
• メニューから ”Capture full size screenshot” を選択。
• しばらく待つとダウンロードが始まり終われば終了。

簡単ですね！

これだけでは分かりにくいのでもう少し解説をして行きます。

もう少し詳しく解説

まずはスクリーンショットを撮影したいWebページをChromeで開きます、今回は参考用にこのBlogを使ってみます。

ページを開いただけの状態であればこんな感じに表示されます。

ここで”F12”キーを押してデベロッパーツールを呼び出します。

ややこしそうな画面になりますが難しくはありません、左側(赤枠)ページのイメージが表示されている部分のツールバーだけ使います。

簡易的に全体のスクリーンショットを撮影したい場合はメニューから”iPad Pro”を選択し”回転”し横方向に表示の向きを変えます、表示崩れなどが解消される場合があるので”F5”キーでページの再読込をします。
この辺は私なりのやり方なので、表示形式やサイズなどこのメニューで設定出来るのでお好みで設定を。

メニューバーの”︙”をクリックし”Capture full size screenshot”を選択するとキャプチャー開始とダウンロードが始まります。
ページの情報量が多いとダウンロードが終わるまでしばらく時間がかかるので待ちます。

ダウンロードが終わったら、Chromeで指定しているダウンロード先にキャプチャした画像が保存されれば終了、こんな感じにページ全体のスクリーンショットがpng形式で撮影されました。

キャプチャーされたままの画像自体のサイズが大きすぎるので自分で編集するなりで対策を。

Webページ全体の保存方法は色々ありますが今回はスクリーンショット(画像)として保存する方法でやってみました、何かの参考にでもなれば。

そんな感じで御座います_(:3 」∠ )_