web全画面のスクショ撮影法を徹底解説!簡単手順でわかりやすく紹介!

目次

はじめに

この文書は「web 全画面 スクショ」に関する調査結果をわかりやすくまとめたガイドです。主にGoogle Chrome、Microsoft Edge、Firefoxといった主要ブラウザや、macOS、iPhoneでWebページ全体をスクリーンショットとして保存する方法を丁寧に解説します。

本書の目的

本書は、ブラウザの標準機能や拡張機能の使い方、実際の操作手順、よくある注意点を具体的に示すことを目的としています。初心者の方でも手順に沿って進められるように配慮しました。

誰に向けて

・サイトの内容を丸ごと保存したい方
・Webデザインや検証を行う開発者・デザイナー
・資料作成や記録のために全ページを画像やPDFで残したい方

本書で扱う内容

第2章以降で各ブラウザごとの撮影方法、拡張機能「GoFullPage」の使い方、macOS・iPhoneでの操作を順に説明します。操作手順はスクリーンショットや設定例を使いながら、できるだけ手順を追いやすく記載します。

注意点

一部のサイトは動的に読み込む部分や固定ヘッダーがあり、期待通りに撮れないことがあります。また拡張機能の利用では権限の確認が必要です。保存形式(PNG/PDF)やファイルサイズにも注意してください。

Google Chromeでフルサイズスクリーンショットを撮影する方法

概要

Google Chromeのデベロッパーツールを使えば、拡張機能を入れずにWebページ全体(フルサイズ)のスクリーンショットを撮影できます。簡単な操作でページ全体を1枚の画像に保存できます。

操作手順

  1. スクリーンショットを撮りたいページをChromeで開きます。ページ内の画像やコンテンツが遅延読み込み(lazy loading)される場合は、あらかじめ下までスクロールして読み込ませておくとよいです。
  2. デベロッパーツールを起動します。
  3. Windows/Linux: F12 または Ctrl+Shift+I
  4. Mac: Command+Option+I
  5. デベロッパーツールの右上メニューから「Run command」を選ぶか、ショートカットを使います。
  6. Windows/Linux: Ctrl+Shift+P
  7. Mac: Command+Shift+P
  8. コマンド入力欄に「Capture full size screenshot」と入力して実行します。候補が出るので選択するだけでOKです。
  9. 自動でページ全体の画像が生成され、通常はダウンロードフォルダにPNG形式で保存されます。

補足とトラブル対処

  • 画像が一部欠けるときは、デバイスツールバー(画面のサイズを切り替えるモード)を閉じてから再試行してください。デバイスモードが有効だとフルサイズ撮影が正しく動かないことがあります。
  • 長いページや大きな画像が多いページは生成に時間がかかり、ファイルサイズが大きくなります。必要なら画像編集ソフトでトリミングしてください。
  • 遅延読み込みの画像が空のままになる場合は、撮影前にページを最後までゆっくりスクロールして読み込ませてください。

Microsoft Edgeでフルサイズスクリーンショットを撮影する方法

準備

Microsoft Edgeを起動し、保存したいWebページを開きます。ページが完全に読み込まれるまで待ってください。

手順

  1. 画面右上の「…」メニューをクリックします。メニュー内の「スクリーンショット」を選びます。あるいはキーボードで Ctrl+Shift+S を押して機能を呼び出せます。
  2. 表示されるツールバーで「ページ全体をキャプチャ」または「フルページ」を選択します。Edgeがページを自動でスクロールして全体をキャプチャします。
  3. 撮影が終わると、新しいウィンドウまたはプレビュー画面で画像を確認できます。必要に応じてトリミングや再撮影が可能です。

保存と確認

プレビュー画面の「保存」ボタンをクリックし、保存先とファイル形式(通常はPNGかJPEG)を選んで保存します。画質やファイルサイズを気にする場合は形式を変更してください。

ヒント

  • 固定ヘッダーや動的コンテンツは表示どおりに撮れないことがあります。問題がある場合はページをリロードしてから再試行してください。
  • 撮影をキャンセルする時は Escキーを押すと簡単に中止できます。

Firefoxでスクリーンショットを撮影する方法

概要

Firefoxには標準でスクリーンショット機能があり、ページ全体や表示範囲、選択範囲を簡単に保存できます。拡張機能を入れなくても使えるため手軽です。

手順(右クリックから)

  1. 保存したいページ上で右クリックします。
  2. 表示されるメニューから「スクリーンショットを撮影」を選びます。
  3. 表示される選択肢で「ページ全体を保存」または「表示範囲を保存」を選びます。必要ならマウスで範囲をドラッグして指定します。
  4. 新しいウィンドウ(またはプレビュー)が開き、撮影した画像を確認できます。
  5. プレビュー画面のダウンロードボタンを押して保存します。保存先は通常ダウンロードフォルダです。

補足

  • 特定の領域だけ撮りたいときはドラッグで範囲指定します。
  • ダウンロードボタンが見当たらない場合はプレビュー画面の右上にあるメニューを確認してください。
  • 長いページは自動で縦につなげて保存されます。

拡張機能「GoFullPage」を使用する方法

概要

Chrome拡張機能「GoFullPage」を使うと、ワンクリックでWebページ全体のスクリーンショットを撮影できます。操作は簡単で、保存形式も選べます。

インストール方法

  1. Chromeウェブストアで「GoFullPage」を検索します。
  2. 「Chromeに追加」をクリックしてインストールします。
  3. 拡張機能アイコン(パズルピース)からピン留めすると使いやすくなります。

使い方(基本手順)

  1. 撮影したいページを開きます。
  2. 拡張機能アイコンをクリックします。自動でページ全体をスクロールしてキャプチャします。
  3. キャプチャ後、プレビュー画面が表示されます。PNGやPDFで保存できます。

撮影モード

  • 表示部分: 現在見えている範囲だけを撮影します。
  • フルページ: ページ全体を撮ります(標準的な使い方)。
  • 選択範囲: マウスで範囲を指定して撮影できます。

設定と便利な使い方

  • 保存形式はプレビュー画面で選択できます。
  • キーボードショートカットはChromeの拡張機能ショートカット画面(chrome://extensions/shortcuts)で設定できます。

トラブルシューティング

  • ページの動的ロードや無限スクロールがある場合、完全に撮れないことがあります。その場合は手動でスクロールを止めるか、数回に分けて撮影してください。
  • 撮影が途中で止まるときは、一度リロードして再試行します。

注意点

  • サイトの構成によっては正しくキャプチャできないことがあります。重要なページは事前に確認してから保存してください。

macOSでのスクリーンショット撮影方法

1) Chromeのデベロッパーツールでフルページを撮る方法

Chromeを使ってウェブページ全体(フルサイズ)を保存したいときは、デベロッパーツールを使うと簡単です。Command+Option+Iでデベロッパーツールを起動し、次にShift+Command+Pでコマンド実行欄を開きます。検索欄に「Capture full size screenshot」と入力して実行すると、ページ全体のPNGファイルが自動でダウンロードされます。

2) macOS標準のショートカット

  • 全画面を撮る: Shift+Command+3
  • 選択範囲を撮る: Shift+Command+4 → マウスでドラッグして選択
  • ウィンドウ単位で撮る: Shift+Command+4 → Spaceキーに切替え → 対象ウィンドウをクリック
  • スクリーン撮影と録画のコントロールを表示: Shift+Command+5(保存先やタイマーを設定可能)

どのショートカットでも、Controlキーを同時に押すとクリップボードに画像が保存され、ファイルは作成されません。複数ディスプレイを使っている場合はShift+Command+3でそれぞれの画面が個別のファイルになります。デフォルトの保存先はデスクトップですが、Shift+Command+5のオプションから変更できます。

3) ヒントと注意点

  • フルページはブラウザのレンダリングに依存するため、長いページではページが正しくつながらないことがあります。その場合は拡張機能や別ツールも試してみてください。
  • 高解像度ディスプレイではファイルサイズが大きくなりやすいので、必要に応じてプレビューアプリでトリミングやリサイズを行ってください。

iPhoneでのフルページスクリーンショット撮影方法

概要

iPhoneではウェブページ全体を一枚のPDFのように保存できる「フルページ」機能があります。スクリーンショットを撮ってプレビューから切り替えるだけで使えます。

基本の手順(Face ID搭載機種)

  1. 保存したいウェブページをSafariで開きます。アプリの内部画面では機能しません。
  2. サイドボタンと音量アップボタンを同時に押してスクリーンショットを撮ります。
  3. 画面左下に出るサムネイルをタップして編集画面を開きます。
  4. 画面上部の「画面」タブの横にある「フルページ」タブを選びます。
  5. 右上の「完了」を押し、「PDFをファイルに保存」などを選んで保存します。

ホームボタン搭載機種の操作

ホームボタンがある古い機種は、ホームボタンとサイド(または上部)ボタンを同時に押します。以後の手順は同じです。

保存と共有の例

フルページは写真ではなくPDF扱いなので、ファイルアプリに保存してからメールやクラウドに送れます。注釈を加えて共有することも簡単です。

注意点・トラブル対応

  • フルページタブはSafariのウェブページでのみ表示されます。アプリ内ページや一部のサイトでは表示されません。
  • サムネイルをすぐ消してしまうと編集画面に入れないので、タップするのを忘れないでください。
  • 表示されない場合はiOSのバージョンやブラウザを確認してください。
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次