• HOME
  • column
  • ディレクション
  • 【Webディレクター必見】Chrome拡張機能|Webページ全体のスクショを撮るならこれ!『Awesome Screenshot』の使い方!

【Webディレクター必見】Chrome拡張機能|Webページ全体のスクショを撮るならこれ!『Awesome Screenshot』の使い方!

皆さんこんにちは!

TOKIMOです!

「Aun」に引き続き、ディレクター必見のGooglechromeの拡張機能を使うことで、Web制作会社とのやり取りがスムーズに行くツールを紹介します!

Aunと組み合わせて使うこともできるので良かったら試してみてください!

皆さんはこれまでにWebサイトやブログのページ全体を「ブラウザーで表示している見た目のまま画像として保存したい! 」と思ったことはありませんか?

Webサイトなどの縦長のスクリーンショットは、WindowsやMacの標準機能ではうまく撮影できませんがChromeの拡張機能を使えば簡単にできます!

これまでは…
  • PCのプリントスクリーンで1枚ずつ撮影
  • スマートフォンで直接PCの画面を撮影
  • スクロールしている画面を動画撮影

などの方法がありますが、どれも手間で面倒ですよね。スマートフォンやPCのプリントスクリーンで撮影してもパワーポイントやエクセルなどに貼って修正の指示を書き込まないといけません

そんな中、今回ご紹介するツールは、Googlechromeの拡張機能を導入することで簡単にこれらの問題を解決できるツールです。

Chrome拡張機能の『Awesome Screenshot』

会員登録不要で利用料も無料!

Chromeで表示しているWebページを自動的にスクロールしながら撮影し、ページ全体のスクリーンショットを1枚の画像として簡単に保存できます。
しかも、手書きペンやフォントで注釈を加えることも可能です!

「Awesome Screenshot」をインストールする

Chromeウェブストアから拡張機能を追加する

上記のリンクからChromeでアクセスし、[CHROMEに追加]をクリックします。
[拡張機能を追加]をクリックします。

Awesome Screenshotがインストールされたのをチェック

Awesome ScreenshotがChromeにインストールされました。
アドレスバーの右側にアイコンが追加されたことを確認しましょう。

Webページのスクリーンショットを撮影・保存する

「フルページ」:ページ全体のスクリーンショットを撮影する
「表示部分」:PCの画面で表示された部分のスクリーンショットを撮影する
「選択範囲」:自分で範囲を決めた画面のスクリーンショットを撮影する

画面がうまく撮影されました

※全て75%表示となっております。

「フルページ」:ページ全体のスクリーンショットを撮影する

「表示部分」:PCの画面で表示された部分のスクリーンショットを撮影する
「選択範囲」:自分で範囲を決めた画面のスクリーンショットを撮影する

撮影したスクリーンショットに注釈を書き込む

上部に並んでいるツールバーを使うと、スクリーンショットに注釈を書き込めます。
画像として保存するには[Done]をタップします。

スクリーンショットを保存する

左のボタンから

①画像で保存する
②pdfで保存する
③すぐに印刷する
④画像をコピーする

基本的な操作方法は以上となります。
非常に簡単ですよね??

他にも色々と便利な使い方や、裏ワザ?もあるとか無いとかって話ですが、まずは1度触ってみることをオススメします!

最後に

今回も便利なツールのChrome拡張機能の『Awesome Screenshot』をご紹介させて頂きましたが、いかがでしたでしょうか?

ぜひ導入して使ってみてください!

使用方法のYouTube動画もあるようなので良かったらご覧ください!

WEBディレクター/営業|東京都のWEB制作/マーケティングのベンチャー企業に所属。ディレクターとしての経験やお役立ち情報を発信していきます。

プロフィール

関連記事