- 公開日:
- 更新日:
Macでページ全体をスクロールしながらスクリーンショットする方法
この記事では、Macでページ全体をスクロールしながらスクリーンショットする方法をご紹介します。
通常スクリーンショットを撮影すると画面内の範囲しか撮ることができませんが、以下の方法では画面外の部分も撮影することができます。
ウェブサイトなどのスクロールが必要な画面で、全体を一括でスクリーンショットを撮りたい場合等にお役立てください。
Macでページ全体をスクロールしながらスクリーンショットする方法
ページ全体をスクリーンショットでキャプチャする方法についてご紹介します。
Safariを使ってページ全体を撮影する
Safariを使ってウェブサイト全体のスクリーンショットを撮影する方法をご紹介します。
![Safariを開く](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page1.png)
Safariを選択して、スクリーンショットを撮りたいウェブサイトを開いておきましょう。
![環境設定を開く](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page2.png)
①メニューバーの「Safari」、②環境設定の順に選択します。
![開発メニューを表示にチェックマーク](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page3.png)
「環境設定」ダイアログボックスが表示されます。①詳細を選択して、②「メニューバーに”開発”メニューを表示」にチェックマークを入れます。
![command + option + Iを押す](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page4.png)
次に、デベロッパーツールを開きます。command + option + I(アイ)を押します。
![スクリーンショットを取り込むを選択](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page5.png)
デベロッパーツールが開きます。①bodyタグの上で右クリックします。②スクリーンショットを取り込むを選択します。
![保存する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page6.png)
保存画面が表示されます。①任意の名前(例:りんごはっくの画面)を入力し、②保存場所(例:デスクトップ)を選択します。③保存ボタンを押します。
![アイコンをダブルクリック](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page7.png)
保存したスクリーンショットのファイルをダブルクリックして開きます。
![全体のスクリーンショットが撮影できる](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page9.png)
プレビューダイアログボックスが表示されます。画面全体がスクリーンショットとして保存されていれば、問題なく撮影できています。
Google Chromeを使ってページ全体を撮影する
MacでGoogle Chromeを使って、ウェブサイト全体のスクリーンショットを撮影する方法をご紹介します。
![Google Chromeを開く](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page10.png)
Google Chromeを選択して、スクリーンショットを撮りたいウェブサイトを開いておきましょう。
![command + option + Iを押す](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page11.png)
Google Chromeが開きます。
command + opiton + I(アイ)を押して、デベロッパーツールを開きます。
デベロッパーツールの上部にある「デバイスのツールバーを切り替え」を選択します。
![縦に3つ並んだ点を選択する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page12.png)
画面左側の上部にツールバーが表示されます。
スクリーンショット撮影したい画面の大きさを選択します。今回は「ノートパソコン」の大きさで撮影するので、一番端の白い縦線を選択します。
![フルサイズのスクリーンショットをキャプチャを選択する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page14.png)
次に、①その他のオプション、②フルサイズのスクリーンショットをキャプチャの順に選択します。
![Finder で開くを選択する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page15.png)
キャプチャが保存されます。
①画面左下の「サイトのURL.png(例:ringo-hack.com_.png)」、②Finder で表示の順に選択します。
![スクリーンショットを開く](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page16.png)
Finderダイアログボックスが表示されます。
ダウンロードの中にあるスクリーンショットのファイルをダブルクリックします。
![撮影したスクリーンショットを確認できる](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page17.png)
プレビューダイアログボックスが表示されます。
画面全体がスクリーンショットとして保存されていれば、問題なく撮影できています。
Google Chromeの拡張機能を使って撮影する
Google Chromeの拡張機能には画面全体をスクリーンショットでキャプチャできるものがあります。
今回は下記の拡張機能をご紹介します。
- ウェブページ全体をスクリーンショット – FireShot
- GoFullPage – Full Page Screen Capture
ウェブページ全体をスクリーンショット – FireShot
「ウェブページ全体をスクリーンショット – FireShot」という拡張機能を使ってスクリーンショットを撮影する方法をご紹介します。
![Chromeに追加ボタンを押す](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page24.png)
以下のリンクから「ウェブページ全体をスクリーンショット – FireShot」のページにアクセスして、Chrome に追加ボタンを押します。
![拡張機能に追加ボタンを押す](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page25.png)
「ウェブページ全体をスクリーンショット – FireShot」を追加しますか?と表示されます。
拡張機能を追加ボタンを押します。
![拡張機能を選択する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page27.png)
スクリーンショットを撮影したいウェブサイトを表示しましょう。
①画面右上の「拡張機能」、②「ウェブページ全体をスクリーンショット – FireShot」の順に選択します。
![ページ全体をキャプチャを選択する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page28.png)
ページ全体をキャプチャを選択します。
![画像として保存を選択する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page29.png)
スクリーンショットを保存する画面が開きます。
今回は、画像として保存ボタンを押します。
![許可ボタンを押す](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page30.png)
「ウェブページ全体をスクリーンショット – FireShot」が追加の許可をリクエストしています、と表示されます。
許可ボタンを押します。
![名前を付けて保存する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page31.png)
①任意の名前(例:りんごはっく.png)を入力し、②保存場所(例:デスクトップ)を選択します。
③保存ボタンを押します。
![アイコンをダブルクリックする](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page32.png)
保存されたスクリーンショットのファイルをダブルクリックして開きます。
![スクリーンショットを確認できる](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page33.png)
プレビューダイアログボックスが表示されます。
画面全体がスクリーンショットとして保存されていれば、問題なく撮影できています。
GoFullPage – Full Page Screen Capture
「GoFullPage – Full Page Screen Capture」という拡張機能を使ってスクリーンショットを撮影する方法をご紹介します。
![追加ボタンを押す](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page36.png)
以下のリンクから「GoFullPage – Full Page Screen Capture」のページにアクセスして、Chrome に追加ボタンを押します。
GoFullPage – Full Page Screen Capture
![拡張機能を追加ボタンを押す](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page37.png)
「GoFullPage – Full Page Screen Capture」を追加しますか?と表示されます。
拡張機能を追加ボタンを押します。
![Full Page Screen Captureを選択する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page44.png)
スクリーンショットを撮影したいウェブサイトを表示しましょう。
①画面右上の「拡張機能」、②「GoFullPage – Full Page Screen Capture」の順に選択します。
![保存を選択する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page39.png)
スクリーンショットが撮影されて保存画面が開きます。
画面右上のダウンロードボタンを押します。
![許可ボタンを押す](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page40.png)
「GoFullPage – Full Page Screen Capture」が追加の許可をリクエストしています、と表示されます。
許可ボタンを押します。
![Finderで表示を選択する](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page41.png)
キャプチャが保存されます。
①画面左下の「screencapture-サイトのURL.png」、②Finder で表示の順に選択します。
![ファイルを開く](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page42.png)
Finderダイアログボックスが表示されます。
ダウンロードの中にあるスクリーンショットのファイルをダブルクリックします。
![スクリーンショットを確認できる](https://ringo-hack.com/wp-content/uploads/mac-screenshot-page43.png)
プレビューダイアログボックスが表示されます。
画面全体がスクリーンショットとして保存されていれば、問題なく撮影できています。
本記事では、以下のデバイスを使用して検証しています。他の環境では再現できない可能性がありますのでご了承ください。
- MacBook Pro (13-inch, 2017) macOS 12.3.1
![作業効率アップ!150個のMacショートカットキーPDF無料ダウンロード](https://office-hack.com/wp-content/themes/officehack201907/img/reward-mac.webp)
問題は解決できましたか?
記事を読んでも問題が解決できなかった場合は、無料でAIに質問することができます。回答の精度は高めなので試してみましょう。
- 質問例1
- PDFを結合する方法を教えて
- 質問例2
- iLovePDFでできることを教えて
コメント
この記事へのコメントをお寄せ下さい。