当サイトのリンクには商品・サービスのPRを含む場合があります。

Macで縦に長い画面をスクロールしてスクリーンショットを撮る方法

【広告】 Parallelsお買い得情報

macOS 15 Sequoia対応の【Parallels Desktop 20】10月6日まで10%オフ。
クーポンコード:GU7-396-UWJ
MacでWindowsを使えるソフトウェア【Parallels】

キリン
更新日:2023年09月07日

投稿日:2021年05月24日
この記事は約8分で読めます。

Macでスクロールが必要なほど縦に長い画面全体のスクリーンショットを撮る方法を紹介します。
大きく分けて、Webページを撮る場合と、Web以外のアプリの画面を撮る場合の2パターンがあります。

 

スポンサーリンク

Webページの縦長画面全体のスクショを撮る

各方法の一覧とメリット・デメリット

以下に一覧でまとめました。

保存形式は①のみPDF形式で、②〜⑦はPNGやJPGの画像形式です。

②〜⑦は縦長の1枚の画像ファイルになりますが、①はPDFなのでページ間が途切れるので注意が必要です。

パターン メリット デメリット
①WebブラウザでPDF印刷
  • 標準機能
  • 操作は非常に簡単
  • ページ間で画像が
    途切れる
②Safariの開発者モード
  • 標準機能
  • 操作はまあまあ簡単
  • 特になし
③Google Chromeの開発者モード
  • 標準機能
  • 操作はまあまあ簡単
  • 特になし
④Google Chromeの拡張機能
  • 色々な拡張機能
    から選べる
  • 操作はまあまあ簡単
  • 拡張機能の
    インストールが
    必要
⑤Firefoxのスクリーンショット撮影
  • 標準機能
  • 操作は非常に簡単
  • 特になし
⑥Microsoft Edgeの開発者モード
  • 標準機能
  • 操作はまあまあ簡単
  • 特になし
⑦専用アプリ「BrowseShot」
  • 操作は非常に簡単
  • アプリの
    インストール
    が必要
  • 最終更新が2014年
    なので、
    表示が
    うまくいかない
    場合がある

 

以上から、おすすめは次のとおりです。

パターン おすすめ
PDF保存で十分な場合
Firefoxを愛用している場合
標準機能だけを使いたい場合
拡張機能を使っても良い場合
Mac操作に慣れてないので、
なるべく
簡単にしたい場合

 

①WebブラウザでPDF印刷

Webブラウザで印刷を行うとき、出力先をプリンタではなくPDFに指定すると、連続したページでPDFファイルとして出力されます。

 

②Safariの開発者モード

▶ 「Safari」を起動して、メニューバーから「Safari」-「環境設定…」を選びます。

MacのSafariで「環境設定...」

 

▶ 「環境設定」が開いたら、画面上部の「詳細」をクリックします。

MacのSafariの「環境設定」画面

 

▶ 「詳細」に切り替わったら、図で矢印が指し示している「メニューバーに”開発”メニューを表示」にチェックを入れます。

チェックを入れたら、「環境設定」の画面は閉じます。

MacのSafariの「環境設定」-「詳細」の画面

 

▶ ここからは、実際にスクリーンショットを撮ってみます。

スクリーンショットを取りたい画面を表示して、キーボードで次のキーを同時に押して「開発者モード」を呼び出します。

「option ⌥」 + 「command ⌘」 + 「I」(アイ)

MacのSafariで開発者モード呼び出し

 

▶ 図のように「開発者モード」の画面になったら、おそらく<body>と書かれたhtmlコード画面が反転しているはずなので、そこで右クリックしてメニューを表示します。

MacのSafariで開発者モード画面

 

▶ 右クリックメニューから「スクリーンショットを取り込む」を選びます。

MacのSafariで開発者モードからスクリーンショットを取り込む

 

▶ 数秒後に保存先を指定するポップアップ画面が表示されるので、適当な場所を指定して、ボタン「保存」をクリックします。

MacのSafariで開発者モードからスクリーンショットを取り込む

 

▶ 保存できたら、ファイルを指定してキーボードの「スペース」キーを押して、Quick Lookで表示できるかを確認してください。

MacのQuick Lookでスクショの確認

 

③Google Chromeの開発者モード

▶ Google Chromeでスクリーンショットを取りたい画面を表示して、キーボードで次のキーを同時に押して「開発者モード」を呼び出します。

「option ⌥」 + 「command ⌘」 + 「I」(アイ)

MacのSafariで開発者モード呼び出し

 

▶ 図のように「開発者モード」の画面になったら、画面上部の中央あたりに表示された三本線メニューをクリックします。

Google Chromeの開発者モード画面

 

▶ メニューが表示されたら、「Capture full size screenshot」をクリックします。

Google Chromeの開発者モード画面でフルスクリーンショット呼び出し

 

▶ 数秒後に保存先を指定するポップアップ画面が表示されるので、適当な場所を指定して、ボタン「保存」をクリックします。

Google Chromeの開発者モード画面でフルスクリーンショット呼び出してファイル保存の画面

 

▶ 保存できたら、ファイルを指定してキーボードの「スペース」キーを押して、Quick Lookで表示できるかを確認してください。

MacのQuick Lookでスクショの確認

 

④Google Chromeの拡張機能

フル画面のスクショが撮れる拡張機能はいくつかありますが、ここでは次のアプリ「GoFullPage」をオススメします。

英語ですが、使い方がシンプル・無料・ユーザが多い・最近でもアップデートされている、といったな点がおすすめポイントです。

GoFullPage - Full Page Screen Capture - Chrome ウェブストア
余分な権限を要求することなく、現在のページのスクリーンショットを完全に確実にキャプチャできます。

使い方は、拡張機能のボタンをクリックして全画面キャプチャを収録後、PNG/JPEGの画像形式やPDFで保存ができます。

Google Chrome 拡張機能 「GoFullPage」

 

⑤Firefoxのスクリーンショット撮影

▶ Firefoxでスクリーンショットを取りたい画面を表示して、画面の余白部分で右クリックして、表示されたメニューから「スクリーンショットを撮影」をクリックします。

Firefoxの右クリックメニューからスクリーンショットを呼び出し

 

▶ スクリーンショットの画面になったら、右上の「ページ全体を保存」をクリックします。

Firefoxの右クリックメニューからスクリーンショットを呼び出し

 

▶ スクリーンショットが完了すると、図のようにスクロール可能な画面で確認できます。

これを保存してよければ、ボタン「ダウンロード」をクリックして保存します。

Firefoxのスクリーンショット撮影完了と保存画面

 

⑥Microsoft Edgeの開発者モード

▶ Microsoft Edgeでスクリーンショットを取りたい画面を表示して、キーボードで次のキーを同時に押して「開発者モード」を呼び出します。

「option ⌥」 + 「command ⌘」 + 「I」(アイ)

MacのSafariで開発者モード呼び出し

 

▶ 図のように「開発者モード」の画面になったら、画面上部の中央あたりに表示された三本線メニューをクリックします。

Microsoft Edgeの開発者モード画面

 

▶ メニューが表示されたら、「フルサイズのスクリーンショットをキャプチャする」をクリックします。

Microsoft Edgeの開発者モード画面でフルスクリーンショット呼び出し

 

▶ 保存が完了すると、図のようにダウンロード完了画面が表示されます。

矢印が指し示しているフォルダアイコンをクリックして、保存したファイルを確認してください。

Microsoft Edgeのフルスクリーンショットのダウンロード完了

 

⑦専用アプリ「BrowseShot」

Mac App Storeで入手できます。

‎App Storeに接続しています
‎Apple Musicに接続しています

アドレスバーにURLを入力して、右上のカメラのアイコンをクリックすると、スクショが撮れます。

アプリ「ScreenShot」の画面

 

スポンサーリンク

Web以外のアプリの縦長画面全体のスクショを撮る

ネットで色々探してみましたが、無料アプリは見つかりませんでした。

有料ですが、以下のアプリは29ドルで30日間の返金保証があります。

CleanShot X for Mac
Capture your Mac’s screen like a pro.

また、以下のアプリはMac App Storeで入手できますが、試用期間がなく¥3,300円と高価です。

‎Capto:Screen Capture& Recorder
‎Capto is a new screen capture, screen recording and editing app suite that’s perfect for creating i...

 

このページの記事は、ここまでです。

コメント

PHP Code Snippets Powered By : XYZScripts.com
タイトルとURLをコピーしました