macOS + Chromeでスクリーンショットを撮る方法

ウェブサイトを運営しているとスクリーンショットを撮る事がしばしば発生します。
WinowsPCだとPrintScreenキーがあるので分かりやすいですがMacの場合はPrintScreenキーがなくショートカットキーを使わなければなりません。
あとウェブページのスクリーンショットを撮りたい時に表示している部分だけでなくスクロールした先まで撮りたい時はmacOSだけのスクリーンショットでは撮れません。

その場合はウェブブラウザ側の機能を使う事になりますが管理人はChrome使いなのでChromeでのスクリーンショットを撮る方法とmacOSのスクリーンショットを撮る方法を紹介いたします。

macOS + Chromeでスクリーンショットを撮る方法の目次

1. macOSで画面全体を撮る
2. macOSで画面の一部を取り込んで撮る
3. macOSでウィンドウまたはメニューを取り込んで撮る
4. macOSでアプリケーションを利用して取り込んで撮る（操作中の画面の動画撮影も可能）
5. Chromeでウェブページをドラッグして範囲を指定し撮る
6. Chromeでウェブページ全体を撮る
7. ChromeDevToolsのElementパネルで選択しているNodeのみを撮る
8. Chromeでウェブページの現在見えている範囲を撮る

1. macOSで画面全体のスクリーンショットを撮る

shift + comannd + 3

1. スクリーンショットを撮るには、「shift」「command」「3」の 3 つのキーを同時に長押しします。
2. 画面の隅にサムネールが表示されたら、そのサムネールをクリックして、スクリーンショットを編集します。または、しばらくすると、スクリーンショットがデスクトップに保存されます。

2. macOSで画面の一部を取り込んで撮る

shift + comannd + 4

1. 「shift」「command」「4」の 3 つのキーを同時に長押しします。
2. 十字型のカーソルで画面の取り込みたい部分をドラッグして範囲選択します。選択範囲を移動するには、スペースバーを押しながらドラッグします。スクリーンショットの撮影をキャンセルするには、「esc」(Escape) キーを押します。
3. 画面の隅にサムネールが表示されたら、そのサムネールをクリックして、スクリーンショットを編集します。または、しばらくすると、スクリーンショットがデスクトップに保存されます。

3. macOSでウィンドウまたはメニューを取り込んで撮る

shift + comannd + 4 + space bar

1. 取り込みたいウインドウまたはメニューを開きます。
2. 「shift」「command」「4」のキーとスペースバーを同時に長押しします。
3. ポインタの形状がカメラのアイコンに変わるので取り込みたいウィンドウまたはメニューの箇所までポインタを移動して「enter」キーを押します。スクリーンショットの撮影をキャンセルするには、「esc」(Escape) キーを押します。
4. 画面の隅にサムネールが表示されたら、そのサムネールをクリックして、スクリーンショットを編集します。または、しばらくすると、スクリーンショットがデスクトップに保存されます。

4. macOSでアプリケーションを利用して取り込んで撮る

shift + comannd + 5

1. 1. 「shift」「command」「5」の 3 つのキーを同時に長押しします。（TIPS：Launchpadの「その他」もしくはFinderのアプリケーションから「ユーティリティ」を選択すると中に『スクリーンショット』があるのでアプリケーションを起動しても同様の事が出来ます。）

1. 1. 画面のアイコンに従うことでスクリーンショットならびに動画としてキャプチャを収録することも可能です。

1. 『スクリーンショット』アプリを利用する最初に紹介した３つのスクリーンショットも撮る事も可能となりますし、保存先を変更したりタイマーを利用することで途中の操作過程のポップアップなどのキャプチャなどを動画で撮ることも可能になります。

5. Chromeでウェブページをドラッグして範囲を指定し撮る

command+option+I  -->  command+shift+P  -->  capture area screenshot

1. 1. 任意のページでデベロッパーツールを開きます。「command+option+I」。

1. 1. 続いて詳細機能を呼び出します。「command+shift+P」。

1. 1. そのまま「screenshot」と入力すると候補が絞られ、スクリーンショット機能の４つだけが表示されるので、「capture area screenshot」をクリックする。

1. 十字型のカーソルでページ内の取り込みたい部分をドラッグして範囲選択します。スクリーンショットの撮影をキャンセルするには、「esc」(Escape) キーを押します。
2. スクリーンショットを撮って数秒で画像ファイルがChromeのダウンロードフォルダに保存されます。

6. Chromeでウェブページ全体を撮る

command+option+I  -->  command+shift+P  -->  capture full size screenshot

1. 1. 任意のページでデベロッパーツールを開きます。「command+option+I」。
   2. 続いて詳細機能を呼び出します。「command+shift+P」。
   3. そのまま「screenshot」と入力すると候補が絞られ、スクリーンショット機能の４つだけが表示されるので、「capture full size screenshot」をクリックする。
   4. スクリーンショットを撮って数秒で画像ファイルがChromeのダウンロードフォルダに保存されます。

7. ChromeDevToolsのElementパネルで選択しているNodeのみを撮る

command+option+I  -->  command+shift+P  -->  capture node screenshot

1. 1. 任意のページでデベロッパーツールを開きます。「command+option+I」。
   2. 続いて詳細機能を呼び出します。「command+shift+P」。
   3. Elementパネルでスクリーンショットを撮りたいnodeを選択する。

1. そのまま「screenshot」と入力すると候補が絞られ、スクリーンショット機能の４つだけが表示されるので、「capture node screenshot」をクリックする。
2. 選択したnodeのスクリーンショットを撮って数秒で画像ファイルがChromeのダウンロードフォルダに保存されます。

8. Chromeでウェブページの現在見えている範囲を撮る

command+option+I  -->  command+shift+P  -->  capture screenshot

1. 任意のページでデベロッパーツールを開きます。「command+option+I」。
2. 続いて詳細機能を呼び出します。「command+shift+P」。
3. そのまま「screenshot」と入力すると候補が絞られ、スクリーンショット機能の４つだけが表示されるので、「capture screenshot」をクリックする。
4. スクリーンショットを撮って数秒で画像ファイルがChromeのダウンロードフォルダに保存されます。

参考とさせて頂いた記事は　「ChromeでWEBページ全体をフルスクリーンショット！見ているページの全画面キャプチャー画像をダウンロードする方法」　です。