MENU
いろはくま
HSS型HSPとして「生きづらさ」に悩み、30代手前で起業を決意。Webデザイン職業訓練校に通い、Web業界へ。現在はWebデザイナーとして会社員とフリーランスを両立しています。このブログでは、未経験からのWebデザイナーになるための方法と起業・フリーランスの方へ私の体験談をもとに、役立つ情報を発信しています。
\ Webデザイナーになるロードマップ公開中 /

WEBページをスクロールしながらスクリーンショットができる!【Awesome screenshot】使い方と機能紹介

Webページの全体や表示されている画面のみ、スクロールしながら撮影したい箇所のみスクリーンショットができるのが、Chrome拡張機能の「Awesome screenshot|素晴らしい画面の並べ替えとスクリーンショット」です。

この拡張機能一つで、サイト画面キャプチャから画像編集まで完結します!

さらに、録画機能も搭載 されてます。

Web関連の仕事をする方にとっては、作業効率を大幅にアップ出来るので必見です。

この記事では、「Awesome Screenshot (素晴らしい画面の並べ替えとスクリーンショット)」の特徴と便利な使い方、保存方法まで画像付きで詳しく紹介していきます。

気になる方は、ぜひ参考にしてください!

目次

Awesome Screenshot(素晴らしい画面の並べ替えとスクリーンショット)とは?

『Awesome Screenshot(素晴らしい画面の並べ替えとスクリーンショット)』は、Webページの全画面や表示されている一部のスクリーンショット、WEBページをスクロールしながら任意の場所まで選択してスクリーンショット+画像編集もできるChrome拡張機能です。

開発の歴史と進化

Awesome Screenshot は、Diigo社によって2010年頃に開発され、長年にわたってアップデートが続けられています。

公式サイト(https://www.awesomescreenshot.com/)やWayback Machineの記録によると、2010年10月には既に提供が開始されていたことが確認されています。

名称変更について

2022年頃から、「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 ユーザーで評価も高かったため、インストールしました。

以下、比較表を参考にどうぞ。

項目FireshotAwesome Screenshot
利用ユーザー数300万人300万人
評価(5点満点)4.8 4.7
レビュー数4.5万件2.8万件
2025年3月17日現在

ユーザー数や評価はそれほど変わらないものの、「Fireshot」と大きく異なる点は、

画面録画が簡単にできることです。

画面録画(画面キャプチャ)を無料で提供している機能は、なかなかないので助かります。

「キャプチャ」の右側、「レコード機能(録画機能)」タブ切り替えで利用できます。

素晴らしい画面の並べ替えとスクリーンショット|レコード機能

「Awesome Screenshot」インストール方法と使い方

ここでは、「Awesome Screenshot(素晴らしい画面の並べ替えとスクリーンショット)」のダウンロードから使い方までを解説していきます。

STEP
Chrome ウェブストアへ

普段使っているGoogleアカウントにログインした状態で、以下のURLをクリックします。

Chrome ウェブストア|「Awesome Screen Recorder & Screenshot(素晴らしい画面の並べ替えとスクリーンショット)

STEP
Chromeに追加ボタン

Awesome Screenshot素晴らしい画面の並べ替えとスクリーンショット」のインストールページでChrome に追加ボタンを押します。

STEP
拡張機能を追加

『素晴らしい画面の並べ替えとスクリーンショットを追加しますか?』というポップアップ表示がされたら、拡張機能を追加ボタンをクリックします。

STEP
ピン留めしておくと便利!

追加できたら、右上の拡張機能アイコンを押して、

追加した「素晴らしい画面の並べ替えとスクリーンショット」をピン留めしておきます。

STEP
キャプチャを選択

スクリーンショットしたいページを開き、ピン留めしておいた「素晴らしい画面の並べ替えとスクリーンショット」をクリック。

『キャプチャ(スクリーンショット)』と『レコード』タブがあるので、画面静止画を撮影したい場合はキャプチャを選択します。素晴らしい画面の並べ替えとスクリーンショット

撮影したい箇所に合わせて3パターンから選べます。

ショートカットキーも便利です!

  • 表示部分:今見えている画面を撮影(Ctrl+Shift+V)
  • フルページ:上から下までページ全体撮影(Ctrl+Shift+E)
  • 選択範囲:ドラックまたはページスクロールで任意の箇所まで撮影(Ctrl+Shift+S)

「Awesome Screenshot」8つの編集機能

スクリーンショット機能+編集機能も充実!

ここでは、「Awesome Screenshot」の主な編集機能8つを紹介していきます。

1.リサイズ

任意のサイズでリサイズ(縦横比固定または縦横比固定外し)ができます。

素晴らしい画面の並べ替えとスクリーンショット|リサイズ機能

2.トリミング

任意のサイズでトリミングできます。

右側のサイズ表示箇所「Width(横幅)」、「Height(高さ)」で、サイズ指定も可能です。

素晴らしい画面の並べ替えとスクリーンショット|トリミング機能

3.ペンツール

線の太さは(2、4、6、8、16)の5段階で調整可能です。

たとえば、社内用で指示を出す際に画像で見てほしい箇所を丸で囲ったり、矢印を書いたり、文字がすぐに書けるのは便利ですよね。

素晴らしい画面の並べ替えとスクリーンショット|ペンツール機能

4.ブラシツール

ブラシの太さは(6、8、16、32、48)の5段階で調整可能です。

目立たせたい箇所に簡単にマーカーがひけて便利!

色変更可能でカラーコードでも指定できますし、カラーパレットから任意の色を選べます。

素晴らしい画面の並べ替えとスクリーンショット|ブラシツール機能

5.図形(円形・四角形)ツール

円形・四角形から選択できます。

大きさの調整や塗りつぶし、線の太さも調整可能です。

一度サイズを確定した後でもサイズや形状調整ができます。

素晴らしい画面の並べ替えとスクリーンショット|図形ツール機能

6.線と矢印(矢印3種)ツール

線の太さは(2、4、6、8、16)の5段階で調整可能です。色の変更もできます。

素晴らしい画面の並べ替えとスクリーンショット|線・矢印機能

7.テキストツール

文字色、背景色、枠線、ドロップシャドウ、文字サイズ、フォント変更が可能です。

素晴らしい画面の並べ替えとスクリーンショット|テキスト機能

8.ブラー(モザイク機能)ツール

ブログ運用やサイト運用している方に特におすすめの機能です。

個人情報など隠したい情報があれば、すばやくモザイクをかけられます。

素晴らしい画面の並べ替えとスクリーンショット|ブラー機能

など…とにかく編集機能モリモリでした。

こんなに機能が充実しているのに無料なのは大変ありがたいですね!

Chrome ウェブストア|「Awesome Screen Recorder & Screenshot(素晴らしい画面の並べ替えとスクリーンショット)

保存ファイル形式の選択(PNG / JPG)

スクリーンショットの保存ファイル形式は、jpgファイル、pngファイルに対応してます。

書き出し時にPDF選択も可能です。

保存形式の変更や確認は以下のように、オプション(歯車マーク)から行います。

素晴らしい画面の並べ替えとスクリーンショット|保存形式変更1

「保存の設定」から、スクリーンショットのファイル形式:PNGまたはJPGの2つから選択できるようになっています。

ご希望のファイル形式をクリックしてオンにしてください。

素晴らしい画面の並べ替えとスクリーンショット|保存形式変更2

保存ボタンはなく、自動保存になっているので、どちらかを選択するのみで設定は完了です!

スクリーンショットのコピーと保存

ここでは、スクリーンショットをしたあとのコピーまたは保存方法を説明します。

編集後、右上の[Copy]でコピーが可能です。

そのまま、デザインツールやチャットツール、ブログなどにペースト出来ます。

キャプチャした画像をいちいちダウンロードをしなくて済むのも魅力的です。

保存する場合や他のアクションを行う場合には、[Done](終わり)をクリックしてください。

素晴らしい画面の並べ替えとスクリーンショット|保存

まとめ

現在『FireShot』を使っている方は、ぜひ今回ご紹介した『Awesome Screenshot|素晴らしい画面の並べ替えとスクリーンショット』も試してみてほしいです!

特にデザイン関連のお仕事している方やブログ運用している方は、スクリーンショットにコメントを入れたり、図形や矢印を入れたいタイミングが多くあると思います。

こちらのツールが私の知っているChrome拡張機能の中でも1番使いやすく、時短・効率化できるのでオススメします。

他にもスクリーンショット機能が備わっている「 Toasty! Screenshot 」を試そうと思いましたが、こちらも『FireShot』同様にサポート終了のお知らせがあったため、今回は『素晴らしい画面の並べ替えとスクリーンショット』をご紹介しました。

Toasty! Screenshotサポート終了のお知らせ

2025年3月17日追記:「 Toasty! Screenshot 」は、2025年3月現在以下の通り、利用できなくなりましたので、もしこちらの機能を利用していた方は、代替ツールとして『Awesome Screenshot|素晴らしい画面の並べ替えとスクリーンショット』を使ってみてください。

この拡張機能は、Chrome 拡張機能のベスト プラクティスに沿わないため、ご利用いただけなくなりました。


もし「こっちの方が機能充実しててオススメだよ~!」という拡張機能があれば、ぜひコメントで教えてください。

同じタイミングでサポート終了通知が来ていたサイト内の画像をダウンロードできる機能【Image Downloader】の代替ツール【Imageye】を以下の記事で紹介してます。

「便利Chrome拡張機能7選」記事も更新しました。

今後も使いやすいツールがあれば、投稿していきます。皆さんの毎日が笑顔で満ち溢れますように。

また次の記事でお会いしましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次