PCを使ったブログやSNSなどの説明で、Webサイトのページをスクリーンショットしたいときがあります。
Windowsパソコンならば「Snipping Tool」が便利
そんなときにはWindowsパソコンだったら標準搭載ソフトである「Snipping Tool」を使うといいと思います。
Snipping Toolは、スタートボタン＞Windows アクセサリ＞Snipping Tool の順で探すと見つけられるはずです。
画面をスクリーンショットするソフトはフリーソフトや有料ソフトなど様々なものがありますが、簡易的用途であれば、このSnipping Toolで十分でしょう。特定の部分だけの切り取りに便利な四角形切り取りや指定したウィンドウを切り取るウィンドウ切り取りなど、最低限の機能を有しており、遅延対応もあり、またソフトも軽いので私はよく使っています。
「Snipping Tool」ではWebサイト全体をスクリーンショットすることができない
先ほど紹介したSnipping Toolはとても便利なのですが、画面を切り取れる範囲はパソコンの画面の範囲に限られています。つまり、Webサイト全体をスクリーンショットしたい場合には使えないということです。
サイトの特定のページ全体をスクリーンショットしたいときというのはそこまで多くはないですが、たまに必要なときがあります。
そんなときは私は使用しているブラウザ『Google Chrome』のデベロッパーツールの機能を使ってスクリーンショットしています。
Webブラウザ『Google Chrome』のデベロッパツールを使ってサイトのページ全体をスクリーンショット
ウェブブラウザの「Google chrome」にはデベロッパーツールという機能を使うことができます。このデベロッパーツールというのはWebサイト制作などに使われるブラウザの補助機能みたいなものですが、Web制作に使われるだけあって様々な機能が備わっています。
今回はその中のフルサイズでスクリーンショットを撮る機能を使ってみようということです。
ステップ① 「Ctrl+Shift+I」 コマンドでデベロッパーツールを開く
ここでは例としてWikipediaの新山詩織さんのページで試してみたいと思います。
https://ja.wikipedia.org/wiki/新山詩織
Webページ全体をスクリーンショットしたいページをGoogle Chromeで開いたら、「Ctrl+Shift+I」コマンドを入力します。アルファベットは「I （アイ）」を入力してください。
https://ja.wikipedia.org/wiki/新山詩織
するとページ下部にデベロッパーツールが表示されます。設定によりこの画面はページ下部ではなくサイドに表示されることがありますが、特別問題はありません。
ステップ② 「Ctrl+Shift+P」コマンドで詳細機能パネルを開く
https://ja.wikipedia.org/wiki/新山詩織
続いて「Ctrl+Shift+P」コマンドを入力することで、詳細機能を検索するパネルが表示されます。
ステップ③ 「full」と入力しEnterを押すと画像を保存する場所を選ぶダイアログが表示される
https://ja.wikipedia.org/wiki/新山詩織
表示されている検索欄に「full」と入力し、Enterで選択すると、画像の保存場所を選択するダイアログが表示されます。任意の場所、任意の名前で保存することができます。
保存された画像を見てみると…
めちゃくちゃ長い画像が出力されています。
ページの情報量が多ければ多いほど画像のサイズが大きくなるので、必要に応じて画像圧縮サービスなどを活用して利用するのがいいのではないかと考えます。
https://ja.wikipedia.org/wiki/新山詩織
手順のまとめ
- 「Ctrl+Shift+I」コマンドでデベロッパーツールを開く
- 「Ctrl+Shift+P」コマンドで詳細機能パネルを開く
- 「full」と入力し「Enter」を押すと画像を保存する場所を選ぶダイアログが表示される
- 任意の場所に任意の名前で保存する
おわりに
Chromeにはこんな機能もあると知っていさえいれば、いつかこの機能を利用することができるかもしれません。
コマンドの手順は結構忘れてしまうので、次使うときのために記事にして記録しておこうと考えました。
普段使いならば、やはり「Snipping Tool」で私は十分だと感じました。
コメント