firefox-full-screen-capture-ecmg

ブログ

FirefoxでWEBページ全体をフルスクリーンショット!見ているページの全画面キャプチャー画像をダウンロードする方法

たった今見ている「WEBページ全体の画像」が欲しい。そんな時があります。

こんな画像。

full-screen-capture-00

ブラウザ拡張機能をインストールしたり、何かしらのソフトウェアを使うという手もあるでしょう。でも「WEBページ全体のスクリーンショットが欲しい」だけなら、FirefoxやGoogle Chromeのデフォルト機能で、スピーディーに、簡単に手に入れることができます

いつものブラウザ内で、

欲しいと思った瞬間に、

拡張機能なしで、

サクッと撮れる。

俯瞰した全体画像が欲しいシチュエーションで、すぐに使える方法を紹介します。

Chrome版キャプチャー方法

スポンサーリンク

Firefoxを使ったキャプチャー方法

full-screen-capture-ins1

デスクトップ、ラップトップ表示の画像

手順

【1】三点リーダーをクリック

【2】「スクリーンショットを撮る」→「ページ全体を保存」

【3】ダウンロードボタン

まずは任意のページを開き、アドレスバー横にある三点リーダーをクリック。「スクリーンショットを撮る」を選択します。

firefox-full-screen-capture-01

続いて「ページ全体を保存」をクリック。

firefox-full-screen-capture-02

完成画像のプレビューが表示されるので、ダウンロードボタンを選択。数秒で保存されます。

firefox-full-screen-capture-03

モバイル表示の画像

手順

【1】Win Ctrl+Shift+I / Mac command+option+I

【2】Win Ctrl+Shift+M / Mac command+shift+M

【3】任意のデバイスを選択

【4】三点リーダーをクリック

【5】「スクリーンショットを撮る」→「ページ全体を保存」

【6】ダウンロードボタン

まずは開発ツールを開きます。
Windowsなら「Ctrl+Shift+I」、Macなら「command+option+I」。

firefox-full-screen-capture-04

続いてモバイルマークをクリック。(上記手順【2】のようにショートカットキーでも可)

firefox-full-screen-capture-05

iPhoneなど任意のデバイスを選択します。

firefox-full-screen-capture-06

あとの工程は全く一緒。三点リーダーをクリックし、「スクリーンショットを撮る」を選択。

firefox-full-screen-capture-07

「ページ全体を保存」→プレビューを確認してダウンロードボタン。数秒で保存されます。

firefox-full-screen-capture-08

firefox-full-screen-capture-09

Firefoxでフルスクリーンショット機能を使う際のコツと注意点

full-screen-capture-ins2

スクロールエフェクトを実装しているページのキャプチャー

「スクロールするにつれてコンテンツが表示されるページ」では、そのままスクリーンショット機能を発動してもうまくいきません。

例えば画像の遅延読み込みを行うLazyload系のスクリプトを実装しているページでは、空白の部分や、読み込み中のスピナーなどがキャプチャーされてしまうのです。

firefox-full-screen-capture-10

その場合は、いったんページ最下部までスクロールし、すべてのコンテンツを表示させてからキャプチャーすると、うまくいくことが多いです。

「左右の余白」を調整するコツ

ラップトップなど画面の狭いデバイスでは基本的に、「左右の余白」が切り詰めて表示されています。Firefoxのフルスクリーンショット機能は優秀なため、「実際に見えているまま」の余白量で画像が生成されます。

firefox-full-screen-capture-11

用途によってはこれでもいいんですが、「デスクトップ表示のような、自然な余白」が欲しい場合もあるでしょう。そんな時は、あらかじめブラウザの表示をズームアウトしておきます。

firefox-full-screen-capture-12

Windowsなら「Ctrl」+「マウススクロール」、Macなら「command」+「-」。

この状態で再度キャプチャーすると・・・

firefox-full-screen-capture-13

デスクトップ表示のような、自然な余白が含まれました。ズームアウト具合は微調整する必要がありますが、ちょっと手間をかけるだけで、用途に適した素材を手に入れることができます。

デスクトップ表示の使用例

firefox-full-screen-capture-14afirefox-full-screen-capture-14bfirefox-full-screen-capture-14c

余白ぐらいなら、後で画像編集ソフトで追加できるんちゃう?

・・・と、最初は私も思っていました。たしかに今回の例では、ヘッダー部分はなんとかなりそうに見えます。しかしサイトレイアウトによっては簡単にいかないことも多いのです。

フッターのビフォア・アフターも見てみましょう。

【フッター】Before/After

firefox-full-screen-capture-15

firefox-full-screen-capture-16

フッターには、デスクトップ表示でも左右いっぱいに広がる部分がありました。このあたりの画像修正に時間をかけるくらいなら・・・やっぱりズームアウトしたほうがラクそうですよね。

なお、デバイスによっては「ディスプレイ自体の表示設定を変更する」という手もあります。

解像度を変更してスペースを拡大する

firefox-full-screen-capture-17

ブラウザでズームアウトしすぎると、一部の文字が潰れてしまったりすることがあります。

firefox-full-screen-capture-18

「ディスプレイ自体の表示変更」ができる場合はそちらがベター。より自然に仕上がります。

不要な要素の写り込みを排除する

出力された全体像の中に、「スクロールすると現れる要素」が写り込むことがあります。例えば今回の場合、「ページの先頭に戻る」ボタンが一緒にキャプチャーされてしまっています。

firefox-full-screen-capture-19

こういった場合、スクリーンショット機能を発動する前に、開発ツールで不要な要素を非表示にしておく必要があります。

まず、不要な要素を表示させた状態で開発ツールを開きます。

firefox-full-screen-capture-20

開発ツール内の左上にある「要素を選択」マークをクリック。

firefox-full-screen-capture-21

続いて非表示にしたい要素を直接クリックすると、「その要素を構成しているHTMLソース」が開発ツール内にハイライト表示されるので・・・

firefox-full-screen-capture-22

該当の部分を右クリック→「ノードを削除」を選択します。

firefox-full-screen-capture-23

firefox-full-screen-capture-24

不要な要素が非表示になりました。この状態でフルスクリーンショットを発動すればOKです。

開発ツールの操作やソースの構成要素など、詳細は割愛しています。

FirefoxとChromeのキャプチャー機能比較

full-screen-capture-ins3

Firefox

Firefoxでの作業はとにかく直感的です。ショートカットキーを忘れてもフルスクリーンショット機能にたどり着きやすい。

そして閲覧デバイスのディスプレイサイズのまま、「今見えている状態の余白感」を出力するのも分かりやすい。モバイル表示を比較的正確にキャプチャーしてくれるのも大きな強みです。

ただし場合によっては不要な要素が写り込んだり、パララックスエフェクトを実装したページなどをうまくキャプチャーできないことがあるので、その場合は都度対処が必要になります。

Google Chrome

一方Chromeの場合、ショートカットキーが使えるとはいえ、デベロッパーツールを立ち上げて機能検索をする必要があります。いくつかの手順を踏まないといけないため、慣れるまでは少々面倒に感じるかもしれません。

またラップトップ環境では左右の余白が切り詰められたりと、勘に頼りがちな調整が必要です。

Google Chrome版詳細

各ブラウザの強みを使い分ける

Chromeをメインブラウザとして利用している私は、【ラップトップ利用時に、デスクトップ表示のフルスクリーンショットが欲しい場合】だけ、Firefoxを利用しています。

ChromeとFirefox、どちらも頻繁にアップデートされるブラウザ。フルスクリーンショット機能ひとつにフォーカスしても、長所は変わっていくでしょう。なので・・・

どちらかをメインブラウザとして利用しているなら、まずは使い慣れたほうで試してみてください。シチュエーションに応じて使い分ければ、どちらも強い味方になってくれるはずです。

関連記事

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. Twitterのシェア数表示を復活!「widgetoon.js & count.…
  2. FirefoxでWEBページ全体をフルスクリーンショット!見ているページの全画面…
  3. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…
  4. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  5. ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方…

関連記事

  1. compress-jpeg-png-images-ecmg

    ワードプレス

    きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG ima…

    どうせ圧縮するなら、きれいにしっかり。WEBサイトに表示させる画像…

  2. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】WordPressのスライダーやサムネイル画像を綺麗に表示させる設…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

  3. tcd-theme-selection_ecmg-ps
  4. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!?20…

  5. browzer-extension_ec

    ワードプレス

    なんでも計測!”WEBサイズマスター”へ。Chrome拡張「Page Ruler Redux」「Vi…

    自分のWEBサイトの幅、知ってますか?今自分が見ているページの「あ…

  6. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. todoist-tips_ecmg
  2. tcd-mag_ecmg-ps
  3. todoist_ec
  4. display-speed_ec
  5. improvement-flow_ecmg
  6. adjust-the-button_ecmg

タスク管理で、自己管理。

todoist

人気記事

  1. screenpresso-initial-setting_ec
  2. child-theme_ecmg
  3. compress-jpeg-png-images-ecmg
  4. chrome-font_ecmg-1
  5. jpg-gif-png_ecmg
  6. todoist-basic_ec-ps

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. facebook-fast-display_ecmg
  2. chrome-full-screen-capture-ecmg
  3. original-share-button_ecmg-ps
  4. phrase-express_ecmg
  5. tcd-theme-options_ecmg
  6. widgetoon-js-count-jsoon_ecmg

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. pushbullet_ec
  2. todoist-design_ec
  3. screenpresso-capture-ecmg
  4. favicon-generator_ecmg
  5. theme-manual-update-ecmg
  6. screenpresso-initial-setting_ec

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. spark-tutorial-ecmg
  2. like-button-card_ecmg-ps
  3. sns-count-cache_ecmg2
  4. firefox-full-screen-capture-ecmg
  5. dash_ecmg
  6. facebook-page-plugin_ecmg-ps

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. theme-change_ecrt
  2. todoist_ec
  3. tcd-mag_ecmg-ps
  4. improvement-flow_ecmg
  5. tcd-theme-user-review_ecmg
  6. retina_ecmg

人気記事

  1. screenpresso-initial-setting_ec
  2. child-theme_ecmg
  3. child-theme-mechanism_ecmg-ps
  4. chrome-font_ecmg-1
  5. todoist-basic_ec-ps
  6. chrome-full-screen-capture-ecmg
  7. media-setting_ec

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
  2. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  3. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  4. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
  5. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
PAGE TOP