※2026年10月追記：現在のChromeに合わせて手順を修正。Windowsの操作と、拡張機能でワンクリックで撮る方法も追加した。

■デベロッパーツールで撮る（拡張機能なし）

1.「command」+「option」+「I」でデベロッパーツール（検証）を開く（Windowsは「Ctrl」+「Shift」+「I」か「F12」）
2.「command」+「Shift」+「P」でコマンドメニューを表示（Windowsは「Ctrl」+「Shift」+「P」）
3.「screenshot」と入力して「フルサイズのスクリーンショットをキャプチャ」を選び「Enter」（英語表示だと「Capture full size screenshot」）
4.PNG画像がダウンロードフォルダに保存されて完了

【画像：コマンドメニューの画面】

Chromeの設定で「ダウンロード前に各ファイルの保存場所を確認する」をオンにしている場合は、保存ダイアログが出るので名前を付けて保存する。

コマンドメニューで「screenshot」と入れると、フルサイズ以外にも何種類か出てくる。

・スクリーンショットをキャプチャ：今表示されている範囲だけ
・フルサイズのスクリーンショットをキャプチャ：ページ全体
・領域のスクリーンショットをキャプチャ：ドラッグで範囲を指定
・ノードのスクリーンショットをキャプチャ：要素パネルで選んでいるHTML要素だけ

■スマホ表示のまま撮る

1.デベロッパーツールを開いた状態で「command」+「Shift」+「M」でデバイスモードに切り替え（Windowsは「Ctrl」+「Shift」+「M」）
2.画面上部の機種選択でiPhoneなどを選ぶ
3.ページを再読み込みして一番上までスクロール
4.コマンドメニューから「フルサイズのスクリーンショットをキャプチャ」を実行（デバイスツールバー右端の「︙」メニューからも選べる）

スマホサイズでページ全体を撮るとこんな感じ。レスポンシブの確認資料を作る時に便利だ。

■拡張機能でワンクリックで撮る

毎回デベロッパーツールを開くのが面倒なら、拡張機能の「GoFullPage」が手軽。広告なしで余計な権限も求めてこない。

1.Chromeウェブストアで「GoFullPage」を検索して「Chromeに追加」
2.撮りたいページでツールバーのアイコンをクリック、または「option」+「Shift」+「P」（Windowsは「Alt」+「Shift」+「P」）
3.自動でスクロールしながら撮影して、新しいタブに結果が表示される
4.ダウンロードボタンでPNGかPDFで保存

ショートカットはアドレスバーに「chrome://extensions/shortcuts」と入れれば変更できる。

ただしページをスクロールしながら繋ぎ合わせる仕組みなので、固定ヘッダーが何回も写り込んだり、スクロールで読み込む画像が抜けたりすることがある。そういうページはデベロッパーツールで撮ったほうがきれい。普段はGoFullPage、きっちり撮りたい時やスマホ表示で撮りたい時はデベロッパーツール、と使い分けるのがいいかな。