
MacでスクロールできるWebページをスクショしたい、、でも、普通のスクショの撮り方だと全体を取れない。どうすればスクロールできる縦長のページをスクショできますか?
今回はこんな疑問を解決していきます。
✔︎ 記事の内容
- Macでスクロールできる縦長ページの全体をスクショする方法
✔︎ この記事を書いている人

本記事では、Macでスクロールできる縦長ページの全体をスクショする方法をご紹介していきます。
ぜひこの記事を参考にしてみてください。
では、いきましょうm(_ _)m
✔︎ Macの設定を何もしていない人へ
「Macの設定を何もしていない。」という方はMacBookを買ったら最初に設定したい「システム環境設定」にて詳しく解説していますので、そちらを先にどうぞ。
Macでスクロールできる縦長ページの全体をスクショする方法

ある日、Webサイトの画像の保存が必要になる場面がありました。その時に色々探してみて、やりやすいと感じた方法を紹介していきます。
まず、Macでスクロールできる縦長ページの全体をスクショする方法を簡単にまとめました。
他にも、いくつかスクショする方法は見つけたのですがやり方が面倒だったりオススメできないと感じたため、割愛させてもらいました。
では、それぞれの手順をご紹介していきます。
【オススメ】Googleの拡張機能「Full Page Screen Capture」を使う
では、Googleの拡張機能「Full Page Screen Capture」でスクショする方法を解説していきます。
簡単にまとめるとこんな感じ。ダウンロードしていないことを前提として解説します。
- まずは、「Full Page Screen Capture」をダウンロード
- 撮りたいwebページに移動
- カメラマークを押して、撮影完了→以上!
まずは、まずは、「Full Page Screen Capture」をダウンロードしましょう。
ダウンロード画面に移動しました。右上の「Chromeに追加」をクリックします。確認画面が出てくるので、OKを押してください。

ダウンロードできたら、以下のようなページが表示されるはずです。これでスクショする準備が整いました。

次に、スクショしたいページに移動します。例として、自分のブログで縦長のスクショを撮影してみます。
次に、ページに移動できたら右上に表示されているカメラマークをクリックします。
もし、カメラマークが表示されていない人は右上のパズルのピースをクリックして、「Full Page Screen Capture」をピン留めします。そうするとカメラマークが表示されます。

スクショする時間が少しかかるはずです。自分は、以下の画像のように撮影することができました。縦長でページ全体が入っているのが確認できました。これで終了です。

「pdf形式」と「png形式」でダウンロードできるわ

Googleの開発者モードからスクショする
次にご紹介するのは、「oogleの開発者モードからスクショする」方法です。
開発者と聞くと難しそうですが実際の手順は非常に簡単です。以下に簡単にまとめておきました。
- 撮影したいページに移動する
- 「option」 + 「command」 + 「I(アイ)」を同時に押す
- 撮影する→以上!
では、手順ごとに解説していきます。
まずは、スクショで撮影したいページに移動します。例として、自分のブログで縦長のスクショを撮影してみます。
次に、「option」 + 「command」 + 「I(アイ)」を同時に押します。

そうすると以下の画面が表示されます。以下の画面の画面の左上の部分にある「…」をクリックします。

次に、欄の中の「Capture full size screenshot」をクリックします。これでwebページ全体のスクショ完了です。お疲れ様でした。

最後に、スクショがしっかりと撮影できていたかの確認も忘れないでください。しっかりとpng形式で保存することができていました。

Webブラウザで印刷からpdf保存
次に、「Webブラウザで印刷からpdf保存」する方法をご紹介します。
画像が途切れ途切れとなるため、オススメしていない方法です。
簡単な手順のみご紹介します。
- 撮影したいWebページに移動
- ページを印刷する画面まで移動
- 出力先をpdfに変換で保存→以上!
【番外編】スクリーンショットの切り取り(トリミング)方法

簡単にスクリーンショットの切り取り(トリミング)する方法がいくつかあります。
以下の記事でまとめているので、ぜひ。
》【2022最新】スクリーンショットの切り取り(トリミング)方法
まとめ
今回は、Macでスクロールできる縦長ページのスクショ画像の撮り方をご紹介しました。
本記事の内容をまとめておきますね。
✔︎本記事のまとめ
今回は以上です。
以下の記事でMacBookを利用している人におすすめの記事を紹介しています。
》【Chrome】Macで開発者(デベロッパー)ツールを表示する方法
コメント