Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

Windows 10や11で、Webブラウザで閲覧しているWebページを保存して、後からオフラインで閲覧したい場合、Windows 10や11に標準搭載のMicrosoft Edge(以下、Edgeブラウザ)やGoogle Chrome(以下、Chromeブラウザ)を使って、さまざまなファイル形式でWebページ全体を保存することができます。

そこでここでは、Windowsでスクロールが必要な縦に長いWebページ全体を保存する方法を紹介します。

Windows 10の標準機能でスクリーンショットを撮影する方法
ここでは、Windows 10の標準機能で画面を画像として保存(スクリーンショットを撮影)する方法を紹介します。

動作環境

この記事は、以下の環境で実行した結果を基にしています。他のエディションやバージョンでは、動作結果が異なる場合があることをご了承ください。

ソフトウェアバージョン
Windows 10 Pro 64bit22H2
Microsoft Edge109.0.1518.5
Google Chrome109.0.5414.75

HTMLファイルで保存する

EdgeブラウザやChromeブラウザで、表示しているWebページをHTMLファイルで保存する手順は、次のとおりです。

まず、保存したいWebページを開いた状態で、画面右上の「…」をクリックして、メニューから「その他のツール」>「名前を付けてページを保存」を順に選択します。(ショートカットキーからなら「Ctrl+S」を押します。)

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

「名前を付けて保存」画面が表示されるので、保存場所やファイル名、ファイルの種類を指定し「保存」をクリックします。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

Memo

ファイルの種類としては「すべて」「単一ファイル」「HTMLのみ」が選択でき、それぞれの特徴は次のとおりです。

保存形式説明
Webページ、すべて画像など、Webページに含まれるすべてのデータをファイルで保存する形式で、画像などは保存するときに指定したファイル名と同名のフォルダー内に保存されます。
Webページ、単一ファイルWebページに含まれる画像などをマルチパートMIME形式でエンコードして、1つのファイルとして保存します。
Webページ、HTMLのみ画像などは保存せず、文字データのみをHTML形式で保存します。

以上で、保存完了です。

保存したHTMLファイルは、EdgeブラウザやChromeブラウザで開くことができます。

PDFファイルで保存する

EdgeブラウザやChromeブラウザで、WebページをPDFファイルで保存する手順は、次のとおりです。

まず、保存したいWebページを開いた状態で、画面右上の「…」をクリックして、メニューから「印刷」を選択します。(ショートカットキーなら「Ctrl+P」を押します。)

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

印刷画面が表示されたら「プリンター」から「PDFとして保存」を選択して「保存」をクリックします。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

「名前を付けて保存」画面が表示されるので、保存場所やファイル名を指定し「保存」をクリックします。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

以上で、保存完了です。

保存したPDFファイルは、EdgeブラウザやChromeブラウザ、PDFビューザーソフトで開くことができます。

画像ファイルで保存する

Webページ全体を画像ファイルとして保存する(スクリーンショットを撮影する)場合は、EdgeブラウザとChromeブラウザで手順が異なります。

Edgeブラウザの場合

Edgeブラウザには、Webページ全体のスクリーンショットを撮影できる「Webキャプチャ」機能が標準搭載されています。

Webキャプチャ機能の使い方は、次のとおりです。

まず、Edgeブラウザで、保存したいWebページを開いた状態で、ページ内を右クリックして、メニューから「Webキャプチャ」を選択します。(ショートカットキーなら「Ctrl+Shift+S」を押します。)

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

すると、画面上部に「エリアをキャプチャ」と「ページ全体をキャプチャ」というツールバーが表示されるので「ページ全体をキャプチャ」をクリックします。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

すると、Webページ全体をキャプチャした「Webキャプチャ」画面が表示されるので「保存」アイコンをクリックします。

ちなみに、Webキャプチャ画面では、キャプチャした画面内に手書きのメモを書き込んだり、クリップボードにコピーしたり、他のアプリ(OneNoteなど)と共有するといったこともできます。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

ダウンロードのポップアップ画面が表示されるので「名前を付けて…」の右側の矢印をクリックして「保存」を選択します。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

以上で、ダウンロードフォルダーにWebページ全体がJPEG形式の画像ファイルとして保存されます。

Chromeブラウザの場合

Chromeブラウザでは、デベロッパーツール(開発者ツール)の機能でWebページ全体のスクリーンショットを撮影できます。

デベロッパーツールでスクリーンショットを撮影する手順は、次のとおりです。

まず、Chromeブラウザで保存したいWebページを開いた状態で、画面右上にある「︙」をクリックして、メニューから「その他のツール」>「デベロッパーツール」の順にクリックします。

もしくは、Webページを開いた状態で「F12」キーを押すことでも、デベロッパーツールを起動できます。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

画面下や右にデベロッパーツールが表示されたら、ページ上部にデバイスツールバーが表示されているか確認し、表示されていないときは「toggle device toolbar」をクリックして表示させます。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

つぎに、ページ右側に表示されているバーをドラッグして、Webページの幅を調節します。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

ページ幅を調節したら、デバイスツールバーの右端にある「︙」をクリックして、メニューから「Capture full size screenshot」を選択します。

Windowsで縦に長いWebページ全体を保存してオフラインで閲覧する方法

以上で、ダウンロードフォルダーにWebページ全体がPNG形式の画像ファイルとして保存されます。

あとがき

WebページをHMLファイルやPDFファイルで保存する方法は、レイアウトが崩れてしまったり、必要な情報が保存されないことがありますが、テキスト情報などを検索できるメリットがあり、画像ファイルで保存する方法は、Webページを見た目どおりに保存できるメリットがありますが、テキスト検索などはできないので、適材適所で保存方法を使い分けるとよいでしょう。