webの全体スクリーンショットを簡単に撮る方法完全マニュアル

目次

はじめに

本ドキュメントは「web スクリーンショット 全体」に関する使い方ガイドです。ここで言う「フルページスクリーンショット」とは、ブラウザで表示されるWebページを上から下まで一枚の画像やファイルとして保存する操作を指します。画面に見えている部分だけでなく、スクロール先にある内容も丸ごと記録できます。

対象読者は、Webページの確認や保存、資料作成、デザインチェック、共有を手軽に行いたい方です。専門的な前提知識は不要で、手順を追えば誰でも実行できます。これから、主に以下の環境での撮影方法と特徴を順に紹介します。

  • Google Chrome(標準機能と拡張機能)
  • Microsoft Edge
  • Mozilla Firefox
  • macOSの標準機能

各章では、準備から実際の手順、保存形式や注意点まで具体的に示します。用途に応じた最も簡単な方法を選べるように書いていますので、まずは目次からご自分の環境に合う章をお読みください。

Chromeの標準機能を使用したフルサイズスクリーンショット撮影方法

Google Chromeの開発者ツールを使うと、拡張機能を入れずにWebページ全体のスクリーンショットを撮れます。以下は手順と注意点です。

  1. 開発者ツールを開く
  2. Windows: F12 または Ctrl + Shift + I
  3. Mac: Command + Option + I

  4. コマンドメニューを表示

  5. Windows: Ctrl + Shift + P
  6. Mac: Command + Shift + P
    画面右上のメニューからでも「Run command(コマンド実行)」を選べます。

  7. フルサイズ撮影を実行
    コマンド入力欄に「Capture full size screenshot」と入力して実行します。自動でページ全体を画像として保存します。

  8. 保存形式と保存先

  9. 開発者ツールのフルサイズは通常PNGで保存され、ファイル名はデフォルトでページのURLが付きます。ダウンロードフォルダに保存されます。
  10. PDFにしたい場合は、ブラウザの印刷(Ctrl/Command + P)で「PDFとして保存」を選んでください。

  11. 注意点と対処法

  12. デバイストグル(レスポンシブ表示)を有効にしたままだと表示領域のみのキャプチャになります。ツールバーを閉じてから実行してください。
  13. 非常に長いページはメモリやブラウザの制約で分割されることがあります。その場合はPDFで保存するか、専用拡張機能で分割撮影・結合する方法を検討してください。

以上が、Chrome標準の手順です。簡単に全体画像を得られるので、まずはこの方法を試してみてください。

Chrome拡張機能「GoFullPage」を使用した方法

概要

Chromeの無料拡張機能「GoFullPage」を使うと、ワンクリックでWebページ全体を保存できます。インストール後はブラウザ上のカメラアイコンをクリックするだけで撮影が始まり、JPG・PNG・PDFで保存可能です。キャプチャ範囲は「ページ全体」「表示部分」「選択範囲」から選べます。

インストール手順

  1. Chromeウェブストアを開く。
  2. 検索欄に「GoFullPage」と入力し、拡張機能ページへ。
  3. 「Chromeに追加」をクリックしてインストールを完了します。

使い方(基本)

  1. 保存したいページを開く。
  2. ブラウザ右上のカメラアイコンをクリック。
  3. 自動でスクロールしながらキャプチャが行われます。完了するとプレビューが表示されます。

保存形式とオプション

  • JPG/PNG:画像として保存。ページを画像で共有したい時に便利です。
  • PDF:文書として保存したい時に使います。複数ページの長い記事にも適します。
  • キャプチャ範囲:全体・表示部分・選択範囲を選択できます。選択はマウスで行えます。

トラブル時の対処

  • キャプチャが途中で止まる場合は、拡張機能を一度無効→再有効にして再試行してください。
  • 大きなページではメモリ負荷が上がるため、他のタブを閉じると安定します。

注意点

  • 動的に読み込まれる要素(スクロール時に読み込まれる画像など)は正しく取得できない場合があります。必要なら、その部分を手動で読み込んでから撮影してください。

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

手順(簡単)

  1. Edgeで対象のページを開きます。ページが完全に読み込まれていることを確認してください。
  2. 画面右上の「…(設定など)」メニューをクリックし、「スクリーンショット」を選びます。代わりにキーボードで Ctrl + Shift + S を押して起動できます。
  3. 画面が薄くグレーアウトします。表示される操作パネルで「ページ全体をキャプチャ」や「ページ全体」などの項目を選びます。
  4. 全体のプレビューが作成され、新しいウィンドウやパネルに表示されます。右上の「保存」ボタンをクリックして画像を保存します。

補足と便利なポイント

  • 保存形式は通常PNGで画質が良く扱いやすいです。
  • 長いページや画像の多いページは生成に少し時間がかかることがあります。完了するまで待ってください。
  • ページ内に固定表示(ヘッダーやサイドバー)があると、キャプチャ画像では重複して見えることがあります。必要ならページの表示を一時的に非表示にしてください。

トラブルシューティング

  • メニューに「スクリーンショット」が見当たらない場合は、Edgeを最新に更新するか、拡張機能で代替する方法を検討してください。
  • 保存できない、またはプレビューが表示されないときは、ページを再読み込みしてから再試行してください。

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

手順(簡単)

  1. 対象のページで右クリックしてメニューを開き、「スクリーンショットを撮影」を選びます。表示されない場合はアドレスバー右のページアイコン(⋯)から同じ機能を探してください。
  2. 表示されるメニューで「ページ全体を保存」または「表示範囲を保存」を選びます。
  3. 撮影が終わると新しいウィンドウで画像のプレビューが表示されます。右上の「ダウンロード」ボタンで画像(PNG)を保存できます。必要なら「コピー」でクリップボードに入れて別のアプリに貼り付けます。

表示されないときの対処

メニューに項目がない場合は、ツールバーのカスタマイズでスクリーンショットボタンを追加できます。ブラウザの設定や拡張機能が干渉しているときは一時的に無効化してみてください。

補足と注意点

  • フルページ撮影は縦長のページも一枚の画像で保存します。サイズが大きくなるので、保存先の容量を確認してください。
  • 録画やスクロールを含む動的な要素は静止画として正しく写らないことがあります。必要な箇所をあらかじめ表示しておくと良いです。

macOSでの標準機能を使用したスクリーンショット方法

概要

macOSではキーボードショートカットで素早くスクリーンショットを撮れます。ご提示の方法では、Command + Shift + P を押すと画面右上に入力欄が表示され、ここに「full」と入力するとフルサイズスクリーンショットのコマンドが利用可能になります。

手順(簡単)

  1. 画面上で Command + Shift + P を押します。
  2. 右上に出る入力欄に「full」と入力します。
  3. 表示された「フルサイズスクリーンショット」等のコマンドを選んで実行します。
  4. 実行後、通常はデスクトップに画像ファイルが保存されます。Finderで確認してください。

補足と注意点

  • 取り消す場合は Esc キーで入力欄を閉じます。
  • 保存先やファイル形式は環境や設定によって異なることがありますので、必要ならFinderで場所や形式を確認してください。
  • ウェブページ全体を取得したいときは、実行結果を見て縦長の画像になっているか確認してください。
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

目次