Google Chromeで1ページまるっとスクリーンショットを撮る方法


Google Chromeでスクリーンショットを撮るのは簡単です。

Windowsなら、キーボードの「Print Screen」を押せばいいですし、Macなら「Shift+Command+5」を同時に押せばいいのですから。キーボードのコマンドや画面上のオプションを駆使して、アクティブウィンドウだけを切り取れば、対象が何であれ、それをより簡単に撮影できます。

ですが、ウェブサイト全体、つまり画面にないものまで撮影するとなると、この方法は理想的ではありません。

フルページのスクリーンショットが撮れる拡張機能は、いくらでもあります。

そして、その多くが優れたものです(こうした機能を使うときに、わけのわからないレンダリングの問題はないと仮定した場合の話ですが)。

拡張機能なしでフルページのスクリーンショットを撮る


でも、ウェブページのスクリーンショットを撮るためには、実は拡張機能は必要ありません。Firefoxでのやり方はご紹介済みですが、今回はChromeでのやり方をお教えしましょう。

これを開発したのは Max Böck さんです。私は彼のサイトでこの方法に出会いました。

まず、Windowsならキーボードの「F12」、Macなら「Command+Option+i」を押して、Chromeのデベロッパーツールを開きます

それから、タブレットの前にスマートフォンが置いてあるような形の小さなアイコンをクリックして、デバイスモードを開きます。
Chromeのデベロッパーツールを開く
Image: David Murphy

あなたがブラウザで見ているページは、このようになります:

ビフォー
ブラウザで見ているページ:ビフォー
Image: David Murphy

アフター
ブラウザで見ているページ:アフター
Image: David Murphy

それから、プリセットされた「Responsive」が選択されていることを確認します。

私が試したときは、デフォルトで選択されていました。

そして、同じツールバーの一番右にある3つの点のアイコンをクリックします(先ほどクリックしたデバイスモードのアイコンのすぐ左です)。

「Add device pixel ratio」を選択して、表示されるDPRをデフォルトの2から3に変更します。

あとは、「Control/ Command+Shift+P」を押し、「Capture full size screenshot」と入力するだけです。

自動でPNGが作成される


そうすれば、Chromeは自動的にそのページの「.png」ファイルをうまく作成し、「ダウンロード」のフォルダーに入れてくれます。

スクリーンショットの表示を調整したい場合は、縦と横の寸法をピクセルで入力するか、デバイスモードのオプションの下にあるグレーのバーにマウスオーバーしてプリセットされた寸法を試すかして、サイズを変えてみましょう。
「laptop」モード
Image: David Murphy

私は「laptop」モードをよく使います。スクリーンの横が1440ピクセルとちょうど良く、アーカイブに保存しようとしているウェブサイトのスクリーンショットがきれいに撮れるのです。

Google Chrome関連Tipsをもっと読む>>

あわせて読みたい

Image: defmorph/ shutterstock , David Murphy

David Murphy - Lifehacker US[原文

当記事はライフハッカー[日本版]の提供記事です。

あなたにおすすめ

ランキング

もっとよむ

注目ニュース

もっとよむ

あなたにおすすめ