パソコンのWebページキャプチャ「FireShot」は、痒いところに手が届く優等生

画面キャプチャ Chromeアドオン FireShotが便利 PC用

参考資料などを提出するときに、元情報となるWebニュース記事をキャプチャして貼り付けることって、意外とよくあります。今回はWebページ専用だからこそ便利な「FireShot」を解説しながら、「PhotoScapeX」「Adobe Comp」との合せ技も公開します。

FireShot のダウンロード

FireShot は、ブラウザにアドオンして使うアプリです。

アドオンできるブラウザは
・GoogleChrome
・Firefox
この2つです。

ダウンロード先は
Firefox はコチラ
https://addons.mozilla.org/ja/firefox/addon/fireshot/

GoogleChrome は、
Chromeウェブストア
https://chrome.google.com/webstore/category/extensions

Chromeウェブストア

Chromeウェブストアで
「FireShot」と検索

Chromeウェブストア FireShot

「ウェブページ全体をスクリーンショットーFireShot」
これを「Chromeに追加」して完了です。

ブラウザ GoogleChrome に
アドオンとして追加されると

Chromeアドオン FireShot

「S」のマークが表示されます。

キャプチャ用アプリは2種ある

画面キャプチャ用のアプリには
大まかに2種あります。

【1】
画面に表示されるものは
何でもキャプチャできるタイプ。

【2】
Webブラウザに表示されるものだけを
キャプチャできるタイプ。

この2つです。

【1】は以前にも記事にしました
Windows10 標準搭載の
「切り取り&スケッチ」です。

参考過去記事
Windows画面キャプチャ、新機能「切り取り&スケッチ」は、Snipping Toolを超えるか

何でもキャプチャできるので
デスクトップ画面や
Photoshop やWord、Excelなど
ブラウザを使わないソフトの
作業画面がキャプチャできます。

そして【2】
「FireShot」は
GoogleChrome とFirefoxの
ブラウザに表示される
Webページのみ
キャプチャすることができます。

あれ?
だったら、
「切り取り&スケッチ」だけでも
よくない?

そう思った人も多いはず。

じつは
「切り取り&スケッチ」には
どうしても出来ないことがあって
そのために
「FireShot」との併用をしているのです。

FireShot の使い方

使い方はいたって簡単です。

キャプチャしたい画面で
アドオンのアイコンを
クリックするだけなのですが、
ここに3種類の異なった
キャプチャ方法が用意されています。

1.FireShot 表示部分をキャプチャ

PCの画面に
表示されている部分を
キャプチャします。

FireShot 表示部分をキャプチャ

FireShot のアイコンをクリックして
表示されるメニューの中から
「表示部分をキャプチャ」を
クリックします。

FireShot 表示部分をキャプチャ

PC画面のままがキャプチャされました。
あとは右側にある
「スクリーンショットを保存」から
自分の使い方に合わせて選択します。

2.FireShot 選択範囲をキャプチャ

画面の中で
必要な部分だけをキャプチャします。

FireShot 選択範囲をキャプチャ

メニュFーから
「選択範囲をキャプチャ」をクリック。

FireShot 指定範囲をキャプチャ

範囲を指定すれば、

FireShot 選択範囲をキャプチャ

このように
必要部分だけが
トリミングされた状態で
キャプチャできます。

3.FireShot ページ全体をキャプチャ

じつはこの
・ページ全体をキャプチャが
「切り取り&スケッチ」では
出来ないのです。

FireShot ページ全体をキャプチャ

メニューから
「ページ全体をキャプチャ」をクリック。

FireShot ページ全体をキャプチャ

この状態で
「画像として保存」してみると、

FireShot ページ全体をキャプチャ

Webページの
スクロールしないと見えない部分も
全部キャプチャできています。
スゴイ!

FireShot のあと、引き継いで加工する

このあと
いつもの「PhotoScapeX」で
画像の余計な部分を削除します。

PhotoScapeX

記事以外の部分を
切り取ってしまうと同時に、
広告やSNSボタンも消しておけば
よりスッキリします。

また、
PhotoScapeXで1枚の画像を
バラバラにして
並べ直すことで、

PhotoScapeX 切り取り、並べ直し

こんな感じに仕上げることもできます。

PhotoScapeXについて過去記事
無料のPhoroScapeXが最強すぎて、Photoshop不要。初心者でもかんたん、Webバナー制作方法

さいごに
「Adobe Comp」を使って
A4縦用紙で
書類をサクッと作ってみました。

Adobe Comp

5分程度で作ったので
出来は良くないですが
アプリを上手く組み合わせると
作業効率がアップします。

Adobe Comp について過去記事
これが無料!? Adobe Compで、デザインも文字入れもプロ並みの仕上がり実現