Webページ全体のキャプチャを撮ったり、キャプチャ画像に注釈やメモを書き加えたいときに使える便利なツールがAwesome Screenshotです。
わたしはWeb制作を仕事にしているのですが、Awesome Screenshotほど手軽で便利に利用できるツールはないのではないかと思います。
単にキャプチャが撮れるだけではなく、便利な機能が満載です。
- Webページ全体、見えている画面、選択部分のみ、など撮影範囲を選択できる
- 撮影した画像に矢印や図形、テキストなどを自由に書き込める
- 3秒後・5秒後などボタンを押してから時間差でキャプチャが撮れる
- Webページだけでなく、ローカルの画像にも注釈を加えられる
- JPG/PNGなどの画像だけでなく、PDFでも出力できる
今日はそんな便利なAwesome Screenshotの使い方をご紹介します。
Awesome Screenshotの使い方
ダウンロード&拡張機能へのインストール
![ChromeウェブストアのAwesomeScreenshotページ](https://caruta.work/wp/wp-content/uploads/2021/03/スクリーンショット-2021-03-07-5.47.31-1024x670.jpg)
まずはChromeの拡張機能に追加しましょう。
以下のページから追加してダウンロードしてください。
https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=ja
画面キャプチャの撮影
![AwesomeScreenshotでキャプチャを撮影するブラウザの画面](https://caruta.work/wp/wp-content/uploads/2021/03/スクリーンショット-2021-03-07-5.53.18-1024x725.jpg)
Awesome Screenshotを追加すると、画面のようにアイコンが表示されます。
これをクリックすると、様々なキャプチャを簡単に撮影することができます。
表示部分
表示されているブラウザの画面を撮影します。一番よく使うかも。
フルページ
Webページ全体のスクリーンショットを撮影します。遅延読み込みに対応しているので、スクロールから時間差で表示されるコンテンツもしっかり撮れます。
選択範囲
自分で撮影箇所を選択して撮影できます。パーツを保存するのに便利です。
遅延後の表示箇所
例えばマウスを乗せた状態で色が変わる状態を撮りたい、なんて時に便利です。
遅延する秒数は設定で変更できます。
画面全体またはアプリウィンドウ
ブラウザ内だけでなく、画面全体を撮影することまでできちゃいます。
ローカル画像に注釈を加える
これもとても便利な機能。キャプチャに限らずローカル画像に文字や図形を加えられます。
キャプチャの加工
![AwesomeScreenshotでキャプチャに注釈を入れる画面](https://caruta.work/wp/wp-content/uploads/2021/03/スクリーンショット-2021-03-07-6.05.37-1024x661.png)
実際に撮影した後は、このように様々なツールを使って加工できます。
メモを書き込んだり、人に渡すために修正指示を書き込んだりすることができます。
有料版機能では更に「吹き出し」「番号」「顔文字」「画像追加」などの便利な機能も利用することができます。
このキャプチャも、AwesomeScreenshotで書いているんですよ。
もちろん、注釈が不要な場合は何もしなくてもOKです。
保存・ダウンロード
![AwesomeScreenshotのキャプチャ保存・ダウンロード画面](https://caruta.work/wp/wp-content/uploads/2021/03/スクリーンショット-2021-03-07-6.05.56-1024x664.png)
保存や出力方法では、画像・PDF・プリント・コピーなどから選択できます。
基本的にはこの利用で全然不便しませんが、無料でもアカウントを作ってサインインしておくと、以下のような機能を利用できます。
Save to Aesome Screenshot
クラウドに画像を保存して、URLで共有できるサービスです。
無料でも最新50個まで保存しておくことができます。
いちいち画像を保存して送らなくていいので便利です。
Collaborate with Teammates
他のツールと連携できる機能です。
Slack、Asana、Trello、GitHub、JiraSoftwareに対応しています。
Save to Cloud
クラウドに保存できるサービスです。
GoogleDrive、Dropbox、boxに対応しています。
オプション設定
Awesome Screenshotでは様々な設定も変更することができます。
![AwesomeScreenshotのキャプチャ設定画面](https://caruta.work/wp/wp-content/uploads/2021/03/スクリーンショット-2021-03-07-6.10.32.png)
キャプチャ設定
ショートカット、遅延時間の設定、注釈のスキップなどが設定できます。
![AwesomeScreenshotのレコード設定画面](https://caruta.work/wp/wp-content/uploads/2021/03/スクリーンショット-2021-03-07-6.10.40.png)
レコード設定
こちらは、動画を録画する際に利用する設定です
Awesome Screenshotでは、動画も撮影することができます。
ただし、利用にはアカウント登録が必要で、無料版では5分しか撮影できません。
あまり利用する機会がないので今回は割愛させていただきます。
![AwesomeScreenshotの保存の設定画面](https://caruta.work/wp/wp-content/uploads/2021/03/スクリーンショット-2021-03-07-6.10.48.png)
保存の設定
ファイル形式や保存場所などを設定することができます。
Awesome Screenshotの使い方まとめ
Awesome Screenshotアイコンなどがわかりやすく直感的に利用することができるので、あまり説明がなくて利用には不便しないと思います。
無料版でこれだけ利便性が優れているのは本当に助かっています。
このブログのキャプチャを撮ったりするのも、ほとんどAwesome Screenshotを利用しているんですよ。
無料版のアカウント登録も、Googleアカウントなどで3秒あればできるので、もし興味がある方はぜひ利用してみてください。
ちなみに有料版では、利用できる注釈が増えて、動画も無制限に撮影できたりします。
わたしは利用したことがないのですが、よかったら下記の公式サイトを見てみてください。