Webページを後から見返したいとき、ブックマークだけではページが更新・削除されると同じ内容を確認できなくなります。そんなときは、Webページの内容をHTML、PDF、画像などのファイルとして保存しましょう。
Webページのレイアウトや文字を残してオフラインでも読みたいなら、無料のブラウザ拡張機能「SingleFile」が便利です。Microsoft Edgeなら拡張機能なしで、ページ全体のスクリーンショットを保存することもできます。
この記事では、SingleFileの使い方とEdgeへの追加方法を中心に、Chrome、Firefox、Macでも使える保存方法、保存形式の違い、失敗したときの対処法まで解説します。PDFを後から編集する方法や、保存ファイルをクラウドにバックアップする方法も紹介します。
Webページを保存する方法を比較。HTML、PDF、画像の違い
同じWebページの保存でも、後から何をしたいかによって最適な形式が異なります。
| HTML | 画像 | ||
|---|---|---|---|
| おすすめ用途 | オフラインで閲覧 文字検索 | 印刷 配布 注釈 | 見た目の記録 画面共有 |
| 代表的な方法 | SingleFile | ブラウザの印刷機能 | Edgeのスクリーンショット |
| 文字の検索 | 可能 | 可能な場合が多い | 画像だけでは通常不可 |
| レイアウト | 元ページに近い 一部機能は再現不可 | 印刷用に変わる場合あり | 撮影時の見た目を保存 |
| 無料で利用 | 可能 | 可能 | 可能 |
SingleFileで保存したHTMLは基本的に元ページの文字を選択・検索できます。ただし、動画、ログイン状態、動的に読み込むコンテンツなど、すべての機能を完全に再現できるわけではありません。
SingleFileの使い方。Webページ全体を1つのHTMLに保存
SingleFileは、表示しているWebページを、画像やスタイルを含む単一のHTMLファイルにまとめて保存する無料の拡張機能です。Chrome、Edge、Firefoxなどで利用できます。
1. SingleFileをインストールする
使用しているブラウザに合った公式配布ページを開きます。
- Microsoft Edge：Edgeアドオンストアで「SingleFile」を検索
- Google Chrome：ChromeウェブストアのSingleFile
- Firefox：Firefox向けSingleFile
EdgeでChromeウェブストア版を追加できる環境もありますが、まずはEdgeアドオンストアの正式な配布元を確認してください。拡張機能の追加時に表示される権限も確認しましょう。
2. 保存したいWebページを開いてアイコンをクリックする
- 保存したいページを開き、画像などの読み込みが終わるまで待ちます。
- ブラウザの拡張機能メニューからSingleFileを選択します。必要ならツールバーに固定します。
- SingleFileのアイコンをクリックし、保存処理が完了するのを待ちます。
- 通常はブラウザのダウンロード先に
.htmlファイルが作成されます。
3. 保存したHTMLをオフラインで開く
保存した.htmlファイルをダブルクリックするか、ブラウザのウィンドウにドラッグします。インターネットに接続していない状態でも、保存された文章や画像を閲覧できます。
ページ内のキーワードを探したいときは、WindowsではCtrl+F、MacではCommand+Fでブラウザ内検索を使えます。
4. 複数ページの保存や自動保存を使う
SingleFileのアイコンを右クリックしてメニューを開くと、環境に応じて選択中のタブや複数タブの保存、自動保存、注釈付き保存などの機能を利用できます。細かな設定は拡張機能のオプションで変更できます。
SingleFileで保存できない・表示が崩れる場合
- ページが完全に読み込まれてから保存し直す。
- スクロールしないと表示されない画像は、先にページ末尾までスクロールして読み込む。
- 拡張機能が無効になっていないか、サイトへのアクセス権限を確認する。
- ログイン必須のページや動画中心のページは完全保存できないことがあるため、必要に応じてPDFや画像で記録する。
- 保存したファイルが開かない場合は、別のブラウザで開いてみる。
Microsoft EdgeでWebページ全体を画像として保存する
Edgeには拡張機能を使わず、ページ全体を撮影できる「スクリーンショット」機能があります。以前の「Webキャプチャ」という名称で紹介されている場合もあります。
- Edgeで保存したいページを開きます。
- WindowsならCtrl+Shift+Sを押すか、ブラウザのメニューからスクリーンショットを開きます。
- 「ページ全体をキャプチャ」を選択します。
- 必要なら注釈を追加し、保存操作を実行します。保存形式はEdgeのバージョンや保存操作によって異なる場合があります。
撮影した画像はページの見た目を確認するのに向いていますが、画像内の文章を通常のWebページのように選択・検索することはできません。画面をスクロールして長いページを保存したい場合の別の方法も参考にしてください。
Chrome・Edge・FirefoxでWebページをPDFに保存する
印刷、配布、資料としての保管が目的なら、ブラウザ標準の「印刷」機能でPDFに保存する方法が簡単です。
- 保存したいWebページを開きます。
- WindowsならCtrl+P、MacならCommand+Pで印刷画面を開きます。
- プリンターまたは送信先で「PDFに保存」「Microsoft Print to PDF」などを選択します。
- プレビューでページの欠けや不要な余白を確認し、保存します。
保存したPDFを後から編集したい場合
WebページをPDFにするだけなら無料のブラウザ機能で十分です。保存後に文字や画像を編集したり、ページを並べ替えたりする場合はPDF編集ソフトが候補になります。
例えば、PDFelementはPDFの編集や注釈、ページ整理に対応するソフトです。保存だけの目的で購入する必要はありませんが、資料を加工する用途では検討する価値があります。
MacでPDFを編集する際の選び方はMacでPDFを編集する方法と注意点でも解説しています。
開発者ツールでページ全体のスクリーンショットを撮る
ChromeやEdgeの開発者ツールでもページ全体を画像に保存できます。拡張機能をインストールできないPCで、画像として残したい場合に便利です。
- 対象ページを開いて、F12キーを押します。必要ならFnキーも併用します。
- 開発者ツールにフォーカスを合わせます。
- WindowsはCtrl+Shift+P、MacはCommand+Shift+Pを押します。
- コマンド欄で
screenshotなどと検索し、「Capture full size screenshot」に相当する項目を実行します。 - PNG画像が保存されていることを確認します。
OneNote Web ClipperとEvernote Web Clipperで記事を保存する
保存したページをノート単位で整理したいなら、ブラウザ拡張機能のWeb Clipperを使う方法もあります。HTMLファイルとして厳密に保存する方法とは目的が異なります。
OneNote Web Clipper
OneNote Web Clipperを使うと、Webページの記事や選択した領域をOneNoteに保存してノートとして管理できます。ページ全体の画像、記事、ブックマークなどの選択肢は拡張機能のバージョンや対象ページによって異なります。
無料版と有料版の違いはOneNoteの料金・機能の比較で解説しています。
Evernote Web Clipper
Evernote Web Clipperは、記事、ページ全体、ブックマークなどをEvernoteに取り込んで管理する拡張機能です。保存方法の選択肢や利用できる機能はプラン・バージョンによって変わる場合があります。
有料プランの変更や代替サービスが気になる場合はEvernoteの現行プランと代替サービスの比較も参考にしてください。
保存したWebページをクラウドにバックアップする
SingleFileで作成したHTMLをPCだけに保存していると、端末の故障や買い替え時に失う可能性があります。長期保存する資料は別の場所にもコピーしておくと安心です。
pCloudは、HTML、PDF、画像などをクラウドに保存して複数端末からアクセスできるオンラインストレージです。ただし、pCloud自体がWebページをSingleFileのようにHTMLへ変換するわけではありません。
- SingleFileでWebページをHTML保存する。
- 保存したHTMLファイルを、わかりやすい名前のフォルダーに整理する。
- 必要に応じてpCloudのバックアップ機能を検討し、クラウド上にもコピーする。
- 大切な資料はクラウドだけに依存せず、別のバックアップも残す。
クラウドストレージの違いについてはMicrosoft 365とDropbox・pCloudの比較、Dropboxの容量を増やす方法も参考になります。
Webページを保存するときの注意点
- 動くページは完全に再現できない場合がある。ログイン、検索フォーム、埋め込み動画、リアルタイム更新などは、保存後に動作しないことがあります。
- 保存先に個人情報が含まれる場合がある。会員ページ、注文履歴、社内システムの内容を保存したファイルは共有しないよう注意しましょう。
- 著作権や利用規約を確認する。個人的な記録と、保存した記事や画像をインターネットで再配布することは別です。
- 保存結果を必ず開いて確かめる。ブラウザやサイトの構成次第で、画像の欠落やレイアウト崩れが生じます。
よくある質問
はい。SingleFileは無料のオープンソース拡張機能です。基本的なHTML保存に有料ソフトは必要ありません。
はい。Edge向けの配布版が用意されています。Edgeアドオンストアで「SingleFile」を検索して追加してください。
SingleFileでHTML内に取り込まれた文章や画像は、通常オフラインでも閲覧できます。ただし動画などの外部リソースや、一部の動的コンテンツは利用できないことがあります。
通常のブラウザ操作でHTMLやPDFを保存しても、保存通知が相手に直接届く仕組みではありません。ただし、アクセスや通信の記録がサイト側に残ることはあります。
Edgeのスクリーンショット機能で「ページ全体をキャプチャ」を選ぶか、Chromeの開発者ツールからフルサイズのスクリーンショットを取得します。
まとめ。Webページ保存は用途に合わせて選ぼう
- 後から検索・閲覧したい：SingleFileでHTML保存。
- 印刷・共有したい：ブラウザ標準機能でPDF保存。
- 見た目をそのまま残したい：Edgeのスクリーンショット。
- メモと一緒に整理したい：OneNoteやEvernoteのWeb Clipper。
- 長期保存したい：保存したHTMLやPDFを別のストレージにもバックアップ。
最初は無料のSingleFileやブラウザ標準機能を試すのがおすすめです。PDFの編集が必要になった場合だけ編集ソフトを検討し、保存ファイルが増えたらクラウドの容量やバックアップ方法を見直しましょう。