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

キリン
この記事は約7分で読めます。

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の拡張機能

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

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

Screen Capture
Full page screen capture and screen video recorder. Take and edit screenshots! Share screencast video instantly.

使い方は見ればすぐに分かると思うので解説しませんが、図のように縦にびろーんと伸びたネコのボタンをクリックすると、全画面キャプチャができます。

ScrrenCapture

 

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

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

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

 

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

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

 

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

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

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

 

⑥Microsoft Edgeの開発者モード

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

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

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

 

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

Microsoft Edgeの開発者モード画面

 

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

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

 

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

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

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

 

⑦専用アプリ「BrowseShot」

Mac App Storeで入手できます。

‎BrowseShot
‎*** Now FREE!!! *** Capture full-length PNG screenshots of any website. BrowseShot lets you capture a PNG of the full scrollable area of a website. Importan...

アドレスバーに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 & Record
‎Capto is a new screen capture, screen recording and editing app suite that’s perfect for creating informative and compelling captures. Instantly record a vide...

 

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

コメント

タイトルとURLをコピーしました