webサイト全体を保存する場合、通常の方法では保存ができなくて困っているという方もいらっしゃるのではないでしょうか？
1回1回スクショしては画像を繋げる方法もありますが、時間がかかる上に手間もかかりますよね。
実は、そんな面倒な手順を踏まなくても、webサイト全体を一発でスクリーンショットする方法があります。
この記事では、webサイトの一番上から一番下までを簡単にスクリーンショットして保存する方法を解説します！📸
この記事で得られること
この記事を読むことで、以下の方法がわかるようになります。
- ブラウザのデベロッパーツールを使ってwebサイト全体をスクリーンショットする方法
- ブラウザの拡張機能を使ってwebサイト全体をスクリーンショットする方法
デベロッパーツールで保存する方法
意外かもしれませんが、ブラウザのデベロッパーツールを使うことでサイト全体のスクショを撮ることができます。
下記の手順からデベロッパーツールを使った順番について解説していきます。
\手順/
【STEP１】デベロッパーツールを開く
まずはデベロッパーツールを開きます。
- MacBookの場合：
Command + Shift + I - Windowsの場合：
Windowsロゴキー + Shift + I
【STEP２】縦三点リーダー(︙)から【フルサイズをキャプチャ】を選択
デベロッパーツールが開いたら、右上にある縦三点リーダー(︙)をクリックします。
メニュー内の「フルサイズのスクリーンショットをキャプチャ」を選択すると、webサイト全体がスクリーンショットされ、自動的にダウンロードされます。
補足として、スクリーンショットのファイル名は、撮影したサイトのURLがそのままファイル名になります。
デベロッパーツールでwebサイトの保存方法がうまくいかないとき
なおこちらの方法では問題が2つあります。
アニメーションが発生する場合
・webサイトを開いてすぐアニメーションが発生する場合はアニメーションが優先されてしまいスクリーンショットがうまく撮れないことがあります。
webサイトが長すぎる場合
・スマホサイズのようにwebサイトが長すぎると途中までしか保存ができないことがあります。
これらの問題が出てきた場合は、次に紹介する「GoFullPage」という拡張機能を試してみてください！
ブラウザの拡張機能でスクショする方法【おすすめ！】
GoFullPage – Full Page Screen Captureというchromeの拡張機能を使用して簡単に保存することができます。
利用したい方は、下記から拡張機能のダウンロードしてみてください！
\手順/
【STEP１】chromeの拡張機能の欄からGoFullPageをクリック
スクショしたいサイトを開いてchromeの拡張機能からGoFullPage – Full Page Screen Captureをクリックするとスクリーンショットが始まります。
【STEP１】スクリーンショットのダウンロード
スクリーンショットが終了したら撮った画像を確認して右上にあるダウンロードボタンをクリック！
右上のダウンロードボタンをクリックして、JPG・PNG・PDF形式で保存できます。
画像形式の変更方法は次に解説していきます。
なお注意事項としてスマホサイズのようなwebサイトが長いページについては分割されてしまいます。
JPGとPNGの設定を変更したい場合
画像形式の設定を変更したい場合は右上の歯車マーク(Options)をクリックします。
その中にあるImage format:という部分から変更することができます。
過去にスクショしたwebサイトをもう一度ダウンロードしたい場合
GoFullPageでは、過去に記録したスクショをもう一度ダウンロードすることができます。
やり方は、右上の歯車マークの横にあるFilesをクリックします。
そうすると、これまで撮ったスクショがURLとして表示されているのでその中からダウンロードしたいスクショを見つけてみてください！
綺麗にスクショできない場合
GoFullPageを使ったけど綺麗にスクショできていないという場合は、サイトが完全に読み込まれていないことが原因になることがあります。
なので、一度サイトを一番下までスクロールしてからGoFullPageを使ってみると綺麗にスクショが撮れる可能性が高いのでうまくいかない場合は試してみてください！
まとめ
【デベロッパーツールからの保存方法】
- デベロッパーツールを開く
- 縦三点リーダー(︙)から【フルサイズをキャプチャ】をクリック
【chromeの拡張機能を使った保存方法】
- chromeの拡張機能からGoFullPageをクリック
- スクリーンショットを確認してPDFまたはJPGでダウンロード
この方法を参考にwebサイトを綺麗に保存して時間も節約してみてください☺️
ここまでご覧いただきありがとうございました！
コメント