りんごはっく

Macでページ全体をスクロールしながらスクリーンショットする方法

  • Release

この記事では、Macでページ全体をスクロールしながらスクリーンショットする方法をご紹介します。

通常スクリーンショットを撮影すると画面内の範囲しか撮ることができませんが、以下の方法では画面外の部分も撮影することができます。

ウェブサイトなどのスクロールが必要な画面で、全体を一括でスクリーンショットを撮りたい場合等にお役立てください。

Macでページ全体をスクロールしながらスクリーンショットする方法

ページ全体をスクリーンショットでキャプチャする方法についてご紹介します。

Safariを使ってページ全体を撮影する

Safariを使ってウェブサイト全体のスクリーンショットを撮影する方法をご紹介します。

作業時間:1分

Safariを開く
Safariを開く

Safariを選択して、スクリーンショットを撮りたいウェブサイトを開いておきましょう。

環境設定を開く
環境設定を開く

①メニューバーの「Safari」、②環境設定の順に選択します。

開発メニューを表示させる
開発メニューを表示にチェックマーク

「環境設定」ダイアログボックスが表示されます。①詳細を選択して、②「メニューバーに"開発"メニューを表示」にチェックマークを入れます。

デベロッパーツールを開く
command + option + Iを押す

次に、デベロッパーツールを開きます。command + option + I(アイ)を押します。

スクリーンショットを取り込むを選択する
スクリーンショットを取り込むを選択

デベロッパーツールが開きます。①bodyタグの上で右クリックします。②スクリーンショットを取り込むを選択します。

名前を付けて保存する
保存する

保存画面が表示されます。①任意の名前(例:りんごはっくの画面)を入力し、②保存場所(例:デスクトップ)を選択します。③保存ボタンを押します。

保存したファイルを開く
アイコンをダブルクリック

保存したスクリーンショットのファイルをダブルクリックして開きます。

スクリーンショットが確認できる
全体のスクリーンショットが撮影できる

プレビューダイアログボックスが表示されます。画面全体がスクリーンショットとして保存されていれば、問題なく撮影できています。

Google Chromeを使ってページ全体を撮影する

MacでGoogle Chromeを使って、ウェブサイト全体のスクリーンショットを撮影する方法をご紹介します。

Google Chromeを開く

Google Chromeを選択して、スクリーンショットを撮りたいウェブサイトを開いておきましょう。

command + option + Iを押す

Google Chromeが開きます。

command + opiton + I(アイ)を押して、デベロッパーツールを開きます。

デベロッパーツールの上部にある「デバイスのツールバーを切り替え」を選択します。

縦に3つ並んだ点を選択する

画面左側の上部にツールバーが表示されます。

スクリーンショット撮影したい画面の大きさを選択します。今回は「ノートパソコン」の大きさで撮影するので、一番端の白い縦線を選択します。

フルサイズのスクリーンショットをキャプチャを選択する

次に、①その他のオプション、②フルサイズのスクリーンショットをキャプチャの順に選択します。

Finder で開くを選択する

キャプチャが保存されます。

①画面左下の「サイトのURL.png(例:ringo-hack.com_.png)」、②Finder で表示の順に選択します。

スクリーンショットを開く

Finderダイアログボックスが表示されます。

ダウンロードの中にあるスクリーンショットのファイルをダブルクリックします。

撮影したスクリーンショットを確認できる

プレビューダイアログボックスが表示されます。

画面全体がスクリーンショットとして保存されていれば、問題なく撮影できています。

Google Chromeの拡張機能を使って撮影する

Google Chromeの拡張機能には画面全体をスクリーンショットでキャプチャできるものがあります。

今回は下記の拡張機能をご紹介します。

  • ウェブページ全体をスクリーンショット – FireShot
  • GoFullPage – Full Page Screen Capture
ウェブページ全体をスクリーンショット – FireShot

「ウェブページ全体をスクリーンショット – FireShot」という拡張機能を使ってスクリーンショットを撮影する方法をご紹介します。

Chromeに追加ボタンを押す

以下のリンクから「ウェブページ全体をスクリーンショット – FireShot」のページにアクセスして、Chrome に追加ボタンを押します。

ウェブページ全体をスクリーンショット – FireShot

拡張機能に追加ボタンを押す

「ウェブページ全体をスクリーンショット – FireShot」を追加しますか?と表示されます。

拡張機能を追加ボタンを押します。

拡張機能を選択する

スクリーンショットを撮影したいウェブサイトを表示しましょう。

①画面右上の「拡張機能」、②「ウェブページ全体をスクリーンショット – FireShot」の順に選択します。

ページ全体をキャプチャを選択する

ページ全体をキャプチャを選択します。

画像として保存を選択する

スクリーンショットを保存する画面が開きます。

今回は、画像として保存ボタンを押します。

許可ボタンを押す

「ウェブページ全体をスクリーンショット – FireShot」が追加の許可をリクエストしています、と表示されます。

許可ボタンを押します。

名前を付けて保存する

任意の名前(例:りんごはっく.png)を入力し、②保存場所(例:デスクトップ)を選択します。

保存ボタンを押します。

アイコンをダブルクリックする

保存されたスクリーンショットのファイルをダブルクリックして開きます。

スクリーンショットを確認できる

プレビューダイアログボックスが表示されます。

画面全体がスクリーンショットとして保存されていれば、問題なく撮影できています。

GoFullPage – Full Page Screen Capture

「GoFullPage – Full Page Screen Capture」という拡張機能を使ってスクリーンショットを撮影する方法をご紹介します。

追加ボタンを押す

以下のリンクから「GoFullPage – Full Page Screen Capture」のページにアクセスして、Chrome に追加ボタンを押します。

GoFullPage – Full Page Screen Capture

拡張機能を追加ボタンを押す

「GoFullPage – Full Page Screen Capture」を追加しますか?と表示されます。

拡張機能を追加ボタンを押します。

Full Page Screen Captureを選択する

スクリーンショットを撮影したいウェブサイトを表示しましょう。

①画面右上の「拡張機能」、②「GoFullPage – Full Page Screen Capture」の順に選択します。

保存を選択する

スクリーンショットが撮影されて保存画面が開きます。

画面右上のダウンロードボタンを押します。

許可ボタンを押す

「GoFullPage – Full Page Screen Capture」が追加の許可をリクエストしています、と表示されます。

許可ボタンを押します。

Finderで表示を選択する

キャプチャが保存されます。

①画面左下の「screencapture-サイトのURL.png」、②Finder で表示の順に選択します。

ファイルを開く

Finderダイアログボックスが表示されます。

ダウンロードの中にあるスクリーンショットのファイルをダブルクリックします。

スクリーンショットを確認できる

プレビューダイアログボックスが表示されます。

画面全体がスクリーンショットとして保存されていれば、問題なく撮影できています。

このページを見ている人におすすめの商品

Apple MacBook Air M1 2020(13インチ,8GB RAM,256GB SSD,8コアCPU/7コアGPU) スペースグレイ (整備済み品)

Apple MacBook Air M1 2020(13インチ,8GB RAM,256GB SSD,8コアCPU/7コアGPU) スペースグレイ (整備済み品)

Apple(アップル)

\Kindle本冬の読書フェア 書籍5冊購入で 10%P還元/Amazonで価格を見る

ビッグセール情報

  • ビッグセール情報

本記事では、以下のデバイスを使用して検証しています。他の環境では再現できない可能性がありますのでご了承ください。

  • MacBook Pro (13-inch, 2017) macOS 12.3.1