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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

自動でPNGが作成される

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

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

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

2019-05-17 00:03:35