すんこのアトリエとうぐいす工房

ゼロから始めるパソコン生活

【Chrome拡張】Awesome Screenshotでキャプチャーと編集を一度に!

Awesome Screenshotでキャプチャーと編集を一度に!

Awesome Screenshotで何ができるの?

Awesome ScreenshotはChrome拡張のキャプチャーツールです。
Chrome専用ですが、いろいろな状況でキャプチャーが出来て、
さらにその後編集まで出来るので便利なのです。

無料で使用できますが、無料だと機能制限があります。
機能制限と言っても動画の時間制限と一部の編集メニューが使えないだけですので、
キャプチャーソフトとして使う分には全然問題ありません。

メインメニューやオプションは日本語ですが、編集メニューは英語です。
なので少しわかりにくいかもしれませんが、体感的にわかると思います。

一度で済むのはいいね!

Awesome ScreenshotをChromeにインストール

Awesome Screenshot スクリーンショットと画面録画 - Chrome ウェブストアにアクセスします。

AwesomeScreenshotインストール確認

Chromeに追加をクリックすると、
確認のダイアログが出るので、拡張機能を追加をクリック。
これだけです。

AwesomeScreenshotアイコン
右上にアイコンが追加されました。

Googleアカウントでサインインするかどうかの画面がでますが、
これはGoogleドライブなどクラウドを利用する時に必要なだけですので、
クラウドなどを使わない人は何もせずにそのまま閉じてしまって大丈夫です。

クラウドを使う人、共有リンクを作成したい人は
サインインして自分のアカウントを作ってください。
無料で作れます。

Awesome Screenshotの使い方

右上のアイコンをクリックすると、メニューが出てきます。

初期状態では動画のキャプチャーメニュー(Record)です。
メニューがグレーになっていて選択できない場合は、
そのサイトに対応していないです。

動画のキャプチャーのやり方

AwesomeScreenshot動画キャプチャー

まずはどこをキャプチャーするか選択します。
デスクトップ、現在のタブ、ウェブカメラの動画を保存できます。
保存形式はWebMのみで、保存後の編集はできません。
無料版では5分までで、有料版は無制限です。

Desktop(画面全体)

複数のアプリを起動している場合にどのアプリをキャプチャーするか選択できます。

AwesomeScreenshot対象選択

Start Recordingをクリックすると、現在表示されている画面か、
他のアプリをキャプチャーするかの選択画面が表示されます。

ペイントツールを選択してイラストのメイキング動画を作ったり、
ゲームを選択してプレイ動画を作ったりできそうですね。

AwesomeScreenshot音声を共有

キャプチャーしたい画面を選択したら、共有をクリックしてキャプチャー開始です。
音声を共有するにチェックを入れると、選択しなかったアプリの音声も同時に録音します。

例えば、ペイントツールを選択して別のアプリで歌を流し、それに合わせて絵を描くことで
絵描き歌みたいなことが出来ます。
共有中は画面下部に共有していますとダイアログが出ますので、
カウントダウン中に非表示にしないと一緒にキャプチャーされるので注意してください。

アイコンにCountdownを設定した場合はその秒数のカウントダウンが始まり、
キャプチャー時間が表示されます。

AwesomeScreenshot動画キャプチャーメニュー

アイコンをクリックするとメニューが表示されます。
終わる時はSTOPです。
共有を停止をクリックしても同じです。
PAUSEは一時停止、DISCARDは削除になります。

AwesomeScreenshot動画保存メニュー

STOPをクリックすると、保存メニューに切り替わります。
画面左側にキャプチャーした動画のプレビューが表示されます。
キャプチャーした動画は一時こちらに保存されます。
Save to Awesome ScreenshotでAwesome Screenshotのマイページにアップロードして
共有リンクを作成することが出来ます。
Save to cloudでYouTubeかGoogle Driveにアップロード、DownloadでWebM形式で
自分のパソコンに保存できます。

This Tab(ページの部分のみ)

現在表示されているページを動画としてキャプチャーします。
Desktopの全画面との違いはタブのページのみをキャプチャーするところです。
Desktopの場合は、タブやアドレスバー、ツールバーなど
本当にデスクトップ画面全体をキャプチャーするので、ウェブの場合はこちらがいいです。
とは言え、表示されているページをすべてキャプチャーしてしまうため、
ページに表示されている一部分の動画だけをキャプチャーすることはできないので
微妙に使いにくい感じがしました…

Start Recordingをクリックするとキャプチャー開始です。
操作方法はDesktopと同じです。

Cam Only

ウェブカメラで撮影してキャプチャーできます。
私はウェブカメラを持っていないのでできませんが…

キャプチャーを始める前に設定を変えることもできます。

Location to save

キャプチャーした動画をどこに保存するかです。
クラウドかローカルを選択できます。
自分のハードディスクに保存する場合はLocalで。

Record Tab Sound

This Tabの場合にのみ表示されます。
音声も録音するかの選択です。

Show Advanced Optionsをクリックするとさらに細かく設定できます。

Max Resolution

サイズを4k、FHD、HDから選択できます。

Countdown

Start Recordingをクリックしてからキャプチャー開始するまでの時間です。

画像のキャプチャーのやり方

AwesomeScreenshot画像キャプチャー

画像をキャプチャーしたい時は、メニューのタブをScreenshotに切り替えます。
キャプチャー方法の選択になりますので、自分のやりたい方法を選びます。
キャプチャー方法は次の通りです。

Capture Visible Part of Page(ページの表示されているところのみ)

現在のタブで表示されているところをキャプチャーします。
Chromeのメニューバーやブックマークバーなどは除外し、ウェブページの部分だけです。
Capture Visible Part of Pageをクリックしたら編集画面に移動します。

その下のCapture after Countdownをクリックするとカウントダウンが始まり、
3秒後にキャプチャーします。
秒数は3秒と5秒に変えられます。

Capture Selected Area(選択した範囲)

選択した範囲をキャプチャーします。
たぶん、これが一番使う機能だと思います。
Capture Selected Areaをクリックすると+アイコンが表示されるので、
ドラッグしてキャプチャー範囲を選択します。

AwesomeScreenshotキャプチャー範囲指定

キャプチャーサイズと枠が表示されるので、これでよければCaputureをクリックします。
点をドラッグすることで範囲を変更することもできます。

Capture Entire Page(ページ全体)

現在のタブのウェブページ全体をキャプチャーします。
表示されているところだけではなく、
スクロールバーで表示できる範囲全てをキャプチャーするので、
ページによってはとんでもなく大きな画像になります。
Capture Entire Pageをクリックすると編集画面に移動します。

Select a Local Image(保存してある画像を編集)

キャプチャーするのではなく、ハードディスクに保存してある画像を編集したい。
そんな時はこれです。
Select a Local Imageをクリックすると画像の選択画面になるので、
ここに編集したい画像をドラッグアンドドロップするか画面をクリックして
直接画像を選びます。

Capture Desktop(画面全体)

画面全体をキャプチャーします。
動画のDesktopと同じです。
複数アプリを起動している場合は、どの画面をキャプチャーするか選べます。
Capture Desktopをクリックして、対象のアプリを選択、共有をクリックで
編集画面に移動します。

画像を編集しよう

キャプチャーが終わると、編集の画面になります。
画面上部にメニューバーがあるので、お好みで編集できます。

AwesomeScreenshot編集バー

左から説明していきます。

リサイズ

リサイズ

画像のサイズを変更します。
変更したい画像のサイズを入力してResizeをクリックします。
Proportionalにチェックを入れると、比率を維持したままサイズの変更が出来るので
画像がおかしくなりません。

クロップ

クロップ

選択した範囲を切り取って編集します。
点をドラッグすることで範囲を変更することが出来ます。

ペン

ペン

画像に自由に書き込み出来ます。

図形

四角
楕円

四角と円を書くことが出来ます。
横にある▼をクリックして変更できます。
青い点をドラッグすることで形を、緑の点をドラッグすることで傾きを
変えることが出来ます。

矢印

矢印
変形矢印
直線
太い矢印

様々な矢印や直線を書くことが出来ます。
横にある▼をクリックして変更できます。
青い点をドラッグすることで長さを変更することが出来ます。

二番目の矢印は形を変えることもできます。
一番下の矢印は強調するときに使えそうですね。

テキスト

テキスト

文字を入力することが出来ます。
緑の点をドラッグすることで、傾きを変えることが出来ます。

ブラー

ブラー

選択範囲をぼかします。
青い点をドラッグすることで範囲を変更することが出来ます。

ハイライト

ハイライト

マーカーで強調することが出来ます。
フリーハンドなので、なかなか難しいです…

無料版では使用できない機能

有料版のみ

吹き出し、番号マーク、絵文字、画像の挿入は無料版では使用できません。
有料版のみの機能になります。
番号マークはテキスト入力で①とかやれば代用できそうです。

カラーと線の太さ
カラーと線の太さ

テキスト以外のカラーと線の太さはここで変更できます。

フォントと文字の大きさ、テキストボックス塗りつぶし

フォント、文字の大きさ

テキストを選択した時だけ表示されます。
フォントと文字の大きさを変更できますが、
選択できるフォントは英字にしか対応していないので日本語だと変化なしです。

塗りつぶし

Aのところをクリックするとテキストボックスを塗りつぶすことが出来ます。

ウォーターマーク(ベータ版)

ウォーターマーク

ベータ版としてウォーターマーク機能が追加されました。
その名の通り、画像に透かし画像を追加する機能です。

ウォーターマークとなっていますが、透明度を0にすることも出来るので
画像の合成にも使えそうです。

スタンプのアイコンをクリックするとウォーターマークの設定になります。

Upload Imageをクリックして画像を選択して追加。
Sizeで追加した画像の拡大・縮小、Opacityで透明度の設定です。

ただし、画像の位置は好きなように設定できません。
Top Leftと表示されているところをクリックすると
表示位置を左上、左下、右上、右下、中央から選択できます。

ウォーターマーク追加した画像

ウォータマークとして追加できる画像は1つまでです。

また、Watermarkの横にあるバーをクリックしてOFFにすることで
追加したウォーターマークをキャンセルできます。

ブラウザとパディング

こちらもベータ版として追加された機能です。
画像をブラウザ風にしたり、枠で囲んだりできます。

四角のアイコンをクリックして呼び出します。

両方とも初期状態ではOFFになっているので、
使用したい場合は使用したい方のバーをクリックしてONにしましょう。

ブラウザとパディング

Browserは画像にブラウザの枠を追加してブラウザで表示した感じにします。

ブラウザ風にする

こんな感じになります。

Include URLにチェックを入れると、
アドレスバーにキャプチャーした画像の元のURLが表示され、
Include Dateにチェックを入れると、
キャプチャーした日時を表示します。

URLを画像の下に表示

URL on topとURL on bottomはURLを表示する場合に
URLを画像の上下に追加表示する機能です。

パディング機能

Paddingの方は画像に単色の枠を追加する機能です。

こちらは枠の色とサイズを指定するだけです。

画像に枠を追加

編集が終わったら、画面右上のDoneをクリック。
保存メニューに移動します。

画像の保存方法

Copyと言う項目が追加されました。
これは画像を保存せずに、クリップボードに保存する機能です。

保存メニューに移動しなくても
クリップボードにコピーすることができるようになりました。

画像保存メニュー

動画のときと同じ様に、Awesom Screenshotのアカウントにアップして
共有リンクを作成したり、他のサービスにアップしたりできます。

Slack、Asana、Trello、Github、Jira、Google Drive、Dropbox、Boxに
対応しているようですが、私はGoogle Driveしか利用していないのでよくわかりません…

ハードディスクに保存するには左上のアイコンをクリックします。
オプションで選択した形式で保存します。(pngかjpg)
その横がPDFで保存で、印刷、クリップボードにコピーと続きます。

全機能を使って出来たのがこちら。

編集後

こんな感じのが出来ます(笑)

設定の変更

メニューのネジマークをクリックすることで設定を変更することが出来ます。

Capture Preferences(キャプチャーの設定)

キャプチャーの設定

Customize Shortcuts

画面全体、選択範囲、ページ全体のキャプチャーのショートカットキーを設定できます。
ショートカットキーを使いたい人はどうぞ。

Countdown Time Set to

画像のキャプチャーをする時のカウントダウン時間の設定です。
3秒と5秒から選べます。

カウントダウンなんて必要?と思うかもしれませんが、
カウントダウンを利用することでポップアップをキャプチャーすることが出来ます。

ポップアップを表示してからアイコンをクリックするとポップアップが消えてしまいます。
まずアイコンをクリックしてからカウントダウンの間にポップアップを表示させると
ポップアップが表示されたままキャプチャーできるんです。
これはsnipping toolの遅延機能でもできるんですけどね…

Saving Preferences(保存の設定)

保存の設定

Default Image Format

画像の保存形式をjpgにするかpngにするかを選べます。
ここで設定した形式でしか保存できないので気を付けてください。

Skip editing when capturing entire page
ページ全体のキャプチャーをした時に、編集画面をスキップするかの設定です。

Always get shareable links for images uploaded to Google Drive
Googleドライブに画像をアップしたら、共有リンクを取得するかどうかの設定です。

Show Save-As window to choose location for downloads

画像をローカルに保存する時のデフォルトの保存先を指定できます。
ローカルに保存したい時はONにします。

Add Date and URL to a Screen shot after clicking Done

画像の編集が終わりDoneボタンをクリックした時に、
日付とアドレスを追加するかの設定です。

More Options(その他の設定)

その他の設定

Default popup menutab

アイコンをクリックした時に表示されるポップアップを
RecordかScreenshotのどちらにするかです。
よく使う方に設定しましょう。

Enable darkmode for extension's popup menu

ポップアップの背景を黒にします。

insert AwesomeScreenshot icon into the compose window of Gmail

Gmailを作成する時にAwesomeScreenshotのアイコンを挿入するかしないかです。

Resize a screenshot to 50% of its original size for Retina screen

Retinaでスクリーンショットをした時に、サイズを半分にするかです。
mac book proのRetinaスクリーンでスクリーンショットを撮ると、
サイズが倍になるみたいですね。

Link Expanding

チェックを入れたサービスにキャプチャーした画像や動画を埋め込むかどうかの設定です。

まとめ

今までは画像のキャプチャーはWindows標準搭載のsnipping toolを使っていました。
snipping toolでも、ペンや蛍光ペンは使えますがそれだけなんですよね。

だから、説明を入れる場合は、snipping toolでキャプチャーした後、
ファイアアルパカでその画像を開いて編集という作業をしていました…
でも、この拡張機能を使えば、それを一度で済ますことができます。

便利!

フォントの変更に日本語が対応していなかったり、
ハイライトで直線を書くのが難しかったりしますが、それでも十分な機能はあります。
複雑な処理をするならペイントツールの方がいいですが…

Chromeでしか使えませんが、とても便利なのでぜひ使ってみてください!
(Firefox版もあるみたいですが、こちらはあまり評判は良くないみたいですね…)

有料版はマイページに保存しておくファイルの個数が増えたり、
動画の録画時間が増えたりするので、たくさんシェアする人は有料版も
ありかもしれませんね。