WEBページ全体のスクリーンショットをブラウザの基本機能だけで撮影する方法

WordPressに限らずサイトやブログを運営していると、トップページやエントリーをちまちまとスクロールさせながら撮影した部分的なキャプチャ画像では無く、ヘッダーからフッターまで1枚にまとまった状態でレイアウトを確認したい場合もあるのでは無いでしょうか。

「いや別に」とか言われるとそこで話が終わってしまうので「そんな時もある」という仮定で話を進めますが、今回のエントリーでは「WEBページ全体のスクリーンショットをブラウザの基本機能だけで撮影する方法」について簡単に紹介したいと思います。

スポンサーリンク

アドオンのインストールは不要

今回は「ブラウザの基本機能のみ」という事で、アドオンをインストールしなくてもWEBページ全体のスクリーンショットが撮影可能なFirefoxとVivaldiを利用します。

Firefoxでの撮影方法

それではまずFirefoxでの撮影方法からいってみたいと思います。

Firefoxのダウンロードはこちらから

必要に応じてFirefoxをインストールして下さい。

ちなみに私が愛用しているFirefoxの派生版「Cyberfox」のダウンロードはこちらからになりますのでよろしければお試しを。

インストールが済んだらFirefox、またはCyberfoxを起動してスクリーンショットを撮影したいサイトを開きましょう。

開発ツールを使用します

以下の何れかの方法で開発ツールのウィンドウを表示します。

Firefox 開発ツールを表示Firefox 開発ツールを表示
  • F12キーを押す
  • ページ上のどこでも良いので右クリック > 要素を調査
  • メニューバーの ツール > ウェブ開発 > 開発ツールを表示

設定を変更していなければ画面の下の方にこんな感じのウィンドウが出てくるかと思います。

Firefox 開発ツール画面

画面右下の方にあるカメラのアイコンを…ってちょっと小さくてわかりにくいので、もう少し拡大してみましょう。

Firefox 開発ツール拡大画面 カメラアイコン

このカメラのアイコンをクリックすると、現在開いているページ全体のスクリーンショットが撮影出来ます。

簡単ですね!

「いや、そんなアイコン見当たらないんですけど?!」という方は、いかにもスマホっぽいアイコンの右隣りにある開発ツールのオプション画面を開いてみましょう。

Firefox 開発ツール拡大画面 オプションを開くアイコン

開いたらスルスルっと一番下までスクロールさせると「ページ全体のスクリーンショットを撮影します」という項目があるのでチェックを入れて下さい。

Firefox 開発ツール拡大画面 オプション

すぐにカメラのアイコンが出現するはずです。これをクリックするとスクリーンショットが撮影出来ます。

Firefox 開発ツール拡大画面 オプション

画像の保存フォルダ

撮影したスクリーンショットが保存されているフォルダは、メニューバーから ツール > オプション > 一般の中にあるダウンロードで設定されているフォルダになります。

Firefox オプション 一般 ダウンロードフォルダ設定画面

ブラウザの動きからして通常のダウンロードと同じ扱いのようです。

Vivaldiでの撮影方法

次はVivaldiでの撮影方法になります。

Firefoxで出来たからもういいやーという気もしなくは無いですが、キャプチャ機能に関してこのVivaldiはかなり優秀なブラウザだと思います。今回はそこまで説明いたしませんが、指定した範囲のスクリーンショットを撮影する機能も非常に使い勝手が良いので、普段からキャプチャをよく利用されるという方はインストールしておいても損は無いでしょう。

Vivaldiのダウンロードはこちらから

こちらも必要に応じてダウンロードして下さいませ。

Firefoxと同様にインストールが済んだらVivaldiを起動してスクリーンショットを撮影したいサイトを開きましょう。

ステータスバーのカメラアイコンから

画面の一番下にあるステータスバーのカメラアイコンを…ってこれも小さいですねぇ。次の画面はちゃんと拡大します。

Vivaldi カメラアイコン

ステータスバーのカメラアイコンをクリック > タブが Full Page になっている事を確認 > 保存形式をPNG・JPG・クリップボードから選択 > Capture Page をクリックで撮影出来ます。

Vivaldi スクリーンショット設定画面

メニューバーから

画面左上のVivaldiアイコンをクリック > ツール > Capture > Page To Disk または Page To Clipboard をクリックします。

Vivaldi メニューバーからスクリーンショット撮影

尚、Page To Diskで撮影した場合は自動的にPNG形式で保存されます。

画像の保存フォルダ

撮影が終わると同時に画像を保存したフォルダが自動的に開くので、撮影してすぐにコピーや移動する場合は特に気にする必要はありませんが、画像はマイピクチャ > Vivaldi Captures の中に保存されます。

ショートカット設定すると更に快適に

Page To Disk と Page To Clipboard はショートカットを設定する事も出来ます。

Vivaldi 設定画面を開く

Vivaldiアイコンをクリックして ツール > 設定を開いたら、左側の項目から「キーボード」をクリックして一番下までスクロールします。

Vivaldi 設定 キーボード

右側のタブに関する項目が折りたたまれているので、それをクリックして開いたら更に一番下までスクロールします。

Vivaldi 設定 キーボード

Capture Page to Disk の右側にある枠の中を一度クリックして選択状態にしてから、設定したいキーを実際に押して登録します。ここでは例としてCtrl+Shift+Cを試してみます。

Vivaldi 設定 キーボード ショートカット設定エラー

既にその組み合わせのキーは使用されているのでエラーになりました。それでは次にCtrl+Alt+スペースキーを試してみましょう。

Vivaldi 設定 キーボード ショートカット設定完了

今度はうまく設定されました。これで次からはメニューを開かなくても登録したショートカットでページ全体のスクリーンショットを撮影する事が出来ます。

サイトのレイアウト確認にどうぞ

簡単に説明するつもりがスクリーンショットを撮りながら書いていたら思った以上に大変でした…相変わらず見積もりが甘いようです。

それにしても昔はWEBページ全体のスクリーンショットなんて、キャプチャツールを使っても結構面倒な作業だったように思いますが、今は本当に簡単に出来るようになりましたね。

参考までに実際に撮影したスクリーンショットを貼っておきますが、オリジナルのままだとJPGで1MB、PNGで2MB以上はあるので縮小・軽量化してあります。

[トップ画面サンプル] [エントリー画面サンプル]

何だかすっごい縦に細長く表示されちゃってイマイチよくわからないので、やはり実際に試していただいた方がよろしいかもしれません…

こうしてサイト全体を眺めてみると「ここだけやけにマージンが広いなぁ…」とか「もうちょっとバランスよく配置した方がいいかな?」という部分が結構出て来るものです。特に初めて使用するテーマやデザインが大幅に変わるようなカスタマイズをした時は、こうして全体を見てみるのも大事だなとあらためて思った次第です。

スポンサーリンク

シェアする

フォローする

スポンサーリンク
トップへ戻る