サービス・ツール

サイトのスクリーンショットを撮るならFireShotがオススメ

こんにちは! イチヒラ(@ichihira_tw)です!

あなたはサイトのスクリーンショットを撮るときにどうしていますか?

WindowsやMacにはスクリーンショットを撮る機能があるので、指定のキーを使えば簡単にスクリーンショットを撮ることが出来ます。

しかし、サイトのスクリーンショットを撮るにはOSのスクショ機能では少し物足りなかったり、使い勝手が悪かったりします。

今回は、サイトのスクリーンショットを撮るのにオススメのブラウザ拡張機能「FireShot」について紹介していきます!

FireShotのオススメポイント

サイト部分だけのスクショを撮ることができる

OSのスクリーンショット機能を使うと、ブラウザのタブとかツールバーやスクロールバーまで撮れてしまいます。

別に入っていても問題なければいいのですが、純粋にサイト部分だけのスクリーンショット画像を使いたい場合は加工する手間が発生してしまうのが難点です。

しかも大量にスクショを使うときは、加工に時間がかかってしまい非常に面倒くさい。

FireShotであればサイト部分だけのスクリーンショットを撮ることができるので、そういった面倒な作業から解放されます。

スクロールバーで隠れているページ全体をスクショできる

OSのスクリーンショットでできるのは、「アクティブになっているウィンドウ」「ディスプレイに表示されている範囲全体」「指定した選択範囲」です。

多くのWEBサイトは縦長になっており、ディスプレイに表示しきれません。

そのため、OSのスクリーンショット機能ではディスプレイに表示されていない部分は撮ることができないんです!

FireShotを使うとWEBサイトのページ全体のスクリーンショットを撮ることができるので非常に便利です。

しかも非常に簡単な操作でスクリーンショットを撮ることができるので、失敗の心配がありません。(ただし、サイトの構成上どうしてもキレイにスクリーンショットを撮ることが出来ない場合もあります)

指定範囲だけのスクショにも対応

サイトの一部分だけをスクショしたい場合もあります。

一応OSのスクリーンショット機能でも範囲を指定してスクリーンショットを撮ることができます。

しかし、OSのスクリーンショットはあくまでも「今ディスプレイに表示されている範囲」のみが対象なので、ブラウザをスクロールさせて縦長に撮ったりすることはできません。

FireShotは範囲指定の際もブラウザをスクロールをすることができます。

そのためOSのスクリーンショット機能と違って、縦長のスクリーンショットを撮ることができるので非常に便利です。

FireShotのインストール

対応ブラウザ

FireShotの対応ブラウザはGoogle ChromeとFirefoxです。

どちらもかなりメジャーなブラウザですし、今回は使用しませんがディベロッパーツールは非常に便利なので、どちらかのブラウザはインストールしておくことをオススメします。

ちなみにIEも対応しているらしいですが、IEはここ数年使ってないので今回は除外します(笑)

Chromeの場合

ChromeにFireShotをインストールするにはChromeウェブストアへアクセスしましょう。

Chromeウェブストアにアクセスしたら、「Fireshot」と検索します。

何件かヒットするので、「ウェブページ全体をスクリーンショット FireShot」と書かれているものの「CHROMEに追加」ボタンをクリックしましょう。


確認のアラートが出るので、「拡張機能を追加」ボタンをクリックします。

数秒放置するとインストールが完了してページが切り替わります。

そしてChromeの右上にFireShotのアイコンが表示されていればOKです。

Firefoxの場合

FirefoxにFireShotをインストールするには、Firefox Add-onsにアクセスします。

Firefox Add-onsにアクセスしたら、「FireShot」と検索します。

何件かヒットするので、「ウェブページ全体をスクリーンショット FireShot」と表示されている部分をクリックしましょう。


FireShotの詳細画面が表示されるので、「Firefoxへ追加」ボタンをクリックします。


数秒待つと次のようなポップアップが出るので、「追加」ボタンをクリックします。


数秒待つと別タブが立ち上がり、インストール完了画面が表示されます。

ブラウザの右上にFireShotのアイコンが表示されていればOKです。

FireShotの使い方

ページ全体のスクリーンショットを撮る

FireShotでページ全体のスクリーンショットを撮るには、スクリーンショットを撮りたいページを表示して、Fireshotのアイコンをクリックします。

すると、下記のようにメニューが表示されます。

「ページ全体をキャプチャ」をクリックすれば、表示しているURLのページ全体をキャプチャしてくれます。

数秒ほどでスクリーンショットが撮られ、以下の画面が表示されます。

あとは「画像として保存」ボタンをクリックすれば画像ファイルが指定フォルダに保存されます。

あと実際にやってみるとわかるのですが、PDFファイルでの保存も可能なので、印刷したい場合にも利用できます。

画像ファイルについて
初期設定だとPNGファイルで保存されます。
ファイルを変えたい場合は「カスタマイズする」のリンクをクリックすればカスタマイズページが表示されるので、JPEGファイルに変更してください。

さらにChromeのディベロッパーツールを使ってスマホ表示に切り替えた場合もページ全体のスクリーンショットを撮ることが出来ます。

実際にスクリーンショットされたのが以下の画像です。
スマホサイトのサムネイルはものすごく長くなったので、切り抜きしています。
全体のスクショを見たい場合は、実寸大ボタンをクリックしてください。
※容量がデカかったので、あえて画質を落としています。

PCサイト

スマホサイト

指定範囲のスクショも撮れるぞ!

まず、スクリーンショットを撮りたいページを表示して、Fireshotのアイコンをクリックします。

表示されたメニューの中の「選択範囲をキャプチャ」をクリックします。

するとページが全体的に暗くなり範囲指定モードに切り替わるので、切り抜きたい箇所をドラッグしましょう。

あとは、前述の「ページ全体のスクリーンショット」と同じ手順で画像を保存できます。

さいごに

さらに使い込みたいなら、高度な機能をインストール!

さらに使い込みたいなら、高度な機能をインストールしましょう!

メニューの中の「高度な機能をゲット」をクリックすると、ソフトウェアがダウンロードされるのでそれをダブルクリックしてインストールすればOKです。

ページ全体のスクリーンショットを撮って、ブラウザ上でトリミングしたりするなど編集することが出来るようになります。

さらに撮った画像をFTPで指定のサイトにアップしたり、FacebookやTwitterにアップすることもできます。

かなり高機能になるので、もしよかったらインストールしてみるのもいいでしょう!

ABOUT ME
イチヒラ
イチヒラ
名古屋在住のシステムエンジニアで愛犬家。 おススメ本や 片付け方法、ペットに関する情報、趣味探し、ダイエットの経過などをブログで発信しています。 ドッグレシピプランナー★★を取得しました。