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

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

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

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

目次

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

FireShotとは

FireShot_0TOP.png
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へのインストール方法

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

DLはこちらから

FireShot_1インストール2.png
FireShotを追加するかどうか尋ねるポップアップが表示されますので、「拡張機能を追加」をクリックします。

FireShot_1インストール3.png
ブラウザの拡張機能にFireShotボタンが追加されます。

Firefoxへのインストール方法

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

FireShotの設定方法

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

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

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

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

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

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

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

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

FireShotでキャプチャする

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

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

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

ページ全体をキャプチャ

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

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

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

FireShot_3キャプチャ_1ページ全体3.png
クリップボードにコピーする場合は、スクリーンショットの上で右クリックし、「画像をコピー」を選択します。

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

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

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

キャプチャ選択

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

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

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

FireShotを削除する方法

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

まとめ

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