でもサイトは大体縦長だから難しいよね…
インストールから使い方まで詳しく解説していくね！
この記事で分かること！
- FireShotのインストール方法
- FireShotでスクリーンショットを撮る方法
- そのほかにFireShotで可能なこと
Webページ全体のスクリーンショットを撮りたい！
Webページ全体のスクリーンショットを撮りたい場面って意外に多いんですよね。
- Webページを1枚の紙に印刷したい
- デザインの参考に全体の雰囲気を把握したい
などなど。
通常のスクリーンショットだとモニターの画面サイズでしか撮影できず、Webページ全体を撮りたい場合にとても不便。
スクロールしながら何枚も撮影して後から結合するという方法もありますが、そんな面倒なことやってられません。
これらの悩みを解決できるのがGoogle Chromeの拡張機能「FireShot」なんです！
これを使えばWebページ全体のスクリーンショットを撮影するだけでなく、様々なファイル形式（拡張子）で保存できちゃいますよ！
FireShotをインストール
では早速インストールしていきましょう。
お使いのブラウザがChromeの方
Chromeのウェブストアからインストールすることができます。
「FireShot」と検索するか、上記のリンクをクリックしてFireShotのページを開いてください。
ページを開いたら、右にある「Chromeに追加」をクリック
すると確認画面が表示されるので、「拡張機能に追加」もクリックします。
はい、これでインストール完了です！
ブラウザを見てみると、右上にFireShotのアイコンが出ているはずです。
お使いのブラウザがFirefoxの方
Firefoxの場合は以下のURLからアドオンを追加できます。
FireShotの使い方
FireShotの使い方はとっても簡単です！
では実際にサイト全体のスクリーンショットを撮ってみましょう！
①スクリーンショットを撮影
まずブラウザ右上のアイコンをクリックします。
するとキャプチャの種類が出てくるので、「ページ全体をキャプチャ」をクリック
別タグに保存の設定画面が表示されます。
②保存方法を選択
表示された保存の設定画面から、画像として保存を選択します。
そうすると、このような名前を付けて保存のウィンドウが出てきます。
デフォルトだとダウンロードフォルダ内に「FireShot」フォルダが自動で作成され、そこに保存されるようになっています。
そのままでもいいですが、もし嫌な場合は保存先のフォルダを変更しましょう。
デフォルトだとすごい長いからね。
③保存されているか確認
保存先のフォルダにスクリーンショットが保存されているか確認しましょう。
キチンと保存されていたら無事完了です。簡単でしたね！
Webページ全体を高解像度で保存するスキルは、Webデザイナーやディレクターの実務でも重宝される基本スキルのひとつです。
Webデザイナーへの転職・フリーランス独立を考えているなら、Webデザイナー転職に強いエージェント10選で自分に合ったサポートを見つけましょう。未経験OKのエージェントも掲載しています。
そのほかにFireShotで可能なこと
①pdfとして保存
pdfで保存したい場合はこちらをクリックすると、pdf形式で保存することができます。
メールで誰かに送りたい場合に便利な機能。
自動で画像を添付した状態のメール作成画面が開きます。
③クリップボードにコピー
クリップボードにコピーすることができます。
Photoshopなどで使いたい場合は、コマンドｃで貼り付けることが出来るので、いちいち画像を保存する必要がありません。
④印刷
撮影した画像をそのまま印刷することができます。
FireShotを有料版について
FireShotには有料版があり、「39.95ドル(USD)」でアップグレードできます。
ですが、個人的にはあまり必要性を感じません。
便利だとは思いますが、約4,000円を出すまでの価値はないかなと。
一応気になった方のために、無料版との比較を載せておきます。
FireShotと他のスクリーンショット拡張機能の比較
FireShot以外にも、Webページ全体を撮影できるChrome拡張機能はいくつかあります。よく使われる拡張機能と比較してみましょう。
| 拡張機能 | 無料利用 | ページ全体 | PDF保存 | 日本語対応 |
|---|---|---|---|---|
| FireShot | ◎（基本機能全て） | ◎ | ◎ | ◎ |
| GoFullPage | ○（基本機能） | ◎ | △（有料） | ○ |
| Nimbus Screenshot | ○（基本機能） | ◎ | ○ | △ |
| Chrome標準機能（DevTools） | ◎ | ○（操作やや複雑） | ✕ | ◎ |
FireShotの強みは無料版でPDF保存まで対応していること。GoFullPageは動作が軽快ですが、PDF出力や詳細設定ではFireShotのほうが充実しています。Webデザインの参考収集用としては、FireShotが最もコスパに優れたツールです。
FireShotが動かないときの対処法
FireShotを使っていると、まれに正常に動作しないことがあります。よくあるトラブルと解決策をまとめました。
Chromeのアップデート後に動かなくなった
Chromeのバージョンアップ直後は拡張機能が一時的に動作しなくなることがあります。
対処法：アドレスバーに「chrome://extensions/」と入力 → FireShotを一度「無効」にして再度「有効」にする。それでも直らない場合は一度アンインストールして再インストールしてみてください。
キャプチャしても画像が崩れる・白くなる
ページ読み込み中にキャプチャすると、画像が崩れたり白くなったりすることがあります。
対処法：ページが完全に読み込まれてからキャプチャする。画像や動的コンテンツが多いページは数秒待ってから撮影しましょう。
ファイルが保存されない・ダウンロードされない
ブラウザのダウンロード設定でブロックされている可能性があります。
対処法：Chrome設定 → 「プライバシーとセキュリティ」→「サイトの設定」→「ポップアップとリダイレクト」を確認し、FireShotからのダウンロードが許可されているかチェックしてください。
PDF保存で文字化けする
フォントの関係でPDF化したときに日本語が文字化けするケースがあります。
対処法：保存形式をPDFではなくPNGまたはJPEGに変更して保存してください。Webページを画像として保存する用途ならPNGで十分です。
まとめ
このようにFireShotを使えば縦に長いWebサイト全体のスクリーンショットが簡単に撮れちゃいます！
常にブラウザ右上にアイコンが表示されるので、このサイト良いな！と思ったらすぐに撮影できますし、非常に便利です。
みなさんもぜひ使ってみてください！
こちらもチェック！
【Simple CSS】はブログデザインに必須なプラグイン！
🖥️ Webデザインのスキルをもっと伸ばしたい方へ
FireShotのようなツールを使いこなすWebデザイナーを目指しているなら、デジLIG（旧LIG）で現役デザイナーからプロの実践スキルを学びませんか。補助金（最大70%還付）対応で費用を抑えて受講できます。
※完全無料・オンライン可・強引な勧誘なし
Photoshopなどのデザインスキルを本格的に仕事にしたい方は、デジLIG（デジタルハリウッドSTUDIO by LIG）の評判・料金・補助金解説もあわせてご覧ください。
よくある質問
Q. FireShotは無料で使えますか？
FireShotには無料版と有料版（Pro）があります。無料版でもWebページ全体のスクリーンショット撮影やPNG・PDF形式での保存など基本機能が使えます。Pro版では完全無制限のキャプチャや印刷機能など追加機能が利用できます。
Q. FireShotでWebページ全体をキャプチャするには？
ChromeにFireShotをインストール後、ブラウザ右上のFireShotアイコンをクリックし「ページ全体をキャプチャ」を選択します。ページを自動スクロールしながら1枚の画像にまとめてくれるため、縦長ページでも簡単に全体キャプチャが可能です。
Q. FireShotで保存できる画像形式は？
PNG・JPEG・PDF・BMP形式で保存できます。またクリップボードへのコピーやメール送信も可能です。PDF保存はWebページをそのままドキュメント化したいときに特に便利です。
コメント