取説の作成などで必須のスクリーンショット。
結構めんどくさいですよね。Webページ全体の撮影なら、なおさらです。
![](https://eishi-u.com/wp-content/uploads/bal-ac444.webp)
下に長い画面のスクリーンショット、めんどくさすぎ…
しかし、Google Chromeの標準機能を使えば、全画面キャプチャ(フルスクリーンショット)で全体撮影がかんたんにできます。
もちろん一部だけの撮影もOK!
全画面キャプチャの撮影でお困りの方はぜひご覧ください。
本記事ではそれらの使い方を説明します。
![](https://eishi-u.com/wp-content/uploads/03710af0ccbb7c2c07832a8ce94e5cf8.png)
- 大手通信企業の元SE
- 業界歴15年のWeb解析士
- 携わったSNSは約100件
- Googleアナリティクス個人認定資格(GAIQ)
Google Chromeで全画面キャプチャ(フルスクリーンショット)で全体撮影|一部の撮影もOK!
今回ご紹介するGoogle Chromeの標準機能とは『デベロッパーツール』です。
このデベロッパーツールは本来、Webサイト開発などに利用されることが多いので一般ユーザーには馴染みの薄いものですが、誰でも利用可能です。
ブラウザに標準で搭載されているので、ダウンロードやインストールの必要はありません。
Chromeユーザーなら誰でもすぐに使うことができます。
デベロッパーツールの使い方
それではやっていきましょう!
まず、スクリーンショットを撮影したいWebサイトにChromeでアクセスして、サイト上の何もない箇所を右クリックしてください。
右クリックメニューの中から検証
を選択すると、デベロッパーツールを開きます。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-1.webp)
デベロッパーツールが起動するので、右上にある︙
を押しましょう。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-2.webp)
コマンドを実行
を選択します。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-3.webp)
様々なメニューが表示されるので、下の方にあるフルサイズのスクリーンショットをキャプチャ
を押しましょう。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-4.webp)
以上の操作で自動的に上から下までの全画面キャプチャ(フルスクリーンショット)が撮影されます。
撮影されたキャプチャはダウンロードフォルダに格納されているので、Windows
+E
でエクスプローラーを開き、左メニューのダウンロードを開くと見つかるはずです。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-5-1.webp)
なお、この保存先を変更したい場合は下の記事をご覧ください。
関連記事Chromeでダウンロードの保存先を指定したい!|毎回指定もできる
ただし、この方法には一つだけ注意点があります。
デベロッパーツールで全画面キャプチャを撮影する際の注意点
たとえば、サイドバーがあるサイトをデベロッパーツールで撮影する場合、サイドバーはメインコンテンツの下に配置されます。
そのため、サイドバーも含めたキャプチャを撮影するには、次で紹介する無料の拡張機能を使った方が便利です。
超便利なChromeの無料拡張機能『FireShot』
全画面キャプチャを撮影するのに便利なChrome拡張機能は、『FireShot 』です。
現在、ChromeとFirefoxブラウザの拡張機能として提供されていて、無料で利用が可能です。
撮影した画像ファイルは、jpgかpdfのファイル形式で保存できます。
より高度な機能を利用できるPro版も販売されていますが、無料版でも十分な機能を備えています。
インストール方法
まず、Chromeウェブストアに移動しましょう。
画面右上に検索窓がありますので、ここに『FireShot』と入力してEnterキーを押してください。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-7.webp)
検索結果の中から『FireShot』を選んでChromeに追加
ボタンを押しましょう。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-8.webp)
こんな感じのポップアップが表示されるので、拡張機能を追加
ボタンを押せばOKです。
![](https://eishi-u.com/wp-content/uploads/2020/08/8c48303e50b4e1feff354a9ab1690b99.jpg)
これで『Fire Shot』のインストールが完了しました。
ブラウザ上にブックマーク!
『Fire Shot』のインストールが完了したら、次回以降すぐに利用できるようにブラウザ上にブックマークしておきましょう。
まず、ブラウザ右上あるパズルのピースのようなアイコンをクリックして下さい。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-9.webp)
そして、『FireShot』の横にある押しピンマークをクリック!
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-10.webp)
上記の手順が完了すると、『FireShot』のアイコンが常に表示されるようになります。
![](https://eishi-u.com/wp-content/uploads/2020/08/12f245af6cec4a05b3acdfe7edfcb429.jpg)
ではいよいよ、具体的な操作方法に移っていきましょう。
操作方法
まず、先ほどのブックマークアイコンをクリックして、ページ全体をキャプチャ
を選択します。
![](https://eishi-u.com/wp-content/uploads/2020/08/7a722f14928404e67c9b72c5cec72f0b.jpg)
すると、画面の外にはみ出ている領域も含めて、ページ全体のスクリーンショットが作成されます。
画面が自動的にスクロールされていくのを見るのは楽しいですよ!
スクショの撮影が完了すると次のような画面が表示されます。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-6-1.webp)
画像として保存
かPDFとして保存
のどちらかを選択して保存してください。
撮影されたキャプチャはダウンロードフォルダに格納されています。
Windows
+E
でエクスプローラーを開いて、左メニューのダウンロードを開くと見つかるはずです。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-5-1.webp)
以上が『FireShot』を使用した全画面キャプチャを撮影する方法です。
お疲れさまでした!
注意事項
『FireShot』でスクリーンショットを撮影しようとすると、こんな表示が出ることがあります。
![](https://eishi-u.com/wp-content/uploads/chrmfullscreenshot-11-1.webp)
上のアラートは、そのページでのスクリーンショットを撮影できないという意味です。
この場合は残念ながら諦めましょう。
まとめ)Google Chromeで全画面キャプチャ(フルスクリーンショット)
以上、Google Chromeで全画面キャプチャ(フルスクリーンショット)する方法をお伝えしました。
もし、画面をスクロールさせながら撮影して、後でそれらをつなぎ合わせている方は上記の方法をお試しください。
作業効率が上がること間違いなしです!
それではまた、次の記事でお会いしましょう!
![](https://eishi-u.com/wp-content/uploads/bal-ac245.png)
質問は気軽にコメントへ!
コメントはお気軽にどうぞ!