テックキャンプ無料カウンセリング
資料請求はこちら

Google Chromeでスクリーンショットを撮る方法 拡張機能なし&便利にする拡張機能6選

公開: 2020.04.29 更新: 2020.07.15

>>No1エンジニア養成プログラム テックキャンプ

初めてのIT転職で読むべき!お役立ちebook3点セット

Google ChromeでWebサイトを閲覧している時に、記録としてスクリーンショットを撮っておきたいということはよくあると思います。

そのようなWebページのスクリーンショットにおすすめしたいのが、Google Chromeの基本機能や拡張機能。Google Chromeだけで完結するのでとても手軽です。

また、スクリーンショットの機能を上手く使えば、映っている画面の内容だけでなくWebページ全体を保存したり、スクリーンショットを編集したりといったこともできます。

この記事では、Google Chromeでスクリーンショットを撮るさまざまな方法について解説します。

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

まずは、基本となるGoogle Chromeの拡張機能なしでスクリーンショットを撮る方法について解説します。

Google Chromeの拡張機能について、イマイチよくわからないという人は「Google Chromeの拡張機能とは?インストールや設定方法をわかりやすく解説」もご覧ください。

デベロッパーツールを使用する

Google Chromeの拡張機能なしでのスクリーンショットは、デベロッパーツールを使用します。

デベロッパーツールはGoogle Chromeを使っている人なら、誰でも無料で利用可能。特にインストールの必要はありません。

下記のショートカットキーをGoogle Chrome上で入力すると、デベロッパーツールが起動します。

  • Mac:Command + Option + i
  • Windows:Command + Shift + i

「F12」、あるいはメニューバーの「表示」→「開発/管理」→「デベロッパー ツール」からでも起動可能です。

スクロールしたWebページ全体を撮影する方法

デベロッパーツールが起動できたら、上部に表示されるタブレットとスマホを合わせたようなアイコンをクリックします。

Webページを表示している画面にツールバーが表示されるので、左端の画面の設定を「Responsive」に変更してください。

必要に応じてDPRを3に変更。3点リーダーの「Add divice pixel ratio」をクリックするとDPRが表示されます。

あとは、3点リーダーから「Capture full size Screenshot」をクリックすればOK。スクロールしたWebページ全体がスクリーンショットで保存されます。

もしも上手く撮影できない時は、画面表示を一番上にしてみてください。

撮影したスクリーンショットは、ダウンロードフォルダにPNGで保存されます。

スクリーンショットでWebページの一部を保存したい場合

表示している画面だけを撮影したい場合は、「Capture Screenshot」をクリックしてください。

Webページ全体ではなく、表示している部分が撮影できます。

スマホの縦長画面でのスクリーンショットも可能

PC画面での表示だけでなく、スマホの縦長画面でもスクリーンショットが可能です。

ツールバーの下にあるグレーの部分をクリックするとキャプチャのサイズ変更が可能。

Mobile S・Mobile M・Mobile Lなどのサイズが選べます。

ツールバーで縦と横のピクセルを指定して変更も可能。取得したい画像の幅に合わせて調節してください。

スクリーンショットにおすすめのChrome拡張機能

上記で、デベロッパーツールでもスクリーンショットが取得できることを紹介しました。

とても便利なのですが、実際に使ってみると以下のような問題点も感じます。

  • コンテンツが多いWebページはすべて保存しきれない場合がある
  • 編集などが手軽に行えない
  • 画像の保存先を指定したい

このような問題を解決して、よりスクリーンショットを自由に使いたいという時は、Google Chromeの拡張機能を使いましょう。

FireShot

FireshotはスクロールしたWebページ全体をスクリーンショットで保存可能。

PNG・JPG・PDFで保存でき、オプションで出力先フォルダも選択可能です。

Google Chromeのデベロッパーツールの足りない部分を補いシンプルにまとめた、使いやすい拡張機能と言えます。

日本語にも対応しているので、迷わずに使用できるでしょう。

ウェブページ全体をスクリーンショット – FireShot – Chrome ウェブストア

Awesome Screenshot

Webページをスクロールした全ての部分、表示している画面、指定した一部など、さまざまなスクリーンショットが可能。

それだけでなく、スクリーンショットに注釈・コメント・矢印などを挿入できます。クラウド上に保存したり、他の人にシェアしたりといった便利な機能にも対応。

スクリーンショットを頻繁に利用するなら入れておきたい、おすすめの拡張機能です。

保存できるファイル形式はPNGのみ。

Awesome Screenshot: キャプチャーと注釈 – Chrome ウェブストア

Full Page Screen Capture

出典元:Full Page Screen Capture

シンプルな操作で、スクロールしたWebページ全体をスクリーンショットできる拡張機能です。

履歴を残したくない時にすぐに削除できるところもポイント。ムダな機能や手順なしで、スクリーンショットを使いたいという人にぴったり。

保存ファイルの形式はPNGです。

Full Page Screen Capture – Chrome ウェブストア

webページショット

スクロールしたページ全体のスクリーンショットに対応。そのままWeb上でテキストを入力したり、矢印を入れたりといった編集もできます。

ダウンロードだけでなく、URLによる共有も可能。使いやすく機能も豊富なスクリーンショットの拡張機能です。

保存できるファイル形式はPNGのみ。

webページショット – Screenshot Extension – Chrome ウェブストア

30代転職を成功させるヒントに

「市場価値の高いスキルがなくて、転職が不安」
「30代だし転職で失敗できない……」

そんな不安がある方に向けて、多くの30代の方のキャリアチェンジを支援してきたテックキャンプが「市場価値を上げるための30代転職ノウハウ」を限定公開中!

正しくポイントを押さえれば、年齢や今までの経歴をハンデにせず転職は可能です。この無料ebookでは、30代の方が意識すべき転職の考え方と、選ぶべき業界について解説します。

Webページを動画やGIFで保存できる拡張機能

スクリーンショットで画像として共有するよりも、動画やGIFなどの動きがあるコンテンツで伝えた方がわかりやすい場合もあるでしょう。

そのような場合に役立つ、Webページの画面を録画できる拡張機能を紹介します。

Nimbus Screenshot & Screen Video Recorder

出典元:Nimbus Capture – Capture screenshots and record video

スクリーンショットの拡張機能で迷ったらこれ。多機能でUIも使いやすいのでおすすめです。

とても機能が豊富なので、以下におもなできることをまとめました。

  • スクロールしたWebページ全体、表示している画面、指定した一部のスクリーンショット
  • 表示している画面や指定したタブの録画
  • スクリーンショットへのテキスト・矢印・図形の挿入や、トリミングなどの編集
  • GoogleドライブやDropboxなどのクラウド上への保存
  • YouTubeへの公開
  • JPEG・PDF・MP4・GIFなど幅広いファイル形式に対応

Nimubus Noteとの連携もスムーズなので、使っている人はインストールして損はないでしょう。

Nimbus Screenshot & Screen Video Recorder – Chrome ウェブストア

Screencastify

出典元:Screencastify

Google Chromeの表示画面、指定したタブ、PCのWebカメラでの録画に対応した拡張機能。

スクリーンショットでは、内容を伝えきれない場合などに便利です。

YouTubeへの公開など、幅広い共有方法に対応している点も魅力。MP4、音声のみ、GIFなど幅広い保存形式が選択できます。

オンラインでのレッスンやYouTubeへの解説動画の投稿など、幅広い用途に活躍しそうです。

Screencastify – Screen Video Recorder – Chrome ウェブストア

スクリーンショットを使い分けてGoogle Chromeを活用しよう

Google Chromeでのスクリーンショットは、拡張機能がなくても撮影できます。

他の人に共有するために編集をしたり、テキストを入れたりといった場合には拡張機能を使うとよいでしょう。

また、Webページの画面を動画で保存したい場合にはNimbus Screenshot & Screen Video Recorderなどが便利です。

状況に応じてスクリーンショットを使い分けると、もっとGoogle Chromeを活用できるようになります。

はじめての転職、何から始めればいいか分からないなら

「そろそろ転職したいけれど、失敗はしたくない……」そんな方へ、テックキャンプでは読むだけでIT転職が有利になる限定資料無料プレゼント中!

例えばこのような疑問はありませんか。
・未経験OKの求人へ応募するのは危ない?
・IT業界転職における“35歳限界説”は本当?
・手に職をつけて収入を安定させられる職種は?

資料では、転職でよくある疑問について丁寧に解説します。IT業界だけでなく、転職を考えている全ての方におすすめです。

限定資料を無料プレゼント中

この記事を書いた人

Kimura Hiroto
音楽・ITをはじめとするさまざまなジャンルのライティングを行っています。ITエンジニアの経験を生かし、テックキャンプ ブログでの執筆・編集を担当。好きな食べ物は豆腐。

あなたの理想のキャリアに合わせた、テックキャンプの3つのサービス

Advertisement