Webページの全体や表示されている画面のみ、スクロールしながら撮影したい箇所のみスクリーンショットができるのが、Chrome拡張機能の『Awesome screenshot｜素晴らしい画面の並べ替えとスクリーンショット』です。
この拡張機能一つで、サイト画面キャプチャから画像編集まで完結します！
さらに、録画機能も搭載 されてます。
Web関連の仕事をする方にとっては、作業効率を大幅にアップ出来るので必見です。
この記事では、「Awesome Screenshot （素晴らしい画面の並べ替えとスクリーンショット）」の特徴と便利な使い方、保存方法まで画像付きで詳しく紹介していきます。
気になる方は、ぜひ参考にしてください！
Awesome Screenshot（素晴らしい画面の並べ替えとスクリーンショット）とは？
『Awesome Screenshot（素晴らしい画面の並べ替えとスクリーンショット）』は、
Webページを開いた際、以下3つの方法を選択して簡単にスクリーンショットができます！
- 表示部分：今見えている部分のみスクリーンショット
- フルページ：WEBページの上部（ヘッダー）から最下部（フッター下）まで全てをスクリーンショット
- 選択範囲：スクロールしながら、選択範囲を任意の場所まで指定したスクリーンショット
また、上のスクリーンショット機能に加えて＋画像編集もブラウザ上で出来る便利なChromeの拡張機能です。
開発の歴史と進化
Awesome Screenshot （オーサム・スクリーンショット）は、Diigo（ディゴ）社 によって2010年頃に開発され、長年にわたってアップデートが続けられています。
公式サイト（https://www.awesomescreenshot.com/）やWayback Machineの記録では、
2010年10月には既にサービスの提供が開始されていたことが確認できます。
Awesome Screenshot の名称変更について
2022年頃から、
「Awesome Screenshot」→「素晴らしい画面の並べ替えとスクリーンショット」 へ
名称変更されましたが、Awesome Screenshot 公式サイト では現在も「Awesome Screenshot」として記載されているため、日本語版のみ名前が変更された可能性が高いです。
同様のツール「Fireshot」
「Awesome Screenshot」と同様に
スクリーンショット機能を提供する『Fireshot（ウェブページ全体をスクリーンショット ）』も、SmartSoft Ltd.によって2007年～2008年頃に開発され、現在も継続的にアップデートされています（Fireshot 公式サイト｜2007年のお知らせ参照）。
どちらのツールも10年以上にわたり改良が続けられており、信頼できるスクリーンショットツールとして多くのユーザーに利用されています。
「Awesome Screenshot」と「Fireshot」の比較
以前は、同様の機能を持つ「ウェブページ全体をスクリーンショット – FireShot」という拡張機能を使ってサイトの画面を保存していましたが、それと比べて「素晴らしい画面の並べ替えとスクリーンショット（Awesome Screenshot）」の方が個人的に使い勝手が良かったので、違いなど踏まえてお伝えしていきます。
「Awesome Screenshot」の使用ユーザー数は「FireShot」と同様、3,000,000 ユーザーで評価も高かったため、インストールしました。
以下、比較表を参考にどうぞ。
| 項目 | Fireshot | Awesome Screenshot |
|---|---|---|
| 利用ユーザー数 | 300万人 | 300万人 |
| 評価（5点満点） | 4.8 | 4.7 |
| レビュー数 | 4.7万件 | 2.9万件 |
ユーザー数や評価はそれほど変わらないものの、「Fireshot」と大きく異なる点は、
画面録画が簡単にできる ことです。
画面録画（画面キャプチャ）を無料で提供している機能は、なかなかないので助かります。
「キャプチャ」の右側、「レコード機能（録画機能）」タブ切り替えですぐに利用できます。
「Awesome Screenshot」インストール手順
ここでは、クローム拡張機能「素晴らしい画面の並べ替えとスクリーンショット（Awesome Screenshot）」のダウンロード手順を紹介します。
普段使っているGoogleアカウントにログインした状態で、以下のURLをクリックします。
Chrome ウェブストア｜素晴らしい画面の並べ替えとスクリーンショット
「素晴らしい画面の並べ替えとスクリーンショット」のインストールページでChrome に追加ボタンをクリックします。
『素晴らしい画面の並べ替えとスクリーンショットを追加しますか？』というポップアップ表示がされたら、拡張機能を追加ボタンをクリックして拡張機能に入れます。
追加できたら、右上の拡張機能アイコンを押して、
今追加した「素晴らしい画面の並べ替えとスクリーンショット」をピン留めしておきます。
画面キャプチャ方法とスクリーンショット3パターン
ここでは、スクリーンショットの方法と選べる撮影パターンを紹介します。
スクリーンショットしたいページを開き、先にピン留めしておいた「素晴らしい画面の並べ替えとスクリーンショット」のアイコンをクリックします。
『キャプチャ（スクリーンショット）』と『レコード』タブがあるので、画面静止画を撮影したい場合は左側のタブキャプチャを選択します。
主な3パターンのスクリーンショット
撮影したい箇所に合わせて、3パターンから選べば簡単にスクリーンショットできます。
- 表示部分：今見えている画面を撮影
- フルページ：上から下まで開いているページ全体撮影
- 選択範囲：ドラックまたはページスクロールで任意の箇所まで撮影
遅延後の表示部分をスクリーンショット
上で紹介した、3つの撮影パターン以外にも便利な撮影方法があります！
この「遅延後の表示部分」をクリックすると3秒のカウントダウンがはじまります。
例えば、ウェブサイトで、マウスホバーした（マウスが触れた）ときにしか見れない動きありますよね？そんなときにこの機能が役立ちます！
画面全体またはアプリウィンドウをスクリーンショット
今見ているWebページのみに限らず、タブやモニター画面を含めたブラウザ外部の画面までスクリーンショットできちゃいます！
一応、Webページの外に出ることになるので、画面コンテンツの共有リクエストで承認を求めてくれる仕組みになってます。
画面全体または、ウィンドウどちらかを選択後、画面共有に問題がない場合は、「共有」ボタンクリックしてください。
「Awesome Screenshot」8つの編集機能
スクリーンショット機能 ＋ 編集機能 も充実！
ここでは、「素晴らしい画面の並べ替えとスクリーンショット（Awesome Screenshot）」
主な編集機能8つ を紹介していきます。
1.リサイズ
任意のサイズでリサイズ（縦横比固定または縦横比固定外し）ができます。
2.トリミング
任意のサイズでトリミングができます。
右側のサイズ表示箇所「Width（横幅）」、「Height（高さ）」で、サイズ指定も可能です。
3.ペンツール
線の太さは「2、４、６、８、16」の5段階で調整可能です。
たとえば、社内用で指示を出す際に画像で見てほしい箇所を丸で囲ったり、矢印を書いたり、文字がすぐに書けるのは便利ですよね。
4.ブラシツール
ブラシの太さは「6、8、16、32、48」の5段階で調整可能です。
目立たせたい箇所に簡単にマーカーがひけて便利！
色変更可能でカラーコードでも指定できますし、カラーパレットから任意の色を選べます。
5.図形（円形・四角形）ツール
円形・四角形から選択できます。
もちろん、図形の大きさの調整、変更や塗りつぶし、線の太さ「2、４、6、8、16」も調整可能です。
一度サイズを確定した後でもサイズや形状（長さ・高さ）を調整できます。
6.線と矢印（矢印3種）ツール
線の太さは「2、４、６、８、16」の5段階で調整可能です。色の変更もできます。
7.テキストツール
テキストツールでは、以下のような装飾や色変更ができます。
- 文字色
- 背景色
- 枠線
- ドロップシャドウ
- 文字サイズ
- フォント
8.ブラー（モザイク機能）ツール
ブラー機能は、ブログ運用・サイト運用をしている方に特におすすめの機能です。
個人情報やパスワードなど、隠したい情報があれば、すばやくモザイクがかけられます。
など…とにかく編集機能モリモリでした。
こんなに機能が充実しているのに無料なのは大変ありがたいですね！
Chrome ウェブストア｜素晴らしい画面の並べ替えとスクリーンショット
保存ファイル形式の選択（PNG / JPG）
素晴らしい画面の並べ替えとスクリーンショットでスクリーンショットしたあとの
保存ファイル形式は、jpgファイル、pngファイルに対応してます。
※書き出し時にPDF選択も出来ます。
保存形式の変更や確認は以下のように、オプション（歯車マーク）から行います。
「保存の設定」から、
スクリーンショットのファイル形式：PNGまたはJPGの2つから選択できるようになっています。
ご希望のファイル形式をクリックしてオンにしてください。
保存ボタンはなく、自動保存になっているので、
どちらかのファイル形式を選択するのみで設定は完了です！
スクリーンショットのコピー
ここでは、素晴らしい画面の並べ替えとスクリーンショットでスクリーンショットをしたあとの
「コピー」または「保存方法」を説明します。
編集後、右上の［Copy］でコピーが可能です。
そのまま、デザインツールやチャットツール、ブログなどにペースト出来ます。（貼り付けはCtrl+VでOK！）
キャプチャした画像をいちいちダウンロードしなくて済むのも魅力的です。
スクリーンショットの保存
ファイルとして保存する場合や他のアクション（PDF保存や印刷など）を行う場合には、右上の［Done］（終わり）をクリックしてください。
以下のような画面が表示されるので、行いたいアクションを選択してください。
- Download（上で設定している保存形式でダウンロード）
- Copy（コピー）
- PDF（PDFファイル保存）
- Print（プリンターを選択して印刷）
まとめ
現在『FireShot』を使っている方は、ぜひ今回ご紹介した『Awesome Screenshot｜素晴らしい画面の並べ替えとスクリーンショット』も試してみてほしいです！
特にデザイン関連のお仕事している方やブログ運用している方は、スクリーンショットにコメントを入れたり、図形や矢印を入れたいタイミングが多くあると思います。
こちらのツールが私の知っているChrome拡張機能の中でも1番使いやすく、時短・効率化できるのでオススメします。
他にもスクリーンショット機能が備わっている「 Toasty! Screenshot 」を試そうと思いましたが、こちらも『FireShot』同様にサポート終了のお知らせがあったため、今回は『素晴らしい画面の並べ替えとスクリーンショット』をご紹介しました。
2025年3月17日追記：「 Toasty! Screenshot 」は、2025年3月現在以下の通り、利用できなくなりましたので、もしこちらの機能を利用していた方は、代替ツールとして『Awesome Screenshot｜素晴らしい画面の並べ替えとスクリーンショット』を使ってみてください。
この拡張機能は、Chrome 拡張機能のベスト プラクティスに沿わないため、ご利用いただけなくなりました。
もし「こっちの方が機能充実しててオススメだよ～！」という拡張機能があれば、ぜひコメントで教えてください。
同じタイミングでサポート終了通知が来ていたサイト内の画像をダウンロードできる機能【Image Downloader】の代替ツール【Imageye】を以下の記事で紹介してます。
「便利Chrome拡張機能7選」記事も更新しました。
今後も使いやすいツールがあれば、投稿していきます。皆さんの毎日が笑顔で満ち溢れますように。
また次の記事でお会いしましょう！
