下記の悩みを抱いてる方向けの記事
Chromeで画面全体のスクリーンショットを撮る方法が知りたい。
今回は上記の疑問について解説します。
Chromeで部分的にスクショする事もあればページ全体や画面全体をスクショしたい場面もあるかと思います。
私が普段ページ全体をスクショしている方法について本記事で解説していきたいと思います。
また、合わせてChromeの拡張機能を使用してスクショする方法もご紹介しますので、
ご自身に合った方法でスクショを行って見てください！
Contents
Chromeの拡張機能のついて
Chromeの拡張機能ってなに？ 拡張機能を入れる際の注意点とかあるの？
Chromeに拡張機能というものが存在しており、簡単にいうとブラウザーに便利機能を追加して作業効率を上げるようなツールの一種だよ！
へー！
拡張機能って便利そうだね。
Chromeに拡張機能を入れるとブラウザー内で便利機能が使える優れものです。
しかもほとんど無料で機能を追加できるのでおすすめです。
例えば広告の表示をブロックしたりだとか、ブラウザーをダークモードにできたりなどいろいろな機能がたくさんあります。
どんな拡張機能があるのか確認してみたい人はChromeウェブストアを覗いてみるといいかもしれません！
きっと、気になる拡張機能を見つけられると思います。
案外、みてるだけでも楽しいです！笑
マルウェアやアクセス権限に注意
便利な拡張機能ではありますが、追加する前に注意点がありますので以下を確認してから追加する事をおすすめします。
-
Googleが推奨するもの
-
大手のデベロッパーが開発しているツール
以上は信頼性が高い拡張機能です。
しかし、中にはマルウェアが仕込まれたものもや「パソコンと閲覧したウェブサイト上のすべてのデータ」や「閲覧したすべてのウェブサイト上のユーザーデータ」といった、ユーザーデータにまでアクセス権限をリクエストするツールは特に注意しましょう。
拡張機能を追加する前にはぜひ一度評判などを確かめて追加することをおすすめします。
Chromeで拡張機能なしで画面全体をスクリーンショットする方法
ここからはまず、Chromeの拡張機能を使用しないで画面全体をスクショする方法を解説していくよ！
結論、GoogleChromeの場合は、エンジニアがソースコード確認する際によく使用するデベロッパーツールがあります。
デベロッパーツールを使用することでウェブ全体をスクショする事が可能になります。
step
1ショートカットでデベロッパーツールを起動
Windowsのショートカットキー
Ctrl+ Shift + iを押す。
MacBookのショートカットキー
Command + Option + iを押す。
でデベロッパーツールを起動する。
step
2入力欄を出す
Windowsのショートカットキー
Ctrl + Shift + pを押す。
MacBookのショートカットキー
Command + Shift + pを押す。
で入力欄を出す。
step
3「フル」と入力すると、スクリーンショットの機能が表示
Enterを押すと自動的に保存される
step
4ウェブサイト全体の画像を確認
見事ウェブ全体がスクショされています。
以上が、デベロッパーツールを使用して画面をスクショする方法となります。
確かにデベロッパーツールを使用すれば、ページ全体をスクショできるのはわかったけどスクショするまでの手順が難しいよー。
もっと簡単な方法なないの？
もっと簡単にスクショする方法を今から紹介するよ！
Chromeのおすすめキャプチャ拡張機能２選
ここからは、いよいよ拡張機能を使用してスクショする方法を紹介していきます。
拡張機能は本当に便利なので、ぜひ使用してみてください！
Fireshot
「Fireshot」はブラウザに表示中のページや特定範囲のキャプチャのみでなく、スクロールが必要な長いページ全体をキャプチャし、切れ目のない1つの画像やPDFとして保存できるのが特徴です。
3種類のキャプチャ方法から選択することができるので用途に応じて使い分けることができます。
step
1ChromeストアーでFireshotを検索
Fireshotをクリックする
step
2Chromeに追加する
Chromeに追加をクリックする
step
3Fireshotを起動しスクショしたい種類を選択
スクショしたい種類を選択する
以上で画面のスクショができます！
Awesome Screenshot
「Awesome Screenshot」は様々な撮影方法が選べることが強みです。 Webページ全体はもちろん、セルフタイマー撮影、動画撮影が出来たりといろんな用途で撮影できます。
step
1ChromeストアーでAwesome Screenshotを検索
Awesome Screenshotをクリックする
step
2Chromeに追加する
Chromeに追加をクリックする
step
3Awesome Screenshotを起動する
Awesome Screenshotをクリックする
スクショの場合
動画撮影の場合
上記の画像のようにスクショと動画をそれぞれ選択する事ができます！
動画も撮影したいという方はこの拡張機能がおすすめです。
まとめ
今回は、MacBook/Windows｜Chromeで画面全体のスクリーンショットを撮る２つの方法を解説しました。
画面全体をスクショする方法は2つあり、デベロッパーツールを使用してスクショする方法とChromeの拡張機能を使用して画面をスクショする方法を紹介しました。
個人的には拡張機能を使用した方があっという間にスクショする事ができますし、スクショする範囲も選択が可能でとても便利な機能だと思います。
また、画像だけではなく動画にしたこともあるかと思うので、両方をその都度使い分ける事ができるのは拡張機能をメリットだと思います！
ぜひ、本記事を参考にして頂ければと思います。
では、今回はこの辺で。
