【Firefox】画面全体をフルスクリーンショット！有効にする方法と撮り方を解説

友達と飲みに出かけることになりました。みんなでどこのお店に行こうかと、色々なお店を比較検討したい！それぞれのお店の場所、メニュー、営業時間などの情報を調べると、詳しいWEBページはいろいろあります。

でも情報の場所はバラバラで、必要なのはホンの一部なのに、WEBページのリンクをたくさん貼っても、スマホで見るにはどうもめんどくさい。開いては戻りしているうちにみんな目がショボショボ(笑)してしまって、話が進まなくなることがあります。

そんな時スクリーンショットを使えば、それぞれのWEBページの情報をキャプチャーして一枚の「画像」にすることで、スマホやパソコンから簡単にメールやSNSで送ることができ、視覚的に共有できるので、情報誌を囲んで相談するときのように盛り上がります。
 

せっかくの飲み会、準備段階から楽しみたい。今回はそんなときに役立つテクニックのお話です。

一般的にスクリーンショットといえば、パソコンのショートカットキーの機能です。基本操作はこんな感じ。
 

• Ctrl + Printscreenのボタンを押す・・・・・・・Windows
• shift + command + 5 を押す・・・・・・・・・Mac

でもこの操作、ご存知のように、ディスプレイの全体のキャプチャーを撮る操作なので一部だけを選択することができません。

ですから、撮れた画像を使おうと思ったらデスクトップ上のごちゃごちゃが一緒にキャプチャーされてしまっていたり、大事な情報が画面に収まらず途切れてしまったり。

不要な部分をトリミングしたりつなげたりと、工夫しているうちに時間が経ってしまって、気がついたら余分な手間がかかっているなんてこともしばしば。

でも、Firefox 搭載のスクリーンショット機能を使えば、WEBページだけをキャプチャーでき、そのまま画像として保存されます。なんとアドオン不要で充分便利なスクリーンショットが搭載されているのです。

Firefoxでは、使いたいシーンに合わせて、4種類の方法でスクリーンショットを撮ることができます。何度も言いますが、アドオンのダウンロードは必要ありません。これさえ覚えておけば、ちょっとした連絡に、いつでも使い放題です。

では実際にみてみましょう。

レストランの地図や、定休日・営業時間の情報など、WEBページの中のほんの一部だけ、友達に伝えたい。
そんな時、この｢ページの一部だけキャプチャーする｣方法が使えます。
 

この方法でキャプチャーすることで、現在表示中のWebページの中で、見えている中の一部分だけをスクリーンショットできるのです。

あとでキャプチャーの方法の説明の中で画像を載せますが、スクリーンショットの画面ではマウスをぐるぐる動かすと、ポインター近くの要素が点線でハイライト表示されます。

スクリーンショットしたい情報が全部入った点線がある場合、これをクリックすると、その部分だけきちんと明るく表示され、キャプチャーすることが出来ます。

点線で囲われた中に、スクリーンショットしたい情報が全て入っておらず、二つ以上に分かれてしまう場合、マウスで必要な情報を囲むようにドラッグし、ハイライトさせることでスクリーンショットする範囲を選ぶことが出来ます。

「ここおいしそうだよね。」と伝えたいとき、WEBページから店名や地図だけでなくメニューの画像も入るようにスクリーンショットすると、共感を得やすくなります。そんなときにはページの範囲を設定してキャプチャーするこの方法がおすすめです。

オフラインで情報を見ながら作業したいときなど、Webページの情報全てをスクリーンショットしたいときもありますよね。

firefoxでは、｢ページ全体をスクリーンショット」のボタンを選ぶことで、Webページのスクロールできる範囲すべてを一枚のpng画像として保存することが出来ます。

PC本体の機能であるスクリーンショットでは絶対カバーできない、このフルスクリーンショット機能。
 

あとから読みたい、一度読んだけど何度も読み返したいあの文章も、誰かに教えたい面白いサイトも、玄人はだしのブロガーさんの参考にしたい作業工程ブログも、もう、何ページにも渡って印刷したり、何枚もスクリーンショットを撮ったりしなくていいんです。

ネットサーフィンあるある、「一生懸命読んでいる最中に指が触ってしまい、広告に飛んでしまう」なんてこともありません。

範囲選択するためのドラッグも不要、ボタンひとつでポンとフルスクリーンショットが撮れ、画面いっぱいに拡大しても許容範囲の解像度で保存してくれるこの機能は、初めて使う方には目からウロコ間違いなし。Firefoxすごいです。

これまで必要な情報をキャプチャーするためのスクリーンショットの種類を色々説明しましたが、急いでいるときなど、表示されているところにとりあえず情報があるからさくっとスクリーンショットを撮りたい、というときも多いと思います。

また、ディスプレイの大きさに合わせて、ぴったり表示されるようにと工夫して作られているサイトも多くあります。そういったときには表示されている部分をキャプチャーする方法がおすすめです。

ではここから、実際にどうやってスクリーンショットを撮るか説明します。とってもシンプルな作業ですので、ぜひマスターしてください。

ちょっとしたコツや、注意点もあります。確認していきましょう。

FirefoxはPC・スマホ両方に対応したブラウザーで、Windows・Mac・android・iosとさまざまなosに対応しています。それぞれのOS上で実際にスクリーンショット機能を撮っていきましょう。

WindowsでFirefoxを立ち上げると、上から順番に、メニュー、タグがあり、その下URLが表示される窓があります。その右側に、三つアイコンが並んでいるのがわかります。マウスを載せてみると解説が出てきますので参考にしてください。
 

• ☆は、このページをブックマークに追加します
• 五角形のポケット型のアイコンは、Pocketに保存
• …(三点リーダー）はページ操作、です。

スクリーンショットはこの一番左、…（三点リーダー）のアイコンから操作します。

クリックしたらメニューがあらわれましたね。ここでハサミの絵のスクリーンショットを撮るを選びます。（画面上で右クリック→スクリーンショットを撮るでも可）

すると、画面が暗転し、マウスを動かすと近くのアイテムをハイライトして表示します。これでスクリーンショットを撮りたいところで選択します。

ここで気をつけるべき注意点は。。。

各パーツを選んでいると、同じフレームでも2種類の形で選択できるところがあります。大きいほうを選んでおくとフレームの分の余白がついて見栄えが良くなりますが、使いやすいほうを選ぶと良いですね。
 
またクリックの時手がすべると他のフレームに切り替わってしまうことがあります。違う画像を保存してしまわないように、よく確認しながらおこなってください。

スクリーンショットを撮りたい範囲をハイライトさせた状態でクリックすると、その部分だけ反転して表示され下にアイコンが出てきます。
 

ここで注意点がひとつ。青く目立つアイコンは保存と書いてあるけれど、パソコンに保存されないんです。
 

下向き矢印が、PC本体に保存する｢ダウンロード」のアイコン。

隣のブルーの雲の「保存」と書かれたアイコンは、ネット上のFirefoxのクラウド（https://screenshots.firefox.com/shots）に一時的に保存する場合のアイコンです。今回は本体にダウンロードして保存してみます。

たったこれだけ。保存は各自の設定により、デフォルトなら一瞬で保存完了。場所を指定する設定の方は、名前をつけて保存のダイアログボックスが開きます。ではどこに保存されたでしょうか？

それを探すには画面右上、ダウンロードのアイコンが便利です。Firefoxで「ダウンロード」したものは、ここから探すことができます。

一番上が最新になるように表示されています。ファイル名をクリックすると、画像ファイルが開きます。

注意点：ダウンロードされたファイルがどこに保存されているかわからない方は、横のフォルダーのアイコンをクリックすると保存場所を開いてくれるので、確認しておくと良いでしょう。

Firefoxの初期設定では、パソコンのダウンロードフォルダーに保存されます。

タイトルも、自分で設定する必要がなく、自動で「スクリーンショット、撮影日、ページの名称、サイトの情報」が入った名称で保存されるため、元のWEBページをブックマークし忘れたときも、画像を頼りに元のサイトを探す手がかりがたくさんで、とても便利です。

WindowsとMacでは同じソフトが同じように動かないことが多いです。でもFirefoxは大丈夫。スクリーンショットの操作はWindowsと同じです。安心してトライしてみてください。

スクリーンショット便利だからスマホでも！と思ったあなた。ごめんなさい。スマホ版のFirefoxでは、アドオン不要のスクリーンショット機能は搭載されていないんです。

モバイル版Firefoxのうち、Android版では、アドオンを追加してカスタマイズできるので、機種が適合すればスクリーンショットのアドオンを追加することが可能です。使いやすいスクリーンショットがあるか、ぜひ探してみてください。

Firefoxのスクリーンショットにこだわらなくても、スマホ本体にもたいていスクリーンショット機能がついています。トリミング等必要になることもありますが、使ってみても良いかもしれませんね。

スクリーンショットをせっかく使うなら、ちょっと写真も入って、情報も入れて送りたい！そんなときに便利なのが、ページの範囲を手動で選択する方法です。

WEBページの情報を全部を送ったら情報量が多すぎてぼやけてしまう時、情報の必要な一部分だけ抜き出してスクリーンショットを撮りたい。という時にも重宝します。

では、方法を見て行きましょう。

Windows上で、Firefoxでページの範囲を選択してスクリーンショットを撮る方法です。最初はWEBページの一部を撮るのと同じ、…(三点リーダー)からスタートです。

右クリックでも出てきますが、メニューからスクリーンショットを撮るを選択します。

フレーム内が暗転したら、WEBページの一部を手動で選択します。撮りたい情報の角から、対角線にポインターをドラックしていき、手を離したところまでが選択されます。手を離しても何度でも調整できるので、安心して作業してくださいね。

ここで、下向き矢印のダウンロードアイコンを選ぶと、先ほど説明したように「PC本体に保存」ができますが、ブルーの「クラウドに保存する」ボタンを選択した場合を確認してみましょう。

クラウド上に保存した画像は、他のソフトを使わずにその場で編集でき、ちょっとした書き込みができます。編集するにはペンマークをクリックします。

細いペンでフリーハンドで囲み、文字を挿入してみました。挿入できる図形などはなく、フォントもそのままのため難しいことはできませんが、ちょっと伝えたいことがあるときは、この機能も便利です。

Firefoxのアカウントを取ってここにスクリーンショットを保存しておくと、家のPCと会社のPC、PCとスマホ、またはタブレットなど、などさまざまなデバイスからFirefoxアカウントにログインすることで、保存した画像にアクセスできるようになります。

｢PCで作ったスクリーンショットを、Lineで送りたい」なんてときに重宝します。

とても便利な機能ですが、注意点としては、保存期間が初期設定で14日間と短いので、気をつけなくてはならないということです。

おしゃべりのついでにちょっと加工して添付したいというときなど、本体に保存するまでも無いようなスクリーンショットをおいておくのには、本体の容量を圧迫せず便利かもしれません。

Firefoxのクラウドに保存したもののうち、必要な画像は保存期間内なら保存しなおすことができます。

しかし、最初に注意点として述べたように、うっかり保存期間の修正をするのを忘れて、保存期間を終えると画像が消えてアクセスできなくなってしまうので、取っておきたいスクリーンショットは忘れずに本体にダウンロードしておくのがおすすめです。

Windows版とMac版のFirefoxは機能が一緒なので、Macユーザーの方もWindowsのやり方を参考に試してみてくださいね。

Firefoxのスクリーンショット機能は、残念ながらモバイル版では標準装備ではありません。Firefoxモバイル版のダウンロードページによりますと、アドオンはありますが、Apple社のモバイルiosには対応しておらず、Android版のみで利用可能だそうです。

Android版のアドオンとして、わりと評価が高いアドオンは、「スクリーンショット・画像を指定フォルダに保存」（作成者: Firefox ユーザー 11706102）のようです。
 

Androidユーザーを名乗る方からの｢使えました｣というレビューも載っていましたが、Androidのバージョンがあわなかったのか、６インチの私のマイナースマホでは、エラーが出てしまい上手に撮影してくれませんでした。


こちらのアドオンは、PC版と同じように全画面も撮れるボタンがありました。上手に使いこないしてスマホでフルスクリーンショットを試してみてください。

WEBページの表示された部分だけをキャプチャーし、ボタンひとつで画像としてフォルダーに保存してくれる機能があります。とにかく急いでキャプチャーを撮りたいときには一番手数少なく、確実にスクリーンショットを撮れるのでおすすめです。

ただし、表示画面内に必要な情報がきちんと映りこんでいることが必要になります。そこだけ注意しながら、早速やり方を見ていきましょう。

まず、…（三点リーダー)をクリックし、スクリーンショットを撮るを選びます。

スクリーンショットを撮る画面になったら、その画面の右上に注目。

水色の選択範囲の表示のあるアイコンがあるのがわかるでしょうか。

そのうち、真ん中の「表示範囲を保存」を選ぶと、撮れたキャプチャーのプレビューと、三つのアイコン。ダウンロードを選べばあっという間に自動で名前をつけてくれて規定のダウンロード用ホルダーに保存されます。

注意点：つい保存フォルダーがわからなくなりがちですが、スクリーンショットされた画像ファイルは、「ページの一部分をスクリーンショットする」で紹介した、ダウンロードのアイコンのところからいつでもたどり着けますので、あわてずに。

Macでの操作は、他と同様Windowsと同じです。
 

ところで、MacOSとiOSって同じように見えて実は違うって知ってましたか？スマホやタブレットに使われるiOSは、MacOSに比べて機能は少ないけれど早く軽くなるように作られているんだそう。
 

同じものではないので、FirefoxもMacOSでは、スクリーンショット完備のものがダウンロードできますが、iOSではスマホ用のもので、さらにアドインを追加できないタイプのものしかダウンロードできないそうです。

あれ？MacbookはMacOSだろうけど、iMacは。。。ちょっぴり心配になって調べてみたら、iMacは、MacOS搭載だそう。安心してくださいね。

スマホ版Firefoxには現在のところスクリーンショット機能はありません。ですが、Android版だけ、スクリーンショットのアドオンをダウンロードすることで同じ機能を使うことが可能です。モバイル版も、標準装備になりアドオン不要になるといいですね！

なんだか調子が悪くて、Firefoxで調べ物をしながら、Firefoxの設定をしなくちゃならない。どうしても読んでおきたい記事がネット上にあるのに、これからオフライン環境になってしまう。

そんな時こそ、WEBページ全体を丸ごと保存することができるフルスクリーンショットの本領発揮です。アドオンも不要、高度なテクニックも不要。ボタンをいくつか押すだけです。

このWEBページもそうですが、ふだん目にするWEBページは上から下へスクロールで読んでいくタイプのものが多く、縦長の配置になっていることが多いですよね。PCで開いていてもディスプレーは横長なので、見えていない部分がとても多いことになります。

そんなWEBページ１ページ分全体を一発でスクリーンショットできる機能、上手に使えばこんなに便利なものはありません。では全体のキャプチャーの撮り方を説明します。コツや注意点も出てきますので、チェックしてください。

それでは、Firefoxフルスクリーンショットの説明をしていきます。基本は、表示されている部分だけを撮るやり方と同じ。ボタンが違うだけです。各OSごとのやり方を見ていきましょう。

まずは三点リーダーから、スクリーンショットを撮るを選びます。
次に、右上のアイコンからページ全体を保存を選びます。

その後保存先を指定します。注意点として述べましたが、青い保存ボタンは、クラウドに保存されるためPCに保存されません。オフラインで使用するためにPCに保存したい時は、白い下向き矢印を選ぶのを忘れないでくださいね。

Macでは、Windowsと同じ操作で、便利なフルスクリーンショットを撮ることができます。Macでもアドオン不要です。ぜひトライしてみてください。

レスポンシブデザインモードとは、WEBページが、スマホでどのように表示されるか見ることができるツールです。

開き方は、ツールからウエブ開発を選び、レスポンシブデザインモードを選びます。

上手に表示されない場合は、家のマークの左の丸い矢印をクリックし、再表示させるときちんと表示されます。

レスポンシブデザインモードでは、たくさん流通している中から人気の一部のスマホの種類を選ぶことができ、画面の大きさによって表示の代わり具合を確認することもできる優れものです。

では、表示されたスマホ版のサイトをスクリーンショットしてみましょう。

まずは三点リーダーから、スクリーンショットを選びます。

次に撮りたいスクリーンショットの種類を選びます

次に保存先を本体かクラウドか選びます。

簡単に撮ることができました。モバイル版のほうがシンプルなサイトもありますので、読みやすさを比較してこちらを選んでも良いかもしれません。

とても便利な、フルスクリーンショットですが、ちょっとしたコツが必要なWebページもあります。Firefoxの便利機能を上手に使うためのコツと注意点についてもチェックしておきましょう。

ページをスクロールしていくたびに、画像やパーツなどのコンテンツを表示していくWebページのシステムをスクロールエフェクト、といいます。

これは、ページの表示にかかる時間を短縮し、ネットサーフィンを快適にしてくれる技術ですが、スクリーンショットをとる場合、一部が表示されないまま、キャプチャーされてしまう場合があります。全体を綺麗にフルスクリーンショットを撮るにはどうしたらいいでしょうか。

スクロールエフェクトは、初回の表示に時間がかかるだけなので、まず一度、一番下までスクロールし、コンテンツをすべて表示させてからスクリーンショットを撮るようにすると成功することがあります。ぜひお試しください。

フルスクリーンショットを撮るとき、左右の余白が狭く感じることはありませんか？

ブラウザー画面を表示した中に、スクリーンショットのフレームが入ってくるためどうしても、｢ブラウザーで見たままの画像｣を取得するのが難しく感じることがあります。こういったときには、少しズームアウトしてみましょう。

ヘッダーやフッターのように、もともと左右の余白が少なく、見切れてしまう場合にも有効です。

WEBページ上には、ページを操作する上で必要な｢メニュー」や｢ボタン」、広告などスクリーンショットしたい情報以外のパーツが色々存在します。

ただあるだけならいいのですが、これらのパーツが必要な情報の上に乗って隠してしまい、読みにくくなってしまうこともしばしば。こういったパーツ、実は消すことができるのです。

スクリーンショットを撮る時、不要な要素が映りこんでしまうことがあります。この対処法の、まず初心者向けの方法は、｢リーダービュー」に切り替えられないかチェックすることです。
 

URLのフレームのところにレポート用紙か便箋のような四角いアイコンが出ていないでしょうか。

このボタンがあるページでリーダービューモードを使うと、WEBページから不要な要素を排除して読みやすく表示してくれます。フォントや背景色も変えられますので興味のある方はいじってみてください。

リーダービューモードで表示中は、レポート用紙型アイコンが青く光っています。

スクリーンショットは画像として落とし込むため、少しでも文字を大きく保存したいもの。そんな時、このリーダービュー機能はとても重宝しちゃいますよ。お試しください。

ただし、リーダービュー対応でないサイトもあるということも注意点として覚えておいてください。もしマークが見当たらなかった場合、次の開発ツールを使ったやり方で試してください。

もう少し上級者向けとして、ツール→WEB開発→開発ツールと選んでインスペクターを削除することでスクロールバーなど不要な要素を消す方法もあります。

「開発ツールを表示」を選ぶと下半分にプログラムのようなものができてきます。これがWebページの構成を見ることができる開発ツールです。アルファベットの並びが、色々なパーツのコマンドになっているのですが、奥が深いため割愛します。

アルファベットの羅列を読み解かなくても大丈夫。開発ツールのフレームの左上にあるマークをクリックし、不要なアイテムをクリックすると、そのアイテムを表示させているコマンドが反転します。コマンドを知らなくても感覚的に操作できる点が便利です。

反転したコマンド上で右クリックをするとメニューが出てくるので、

ノードの削除をクリックします。すると。。。

このようにして非表示にできます。プログラムを操作するような作業で、触れてよいのか不安になるかもしれませんが、この操作は｢見え方」を変えるだけで大元のWEBページに影響を与えるものではありませんので安心して操作してください。

同じ要領で広告などのパーツも消すことができますので、工夫して体裁の良いスクリーンショットを作ってください。

いかがでしたか？アドオン不要！高度なテクニックも不要でとっても便利なFirefoxのスクリーンショット。

WEBページの一部から、ページ全体のキャプチャーまで、用途によって色々選べ、いろんなところで大活躍しそうですね。ぜひ皆さんも試してみてくださいね。