Firefox でスクリーンショットして表示内容を画像にする方法

[最新更新] 2022年03月04日
[初回公開] 2009年04月22日

ウェブサイトをブラウザで閲覧していてその内容をそのまま保存するのに以前は HTML ファイルに落としていたが、最近では外部読み込みファイルが多く正常に表示されないことが多いことから、スクリーンショットで画像として保存する方法を Firefox を例に紹介する。

１．スクリーンショットとは

スクリーンショットとは、パソコンやスマホなど画面上に表示されている内容をそのまま画像として保存することである。
Windows OS などウィンドウでソフトを切り替えるパソコンでは、キー「Print Screen」を押すと画面全体をメモリ（クリップボード）に保存されるため、Windows 標準にインストールされている「ペイント」など画像を編集加工するソフトウェアに貼りつけて保存する。

スマホの場合はスクリーンショットすると即座に画像（.png）として端末内に保存される。

２．ウェブサイトをスクリーンショットするメリット

ウェブサイトをスクリーンショットするメリットとしては、主に「資料・操作説明書で利用」と「一次的なメモ」の 2 点が挙げられる。
以前はウェブサイトの保存をそのまま HTML ファイルとして落としてくる手段も取られていたが、最近のウェブサイトは Javascript など外部読み込みファイルが多いことからスクリーンショットで済ませることもある。

2-1．資料や操作説明書に利用する

スクリーンショットで保存した画像は、資料や操作説明書の作成時に利用されることが多い。
例えば資料であれば参考にしたウェブサイトや、サイト上で掲載されている文章やグラフなどを引用する際に利用する。

また、操作説明書はサイトに設置した問い合わせフォームや WordPress に代表される CMS を導入した際に利用者にわかりやすく解説する際に用いる。

2-2．一次的なメモとして利用する

スクリーンショットで保存した画像を利用するもう 1 つの利用例として、一時的なメモが挙げられる。
ウェブサイトの情報は運営者によって常に更新できるものから、その時その時の状態を保持したい場合や画像も合わせて文章を保存する時間が無いときにスクリーンショットが役立つ。

３．Firefox でスクリーンショットする方法

ブラウザの Firefox でスクリーンショットする方法としてはアドオンを利用するとブラウザのウィンドウ枠を除いたウェブサイトのみを画像として保存することができる。

スクリーンショットが可能なアドオンが数ある中で、「Page Saver WE」と「Screengrab」を紹介する。

3-1．Page Saver WE を利用する

Page Saver WE は Firefox でスクリーンショットすることができるアドオンで、追加インストールすることで利用が可能になる。

Page Saver WE をインストールしてブラウザ上部に常に表示するようにしておくと、下図のようにカメラ型のアイコンが表示されるのでこれをクリックする。

アイコンをクリックすると「表示部分のみ画像として保存」か「ページ全体を画像として保存」をクリックすると画像（.png）としてパソコン内に保存される。

「表示部分のみ画像として保存」を選択すると Firefox に表示している箇所のみが画像化される。
そのため、ウィンドウサイズを変えることで予め好みの大きさにしておくことができる。

また、「ページ全体を画像として保存」を選択すると Firefox の表示できずにスクロールで表示される箇所も含めて画像として保存できる。
例えば縦に長いサイトを 1 つの画像ファイルにしたい場合に役立つ。

3-2．Screengrab を利用する

ブラウザの Firefox でスクリーンショットする方法として、アドオンの Screengrab を利用すると画像として保存できていたが、現時点では Firefox のアドオンとしては提供されておらず、Chrome のアドオンとして提供されている。

Firefox 版として提供されていた頃はアドオンの管理画面で Screengrab を検索してインストールし、インストール後は下図のようにブラウザの右下にアイコンが表示されていた。

このアイコンをクリックすると「Save」と「Copy」の選択ができ、それぞれどちらかをクリックするとさらに「Complate Page（表示されていない箇所も含めて全て）」や「Visible portion（表示されている箇所のみ）」などスクリーンショットで画像化する範囲を選ぶことができる。

また、「Selection…」はドラッグで範囲指定した箇所をスクリーンショットする時に利用し、「Window…」はブラウザのメニューなどを含んだ、キーボードの Alt を押しながら Print Screen キーを押したときと同じ状態で画像化することができ、Windows のスクリーンショット機能と同じことが可能になっている。

関連記事