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

このページの目次
1.スクリーンショットとは
スクリーンショットとは、パソコンやスマホなど画面上に表示されている内容をそのまま画像として保存することである。
Windows OS などウィンドウでソフトを切り替えるパソコンでは、キー「Print Screen」を押すと画面全体をメモリ(クリップボード)に保存されるため、Windows 標準にインストールされている「ペイント」など画像を編集加工するソフトウェアに貼りつけて保存する。
スマホの場合はスクリーンショットすると即座に画像(.png)として端末内に保存される。
2.ウェブサイトをスクリーンショットするメリット
ウェブサイトをスクリーンショットするメリットとしては、主に「資料・操作説明書で利用」と「一次的なメモ」の 2 点が挙げられる。
以前はウェブサイトの保存をそのまま HTML ファイルとして落としてくる手段も取られていたが、最近のウェブサイトは Javascript など外部読み込みファイルが多いことからスクリーンショットで済ませることもある。
2-1.資料や操作説明書に利用する
スクリーンショットで保存した画像は、資料や操作説明書の作成時に利用されることが多い。
例えば資料であれば参考にしたウェブサイトや、サイト上で掲載されている文章やグラフなどを引用する際に利用する。
また、操作説明書はサイトに設置した問い合わせフォームや WordPress に代表される CMS を導入した際に利用者にわかりやすく解説する際に用いる。
2-2.一次的なメモとして利用する
スクリーンショットで保存した画像を利用するもう 1 つの利用例として、一時的なメモが挙げられる。
ウェブサイトの情報は運営者によって常に更新できるものから、その時その時の状態を保持したい場合や画像も合わせて文章を保存する時間が無いときにスクリーンショットが役立つ。
3.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 のスクリーンショット機能と同じことが可能になっている。
関連記事
FileSum でフォルダごとのデータサイズ容量を確認する方法
最近のパソコンやスマホは小型で大容量のディスク容量で販売されているがそれでも取り扱うアプリや写真、動画の品質も向上して比例するようにデータサイズも増えるのでいつになってもディスクの空き…
【IE 終了】IETester を利用して IE のバージョン 5.5 から 11 までの表示を確認する方法
Internet Explorer(IE)はバージョンごとに利用できる JavaScript や CSS が異なるだけでなく同じ記述でも表示が大きく変わりウェブ制作者の頭を悩ませる種でその確認の手段も手間であったが IETester…
Chrome の拡張機能 Talend API Tester で API のテストを行う方法
ウェブの技術を使ったシステム開発の現場では全てをゼロからプログラムするのではなく API と呼ばれる機能を取り入れて開発することがあり、API の動作確認を簡単にするツールとして Chrome の…