![](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots.png)
Firefox Screenshots が便利で使えそうなので簡単にご紹介します。簡単にスクショが撮れてオンラインでシェアできるツールです。
- スクショを撮って(レスポンシブモードもOK!)
- コメントを入れて
- リンクを送ってシェアする
ことが、さくっとできてしまう便利ツールです。
シェアする際には公開期間を選べるので、10分限定公開なんてこともできちゃいます。いろいろな場面で使えそうですね。
スクショの撮り方
アドレスバーの点々アイコンをクリックすると「スクリーンショットを撮る」という項目があるので、それを選びます。
![FirefoxのアドレスバーにあるFirefox Screenshotsを開くためのメニュー](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-menu.jpg)
スクショの画面はこんな感じです
![Firefox Screenshotsを開いたところ](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-main.jpg)
ページ全体、表示範囲、または、範囲を選んでスクショを撮れます。
ページ全体の場合
![Firefox Screenshotsのページ全体のスクショを撮る画面](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-entire-screen.jpg)
範囲を選ぶ場合
![Firefox Screenshotsでページの一部の範囲を選択してスクショを撮る画面](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-part.jpg)
あと、スクショの画面でページ上のあるセクションにマウスオーバーすると、div
などの範囲(たぶん)のスクショが撮れます。
例えば、タイトルエリアを選ぶとこんな感じ
![Firefox Screenshotsで画面上のタイトル・エリアを選んだ状態](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-title.jpg)
ツールバーを選択するとこんな感じ
![Firefox Screenshotsで画面上のツールバー・エリアを選んだ状態](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-toolbar.jpg)
マウスを動かすと真ん中の目が追いかけてきてかわいいw
スクショの管理とシェア
スクショの管理はscreenshots.firefox.com/shots でできます。ここに自分が撮ったスクショの一覧が表示されて、編集、シェア、ダウロード、削除ができるようになっています。
![Firefox Screenshotsの「自分のショット」画面](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-shots.jpg)
簡単な編集ができる
あと、撮ったスクショにコメントを入れるためのツールがあって、簡単な編集ができます。「自分のショット」一覧から編集したいスクショを選んでペン・アイコンをクリックします(※)。
![Firefox Screenshotsの「自分のショット」画面でアイテムを選んだ状態](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-edit.jpg)
以下の編集ができます
- 画像のクロップ
- ペン・ツールでコメントなどを書く
- ハイライト・ツールでハイライト
- 公開期間の設定
![Firefox Screenshotsの編集画面。ペン・ツールやクロップ・ツールが使える](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-edit-tools.jpg)
公開期間
公開期間は以下から選べます。
- 無期限
- 10分
- 1時間
- 1日
- 1週間
- 2週間
- 1カ月
テキスト入力ツールがないのは残念ですが、まだBetaなので、これからの機能追加に期待したいです。
※ちなみに、「自分のショット」の一覧はFirefoxアカウントにログインしてなくても見られるようですが、その端末で撮ったスクショしか見られないみたいです。一覧はあくまで端末上にあってクラウドで同期されてるわけじゃないんですね。
レスポンシブデザインモードでのスクショにも対応
Firefoxには画面サイズを簡単にモバイル端末のサイズに切り替えられる「レスポンシブデザインモード」というツールがあるんですが、このツール使用時でもスクショが撮れます。
![レスポンシブデザインモードでFirefox Screenshotsを立ち上げた画面](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-rwd-mode.jpg)
画面全体のスクショも撮れるので全体のチェックに使ったり、ページの一部のスクショを撮って「iPhone 7のサイズでここが崩れてるよ」と、Trello やSlack でサクッとシェアできますね。
![レスポンシブデザインモードでFirefox Screenshotsでページ全体のスクショを撮る](https://parashuto.com/rriver/wp/wp-content/uploads/2018/04/firefox-screenshots-rwd-mode-entire.jpg)
以上、Firefox Screenshotsのご紹介でした!
Enjoy taking screenshots with Firefox Screenshots!
2018年4月4日に公開された記事です。
About the author
![Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵](https://parashuto.com/rriver/wp/wp-content/themes/rriver2/img/ryo-watanabe.png)
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。