【Mac・Win共通】WEBサイト全体のスクリーンショットを「アドオン無し」で簡単に撮る方法

2017年9月28日

WEBデザイナーやWEBディレクターなら、 WEBサイト全体のフルサイズスクリーンショットを撮る機会も多く、それをブラウザのアドオン（拡張機能）に頼っている人も多いのではないだろうか。しかし、実はアドオン（拡張機能）無しで、超簡単にサイト全体のフルサイズスクリーンショットを撮る方法がある！今回はその方法を解説します。

Macのスクリーンショットはお手軽！

ちなみにMacユーザーは、普通のスクリーンショットならとても簡単・便利に撮る事ができます。

shift + command + 3	画面を見たままのスクリーンショットがデスクトップに .png ファイルとして作成
shift + command + control + 3	画面を見たままのスクリーンショットをクリップボードに保存
shift + command + 4	画面の「選択した部分」のスクリーンショットを.png ファイルとしてデスクトップに作成
shift + command + control + 4	画面の「選択した部分」のスクリーンショットをクリップボードに保存

しかし今回の本題は「WEBサイト全体のスクリーンショット」をアドオン無しで撮る方法です。

スクリーンショットを撮る方法は、Chromeに新たに追加された機能！

「WEBサイト全体のスクリーンショット」を撮る方法は「Chromeのデベロッパーツール（検証）」を使います。

デベロッパーツールはMacなら「option + command + i」Windowsなら「F12」

まずはスクリーンショットを撮りたいWEBサイトを開いて、右クリックメニューの「検証」をクリックする。ショートカットを使う場合は、Macなら「option + command + i」Windowsなら「F12」で開きます。

デバイスツールバー(device toolbar)を開く

デベロッパーツールが開いたら、ツールバーの上部にある「device toolbar（デバイスツールバー）ボタン」を押します。

デベロッパーツールを使いこなしている人ならおなじみの機能ですが、スマホやタブレットなど各種端末での見ためを擬似的にチェックできるモードです。このモードにした状態でまずは、端末選択のプルダウンで「Responsive」を選択します。このResponsiveは画面サイズを自由に変えられるモードでPCサイズとスマホサイズなどを、画面を自由にリサイズしてチェックするモードです。

「Responsive」を選んだ上で、スクリーンショットを撮りたいサイズにウインドウ幅を広げた状態で、画面表示側の上部に「more option」ボタンを押すと、オプションが開きます。その中の「Capture full size screenshot」をクリックすると、（４〜５数秒かかりますが）WEBサイト全体のキャプチャが保存する事ができます。

ページ全体のスクリーンショットが、うまく撮れない場合

まれに「Capture full size screenshot」を押しても、うまく全体がキャプチャ出来ない場合がある。最近多い、画面をスクロールしたら要素がアニメーションして表示されるサイトなどに多い気がするのですが、その場合は、画面を一度最後まで自分で閲覧して、アニメーションをすべて完了させてから「Capture full size screenshot」を押してスクショをとるとうまくいく場合があるので、一度試して見て下さい。