Webページの情報を保存したいとき、画面に表示されている部分だけでなく、スクロールして見える全体を1枚の画像として保存できたら便利です。
Firefoxには拡張機能を追加しなくても、標準機能でページ全体のスクリーンショットを撮る機能が搭載されています。
この記事では、Firefoxでページ全体のスクリーンショットを撮る複数の方法を紹介します。
右クリックメニューから撮る方法
最も手軽な方法は、右クリックメニューからスクリーンショット機能を使う方法です。
- スクリーンショットを撮りたいページを開く
- ページ上の空白部分(リンクがない場所)を右クリック
- 「スクリーンショットを撮影」を選択
画面が少し暗くなり、スクリーンショット撮影モードに切り替わります。
画面右上に「ページ全体を保存」と「表示範囲を保存」のボタンが表示されます。
「ページ全体を保存」をクリックすると、スクロールして見える範囲すべてを含めた1枚の画像として撮影できます。
撮影後はプレビュー画面が表示されます。
「ダウンロード」ボタンをクリックすると、設定しているダウンロードフォルダにPNG形式で保存されます。
「コピー」ボタンをクリックすれば、クリップボードにコピーして他のアプリケーションに貼り付けることもできます。
ショートカットキーを使う方法
キーボードショートカットを使えば、さらに素早くスクリーンショット機能を呼び出せます。
Windows・Linux:
Ctrl + Shift + S
Mac:
Command + Shift + S
ショートカットキーを押すと、右クリックメニューから選択したときと同じ撮影モードに切り替わります。
あとは「ページ全体を保存」ボタンをクリックするだけです。
開発ツールのカメラアイコンを使う方法
開発ツールにカメラアイコンを追加すると、ワンクリックでページ全体のスクリーンショットを撮れるようになります。
カメラアイコンを有効にする手順
- F12キーを押して開発ツールを開く(メニューから「その他のツール」→「開発ツール」でも可)
- 開発ツール右上の三点リーダー(…)をクリック
- 「設定」を選択
- 「利用可能なツールボックスボタン」の項目を探す
- 「ページ全体のスクリーンショット撮影」にチェックを入れる
これでツールバーにカメラアイコンが表示されます。
カメラアイコンの使い方
カメラアイコンをクリックするだけで、現在表示しているページ全体のスクリーンショットが自動的に撮影され、ダウンロードフォルダに保存されます。
右クリックメニューやショートカットキーと違い、プレビュー画面を経由せず直接保存されるため、大量のスクリーンショットを連続して撮りたいときに便利です。
レスポンシブデザインモードで異なる画面サイズのスクリーンショットを撮る
スマートフォンやタブレット表示のスクリーンショットが必要な場合、レスポンシブデザインモードを使えば異なるデバイスサイズでのページ全体スクリーンショットを撮影できます。
- F12キーで開発ツールを開く
- 開発ツール内の「レスポンシブデザインモード」アイコンをクリック(Ctrl+Shift+M でも可)
- 上部のドロップダウンメニューからデバイスを選択(iPhone、iPad、Androidなど)
- カメラアイコンをクリック
選択したデバイスサイズでのページ全体スクリーンショットが保存されます。
ウェブコンソールでコマンドを使う方法(上級者向け)
より詳細な設定でスクリーンショットを撮りたい場合、ウェブコンソールのコマンドを使う方法もあります。
- F12キーで開発ツールを開く
- 「コンソール」タブを選択(Ctrl+Shift+K でも可)
- 以下のコマンドを入力してEnterキーを押す
:screenshot --fullpageこのコマンドには追加オプションを指定できます。
主なオプション:
--fullpage: ページ全体を撮影--dpr 2: 高解像度(2倍)で撮影--filename test.png: ファイル名を指定--delay 3: 3秒遅延してから撮影
例えば、高解像度でページ全体を撮影したい場合:
:screenshot --fullpage --dpr 2スクリーンショットを撮る際の注意点
スクロールして表示されるコンテンツについて
最近のWebサイトでは、スクロールすると段階的にコンテンツが表示される仕組み(遅延読み込み)が使われていることがあります。
このようなサイトでいきなりページ全体のスクリーンショットを撮ると、まだ読み込まれていない部分が空白や読み込み中の状態で撮影されてしまいます。
対処法:
スクリーンショットを撮る前に、一度ページの最上部から最下部までスクロールして、すべてのコンテンツを表示させてから撮影してください。
非常に長いページの場合
縦に非常に長いページのスクリーンショットを撮ると、細長い画像が作成されます。
画像ビューアで開いたとき、全体が小さく表示されて見づらい場合があります。
必要に応じて、ページを複数の部分に分けて撮影するか、画像編集ソフトで見やすいサイズに調整することを検討してください。
ページによっては正しく撮影できない場合がある
ページの構造によっては、ページ全体のスクリーンショットが正しく撮影できないことがあります。
特に、固定ヘッダーやポップアップ、動的なコンテンツが含まれるページでは、期待通りの結果が得られない場合があります。
そのような場合は、表示範囲ごとに分けて撮影するか、拡張機能の利用を検討してください。
スクリーンショット機能をツールバーに追加する
頻繁にスクリーンショットを撮る場合、ツールバーにボタンを追加しておくと便利です。
- 右上のメニューボタン(三本線)をクリック
- 「その他のツール」→「ツールバーをカスタマイズ」を選択
- 表示される画面から「スクリーンショット」アイコン(はさみのマーク)を見つける
- アイコンをツールバーの好きな位置にドラッグ
- 「完了」をクリック
これでツールバーから直接スクリーンショット機能を呼び出せるようになります。
まとめ
Firefoxには拡張機能を追加しなくても、標準機能でページ全体のスクリーンショットを撮る方法が複数用意されています。
簡単な方法:
- 右クリックメニューから「スクリーンショットを撮影」
- ショートカットキー(Ctrl+Shift+S または Command+Shift+S)
連続撮影に便利な方法:
- 開発ツールのカメラアイコンを有効化
異なるデバイスサイズで撮影:
- レスポンシブデザインモードを使用
高度な設定が必要な場合:
- ウェブコンソールのコマンドを使用
用途に応じて最適な方法を選んで、効率的にスクリーンショットを撮影してください。
コメント