Webページ(ホームページ)を保存する方法

ブックマークでなくWebページ全体を保存
SingleFile
EdgeのWebキャプチャ
開発者ツール
OneNote Web Clipper
Evernote Web Clipper

ブックマークでなくWebページ全体を保存

仕事や勉強などでWebページを見ていると資料などとして保存しておきたいWebページが出てきます。

ブラウザの「お気に入り」に登録(ブックマーク)しても、後日アクセスしたらWebページの内容が変わっているかもしれません。

それどころかWebページ自体がなくなっているかもしれません。

そんなことにならないためにはブックマークでなくWebページ全体を保存します。

この記事で紹介する保存方法は以下です。

SingleFile
EdgeのWebキャプチャ
開発者ツール
OneNote Web Clipper
Evernote Web Clipper

	SingleFile	Edge Webキャプチャ	開発者ツール	OneNote Web Clipper	Evernote Web Clipper
Edge	◯
Chrome	◯	✕	◯
Firefox	◯	✕		◯
保存形式	単一HTML	JPEG	PNG	OneNote	Evernote
レイアウト	崩れない	崩れない(画像なので)			崩れる
テキスト検索	ブラウザ表示して検索	×		画像内テキストを認識	○

SingleFile

ブラウザには標準でWebページをHTML、画像ファイル、CSSファイルなど複数のファイルに保存する機能があります。

しかし、複数ファイルは扱いが面倒な上、元のWebページが正確に再現できない場合もあります。

「SingleFile」はWebベージを単一のHTMLファイルに保存するブラウザ拡張機能です。

インストールするとブラウザのツールバーにSingleFileのアイコンが現れます(下図)。

保存したいWebページを開いた状態でアイコンをクリックすると「ダウンロード」フォルダにXXX.htmlファイルが1つだけ作成されます。

通常のhtmlファイルは画像、CSS、JavaScriptなどはすべて別ファイルを参照しています。

例えばJPG画像であれば以下のような感じです。

<img src="https://bibouroku.net/xxxx.jpg">

これではhtmlだけあっても参照先の画像がなくなってしまえば元のWebページは再現できません。

それに対してSingleFileは保存時に画像、CSS、JavaScriptなどをすべてHTMLに「data:」として含めます。

例えばJPG画像であれば以下のような感じです。

<img src="data:image/jpeg;base64,……">

EdgeのWebキャプチャ

Windowsの標準ブラウザであるEdgeにはWebページを保存する「Webキャプチャ」という機能があります。

ブラウザの拡張機能なども不要です。

やり方はEdgeのメニューから「Webキャプチャ」を選択します。

「ページ全体をキャプチャ」をクリックするとWebページ全体、エリアをキャプチャするとマウスで指定する領域がキャプチャされます。

キャプチャWebページには以下の操作ができます。

手書き	手書きで描き込む
保存	JPEG形式で「ダウンロード」フォルダに保存する
コレクションへの追加	コレクションへ保存する

EdgeのコレクションとはWebページをスクラップする機能です。

ブックマーク機能と異なり、保存したWebページ(手書きの書き込みも含む)も保存できます。

PCやiPhoneブラウザのおすすめ(比較)

PCとモバイルは別同じブラウザを使うメリット PCブラウザ WindowsではChromeがEdgeに置き換わるか? PCブラウザが使えるタブレットモバイルブラウザ iPhone / iPadならEdgeかChromeも Firefoxをサポートしないサービス

開発者ツール

EdgeやChromeに標準搭載されている「開発者ツール」にはWebページ全体を保存する機能があります。

名前に開発者とついているものの開発者でなくても使えます。

F12を押して開発者ツールを表示し、ツール内の適当な場所をクリックします。

shift+ctrl+P(Macではshift+command+P)を押して「コマンドの実行」を表示し、「フルサイズのスクリーンショットをキャプチャする」のボタンをクリックします。

ダウンロードフォルダにPNGファイルが保存されます。

OneNote Web Clipper

OneNote Web ClipperとはOneNote(マイクロソフトのデジタルノートアプリ)にWebページを保存するためのブラウザ拡張です。

Evernote Web Clipperと同様、EdgeでもChromeでも使え、インストールするとブラウザのツールバーにOneNoteのアイコンが現れます。

ブラウザで保存したいページを表示してそのアイコンをクリックするとOneNote Web Clipperのメニューが出現します。

メニューではOneNoteにどのように保存するかを選択できます。

メニュー	保存内容
ページ全体	ページ全体の画像
領域	指定領域の画像
記事	記事内の文章と画像
ブックマーク	URL、アイキャッチ画像、メタデスクリプション

Evernote Web Clipperと同様、WebページのタイトルがOneNoteのノートのタイトルになります。

Evernote Web Clipperと大きく異なるのは「ページ全体」と「領域」メニューでは画像として保存される点です。

画像として保存されるため、Webページのレイアウトは完全に再現されます。

ただし、テキスト検索では画像内の文字がテキスト認識されるため、Webページに記述されているはずのテキストがヒットしない場合があります(特に日本語のテキスト)。

「記事」メニューは全部画像ではありませんが、Webページのレイアウトは大きく崩れます。

OneNote Web Clipper

Web で見つけたものを何でも OneNote に保存。画面をクリップして OneNote に取り込み、整理し、編集。保存したクリップは、どのデバイスからでもアクセスできます。

Evernote Web Clipper

Evernote Web ClipperとはEvernoteにWebページを保存するためのブラウザ拡張です。

EdgeでもChromeでも使えます。

インストールするとブラウザのツールバーにEvernoteのアイコンが現れます。

ブラウザで保存したいページを表示してそのアイコンをクリックするとEvernote Web Clipperのメニューが出現します。

メニューではEvernoteにどのように保存するかを選択できます。

メニュー	保存内容
記事	サイドバーやヘッダー等が取り除かれた記事
簡易版の記事	すべての装飾が取り除かれた記事
ページ全体	サイドバーやヘッダー等を含むページ全体
ブックマーク	URL、アイキャッチ画像、メタディスクリプション
スクリーンショット	ページ全体か指定領域の画像

いずれの場合もWebページのタイトルがEvernoteのノートのタイトルになります。

大量のWebページを保存してもEvernoteの全文検索機能で簡単に保存したページを見つけられます。