
【使って便利】Chrome拡張機能「Awesome Screenshot」を使ってWebページのスクリーンショットや録画をしよう!
スクショ撮りたい!
ページ全部スクショ撮りたい!
選択範囲だけスクショ撮りたい!
スクショに文字入力したいし、図も付け加えたい!
なんなら画面を録画もしたい!
はい、Chrome拡張機能「Awesome Screenshot」。
これ一つですべてできます。
(ここでは「無料版」前提で説明します)
※以前、【使って便利】画面キャプチャツール最高峰「ScreenPresso」という記事を書きました。そちらはブラウザだけではなくデスクトップ全体キャプチャできるので高機能ですが、ブラウザ上のキャプチャであれば当拡張機能もかなり使い勝手が良いです。
インストール方法
chromeウェブストア「Awesome Screenshot」 → Chromeに追加

拡張機能を追加

Googleアカウント持っている方は「Sign in with Google」、その他メールアドレスでアカウント登録する場合は「Other ways to sign in」。
スクショをクリップボードにコピーするだけであれば、アカウント登録せずに「Skip」でOKです。アカウント登録するとクラウドへ保存することができます。

拡張機能を「ピン留め」するなら「I have pinned」

Grant Access(権限設定)押すと、カメラ、マイクを許可するかのウィンドウが表示されるので、「許可する」

セットアップ完了

使い方
「拡張機能」から【Awesome Screenshot】(素晴らしいスクリーンショットとスクリーンレコーダー)をクリック。

Awesome Screenshotの設定

ショートカットキーや、保存先など設定できます


スクリーンショットを撮る
「キャプチャ」タブを選択します

キャプチャは3種類できます。
表示部分
→画面全体、または、特定ウィンドウをキャプチャフルページ
→見えていない部分も含めてそのページ全体をキャプチャ選択範囲
→選択した範囲をキャプチャ
それでは、一つずつ説明します。
「表示部分」をキャプチャ
「表示部分」をクリック

「スクリーンショットの保存場所」は”ローカル”または”クラウド”。
“クラウド”の場合は、Googleアカウントや、メールアドレスによるサインアップが必要です。
「画面全体またはアプリウィンドウ」をクリックすると、どこをキャプチャするかを指定できます。
「画面全体」→デスクトップ画面全体をキャプチャ
「ウィンドウ」→指定したウィンドウをキャプチャ

画面全体またはウィンドウを選択し「共有」を押下すると画面キャプチャされます。
キャプチャされると別タブで以下のような画面が表示されます。

・クリップボードにコピーする場合、画面右上の「Copy」
・画像やPDFで出力する場合、画面右上の「Done」

「ローカル画像に注釈を加える」は、スクリーンショットするのではなく、PC上にある画像をアップロードし、注釈など加工したい場合に使用します。

以下の画面となるので、画像を枠内へドロップ

お好きなように加工しましょ。加工終わったら「Copy」または「Done」

「フルページ」をキャプチャ
「フルページ」をクリック

キャプチャ開始。しばしお待ちを・・・

キャプチャ完了。あとは上記「表示部分のキャプチャ」と同じです。

「選択範囲」をキャプチャ
「選択範囲」をクリック

キャプチャしたい範囲を選択し、「コピー(クリップボードにコピーされます)」や「保存(注釈加工画面が表示されます」。

***** 注釈加工画面 *****

ここからは、手抜き紹介・・・・左から。。。
Undo(アンドゥ)
Redo(リドゥ)
クリア(すべての注釈をクリア)
選択された部分をクリア
リサイズ
クロップ(切り抜き)
ペン

ハイライト

四角形、円

矢印

テキスト

・ぼかし

そこから右にあるやつは使ったことないので使ってみてください。。。
録画

画面全体
→デスクトップ画面全体を録画カメラのみ
→カメラに映った自分が録画されますぜこのタブ
→その名の通り。「このタブ」を録画地域別収録
→この日本語訳・・・・選択範囲を録画
※無償版は、解像度720pで最大5分間の録画となります。

録画開始
「録画開始」ボタン押下

終わったら「ポーズ」

で、「Stop」

ダウンロードできます。

拡張子はwebmでダウンロードされます

最後に
スクリーンショットを撮るChrome拡張機能はたくさんあります。
有名なところでは「FireShot」、そのほかにも「GoFullPage」「LightShot」なども使ってみたけど、やっぱ「Awesome Screenshot」が高機能で使いやすい。注釈加工ツールで「ぼかし」があるのも良い。
一度は使ってみてはいかがでしょうか?
ほんと便利ですよ!