post-thumb

Chromeを使ってWebサイト全体のスクリーンショットを一発で撮る方法【1分でできる|スクショ|キャプチャ|Webデザイン|モックアップ|レスポンシブ】

  • 2022.06.28, Tue
  • 2022.06.28, Tue

こんにちは!めお(@meeowmiya)です。アメリカ在住8年目、フリーランスのイラストレーターをしています。

Webサイトの全体像の画像がほしいけど、やり方がわからなくて地道にスクロールしながらスクショして繋ぎ合わせている。効率的に画像を取得する方法はないかな?

本記事では、こういった疑問にお答えし、Chromeを使ってブラウザ全体のスクショをキャプチャする方法を紹介します。

このやり方はレスポンシブ対応ですので、スマホ・タブレットなど様々なデバイスで見たWebサイトのスクリーンショットも一発でキャプチャできます。

それでは詳しく見ていきましょう。

従来のやり方:スクロールしながらスクショをとって繋ぎ合わせる

Webサイト全体の画像が欲しいときのやり方として一番簡単に思いつくのは、次のような方法ではないかと思います。

  1. スクロールしながらブラウザのスクリーンショットを上から下までキャプチャする
  2. 後でつなぎ合わせる

image

これには次のようなデメリットがあります。

  • とにかく面倒くさい
  • 保存する画像が増え、ファイル管理が面倒
  • PhotoshopやCanvaなど、画像をつなぎ合わせるソフトウェアが別途必要

これからご紹介する方法は、Webサイト全体のスクリーンショットが1分以内に一枚の画像として保存できる方法です。

もちろん、つなぎ合わせなどの面倒な作業も不要です。

①Chromeブラウザを開き、スクショしたいWebサイトを開く

Chromeを開き、スクショしたいWebサイトにアクセスします。

image

②デベロッパーツールを開く

Webサイトにアクセスした状態で、デベロッパーツールを開きます。 やり方は3通りあります。

1. Webサイト上で右クリックする

画面上を右クリックし、検証をクリック image

2. Chromeメニューを使う

画面右上のからその他のツールデベロッパーツールをクリック image

3. ショートカットを使う

Chromeを開いた状態で、キーボードで次の組み合わせを同時に押します。

WindowsまたはLinux Ctrl + Shift + I または F12

Mac Cmd + Opt + J または Fn + 🔊 (音量大)

③タブレット、スマホ表示にする

デスクトップのスクショを撮影したい場合はこの工程はスキップしてください。

デベロッパーツールを開いた状態で、Webサイトをスマホまたはタブレット表示にします。 やり方は2通りあります。

1. ショートカットから

キーボードで次の組み合わせを同時に押します。

WindowsまたはLinux Ctrl + Shift + M

Mac Cmd + Shift + M

2. ボタンから

デベロッパーツール左上のデバイスボタンをクリック image

デバイスを選択

👇の画面が表示されたら、サイズ:レスポンシブから表示デバイスを選択します。 image

④Webサイト全体をスクリーンショット

キーボードで次の組み合わせを同時に押し、コマンドを開きます。 image

WindowsまたはLinux Ctrl + Shift + P

Mac Cmd + Shift + P

スクリーンショットで検索し、フルサイズのスクリーンショットをキャプチャを選択 image

スクリーンショットがダウンロードされます。 image

まとめ

以上「Chromeを使ってWebサイト全体のスクリーンショットを一発で撮る方法」でした!

「役に立った」と思っていただけたら、シェアいただけますと幸いです。ブログやWEBサイトなどでのご紹介もとても嬉しいです!

あわせて読みたい