ホームページ全体のスクリーンショットを撮るならFireShot

ホームページ全体のスクリーンショットを撮るならFireShotが超便利 PC

縦に長いホームページのスクリーンショットを撮りたいときがある。そんなときに便利なのがGoogle Chromeの拡張機能「FireShot」です。(※Firefoxでも同じアドオンが公開されています。)

縦長のページはブラウザで全て表示できないので、少しずつスクロールしながらスクショして、複数のスクショ画像をPhotoshopで結合するとかの方法もありますがとても手間が掛かる。

自動的にスクロールしながら複数のスクショを撮って、それらの画像を結合してくれるアプリもありますが、スクロールに追随するTOPメニューやサイドバーなどが邪魔をしてうまく全体のスクショが撮れないこともしばしば。

しかし、今回紹介する拡張機能「FireShot」なら、一発でWebページ全体のスクショを作成し、様々なファイル形式(拡張子)で保存できます。

スポンサーリンク

FireShotのインストール

Chromeの場合

chrome ウェブストアから「FireShot」を検索するか、直接「FireShot」のページを開いて「Chromeに追加」をクリックします。

■chrome ウェブストアhttps://chrome.google.com/webstore/category/extensions?hl=ja

Chromeウェブストアで「FireShot」を検索してインストール

■ウェブページ全体をスクリーンショット – FireShot
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

「FireShot」のページにアクセスしてインストール

確認画面が出ますので「拡張機能に追加」をクリック。

確認画面で「拡張機能を追加」をクリック

ブラウザの右上にFireShotのアイコンが出ればインストール完了です。

Chrome拡張機能「FireShot」のアイコン

Firefoxの場合

Firefoxの場合は以下のURLからアドオンを追加できます。
https://addons.mozilla.org/ja/firefox/addon/fireshot/

スポンサーリンク

FireShotの使い方

FireShotの使い方はとても簡単です。ためしにこのブログのトップページのスクリーンショットを撮ってみます。

スクリーンショットを撮る

※Lazy Load(画像の遅延読み込み)等を実装している場合は、念のために一度ページの一番下までスクロールして読み込んでおきましょう。
まず、ブラウザの左上のFireShotのアイコンをクリックします。

このブログのTOPページ

メニューが出てくるので、「ページ全体をキャプチャ」をクリックします。((※今回はページ全体をキャプチャしますが、ブラウザに表示されている部分だけのキャプチャや、キャプチャするエリアをマウスで選択することもできます。)

FireShotアイコンの「ページ全体をキャプチャ」をクリック

ページ全体のキャプチャ処理が終わると、保存方法を選択する画面が表示されます。

FireShotのキャプチャの保存方法を選択

画像として保存

画像として保存する場合は「画像として保存」をクリックします。

「画像として保存」をクリック

権限の確認画面が出ますので「許可」をクリック。(※初回のみ)

権限の確認画面で「許可」をクリック

「名前を付けて保存」ウィンドウが出ますので「保存」をクリックで保存されます。

「保存」をクリック

続いて、PDFでも保存してみます。

PDFとして保存

PDFとして保存する場合は「PDFとして保存」をクリックします。

「PDFとして保存」をクリック

「名前を付けて保存」ウィンドウが出ますので「保存」をクリックで保存されます。

「保存」をクリック(PDF)

保存されたデータの確認

FireShotで保存したスクリーンショットのデータは「ダウンロード」フォルダの中に「FireShot」という専用のフォルダが作成されて、その中に保存されます。

FireShotで保存したスクリーンショットのフォルダとデータ

■画像を確認

画像ファイルをクリックして「フォト」で開いて確認してみます。

スクリーンショット画像を「フォト」で開いて確認

■PDFを確認

PDFファイルをクリックして「Microsoft Edge」で開いて確認してみます。

スクリーンショットPDFを「Microsoft Edge」で開いて確認

オプション

「カスタマイズする」をクリックすると、様々なオプションを設定できます。

「カスタマイズする」をクリックでオプションの設定

FireShotのオプション設定画面です。

FireShotのオプション設定画面

PDF保存の際の気になる点

無料版のFireShotで「PDFとして保存」をした際は、PDF内にあるリンク先のURLが「FireShot公式サイト内の本来のURL記載ページ」に変更されます。

ひとつだけ気になったのは「PDFとして保存」したPDFファイルのリンク部分をクリックすると、一旦「FireShot」のサイトに飛んでから本来のリンク先のURLが表示されるという点です。

FireShot無料版のPDF保存の特徴(1)

FireShot無料版のPDF保存の特徴(2)

この処理を外したい場合は有料のPRO版にアップグレードするか、PRO版が30日間無料で利用できる「無料お試し」を利用すればOKです。

※この記事を執筆した段階ではPRO版のライセンス料金は、利用期間は無制限で「39.95ドル(USD)」でした。

スポンサーリンク

Chromeの拡張機能を使いたくない場合

Chromeの拡張機能はとても便利ですが、セキュリティ的に使いたくないという場合もあります。そんなときはChromeのデベロッパーツールの基本機能を利用して、縦長サイトのスクリーンショットを撮りましょう。

Chromeの基本機能を利用したスクリーンショットの撮り方

■Chromeのデベロッパーツールを開く

Chromeを開いた状態で、F12 もしくは Ctrl+Shift+I でデベロッパーツールを開きます。(※Macの場合はCommand+Option+I

次に、デベロッパーツールの左上にある「Toggle device toolbar」のアイコンをクリックします。(※Ctrl+Shift+MでもOK)

デベロッパーツールの「Toggle device toolbar」をクリック

すると以下のような画面になります。

Chromeのデベロッパーツールを開く

■キャプチャしたいブラウザのサイズを選択

以下の画像を参考にキャプチャする際のブラウザのサイズを変更します。(※今回は「Laptop – 1024px」を選択しました。)

キャプチャしたいブラウザのサイズを選択

■スクリーンショットを実行

※Lazy Load(画像の遅延読み込み)等を実装している場合は、念のために一度ページの一番下までスクロールして読み込んでおきましょう。

「More options」を開き、メニューの「Capture full size screenshot」をクリックしてスクリーンショットを実行します。

「Capture full size screenshot」をクリック

スクリーンショットが終了すると、自動的に画像がダウンロードされます。

自動的に画像がダウンロードされる

■画像を確認

ダウンロードされた画像をクリックして開いて確認します。

ダウンロードされた画像を確認

問題ありません。OKです。

まとめ

縦に長いホームページのスクリーンショットを撮りたいときは、Chromeの拡張機能「FireShot」がとても便利。

Chromeの拡張機能をインストールしたくないという場合は、Chromeの基本機能を利用してスクリーンショット。

以上で解決です。