chromeの画面をスクリーンショットしたい

Chromeでサイトを閲覧している時に、「メモの代わりにスクリーンショット(スクショ)したい」「サイトをまるごと画像で保存したい」と思ったことはありませんか?
サイトの記事などをスクショして画像保存することで、オフライン環境でいつでも閲覧することが可能になります。
また画像保存しておけば、もしそのサイトが消えてしまってもログの代わりになるため便利です。
chromeの画面をスクリーンショットする方法
それではchromeの画面をスクリーンショットする方法をご紹介していきます。
WindowsやMacのOSのスクリーンショット機能を使う

WindowsでChromeのスクショを撮りたい場合は、キーボードの「Altキー + Prt Scキー(プリントスクリーンキー)」を同時押ししましょう。
これでクリップボードにスクショが登録されるので、ペイントなどの画像編集ツールを開いてから貼り付けて保存すればOKです。
Prt Scキーのみだとデスクトップの画面全体をスクショしてしまうので注意しましょう。今回Windowsでのスクショについてご紹介しましたが、Macのスクショについては下記の記事を参考にしてみて下さい。
Chromeのデベロッパーツールを使う

Chromeの開発者向けツールであるデベロッパーツールを使うと、ページ全体のスクショを撮ることができます。
スクショを撮りたいページに移動したら、キーボードの「F12キー」を押すか、右クリックメニューの「検証」をクリックすると、画面の右側にデベロッパーツールが表示されます。
※Macでは「Command + Option + I」のショートカットで起動

「Ctrlキー + Shiftキー + Pキー」を同時押しするとパネルメニューが表示されるので、画面上部の検索フォームに「cap」と入力して検索しましょう。

紫色の項目「Mobile」の「Capture full size screenshot」をクリックすると、ページ全体をキャプチャした画像がダウンロードされます。
Chromeのデベロッパーツールを使う(レスポンシブ表示版)

デベロッパーツールを起動したら、画面上部のスマホアイコンか「Ctrlキー + Shiftキー + Mキー」を同時押ししてみましょう。

サイトがレスポンシブ表示(PC・タブレット・スマホなど、使っているデバイスに合わせたサイトデザイン)に切り替わります。

ちなみにこれがスマホ版の同じサイトです。
スマホで見てみるとやはり違いはありますが、環境設定次第で近い表示に変更することも可能です。

画面上部の「Responsive」ボタンをクリックすると、他のデバイスで表示した場合のサイズを選択することができます。
「Edit」から他の端末を追加することも可能です。

サイズを選択したら、右上に表示されているメニューボタンをクリックして表示されるメニューの「Capture full size screenshot」をクリックするとページ全体のキャプチャがダウンロードされます。
Chromeに表示している部分だけをスクショしたい場合は「Capture screenshot」をクリックすればOKです。
拡張機能を使う

Chromeの拡張機能(アドオン)の中には、スクショを撮るのに便利なものが存在しています。
頻繁にページのスクショを撮る場合は拡張機能を導入すると便利ですよ。
chromeの画面をスクショする
- WindowsやMacなどOSのスクショ機能でスクショする
- デベロッパーツールのスクショ機能でスクショする
- chromeの拡張機能を使ってスクショする
次にchromeの拡張機能を使ったスクショをご紹介していきます。
chromeの画面をスクショする拡張機能まとめ
拡張機能を使ってスクショが撮れるといっても色々な拡張機能があるため、どれを使えばいいか困ってしまう人もいると思います。ですので、今回Chromeの画面をスクショできる便利な拡張機能を10選ご紹介します。
Webページの写真

レトロな感じのデザインが特徴なのが「Webページの写真」です。ページ全体のスクショを撮影してフォトギャラリーにまとめることができます。

スクショを取りたいページで拡張機能アイコンをクリックすると画像のようにカメラを構えたおじさんのメニューが表示されるので、「写真を作ります」をクリックすればページ全体をキャプチャして保存してくれます。
「歴史」ボタンからフォトギャラリーに移動し、そこから保存したスクショを閲覧することができます。保存したスクショはオフラインでも確認できますよ。
Awesome Screenshot: キャプチャーと注釈

スクショ機能の他に画像加工機能を備えているのが「Awesome Screenshot」です。
スクショしたもののみならず、パソコンに保存されている画像も加工することが可能となっています。

拡張機能アイコンをクリックし、「Capture visible part of page」でブラウザに写っている範囲をスクショ、「Capture selected area」で選択範囲をスクショ、「Capture entire page」でページ全体をスクショすることができます。
また、「Select a local image」からパソコン内の画像編集が行えます。

スクショ後、このように編集画面に移動し、文字や線を画像に記入したり画像をぼかすなどの加工ができるようになっています。
ウェブページ全体をスクリーンショット - Fireshot

「Fireshot」は、PNG・JPEG形式でページのスクショを撮ることができる拡張機能です。
プラグインを追加でインストールすることで、PDF形式でページを保存したり、OneNoteに送る・印刷・クリップボードにコピー・メールで送信するなどの豊富な機能を使用することができます。

デフォルトでは「ページ全体をキャプチャ」「表示部分をキャプチャ」「選択範囲をキャプチャ」の3つの機能しか使用できないのですが、プラグインを別途インストールすることで上記で紹介した他の機能も使用できるようになります。
多機能キャプチャソフトのように使うことができて便利です。
Evernote Web Clipper

メモ帳機能で有名なEvernoteのキャプチャソフトです。
利用するにはGoogleアカウントかEvernoteアカウントが必要ですが、キャプチャが独特かつ便利で編集も楽に行うことができます。

拡張機能アイコンをクリックしてアカウントにログインしてから、スクショを撮りたいページでもう一度拡張機能アイコンをクリックしてみましょう。
サイトの情報を読み込み、ニュースサイトなら「記事のみをスクショ」するといったことが可能で、無駄なくスクショできるのが嬉しいですね。
Full Page Screen Capture

「Full Page Screen Capture」は、ページ全体のスクショを撮影することのできる拡張機能です。
ページ全体のスクショ撮影のみのシンプルな作りですが、そのぶん簡単に扱うことができます。

スクショを撮りたいページで拡張機能アイコンをクリックすれば、すぐにページ全体のスクショ撮影が行われます。

上記で説明した拡張機能「Webページの写真」のようにフォトギャラリー機能を備えており、オフラインでも保存したスクショの閲覧が可能となっています。
Lightshot (screenshot tool)

「Lightshot」は範囲指定形のキャプチャソフトで、範囲を指定してすぐに画像編集を行うことが可能です。

拡張機能ボタンをクリックするとキャプチャ範囲を指定することができ、範囲選択後に右下に編集メニューが表示されて線や文字を入力することが可能です。
編集した画像は保存の他にクラウドやTwitterなどのSNSにアップロードすることができます。
Nimbus Screenshot & Screen Video Recorder

「Nimbus Screenshot & Screen Video Recorder」は高機能のキャプチャソフトで、タイトルに「Screen Video Recorder」と書かれてある通り、動画の録画までこなすことのできる拡張機能です。

スクショを撮りたいページで拡張機能ボタンをクリックして、メニューからスクショの形式やブラウザの録画などを選択することができます。

「編集を有効にする」状態になっていれば、スクショ後に画像の編集画面に移ります。文字や線の挿入だけでなく、画像の拡大縮小や回転なども可能と幅広い編集が行えます。
Screenshot Webpages

「Screenshot Webpages」は、クラウドにスクショを保存できる拡張機能です。
スクショとペンツールのみの編集機能が備わっているシンプルなツールです。

拡張機能ボタンをクリックし、画面に写っている範囲のみを撮影する「Screenshot Visible Area」、選択範囲を撮影する「Select an Area to Screenshot」、ページ全体を撮影する「Screenshot Entire Page」の3つの方法からスクショを撮影します。

撮影したスクショにはペンツールでの加工が行えます。
「SHARE SCREENSHOT」を選ぶことでクラウドにアップロードし、他のユーザーにもスクショを見せることができます。
qSnap

複数のページをキャプチャしながら編集もしたいという人におすすめなのが「qSnap」です。
編集ツールにキャプチャストックがあるため、同時に複数枚のスクショを加工するのに向いています。

拡張機能ボタンから選べるスクショ方法は、画面に写っている範囲のみを撮影する「Capture Visible Part」と、ページ全体を撮影する「Caputure Full Page」の2つです。

スクショを撮影すると編集画面が開きますが、画像下部を見ていただければ分かる通り他のスクショ画像のストックが表示されており、同時に複数枚の画像を加工できるのが便利です。
imgur Community Extension

画像共有サービスのimgurが提供する拡張機能が「imgur Community Extension」です。
imgurにログインする必要がありますが、imgurでスクショが管理できるのがメリットです。

他の拡張機能とは違い、スクショの撮影は右クリックメニューから行います。ページ全体を撮影する「capture page to」、写っている範囲のみを撮影する「capture view to」、選択範囲を撮影する「capture area to」の3つから、保存するアルバムを選択することでスクショが撮影されます。

スクショはimgurのアルバムに保存されるので、共有や編集が簡単に行えます。
まとめ
chromeの画面をスクリーンショットする方法まとめ!全体スクショ/拡張機能、いかがでしたでしょうか?
Chromeで閲覧しているサイトをスクショしたいと思った時にPCのスクリーンショット機能を使うのもいいですが、デベロッパーツールを使うことでページを丸ごと画像保存したり、拡張機能(アドオン)を導入することでお手軽にスクショ撮影ができるようになりますよ。拡張機能の導入にお悩みの方は、記事内で紹介している拡張機能から選んでみてはいかがでしょうか。