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

5月17日(金)12時0分 lifehacker

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[原文]

lifehacker

「Google」をもっと詳しく

「Google」のニュース

トピックス

BIGLOBE
トップへ