ChromeブラウザでWeb制作やデザインの確認をしている際、「ページ全体の長いスクショが欲しい」「特定のボタンだけをきれいに切り抜きたい」と思うことはありませんか？
実は、拡張機能を入れなくても標準搭載されている「デベロッパーツール」だけで、高精度なスクリーンショットを撮ることができます。 今回はその隠れた機能の使い方を分かりやすく解説します。
目次
- 準備：デベロッパーツールを開く
- ページ全体のスクリーンショット
- 表示エリアのスクリーンショット
- 選択エリアのスクリーンショット
- DOMノードのスクリーンショット
- 特定のデバイスサイズで撮影する
- まとめ
準備：デベロッパーツールを開く
まずは、スクリーンショットを撮りたいページを開き、デベロッパーツールを起動しましょう。
- Windows / Linux:
F12またはCtrl+Shift+I - Mac:
Cmd+Option+I
ツールが開いたら、上部右メニューの「︙（三点リーダー）」をクリックして「Run Command」を選択します（もしくはショートカットキー Cmd (Ctrl) + Shift + P を押します）。
「コマンドメニュー」が立ち上がるので、ここから各種スクリーンショット機能を呼び出します。
1. ページ全体のスクリーンショット
（Capture full size screenshot）
スクロールしないと見えない部分まで含めた、ページ最上部から最下部までのウェブページ全体を1枚の画像として保存します。
- コマンドメニューに 「full」 と入力します。
- 「Capture full size screenshot」 を選択してEnter。
- ページ全体の画像が自動でダウンロードされます。
注: 縦に非常に長いページの場合、画像サイズが大きくなりすぎる（またはメモリ制限で失敗する）ことがあるので注意しましょう。
2. 表示エリアのスクリーンショット
（Capture screenshot）
現在ブラウザの画面（ビューポート）に見えている範囲だけを撮影します。
- コマンドメニューに 「screenshot」 と入力します。
- 「Capture screenshot」 を選択してEnter。
- 今見えている範囲がそのまま保存されます。
OS標準のスクリーンショットと違い、ブラウザの外枠（タブやURLバー）が入らないため、資料作成に非常に便利です。
注：ディベロッパーツールで隠されている部分は含まれないので注意しましょう。
3. 選択エリアのスクリーンショット
（Capture area screenshot）
マウスでドラッグした範囲だけをピンポイントで撮影します。
- コマンドメニューに 「area」 と入力します。
- 「Capture area screenshot」 を選択してEnter。
- 画面が暗転するので、撮りたい範囲をマウスでドラッグして囲みます。
- 指を離すと、その範囲が保存されます。
以下の画像のように、エリア選択された部分が暗転します。
4. DOMノードのスクリーンショット
（Capture node screenshot）
特定のHTML要素（ヘッダー、サイドバー、特定のバナーなど）だけを、余白なしで完璧に切り抜きます。
- デベロッパーツールの「Elements」タブで、撮りたい要素（タグ）をクリックして選択します。
- 右クリックで表示されるメニューより「Capture node screenshot」 を選択。
5. 特定のデバイスサイズで撮影する
（デバイスモードの活用）
iPhoneやAndroidなど、特定のデバイスでの見え方を再現した状態でスクリーンショットを撮ることも可能です。
- デベロッパーツール左上の 「デバイスアイコン（Toggle device toolbar）」 をクリックします（ショートカット：
Cmd/Ctrl+Shift+M）。 - 画面上部のプルダウンから、シミュレートしたいデバイス（iPhone 14 Proなど）を選択します。
- デバイス画面の右上にある 「︙（三点リーダー）」 をクリックします。
- メニュー内の 「Capture screenshot」 または 「Capture full size screenshot」 を選択します。
これで、実機で見た時と同じ解像度・アスペクト比の画像が手に入ります。
まとめ
今回紹介した方法を、用途に合わせて使い分けましょう。
| 種類 | 方法・コマンド名 | 向いている用途 |
| ページ全体 | full size screenshot | LP全体のデザイン確認 |
| 表示エリア | Capture screenshot | 資料へのスライド添付 |
| 選択エリア | area screenshot | 自由な範囲の切り抜き |
| DOMノード | node screenshot | パーツ単位の素材作成 |
| デバイス別 | デバイスモードのメニュー | スマホ版のデザインチェック |