【Chrome】Webページ全体のスクリーンショットを撮る方法!

ChromeでWebページ全体の スクリーンショットを撮る方法 マーケティング

ChromeでWebページ全体のスクリーンショットを撮る方法をご紹介します。
拡張機能を使わない方法なので、拡張機能を追加することに抵抗のある方もご安心ください。

WebマーケティングやWebデザイナー関連の仕事をされている方は、Webページ全体のスクリーンショットを撮りたいときが多々あると思います。
そんな方のお力になれたら幸いです!

この記事で分かること

  • Chromeで拡張機能なしでWebページ全体のスクリーンショットを撮る方法
  • スクリーンショットのオススメ拡張機能3選
スポンサーリンク

(拡張機能なし)Chromeでスクリーンショットを撮る方法

カメラ

拡張機能を使わずにWebページ全体のスクリーンショットを撮る方法をご紹介します。

デスクトップ表示とスマホ表示でスクリーンショットの撮り方が少々異なるので、該当する箇所をご覧ください。

デスクトップ表示を撮る場合

手順は以下の通りです。

▼Macの場合

  1. command + option + I
  2. command + shift + P
  3. 「full」と打ち込み「Capture full size screenshot」をクリック

▼Windowsの場合

  1. 「Ctrl + Shift + I」または「F12」
  2. Ctrl + Shift + P
  3. 「full」と打ち込み「Capture full size screenshot」をクリック

手順1でデベロッパーツールが開きます。
以下のような画面が表示されていたら大丈夫です。

デベロッパーツール画面
デベロッパーツール

次に手順2に進むと、以下のような候補一覧が表示されると思います。

デベロッパーツールの候補一覧
候補一覧

最後に手順3に進みましょう。
候補一覧の検索窓に「full」と打ち込むと「Capture full size screenshot」が表示されるので、クリックするとWebページ全体のスクリーンショットを撮ることができます。

Capture full size screenshot
「Capture full size screenshot」をクリック


スマホ表示を撮る場合

基本的にデスクトップ表示を撮る場合と同じ手順を踏みます。
異なる点は、スクリーンショットを撮る前に「スマホ表示」に変更することです。

手順を以下に掲載します。

▼Macの場合

  1. command + option + I
  2. command + shift + M
  3. command + shift + P
  4. 「full」と打ち込み「Capture full size screenshot」をクリック

▼Windowsの場合

  1. 「Ctrl + Shift + I」または「F12」
  2. Ctrl + Shift + M
  3. Ctrl + Shift + P
  4. 「full」と打ち込み「Capture full size screenshot」をクリック

手順1でデベロッパーツールを開きます。

次に手順2でデスクトップ表示からスマホ表示に切り替えます。
以下の赤枠箇所をクリックすることでもスマホ表示に切り替え可能です。

デスクトップ表示からスマホ表示に切り替える
デスクトップ表示からスマホ表示に切り替える

スマホ表示に切り替えができたら、手順3と手順4に進んでいただくとスマホ表示でWebページ全体のスクリーンショットを撮ることができます。

スポンサーリンク



念のため、スクリーンショットの拡張機能もご紹介

ここまで拡張機能を使わずにChromeでWebページ全体のスクリーンショットを撮る方法をご紹介してきました。

とはいえ、「拡張機能も知りたい!」という方もいると思いますので、スクリーンショットを撮るChromeの拡張機能もご紹介します。

オススメの拡張機能を3つ載せてありますので、活用してください!

FireShot

▼FireShotの特徴

  • 無料で使える
  • 「Webページ全体」や「特定の部分のみ」などスクリーンショットを撮る範囲を選べる
  • 保存形式をpdfとしても保存可能
  • 撮ったスクリーンショットの編集、注釈も可能


Full Page Screen Capture

▼Full Page Screen Captureの特徴

  • 無料で使える
  • ワンクリックでWebページ全体のスクリーンショットを撮れる
  • Webページ全体を撮る頻度が多い人にオススメ


Awesome Screenshot

▼Awesome Screenshotの特徴

  • 無料で使える
  • 撮ったスクリーンショットの編集を楽にできる
  • スクリーンショットを編集したり注釈つけたりする頻度が多い人にオススメ



まとめ

Webページ全体のスクリーンショットを撮る作業がスムーズになると、仕事の効率も上がります。
本記事でご紹介した方法をぜひ試してみてください!

またWebページ全体のスクリーンショットを撮るだけなら、ChromeよりFirefoxの方が簡単です。
よかったら以下の記事もご覧ください。



ビジカラス
ビジカラス

拡張機能を使わずにWebページ全体のスクリーンショットを撮れることを知らなかった人も多いと思います。
私もそうでした。
ブラウザ一つとっても、まだまだ活用できてない点が多いなと感じています。

コメント