今回は、Webページ全体のスクリーンショットを撮る方法をご紹介します。Webサイトのデザイン確認や資料作成の際に、ページ全体を一枚の画像として保存したいことがありますよね。そんなときは、Google Chromeの「開発者ツール」で撮影する方法、または Chrome拡張機能「FireShot」 を使う方法が便利です！
Web全体のスクリーンショットを撮る方法
Webページ全体のスクリーンショットを撮る場合、Google Chromeを使えば簡単に実現できます！撮影方法は主に次の2種類です。
sukima
私たちsukimaは、映像を作る会社です。企画、演出、プロデュースを中心に映画やドラマ、バラエティ番組などを制作しています。あなたの人生の隙間に笑顔を届けるのが仕事です！
sukima.tokyo.jp
今回は、こちらのサイトのスクリーンショットを撮ってみたいと思います。
Chromeの開発者ツールで撮る
Chromeの開発者ツールで撮る方法
- Chromeでページを開く
- F12 または Ctrl+Shift+I（Macは Command⌘+Option+I）で開発者ツールを開く
- Ctrl+Shift+P（Macは Command⌘+Shift+P）
- コマンド欄に「full」 と入力して実行（Enter）
これだけでスクリーンショットが撮れます！
実際に撮ったスクリーンショットが…
スクリーンショット！
Chrome拡張機能「FireShot」で撮る
まずは、Chromeの拡張機能をウェブストアからインストール！
ウェブページ全体をスクリーンショット - FireShot - Chrome ウェブストア
ウェブページ全体をスクリーンショット撮影。PDF/JPEG/GIF/PNGでキャプチャ、編集、保存やアップロード、印刷、そしてOneNote、クリップボード、メールに送信できます。
chromewebstore.google.com
Chrome拡張機能「FireShot」で撮る方法
- Chromeでページを開く
- 拡張機能の「Webページ全体をスクリーンショット – FireShot」を選択
- ページ全体をキャプチャを選択
- 保存方法を選択！
これだけです。
実際に撮ったスクリーンショットが…
スクリーンショット！
まとめ
2つの方法でスクリーンショットを撮ってみましたが、「FireShot」で撮影した方がPDF保存にも対応しており、綺麗にスクリーンショットが撮れたように感じました。ただし、拡張機能をインストールしたくない方や、会社のPCで追加インストールが制限されている場合は、Chromeの開発者ツールを使う方法が便利です！ぜひ、参考にしてみてください。
