コロナの一件で、改めて”自分で稼ぐスキル”の大切さを実感しました。

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

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

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

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

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

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

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

 

fullpage screenshot

 

スポンサードサーチ

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

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

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

Windowsの場合
① [Ctrl] + [Shift] + [I] ② [Ctrl] + [Shift] + [P] ③  『full』→  [Enter]
Macの場合
①  [command] + [option] + [I] ②  [command] + [shift] + [P] ③   『full』→ [return]

 

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

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

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

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

 

STEP2. 詳細機能を呼び出す

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

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

STEP2. 詳細機能を呼び出す

 

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

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

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

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

 

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

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

 

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

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

やり方はとても簡単。

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

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

【Windows】 [F5]  /  [Shift] + [F5] 【Mac】 [command] + [R]

 

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

 

 

スポンサードサーチ

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

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

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

それでは。