縦長ページのスクショがほしい時ありませんか？

WordPressやWeb関連のお仕事をしている方（デザイナー、エンジニアなどの制作者や企業のWeb担当の方）は、ページ全体のスクリーンショットが必要な時があるのではないでしょうか？クライアントさまや上司に説明する時、提案書やマニュアルを作る時にあると便利です。

Google Chromeのデベロッパーツールでスクショが撮れます。（拡張機能も不要）

Google Chromeで少し前から提供されている機能ですが、今見ている（制作している）ページ全体の画像が欲しいなと思った時に非常に便利ですので、ご紹介したいと思います。この機能はGoogle Chromeの「デベロッパーツール」の一部の機能として提供されています。そもそも「デベロッパーツール」使ったことがないという方は以下の記事を参考にしていただけますと幸いです。

超基本：Google Chromeの検証機能（デベロッパーツール）の使い方

それでは、実際の手順を解説していきます。

スクリーンショットが欲しいページで「デベロッパーツール」を開きます。

まずはスクショが撮りたいページのページでデベロッパーツールを開きます。マウスの右クリック、「検証」を選択してください。ちなみにショートカットキーは、
Windowsなら「Ctrl+Shift+I」、Macなら「command+option+I」でも開くことができます。

詳細機能からCapture full size screenshotを呼び出す。

続いて詳細機能を呼び出します。ショートカットキーを使います。Windowsなら「Ctrl+Shift+P」、Macなら「command+shift+P」を同時に押してください。
以下のウィンドウが表示されます。

「full」と入力し、「Capture full size screenshot」を選択

この検索窓に「full」と入力し、「Capture full size screenshot」を選択してください。すると自動でページ全体のスクリーンショットのダウンロードが始まります。

ページ全体のスクリーンショットがダウンロードされる

WindowsもMacもダウンロードフォルダに、ページ全体のスクリーンショットがダウンロードされます。

以下がページ全体のスクリーンショットの画像です。ページの上から下までが綺麗に1枚の画像になっています。

注意：画像ファイルはファイルサイズが巨大です。圧縮しましょう。

ダウンロードされた画像ファイルは、ページ全体を画像データとして保存しているため、ファイルサイズが大きくなります。そのままだとメール添付はもちろん、ほとんどの場合、WordPressへのアップロードもできないため（アップロードサイズはお使いのレンタルサーバー設定によって異なります。）圧縮してファイルサイズを小さくしましょう。圧縮する方法は使いなれているソフトを使って問題ないはずです。以下のようなサービスを使えば、画像加工ソフトなどを持っていない方でも簡単にファイルを圧縮することができます。

compresspng

ブラウザ上で使用できる優秀な無料画像圧縮サービスです。ソフトやアプリのダウンロード、会員登録などは一切必要ありません。ページを訪れて、フォルダーから画像をドラッグ＆ドロップするだけで圧縮が開始されます。

ブラウザには便利な機能がたくさんあります。

この記事でご紹介したフルサイズのスクリーンショット以外にも便利な機能は沢山あります。お役に立つような記事をこれからも書きますので、宜しければご覧ください。

※2022/11/27追記
Microsoft Edgeでも同等の機能があり、こちらの方が便利に感じるので、フルサイズのスクリーンショットを撮る時には、最近はMicrosoft Edgeを使うことが多いです。

Microsoft Edge 「Webキャプチャ」が便利

お問い合わせはこちらから

南大阪を中心に活動しているシステムエンジニアです。これまでの経験から、ビジネス課題について一緒になって考え、課題解決のためにサポートさせていただきます。些細なご相談でも構いません。当方に期待することやご相談内容についてお聞かせください。初回のご相談はオンラインで無償対応いたします。

連絡先：050-5050-2860

お気軽にお問い合わせください。