【Chromeのスクショ機能知ってる？】Googleクロムでページ全体のスクリーンショットを撮る方法

今見てるWEBページ全体のスクリーンショットが欲しいな アドオン機能以外でもスクショが撮れる方法ないのかな ちょっと撮ってスクロール、ちょっと撮ってスクロール、ちょっと撮っ… はぁ、めんどい

WEBブラウズをしていると、今見ている「ページ全体をスクショして画像保存したい」と思う時がありますよね。

縦長のページを一括で全体スクショするのにはいろいろな方法がありますが、意外と手間だったりするのでパッと済ませたい…

今日はそんな方に向けて、ブラウザのアドオン拡張機能をインストールしたり、ソフトウェアやウェブサービスを使わず、Google Chromeのデフォルト機能だけで超簡単かつ速攻でページ全体のスクリーンショットを撮る方法をご紹介します。

このやり方を覚えれば、僕のブログも下記の通り一発でフルスクリーンショットが撮れます。

スポンサードサーチ

フルスクリーンショットを撮るステップはたったの3つ

Google Chromeでページ全体のスクリーンショットを撮るには3ステップで完了します。

STEP1. デベロッパーツールを開く

まず、スクショを撮りたいページで「デベロッパーツール」を開きます。ページ内で①のショートカットキーを押してください。

すると下記のようなツールが立ち上がります。

STEP2. 詳細機能を呼び出す

デベロッパーツールが立ち上がったら詳細機能を呼び出します。ここで②のショートカットキーを押します。

すると右側のウィンドウがこのように変わるはずです。

STEP3. フルスクリーンショットを撮る

最後にフルスクリーンショットを撮って完了です。どこもクリックせず、この画面上で『full』と入力し、[Enterキー]（Macなら[returnキー]）を押すだけ。

ページ全体スクショ画像のダウンロードが始まりましたね。

おまけ. デベロッパーツールを閉じるときは

デベロッパーツールを閉じるときは、右上の[×マーク]をクリックするか、ショートカット①を押すだけ。

モバイルやタブレットのスクショを撮りたいときは

Chromeのデベロッパーツールを使うと、スマホやタブレットでページを開いた時の見え方も確認することができます。

やり方はとても簡単。

デベロッパーツールを開くと上に【Responsive】と書かれたところがあります。そこをクリックすると、いろいろな端末のリストが表示されるので、表示したいデバイスを選ぶだけ。

デバイスを選んだら、一度ページをリフレッシュ（更新）して完了です。更新のショートカットキーは下記の通り。

スポンサードサーチ

以上、最後までマウス操作なし・ショートカットキーのみで完了するフルスクリーンショットの撮り方でした。

初めのうちはショートカットキーを覚える必要がありますが、慣れてしまえば「パン・パン・パパパーン」てな感じで簡単にスクショが取れちゃいます。

デザインの参考にしたいサイトやページ全体をコピーしてブログなどに貼り付けたい時に参考にしていただければ幸いです。

それでは。