FireShotとは？無料で使い勝手が良い画面キャプチャアドオンの使い方

Web担当者ならWebページのスクリーンショットを撮りたいケースはよく遭遇します。
そんなときにオススメしたいのが、今回ご紹介するFireShotです。

FireShotは、無料でありながらスクリーンショットを撮る範囲を「ページ全体」「目に見える部分」「選択した部分」から選べ、保存形式もjpgだけでなくpdfで保存することも可能です。

今回はFireShotの使い方をご紹介します。

目次

1. FireShotとは
2. Google Chromeへのインストール方法
3. Firefoxへのインストール方法
4. FireShotの設定方法
5. FireShotでキャプチャする
   1. ページ全体をキャプチャ
   2. 目に見える部分をキャプチャ
   3. キャプチャ選択
   4. FireShotを削除する方法
6. まとめ

FireShotとは

https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

FireShotとは、Webページのスクリーンショットをキャプチャするためのブラウザの拡張機能です。

WindowsやMacにも、スクリーンショットのためのショートカットキーが標準で用意されていますが、キャプチャできるのはディスプレイに表示中の画面に限られます。

FireShotは、ブラウザに表示中のページや特定範囲のキャプチャのみでなく、スクロールが必要な長いページ全体をキャプチャし、切れ目のない1つの画像やPDFとして保存できるのが特徴です。

対応しているブラウザはGoogle ChromeとFirefoxの2つです。

Google Chromeへのインストール方法

Google Chromeへのインストール方法をご説明します。Chromeウェブストア内のFireShotのページにて、「CHROMEに追加」ボタンをクリックします。

DLはこちらから

FireShotを追加するかどうか尋ねるポップアップが表示されますので、「拡張機能を追加」をクリックします。

ブラウザの拡張機能にFireShotボタンが追加されます。

Firefoxへのインストール方法

Firefoxで「Add-ons for Firefox」にて「+Add to Firefox」ボタンをクリックしてインストールします。
DLはこちらから

FireShotの設定方法

FireShotボタンをクリックし、表示されるメニュー内の「設定」をクリックします。

保存画像の種類をPNGとJPGから選べます。初期設定はPNGです。

保存の際のオプションとして、ダウンロードした後にダウンロード先のフォルダを開くかどうか、保存後に自動でFireShotのタブを閉じるかどうかなどを選択できます。

初期設定では、保存ファイルの出力フォルダ名は「FireShot」です。このフォルダの位置は、ブラウザのファイルダウンロードディレクトリの直下になります。

「表示名テンプレートの設定」をクリックすると、ダウンロード時の詳細なファイル名付けルールを編集できます。

初期設定では、保存ファイルの名付けルールは「FireShot Capture %n - %t - %u」です。「%n」は連番、 「%t」はページタイトル、「%u」はページURLです。この初期設定では長いファイル名になりますが、不要な要素を削除して短くなるよう編集できます。

キャプチャのキーボードショートカット割り当てを確認・編集することもできます。

設定後、一番下の「施す（Apply）」または「保存して閉じる（Save and Close）」ボタンをクリックして内容を反映します。

FireShotでキャプチャする

FireShotでキャプチャするには3種類の方法があります。

1. ページ全体をキャプチャ：自動にページをスクロールし、ページ全体を1つのファイルとしてキャプチャします。
2. 目に見える部分をキャプチャ：ブラウザに表示されている部分のみをキャプチャ対象とします。ブラウザのサイズを変更すれば、キャプチャ対象範囲もそれに伴って変動します。
3. キャプチャ選択：あらかじめ選択した箇所のみをキャプチャ対象とします。

ここから、それぞれのキャプチャ方法をご紹介します。

ページ全体をキャプチャ

FireShotボタンをクリックし、表示されるメニューの中の「ページ全体をキャプチャ」をクリックします。そのまま画面が自動にスクロールされ、ページの一番下まで到達すると、スクロールバーがページの一番上まで戻るとともに、新規タブが開きます。

新規タブには、キャプチャしたスクリーンショットの保存ボタンが表示されます。この操作は、「ページ全体をキャプチャ」だけでなく、「目に見える部分をキャプチャ」と「キャプチャ選択」を選択した場合も同様です。

「画像として保存」ボタンをクリックすると、設定で選択したJPGかPNGのファイル形式でファイルをダウンロードできます。「PDFとして保存」ボタンでは、PDFファイルとしてダウンロードできます。「印刷」ボタンからは、印刷もできます。

クリップボードにコピーする場合は、スクリーンショットの上で右クリックし、「画像をコピー」を選択します。

目に見える部分をキャプチャ

FireShotボタンをクリックし、表示されるメニューの中の「目に見える部分をキャプチャ」をクリックします。

目に見える部分をキャプチャし、保存した画像です。

キャプチャ選択

FireShotボタンをクリックし、表示されるメニューの中の「キャプチャ選択」をクリックします。

ページ全体がグレーアウトし、選択した範囲が明るくなります。ただし、JavaScriptを活用してヘッダーやフッターを固定したページなどは、選択箇所がずれることがあります。

ヘッダーと右サイドバーを除いた部分を範囲選択してキャプチャし、保存した画像です。

FireShotを削除する方法

ブラウザのアドレスバーに「chrome://extensions/」と入力し、拡張機能を表示します。一覧からFireShotを探し、右のゴミ箱マークをクリックすれば、ブラウザの拡張機能から削除できます。

まとめ

Web担当者であれば、スクリーンショットを撮りたい場面はよくあります。
そんなとき、今回ご紹介したような無料ツールでも十分実用に耐えうるものです。
ぜひ一度使ってみてはいかがでしょうか。