chrome-full-screen-capture-ecmg

ブログ

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

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

こんな画像。

full-screen-capture-00

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

いつものブラウザ内で、

欲しいと思った瞬間に、

拡張機能なしで、

サクッと撮れる。

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

Firefox版キャプチャー方法

スポンサーリンク

Google Chromeを使ったキャプチャー方法

full-screen-capture-ins1

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

手順

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

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

【3】Win「full」→Enter / Mac「full」→return

まずは任意のページでデベロッパーツールを開きます。
Windowsなら「Ctrl+Shift+I」、Macなら「command+option+I」。

chrome-full-screen-capture-01

続いて詳細機能を呼び出します。
Windowsなら「Ctrl+Shift+P」、Macなら「command+shift+P」。

chrome-full-screen-capture-02

そのまま「full」と入力すると候補が絞られ、フルスクリーンショット機能だけが表示されるので、そのままEnter(return)。数秒で保存されます。

chrome-full-screen-capture-03

chrome-full-screen-capture-04

※実際には黒背景は付きません。

モバイル表示の画像

手順

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

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

【3】任意のデバイスを選択→ページを更新

【4】Win Ctrl+Shift+P / Mac command+shift+P

【5】Win「full」→Enter / Mac「full」→return

同じようにデベロッパーツールを開いた状態で、モバイルマークをクリック。(上記手順のようにショートカットキーでも可)

chrome-full-screen-capture-05

iPhoneなど任意のデバイスを選択した上で、いったんリフレッシュ(ページを更新)します。

chrome-full-screen-capture-06

あとの工程は全く一緒。
ショートカットキーで詳細機能を呼び出し、「full」と入力してEnter。数秒で保存されます。

chrome-full-screen-capture-07

chrome-full-screen-capture-08

※実際には黒背景は付きません。

「パソコン表示の名残り」が残っていることがあるため、一度ページ更新をかけています。
Chromeのスマホ版フルスクリーンショットは現状、正確性に欠ける場合があります。

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

full-screen-capture-ins2

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

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

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

chrome-full-screen-capture-09

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

「左右の余白」を含めるコツ

ラップトップなど画面の狭いデバイスでは基本的に、「左右の余白」が切り詰めて表示されています。Chromeの場合、その状態でフルスクリーンショット機能を使うと、さらに左右の余白がカットされた状態で画像が生成されます。

chrome-full-screen-capture-10

用途によってはこれでもいいんですが、もう少しリアリティーが欲しい場合もあるでしょう。そんな時は、あらかじめブラウザの表示をズームアウトしておきます。

chrome-full-screen-capture-11

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

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

chrome-full-screen-capture-12

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

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

chrome-full-screen-capture-13 chrome-full-screen-capture-13b chrome-full-screen-capture-13c

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

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

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

【フッター】Before/After

chrome-full-screen-capture-14

chrome-full-screen-capture-15

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

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

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

chrome-full-screen-capture-16

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

chrome-full-screen-capture-16.5

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

機能名の呼び出しを効率化

頻繁にこの”フルスクリーンショット機能”を利用する場合は、スニペットツールなどに「Capture full size screenshot」と丸々、登録しておくと便利かもしれません。

現状は「full」と入力するだけですぐに呼び出せますが、今後のアップデートによってデベロッパーツール内の機能が拡張されることもあるでしょう。すると「full」でサジェストされる選択肢が増える可能性があります。その場合の対策にもなるはずです。
(機能名自体が変わる可能性もありますが・・・)

スニペットツール

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

full-screen-capture-ins3

Google Chrome

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

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

Firefox

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

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

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

Firefox版詳細

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

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

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

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

関連記事

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  2. 【基本編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…
  4. 【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「…
  5. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…

関連記事

  1. firefox-full-screen-capture-ecmg

    ブログ

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

    上から下までの、全体像をゲット。たった今見ている「WEBページ全体…

  2. meta-seo-inspector_ecmg

    マーケティング

    基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO…

    せっかく設定したなら、チェックしよう。メタタイトル、メタディスクリ…

  3. tcd-theme-widget_ecmg

    ワードプレス

    サイトを彩る直感設定。WordPressテーマTCD「オリジナルウィジェット」の効果的な使い方

    本格レイアウトの「キモ」。WEBサイトのレイアウトって、メインカラ…

  4. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  5. annotation-image-ecmg

    ワードプレス

    ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文字を追加しよう

    注釈画像も、自由自在。前回までの記事では、Windows用の万能ツ…

  6. valuable-content-from-image_ec

    ワードプレス

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

    記事を見栄えよく、伝わりやすく。ブログ記事を書き始めると、分からな…

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

特集記事

  1. tcd-theme-user-review_ecmg
  2. todoist-tips_ecmg
  3. improvement-flow_ecmg
  4. valuable-content-from-image_ec
  5. adjust-the-button_ecmg
  6. theme-change_ecrt

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

todoist

ピックアップ記事

  1. dash_ecmg
  2. simple-image-sizes_ec-ps
  3. chrome-full-screen-capture-ecmg
  4. widgetoon-js-count-jsoon_ecmg
  5. todoist-class_ecrt
  6. sns-count-cache_ecmg2

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

tcd-mag

掘り出し記事

  1. retina-text-widget-ecmg
  2. todoist-design_ec
  3. facebook-app-id-app-secret-ecmg2
  4. mergely-ecmg
  5. mailbox-goodbye-newapp_ec
  6. meta-seo-inspector_ecmg

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

retina-os-solution

ピックアップ記事

  1. widgetoon-js-count-jsoon_ecmg
  2. todoist-productivity_ecmg
  3. jpg-gif-png_ecmg
  4. tcd-theme-options_ecmg
  5. blog-theme-mag_ecmg-ps
  6. todoist-constitution_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. intuitive-custom-post-order_ec
  2. chrome-font_ecmg
  3. gif-animation_ec
  4. original-share-button_ecmg-ps
  5. tcd-css-customize_ecmg
  6. customized-theme-update_ecmg-1-ps

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. improvement-flow_ecmg
  2. tcd-mag_ecmg-ps
  3. adjust-the-button_ecmg
  4. valuable-content-from-image_ec
  5. todoist-extension_ecmg
  6. tcd-theme-selection_ecmg-ps

ピックアップ記事

  1. chrome-font_ecmg
  2. like-button-card_ecmg-ps
  3. todoist-constitution_ec
  4. unroll-me_ec
  5. child-theme_ecmg
  6. blog-theme-mag_ecmg-ps

最近の記事

  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. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  3. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  4. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  5. improvement-flow_ecmg

    マネジメント

    ”セルフマネジメント”の第一歩。忙しくても頭と心は軽くしておく、自己管理術と生活…
PAGE TOP