[初回公開] 2009年04月22日
ウェブサイトをブラウザで閲覧していてその内容をそのまま保存するのに以前は HTML ファイルに落としていたが、最近では外部読み込みファイルが多く正常に表示されないことが多いことから、スクリーンショットで画像として保存する方法を Firefox を例に紹介する。
このページの目次
１．画面キャプチャ（スクリーンショット）とは
画面キャプチャ（スクリーンショット）とは、パソコンやスマホなど画面上に表示されている内容をそのまま画像として保存することである。
Windows OS などエクスプローラーやソフトがウィンドウ形式で表示されて切り替えられるパソコンでは、キー「Print Screen」を押すと画面全体をメモリ（クリップボード）に保存される。
メモリに保存された画面キャプチャデータは Windows 標準にインストールされている「ペイント」など画像を編集加工するソフトウェアに貼りつけることで編集したり画像として保存することができる。
また、パソコンと違いスマホやタブレットの場合は、画面キャプチャ（スクリーンショット）すると即座に画像（.png）として端末内に保存される。
特に調べ事や日々更新されるウェブサイトは画面キャプチャ（スクリーンショット）してメモとして残す人が多い。
２．ウェブサイトを画面キャプチャ（スクリーンショット）する理由
ウェブサイトを画面キャプチャ（スクリーンショット）する理由としては、主に「資料・操作説明書で利用」と「一時的なメモ」の 2 点が挙げられる。
以前はウェブサイトの保存をそのまま HTML ファイルとしてダウンロードする手段が取られていたが、最近のウェブサイトは Javascript など外部読み込みファイルが多いことからスクリーンショットとして画像として残す方がレイアウトの崩れが無く利便性が高い。
2-1．資料や操作説明書に利用するため
画面キャプチャで保存した画像は、資料やウェブサイトの操作説明書の作成時に利用されることが多い。
例えば資料であれば参考にしたウェブサイトや、サイト上で掲載されている文章やグラフなどを引用する際に利用される。
また、操作説明書はサイトに設置した問い合わせフォームや EC サイトであれば購入までの流れとしてどのボタンを押すなど図入りで説明することで利用者の利便性の向上につながる。
2-2．一時的なメモとして利用するため
画面キャプチャで保存した画像を利用するもう 1 つの利用例として、一時的なメモが挙げられる。
ウェブサイトの情報はサイトの運営者によって常に更新できることから、その時その時の状態を保持したい場合や画像と文章を一緒に保存する時間が無いときに即座に状態を残すことができるスクリーンショットが役立つ。
撮ったスクリーンショットは画像にしておくことで後から見直したり、ブラウザや他のソフトを並べて比較しながら利用する。
2-3．作業の痕跡を残すため
パソコンやソフトウェアの設定を行う現場では、他者との情報共有のために画面キャプチャして作業の痕跡を残すのにも利用されている。
文章で伝えるよりも、状態をそのまま視覚情報として伝えられるメリットがある。
2-4．ウェブサイトの閉鎖や更新しても後から閲覧できるため
ウェブサイトは日々更新され、時には運営側の都合で閉鎖されることもある。
そのため、ウェブサイトは延々に同じ情報がインターネット上にあるわけではないため、後から見直したい時のために画面キャプチャで残しておき、自分のメモとして活用する手段がある。
３．Firefox で画面キャプチャ（スクリーンショット）する方法
ブラウザの Firefox でスクリーンショットする方法としては拡張機能となる「アドオン」を利用するとブラウザのウィンドウ枠を除いた表示されている情報のみを画像として保存することができる。
スクリーンショットが可能なアドオンは各種提供されているが、「Page Saver WE」と「Screengrab」を紹介する。
3-1．Page Saver WE を利用する
Page Saver WE は Firefox でスクリーンショットすることができるアドオンで、Firefox に追加インストールすることで利用が可能になる。
Firefox のメニューより「アドオンとテーマ」を選択して表示される下図の画面より、「Page Saver WE」を検索する。
Page Saver WE をインストールしてブラウザ上部に常に表示するようにしておくと、下図のようにカメラ型のアイコンが表示されるのでアイコンをクリックする。
アイコンをクリックすると「表示部分のみ画像として保存」か「ページ全体を画像として保存」をクリックすると画像（.png）としてパソコン内に保存される。
「表示部分のみ画像として保存」を選択すると Firefox に表示している箇所のみが画像化される。
そのため、ウィンドウサイズを変えることで予め好みの画像の大きさにしておくことができる。
また、「ページ全体を画像として保存」を選択すると Firefox の表示できずにスクロールで表示される箇所も含めてページ全体を画像として保存できる。
例えば縦に長いサイトを 1 つの画像ファイルにしたい場合に役立つので、画面に表示されている部分だけをつなぎ合わせて 1 つにまとめる作業が軽減される。
3-2．Screengrab を利用する
ブラウザの Firefox でスクリーンショットする方法として、従来はアドオンの Screengrab を利用して画像として保存できていた。
しかし現時点では Firefox のアドオンとしては提供されておらず、他ブラウザとなる Chrome のアドオンとして提供されている。
Firefox 版として提供されていた頃はアドオンの管理画面で Screengrab を検索してインストールし、インストール後は下図のようにブラウザの右下にアイコンが表示されていた。
Screengrab のアイコンをクリックすると「Save」と「Copy」の 2 種類の選択肢が表示され、それぞれどちらかをクリックするとさらに「Complate Page（表示されていない箇所も含めて全て）」や「Visible portion（表示されている箇所のみ）」などスクリーンショットで画像化する範囲を選ぶことができる。
また、「Selection…」はドラッグで範囲指定した箇所をスクリーンショットする時に利用し、「Window…」はブラウザのメニューなどを含んだ、キーボードの Ctrl + Alt を押しながら Print Screen キーを押したときと同じ状態で画像化することができ、Windows のスクリーンショット機能と同じことが可能になっている。
関連記事
永続ライセンスの画像編集ソフトウェア「PhotoDirector」を Photoshop の代わりにする
印刷業界やウェブサイト制作の現場で利用される画像編集ソフトの Photoshop は月額制のサブスクリプションとなり、過去に販売されていたパッケージ版のライセンスが新しいパソコンにインストールして利用できなくなったのを受け…
Microsoft Office のインストール方法と 365 との違い
文書作成の「Word」、表計算ソフトの「Excel」といった Microsoft Office は自治体や企業でも一般的に利用されているビジネス用のソフトウェアで、家庭用パソコンでもプリインストールされていたり、社会に出る時に向けて高校や…
無料で生成型 AI の画像を Microsoft Image Creator from Designerを使って作成する方法
生成型 AI とは ChatGPT に代表される対話するように文章作成やデータ分析を行う人工知能のことだが、指示（プロンプト）で画像生成を行うことも可能で、ブラウザの Microsoft Edge に搭載されている Image Creator を利用して…
