ブログ記事を書くとき、特に僕はそうなのですが、画面キャプチャを頻繁に行います。それは作業画面をキャプチャすることで、その内容をわかりやすく表現するためです。今回はキャプチャ専用アドオンの「FireShot」を解説します。
画面キャプチャとは、スマホで言うところの「スクリーンショット(スクショ)」です。スマホなら誰もが、「電源ボタン+音量小ボタン」で画面のスクショが撮れるのを知ってて、そのまま切り取ったり、手書き文字を入れたりしてLINEで送ることを普通に楽しんでいるのが、パソコンとなるとなかなかできません。
これが出来るようになれば、ブログ記事の内容も、簡単にグレードアップできますので、初心者にもわかりやすいように、解説していきます。
パソコンのWebページのキャプチャは「FireShot」が、超優等生
![パソコンのWebページのキャプチャは「FireShot」が、超優等生](https://www.8270chihaya.net/wp-content/uploads/2019/11/photo-hoteam-u2QJo4s9pmQ-unsplash-700x467.jpg)
「FireShot」 は、ブラウザの拡張機能として使います。
使用できるブラウザは
- GoogleChrome
- Firefox
この2つです。
Windows、Mac の両方で使えます。
Windowsのキャプチャ用アプリは2種類ある
Windowsの画面キャプチャ用アプリは
2種あります。
- 画面に表示されるものは何でもキャプチャできるタイプ
これはWindows10標準の「切り取り&スケッチ」が代表です。 - Webブラウザに表示されるものだけをキャプチャできるタイプ
こちらが今回解説する「FireShot」です
あれ?だったら、「切り取り&スケッチ」だけでもよくない?
ここだけを読んだら
そう思う人も多いはずです。
でも「切り取り&スケッチ」には
どうしても出来ないことがあるのです。
だから「FireShot」も必要なのです。
FireShot のインストール
GoogleChrome 版はコチラ
![](https://ssl.gstatic.com/chrome/webstore/images/chrome_web_store_v2_1200x630.png)
Firefox 版はコチラ
![](https://addons.mozilla.org/user-media/previews/full/164/164384.png?modified=1622132168)
例としてココでは、
Google Chrome にアドオンして
使う方法を解説します。
まずは、上のリンクから
Chrome ウェブストアで行き
![Chromeウェブストア](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-06-28-155750a.jpg)
検索窓に「FireShot」と入力します。
![Chromeウェブストア FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-06-28-160245.jpg)
拡張機能にある
上で示した
「ウェブページ全体をスクリーンショットーFireShot」
この右にある「Chrome に追加」ボタンをクリックします。
すると直ぐに
Google Chrome に「FireShot」が追加されます。
![Chromeアドオン FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-06-28-161008.jpg)
右上に「S」のマークが表示されていれば
追加完了です。
FireShot の使い方
使い方はいたって簡単です。
キャプチャしたい画面で
アドオンのアイコンを
クリックするだけなのですが、
ここに3種類の異なった
キャプチャ方法が用意されています。
1.FireShot 表示部分をキャプチャ
PCの画面に
表示されている部分を
キャプチャします。
![FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-09-14-12-1.jpeg)
FireShot の「S」アイコンをクリックして
表示される赤い枠のメニューの中から
「表示部分をキャプチャ」を
クリックします。
![FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-09-14-13-1.jpeg)
PC画面のままがキャプチャされました。
あとは右側にある
「スクリーンショットを保存」から
自分の使い方に合わせて選択します。
僕の場合は、いつも
「画像として保存」にしています。
「保存」後は、この画面(タブ)は
閉じて大丈夫です。
2.FireShot 選択範囲をキャプチャ
画面の中で
必要な部分だけをキャプチャします。
![FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-09-14-17a-1.jpeg)
メニューから
「選択範囲をキャプチャ」をクリック。
![FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-09-14-18.jpeg)
マウスでドラッグしながら
範囲を指定します。
![FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-09-14-19.jpeg)
このように
必要な部分だけが
トリミングされた状態で
キャプチャできます。
「画像として保存」を
クリックします。
![FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/FireShot-Capture-023.jpg)
3.FireShot ページ全体をキャプチャ
じつはこの
ページ全体のキャプチャが
「切り取り&スケッチ」では
出来ないのです。
![FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-09-14-15-1.jpeg)
メニューから
「ページ全体をキャプチャ」をクリック。
![FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/2020-09-14-16-1.jpeg)
この状態で
「画像として保存」すると、
![FireShot](https://www.8270chihaya.net/wp-content/uploads/2020/06/FireShot-Capture-007.jpg)
あまりにも縦長なので
縮小していますが、
Webページの
スクロールしないと見えない部分も
全部キャプチャできます。
これがWindows10標準の
「切り抜き&スケッチ」には出来ないのです。
FireShot のあと、PhotoScape X へ引き継いで加工する
このあと
キャプチャした画像を
いつもの「PhotoScapeX」で加工します。
- 余計な部分の切り取り
- サイズを縮小する
- 色を補正する
- 文字や図形を重ねる
じつは、このページの記事全体が
「FireShot」と「PhotoScape X」
この2つで画像をすべて作っています。
「PhotoScape X」完全マスター3記事
![](https://www.8270chihaya.net/wp-content/uploads/2020/08/pexels-picjumbocom-196655-1-530x354.jpg)
![](https://www.8270chihaya.net/wp-content/uploads/2020/08/pexels-picjumbocom-196655-2-530x354.jpg)
![](https://www.8270chihaya.net/wp-content/uploads/2020/08/pexels-picjumbocom-196655-3-530x354.jpg)
今回はココまでです。
おつかれさまでした。
コメント