必見の記事

スクリーンショットを撮るのはChromeがいちばん?!

2017.07.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

新しい職場、新しいパソコン。まず始めに入れるツールの一つがスクリーンショットではないでしょうか。

でも、Chromeのver.59からは、標準機能として装備されたようなのです。

やりかた

ChromeのDevelopers Toolを立ち上げる。

Macだと、Chromeを開き「alt + command + i」を同時に押す。

レスポンシブ表示にする

続いて、command + shift + m を押します。または、下記のボタンを押してください。

レスポンシブボタンを押す

画面上部に、解像度やデバイスを変更するセレクトボックスが表示されます。

デバイスの選択肢を増やす

必要最低限はありますが、PCのスクリーンショットも取れるようにしたいので、Editを押します。

標準で選べるのはこれだけ

デベロッパーツールの表示が切り替わるので、「Laptop with HiDPI Screen」と「Laptop with MDPI Screen」をチェックして閉じます。

スクリーンショット 2017-07-19 20.22.47

スクリーンショット 2017-07-19 20.22.57

画面上部のセレクトボックスに選択した2つが追加されました。

スクリーンショット 2017-07-19 20.23.34

追加されました!

改めて「Laptop with」を選びます。
(切り替えると自動的に、「25%」や「30%」になってしまいます。このままでも撮れますが、気になる方は「100%」にしてください。)

スクリーンショット 2017-07-19 20.24.25

表示されてるところだけ撮りたい

右端にある「メニュー」・・・を押して 「Capture Screenshot」をクリックします。

スクリーンショット 2017-07-19 20.24.35

シームレスにダウンロードされます。
早い!!! でも、すごいのはフルサイズ!

ページ全体をキャプチャしたい

同じく、右端にある「メニュー」・・・を押して 「Capture full size Screenshot」をクリックします。

スクリーンショット 2017-07-19 20.24.56

画面がスクロールされることなく、シームレスに画像がダウンロードフォルダに保存されるのがとてもいいです。
おかげで、スクロールバーも映らないし、スマホはもちろん、上部に固定表示しているようなサイトもキレイに撮れると思います。

しかも、3〜8秒で終わるんです。今までのと比較すると、2~3倍かかったり、保存できなかったりしたので、これは嬉しい!

スクリーンショット 2017-07-21 17.16.39

ねー、chromeだとスッキリ!!

追記:PCのキャプチャをもっと簡単に取れる方法がありました。

Macの場合、Cmd + Alt + i を押して、開発ツールを出すところまでは一緒。

このあと、 Cmd + Shift + p (Win/LinuxだとCtrl+Shift+P) を押すと、クイックメニューのようなものが表示されるので、「cap・・・」と入力する。

ショートカットメニューにcapと入力する

Mobile Capture Full Size Screen を選択して、少し待つとPCのフルスクリーンがダウンロードされます(ง `ω´)ง

(ちなみに、クイックメニューで、 Appearance Switch to dark theme を選べば、画像のように黒くできます。他にもキャッシュクリアなど、便利なものが揃ってるので、試してみてください。)