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

記事内に広告が含まれています。
ページ全体をキャプチャ

ブックマークでなく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のアイコンが現れます(下図)。

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ページ全体、エリアをキャプチャするとマウスで指定する領域がキャプチャされます。

ページ全体をキャプチャ

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

ページ全体をキャプチャ
手書き 手書きで描き込む
保存 JPEG形式で「ダウンロード」フォルダに保存する
コレクションへの追加 コレクションへ保存する

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

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

開発者ツール

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 Web Clipper

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

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

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

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

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

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

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

Evernote Web Clipper

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

EdgeでもChromeでも使えます。

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

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

Evernote Web Clipper

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

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

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

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

コメント

  1. 匿名 より:

    OneNote Webクリッパー