【Firefox】超簡単! Webページ全体のスクリーンショットを撮る方法

FirefoxでWebページ全体の スクリーンショットを撮る方法 マーケティング

WebマーケティングやWebデザイナー関連の仕事をされている方は、Webページ全体のスクリーンショットを撮りたいときが多いのではないでしょうか?

Firefoxなら簡単にWebページ全体のスクリーンショットを撮ることができます!
アドオンも必要ありません。

本記事でご紹介していきます。

Firefoxをダウンロードされていない方は以下ページよりダウンロードできます。

この記事で分かること

FirefoxでWebページ全体のスクリーンショットを撮る方法

スポンサーリンク

Firefoxでスクリーンショットを撮る方法

カメラ

FirefoxでWebページ全体のスクリーンショットを撮る方法を見ていきましょう。

デスクトップ表示とスマホ表示のスクリーンショットの撮り方をそれぞれご紹介します。

デスクトップ表示を撮る場合

手順は以下の通りです。

▼Mac・Windowsの場合

  1. アドレスバーの右にある「三点リーダー」をクリック
  2. 「スクリーンショットを撮る」をクリック
  3. 「ページ全体を保存」をクリックして「ダウンロード」を始める

まずスクリーンショットを撮りたいWebページに行き、手順1で「三点リーダー」をクリックしてください。

次に手順2で「スクリーンショットを撮る」をクリックします。

「三点リーダー」から「スクリーンショットを撮る」をクリックする
「スクリーンショットを撮る」をクリックする

スクリーンショットを撮る範囲を決める画面が表示されるので、「ページ全体を保存」をクリックしましょう。

「ページ全体を保存」をクリック
「ページ全体を保存」をクリックする

ダウンロードを始めるとWebページ全体のスクリーンショットを撮ることができます。

スマホ表示を撮る場合

基本的にデスクトップ表示を撮る場合と同じ手順を踏みます。
異なる点は、スクリーンショットを撮る前に「スマホ表示」に変更することです。

手順を以下に掲載します。

▼Macの場合

  1. command + option + I
  2. デスクトップ表示からスマホ表示に変更
  3. アドレスバーの右にある「三点リーダー」をクリック
  4. 「スクリーンショットを撮る」をクリック
  5. 「ページ全体を保存」をクリックして「ダウンロード」を始める

▼Windowsの場合

  1. Ctrl + Shift + I
  2. デスクトップ表示からスマホ表示に変更
  3. アドレスバーの右にある「三点リーダー」をクリック
  4. 「スクリーンショットを撮る」をクリック
  5. 「ページ全体を保存」をクリックして「ダウンロード」を始める

手順1で開発ツールを開きます。
以下のような画面が表示されていたら大丈夫です。

Firefox開発ツール
Firefoxの開発ツール画面

次に手順2でスマホ表示に変更させます。
開発ツールの右側にスマホのアイコンがあるのでクリックしてください。

Firefoxスマホ表示に変更
スマホのアイコンをクリックする

スマホ表示に変更ができたら、手順3〜手順5と進んでいただくとスマホ表示でWebページ全体のスクリーンショットを撮ることができます。


まとめ

FirefoxでWebページ全体のスクリーンショットを撮る方法をご紹介してきました。

スクリーンショットを撮るだけならChromeとかよりFirefoxの方が簡単です。
Firefoxは直感的に使うこともできるので、ぜひ試してみてください。

私はメインブラウザをChromeにしていますが、Firefoxも一緒に立ち上げておきスクリーンショットを撮る用に使用してます。


ビジカラス
ビジカラス

Firefoxを使ったことない方も多いのではないでしょうか?
まだダウンロードされていない方はこの機会にぜひ!

コメント