「Webページの画面をまるごと画像で保存したいのに、やり方がわからない…」そんな経験、ありませんか?
このブログでは昔、画面キャプチャができるFirefoxアドオン「Pearl Crescent Page Saver Basic」を紹介していました。当時は専用のアドオンを入れるのが定番だったんですよね。ところが時は流れ、2017年にFirefoxが「Quantum(57)」へと大きく生まれ変わったタイミングで、それまでの古いタイプのアドオンはごっそり使えなくなってしまいました。あのアドオンも、残念ながら今では入手できません。
「じゃあ今はどうすればいいの?」と困った方、ご安心を。実は朗報があります。今のFirefoxには、アドオンを入れなくても使える「スクリーンショット」機能が最初から組み込まれているんです。
WEB制作歴25年の私としては、正直これがめちゃくちゃ便利。わざわざ別のソフトを探さなくても、ページ全体でも見えている部分だけでも、思いどおりに画像として保存できます。
この記事では、Firefoxの標準スクリーンショット機能の使い方を、はじめての方にもわかるように一つずつ解説していきます。右クリックから撮る方法、キーボードショートカット、ページ全体をまるごと撮るコツ、保存先まで、順番にまとめます。一度わかってしまえば、どれも数秒で終わる操作ばかりです。
昔紹介したアドオンは今どうなった?
結論から書いておきます。この記事のもとになった「Pearl Crescent Page Saver Basic」をはじめ、当時人気だった画面キャプチャ系のアドオンは、現在のFirefoxではそのまま使えません。今から導入しようとしても、配布自体が止まっているので入手できないのが実情です。
理由はさきほど触れたとおり、2017年にリリースされたFirefox 57「Quantum」で、アドオンの仕組みが根本から作り直されたからです。それまでの古い形式のアドオンは互換性がなくなり、軒並み動かなくなってしまいました。実際に当時のリンク先(Firefox向けアドオン配布ページ)を開いてみても、今はページ自体が見つからない状態になっています。
「お気に入りだったアドオンが使えない…」とがっかりした方もいるかもしれませんが、悲しむのはまだ早いです。
というのも、当時アドオンでやっていた「画面キャプチャ」は、今ではFirefoxそのものができるようになりました。つまり、もうアドオンを探してインストールする手間がいらないんです。むしろ昔より手軽になった、と言ってもいいくらい。
関連記事:Firefox更新でアドオンが消える・使えない時の原因と対処法【初心者向け】
Firefox標準のスクリーンショット機能とは
現在のFirefoxには「スクリーンショット」という機能が標準で備わっています。Mozilla公式の説明によると、表示しているページの見えている部分はもちろん、ページ全体をまるごとキャプチャして、画像として保存したりコピーしたりできます。
追加のソフトもアドオンも一切いりません。Firefoxさえ入っていれば、その場ですぐに使えます。Windowsでも、Macでも、Linuxでも基本的な使い方は同じです。
撮った画像は、PNG形式の画像ファイルとして保存できるほか、クリップボードにコピーしてそのまま別の場所に貼り付けることもできます。
ブログ用の説明画像を用意したいとき、エラー画面を誰かに共有したいとき、気になったページを記録として残したいとき。地味ですが、出番はけっこう多い機能です。私も日々の作業でしょっちゅうお世話になっています。
では、具体的な撮り方を3つの場面に分けて紹介します。
参考: Mozilla公式サポート(Firefoxでスクリーンショットを撮る)
撮り方その1:右クリックメニューから撮る
いちばん覚えやすいのが、右クリックを使う方法です。手順はとってもシンプル。
キャプチャしたいページを開いたら、ページの空白部分(文字や画像のない場所)を右クリックして、出てきたメニューから「スクリーンショットを撮影」を選ぶだけです。
Macで右ボタンがない場合は、Controlキーを押しながらクリックすると同じメニューが開きます。
「スクリーンショットを撮影」を選ぶと、画面が少し暗くなって撮影モードに切り替わります。ここからは、撮りたい範囲を自分で決められます。やり方は次の章でくわしく説明しますね。
ちなみに、文字やリンクの上で右クリックすると別のメニューが出てしまうことがあります。うまくいかないときは、ページの余白部分を狙って右クリックしてみてください。
撮り方その2:キーボードショートカットで撮る
「右クリックすらめんどう」という方には、キーボードのショートカットがおすすめです。慣れると一瞬で撮影モードに入れます。
WindowsとLinuxは「Ctrl + Shift + S」、Macは「Command + Shift + S」を同時に押すと、すぐに撮影モードが立ち上がります。
キーを覚えるのが苦手でも大丈夫です。「S」は英語のScreenshot(スクリーンショット)のSだと結びつけておくと、覚えやすいと思います。
私がふだん使っているのは、もっぱらこのショートカットです。何枚も連続でキャプチャするときは、右クリックよりも手数が少なくて済みます。一度キーを覚えてしまえば、撮影モードに入るまでが速くなります。
右クリックでもショートカットでも、撮影モードに入ったあとの操作はまったく同じ。お好みの入り方を選んでください。
関連記事:Windows 11の便利なキーボードショートカット集!作業が一気に速くなる定番キー
撮り方その3:ページ全体や一部を選んで保存する
撮影モードに入ったら、いよいよ「どこを撮るか」を決めます。Firefoxではおもに3つの撮り方が選べます。
1つめは「好きな範囲だけを撮る」やり方。マウスでドラッグして四角く囲むと、その範囲だけをキャプチャできます。必要な部分だけを切り取りたいときにぴったりです。
2つめは「パーツ単位で撮る」やり方。撮影モード中にページの上でマウスを動かすと、画像やボックスといった部品ごとに自動でハイライトされます。そのままクリックすれば、その部分だけをきれいに撮れます。
3つめが、今回いちばんお伝えしたかった「ページ全体を撮る」やり方です。画面の右上に「ページ全体を保存」というボタンが出てくるので、これを押せば、スクロールしないと見えない下のほうまで含めて、ページをまるごと1枚の画像にできます。隣にある「表示範囲を保存」を選べば、いま見えている部分だけを撮れます。
かつてアドオンを入れて「ページ全体をキャプチャ」していた作業が、今やFirefoxの標準機能だけで完結します。別ソフトの導入もアップデート対応も不要になった分、手間は確実に減りました。
参考: Mozilla公式サポート(Firefoxでスクリーンショットを撮る)
撮ったあとは?保存とコピーの方法
範囲を選んだら、最後の仕上げです。画面に表示されるボタンから、保存かコピーを選びます。
画像ファイルとして残したいなら「ダウンロード」、すぐ別の場所に貼り付けたいなら「コピー」を選びましょう。
「ダウンロード」を押すと、PNG形式の画像ファイルとして保存されます。ファイル名は「Screenshot 年-月-日 at 時-分-秒 ページタイトル.png」のように、撮った日時とページ名が自動で付くので、あとから探すときも迷いません。保存先は、Firefoxがいつもダウンロードに使っているフォルダと同じ場所です。
一方「コピー」を選ぶと、画像がクリップボードに入ります。そのままメールやチャット、画像編集ソフトに貼り付けられるので、ファイルとして残す必要がないときはこちらが便利です。
キーボード操作なら、ダウンロードはWindows/Linuxで「Ctrl + S」、Macで「Command + S」。コピーはWindows/Linuxで「Ctrl + C」、Macで「Command + C」でも実行できます。
参考: Mozilla公式サポート(Firefoxでスクリーンショットを撮る)
まとめ:アドオン卒業、これからは標準機能でラクラク撮影
昔この記事で紹介していたアドオン「Pearl Crescent Page Saver Basic」は、今のFirefoxでは使えなくなっていました。長年愛用していた方には、ちょっぴり寂しいお知らせだったかもしれませんね。
でも結論としては、もうアドオンを探す必要はまったくありません。今のFirefoxには、ページ全体も一部も思いのまま撮れる「スクリーンショット」機能が、最初からしっかり用意されているからです。
おさらいすると、撮り方は右クリックメニューから「スクリーンショットを撮影」を選ぶか、「Ctrl + Shift + S」(Macは「Command + Shift + S」)のショートカットを押すだけ。あとは範囲をドラッグで選ぶか、部品をクリックするか、「ページ全体を保存」を押すかで撮りたいものを決めて、「ダウンロード」か「コピー」を選べば完了です。
慣れてしまえば、ほんの数秒で終わる作業です。まずは手元のページで一度試してみてください。右クリックかショートカットで撮影モードに入り、範囲を選んで保存する。この流れを一通りやってみれば、次からは説明を読み返さなくても撮れるようになります。
古いアドオンが使えなくなるのは寂しいものですが、その分の機能はブラウザ本体に取り込まれて、追加インストールなしで使えるようになりました。アドオンの更新切れに悩まされることもありません。新しくなった標準機能を、日々のWeb作業に役立ててもらえればと思います。