ウェブページのテキストをハイライト・メモする方法:Web Highlights の使い方

本にマーカーを引くように、ウェブページのテキストをハイライトしてメモやタグを残せます。Web Highlights の使い方を、インストールからウェブアプリでの検索・フィルター、エクスポート、AI 要約、間隔反復学習まで紹介します。

Marius Bongarts
Marius Bongarts
読了時間 13 分
紙の上でテキストにハイライトを引き、メモやスケッチを書き込む手
写真:Amélie Mourichon / Unsplash

ウェブページのテキストをハイライトして、メモを残したい——数年前の私がまさにそうでした。そこで始めたのが、Web Highlights というブラウザ拡張機能の開発です。当時はネットで多くの記事を読んでいたのに、内容を整理できず、必要なときに情報を探し直すのにいつも苦労していました。

求めていたのは、本にマーカーを引くのと同じ感覚でウェブサイト上のテキストをハイライトし、そのハイライトにどこからでもアクセスできる方法です。ツールはいくつかありましたが、どれもしっくりきませんでした。それで自分で作ったのが Web Highlights です。

今では数十万人のユーザー(私を含む)が毎日このオンラインハイライターを使っていて、私自身、これなしの仕事は考えられません。この記事では、使い始め方と効率よく使いこなすコツを紹介します。基本のハイライトから、高度な検索とフィルター、AI による要約、間隔反復(spaced repetition)学習まで順に見ていきます。


セットアップ

まずはブラウザ拡張機能をインストールします。Web Highlights は Chrome、Edge、Brave などの Chromium ベースのブラウザに加え、Firefox にも対応しています。

Web Highlights の拡張機能は、Chrome ウェブストア、Microsoft Edge アドオン、Firefox アドオンから入手できます。

手順を一つずつ確認したい場合は、ドキュメントのインストールガイドを参照してください。

Chrome に Web Highlights をインストール
Chrome に Web Highlights をインストール

右上の「Chrome に追加」ボタンをクリックするだけです。インストールが終わるとウェルカムガイドが開き、セットアップを順に案内してくれます。

最初に、拡張機能のアイコンを固定しておくと便利です。ブラウザ右上の「拡張機能」アイコンをクリックし、ピンの形をした「固定」アイコンをクリックすれば、いつでもすぐに使えます。

スクリーンショット:拡張機能を固定する方法
固定した Web Highlights 拡張機能

アカウント作成は任意

このハイライターのいいところは、アカウントを作らなくてもすぐに使い始められることです。Web Highlights の機能の多くは無料で、アカウントなしで使えます。たとえば次の機能です。

  • 🖋️ ウェブサイトと PDF をハイライト
  • 🎨 複数のハイライトカラー
  • 🔖 ブックマークを保存
  • ✍️ メモを取る
  • 🏷️ タグを作成
  • 📤 Markdown へエクスポート
  • 💾 調べた内容をバックアップ
  • ⚡ 作業効率を最大限に高めるキーボードショートカット
  • 📖 リーダーモード——ページを余計なもののない読みやすいドキュメントとして保存できます

ほかの機能には無料のアカウントが必要で、その多くは有料の Premium・Ultimate プランに含まれます。有料プランは 7 日間無料で試せます。詳しくはドキュメントの「はじめに」を参照してください。アカウントと有料プランで使えるようになる主な機能は次のとおりです。

アカウントの作成は無料です。クラウド同期を使うと、ハイライトはクラウドにバックアップされ、どのデバイスからでも app.web-highlights.com のウェブアプリで調べた内容を開けます。同期は 7 日間のトライアル中は無料で、その後は Premium と Ultimate の機能になります。アップグレードしなくてもハイライトはそのまま残り、止まるのは同期だけです。

アカウントの作成方法

メールアドレスでアカウントを作成するか、「Google でログイン」をクリックします。

Web Highlights のアカウントを作成
Web Highlights のアカウントを作成

Web Highlights はデータのプライバシーを非常に重視しており、データについて次のことを明言しています。

  • 承認された用途以外で第三者に販売しないこと
  • 拡張機能の中核となる機能と関係のない目的で使用・移転しないこと
  • 信用力の判断や融資の目的で使用・移転しないこと

データのプライバシーについて詳しくは、Web Highlights のプライバシーポリシー(英語)または Chrome ウェブストアをご覧ください。

ハイライトを始める

アカウントなしで使っていても、アカウントを作成していても関係ありません。どのウェブサイトや PDF でも、テキストをハイライトしてすぐに使い始められます。

好きなサイトを開いてテキストを選択すると、ハイライトアイコンが表示され、ハイライトの色を選べます。ハイライトのさまざまな方法は、公式のハイライトガイドにすべてまとめています。

ウェブサイト上のテキストをハイライト
ウェブサイト上のテキストをハイライト

たとえば、私のように何かのテーマについて記事を書くとします。最近書いた記事のひとつは Web Components がテーマでした。そのためにネットで資料を探し、記事の中の大事な一節に印を付けていきます。やり方は簡単で、目的のテキストを選択して Web Highlights のハイライトアイコンをクリックするだけです。アイコンをクリックすれば既定の色で、横に並んだ色をクリックすればその色でハイライトできます。

動画で見たい方へ。この短い動画では、最初のハイライトから、このあと紹介するメモ、タグ、ダッシュボードまで、一連の流れを紹介しています。

ポップアップが表示されないほうがいい場面もあるでしょう。そんなときは、設定の「ハイライトポップアップ」で自動ポップアップを無効にできます。

設定でハイライトポップアップを無効にする
設定でハイライトポップアップを無効にする

でも、心配はいりません。ポップアップを無効にしていても、テキストを選択して右クリックすればハイライトできます。コンテキストメニューに Web Highlights のアイコンが表示されるので、「選択したテキストをハイライト」をクリックします。

Web Highlights のコンテキストメニュー
Web Highlights のコンテキストメニュー

キーボードショートカットも使えます。ショートカットは、アドレスバーに chrome://extensions/shortcuts を貼り付けて設定できます。

長い記事をハイライトするなら、サイドパネルのヘッダーからクイックハイライトをオンにしてください(Alt+Q、Mac では Option+Q)。選択したテキストが、そのつど現在の色ですぐにハイライトされます。ポップアップも追加のクリックもいりません。

タグとメモを付ける

ハイライトするとポップアップが表示され、タグを付けたりメモを書いたりできます。私の場合は、たとえば「mental-health」というタグを付けました。こうしておけば、あとでウェブアプリからハイライトとメモを簡単に見つけられます。ハイライトはサイドパネルでも確認・編集できます。

Web Highlights でハイライト
Web Highlights でハイライト

タグをクリックすれば、そのタグが付いたハイライトとページをいつでもまとめて表示できます。サイドパネルでは次のように表示されます。

タグごとにまとめたハイライトとページ
タグごとにまとめたハイライトとページ

ウェブアプリでハイライトを探す

いくつかのページにハイライトしたら、app.web-highlights.com にログインすれば、いつでもどこからでもハイライトを見つけられます。

ℹ️ ウェブアプリを使えるのは、上で説明したとおりアカウントを作成した場合だけです。

ダッシュボードはこんな画面です。すでにかなりの数のハイライトがあるのがわかると思います。

Web Highlights のダッシュボード

ハイライトしたページは、初期設定では日付ごとにまとめられ、作成日順に並びます。ウェブサイトごとにまとめることも、グループ化をオフにすることもできます。

ウェブアプリは「グリッド」「リスト」「タイル」の 3 つのレイアウトに対応しています。選んだ表示はセクションごとに記憶されるので、「ページ」はリスト、「ハイライト」はグリッド、という使い分けも毎回設定し直す必要はありません。ハイライトしたページをクリックすると、そのページで作成したハイライトがすべて表示されます。

たとえば、Tiago Forte が考案した強力な整理術、PARA メソッドについての記事でのハイライトがこちらです。

ハイライトしたページ:PARA メソッド
ハイライトしたページ:PARA メソッド

左のナビゲーションでは、ハイライトしたページとハイライトを切り替えられます。「ページ」にはハイライトしたページが表示され、「ハイライト」に切り替えると、ページを開かなくてもすべてのハイライトを一覧できます。

グリッド表示のハイライト
グリッド表示のハイライト

「ページ」と「ハイライト」のほかにも、ナビゲーションから「メモ」「タグ」「ウェブサイト」「著者」「カラー」「AI 要約」「AI チャット」「ドキュメント」「画像」「コレクション」を表示できます。それぞれに専用の表示と並べ替えのオプションがあります。全体像はウェブアプリのグリッドとフィルターのドキュメントを参照してください。

では、先ほど作成した「mental-health」タグで検索してみましょう。このタグで絞り込むと一覧が更新され、そのタグを付けたページやハイライトだけが表示されます。これなら情報をとても簡単に見つけ直せます。

Web Highlights のダッシュボード
Web Highlights のダッシュボード

「mental-health」タグの付いたハイライトが 2 件あるのがわかります。

AND/OR 条件の高度なフィルター

タグは便利ですが、調べた内容を絞り込むために複数の条件を組み合わせたいこともあります。そこで役立つのが高度なフィルターです。これは Ultimate プランの機能です。

ウェブアプリでフィルターバーを開き、タグ、ウェブサイト、著者、色、日付の範囲などの条件を追加します。特に便利なのは、フィルターを AND または OR で組み合わせられることです。

  • AND——有効なフィルターのすべてに一致する項目だけを表示します(結果を絞り込む)
  • OR——有効なフィルターのいずれかに一致する項目を表示します(結果を広げる)

私はよく、2 つのタグを AND で同時に絞り込み、ちょうど重なる部分を探します。検索入力欄ではクイックフィルター構文も直接使えます。たとえば tag:mental-health と入力して Enter キーを押すだけです。大幅な時短になります。

さらに、表示項目のカスタマイズで、グリッドに表示するメタデータの項目を選べます。タイトルと日付だけに絞ることも、必要に応じて詳しい情報を増やすこともできます。

ウェブサイトで絞り込む

特定のウェブサイトで絞り込むこともできます。左のナビゲーションで「ウェブサイト」を開くと、これまでにハイライトしたすべてのウェブサイトの一覧が表示されます。

ハイライトしたウェブサイトの一覧
ハイライトしたウェブサイトの一覧

たとえば「medium.com」を選ぶと、これまでに注釈を付けたりブックマークしたりしたページがすべて表示されます。

medium.com でハイライトしたページ
medium.com でハイライトしたページ

検索で絞り込む

探している情報をいちばん手早く見つけられるのが、強力な全文検索です。

ウェブアプリの左のナビゲーションで「検索」をクリックし(拡張機能のサイドパネル内の検索でもかまいません)、入力を始めます。検索画面にはすべての種類がまとめて表示されます。ページ、ハイライト、タグ、ウェブサイト、著者、カラー、画像、AI 要約、AI チャットまで、検索語に一致するものを丸ごと見渡せます。

たとえば、「habit」を含む結果をすべて表示するとこうなります。

検索キーワード「Habit」で絞り込んだダッシュボード
検索キーワード「Habit」で絞り込んだダッシュボード

ここから「種類」のフィルターを追加して、結果を絞り込めます。矢印キーでフィルターのドロップダウンを移動し、Enter キーで適用します。検索入力欄にクイック構文を直接入力することもできます。

たとえば type:highlights と入力すると、ハイライトだけが表示されます。ハイライトとページを同時に表示するなど、複数のフィルターを重ねることもできます。

有効なフィルターはフィルターバーにバッジとして表示されるので、何が適用されているかがひと目でわかります。バッジの ✕ をクリックするとそのフィルターを解除でき、すべて解除すれば元の結果に戻ります。キーボードだけですばやく操作できるので、調べた内容の中から特定の情報を見つけるのがとても楽になります。

ブックマークを保存する

Web Highlights はテキストのハイライトだけに使うものではありません。ページをブックマークとして保存しておくのもとても便利です。あとでハイライトの続きをしたり、そのページをもう一度見つけたりできます。

ブックマークを保存
ブックマークを保存

テキストを選択せずにウェブサイト上で右クリックし、「ページをブックマークとして保存」を選ぶこともできます。

右クリックでブックマークを保存
右クリックでブックマークを保存

実践例:ページを「あとで読む」リストに保存する

私がよくやるのは、気になった記事をブックマークとして保存し、「ToRead」タグを付けておく方法です。あとでウェブアプリに戻り、そのタグが付いたページをまとめて絞り込みます。

これが私の「あとで読む」リストです。

私の「あとで読む」リスト
私の「あとで読む」リスト

さらに一歩進めて、リマインダーを設定しておけば、記事のことを忘れずに済みます。ハイライトしたページの時計アイコンをクリックして、日時を選ぶだけです。

メールのリマインダーを設定
メールのリマインダーを設定

指定した日時に、その記事のことを知らせるメールが届きます。

リーダーモードとドキュメントの保存

私がほぼ毎日使っている機能のひとつがリーダーモードです。あとで読みたい記事や、気を散らさずに読みたい記事を見つけたら、サイドパネルから直接ドキュメントとして保存できます。Web Highlights が広告、ポップアップ、Cookie バナーなどの余計な要素を取り除き、すっきり読みやすいページにしてくれます。

読み心地も自分好みに調整できます。「文字サイズ」「行の高さ」「レイアウト幅」を変えたり、「ライトモード」「ダークモード」「セピアモード」「コントラストモード」から選んだりできます。保存したドキュメントはウェブアプリの「ドキュメント」から開けるので、どのデバイスからでも、オフラインでも読み返せます。

AI 要約と AI チャット

Chrome または Microsoft Edge を、内蔵 AI に対応したパソコンで使っているなら、AI 要約と AI チャットはきっと気に入るはずです。AI 要約は、ハイライトとページの内容を簡潔にまとめます。処理はすべてデバイス上で行われるので、データがパソコンの外に出ることはありません。

AI チャットはさらに一歩進んで、内容について対話できます。追加で質問したり、特定の部分を掘り下げたり、難しいテーマを説明してもらったりできます。要点だけ押さえたい長めの研究論文では、特に重宝しています。

YouTube のハイライト

何年も前からあったらよかったのに、と思う機能が YouTube のハイライトです。Web Highlights は YouTube 動画の文字起こしを取り込み、ふつうの記事と同じようにハイライトしたりメモを付けたりできます。文字起こしのどこかをクリックすると、動画がちょうどその場面にジャンプします。学習系の動画をよく見るなら、使い方ががらりと変わるはずです。

ハイライトのエクスポート

調べもののハイライトがたまってきたら、Notion や Obsidian などのツールにエクスポートしたくなるかもしれません。

そのために、Web Highlights にはさまざまなエクスポート機能があります。普段使っているリサーチツールへ、メモを簡単に移せます。

選べるエクスポートの方法は次のとおりです。

Markdown や HTML としてのコピーはどのプランでも使えますが、PDF・HTML ファイルへのエクスポートには Ultimate が必要です。これらのオプションは、ハイライトしたページの三点アイコンをクリックすると表示されます。ここでは例として、調べた内容を Markdown でエクスポートし、Notion のようなナレッジ管理ツールに取り込む方法を紹介します。

例:Markdown をコピーする

ウェブアプリで、ハイライトしたページの「Markdownをコピー」をクリックするだけです。メタデータも含めて、そのページのハイライトがすべてコピーされます。

Markdownをコピー
Markdownをコピー

コピーした Markdown を、たとえば Notion に貼り付けると、次のように表示されます。

Notion のスクリーンショット
Notion のスクリーンショット

Web Highlights は、画像、タイトル、タグ、ハイライト、メモなど、ページの情報をすべて引き継ぎます。

読んだ内容を覚えておく

正直なところ、ネットで読んだ内容を 1 週間後にどれだけ覚えているでしょうか。ヘルマン・エビングハウスの古典的な記憶実験では、新しく覚えた内容の約 3 分の 2 が、復習しないと 1 日で失われていました。だからこそ、Web Highlights に間隔反復学習を組み込みました。

Web Highlights の間隔反復ダッシュボード
Web Highlights の間隔反復ダッシュボード

仕組みはシンプルです。ハイライトが単語カードになり、科学的に最適化された間隔で復習するよう Web Highlights が知らせてくれます。内部では SuperMemo(SM-2)アルゴリズムを使っています。Anki のような単語カードアプリの、従来型スケジューラーの基になっている方式です。よく覚えている項目は次の復習までの間隔が延び、苦手な項目は早めに戻ってきます。

興味があれば、このテーマを掘り下げた記事もどうぞ(英語):Spaced Repetition — How to Make Your Readings Stick in Long-Term Memory

まとめ

Web Highlights を使えば、調べものの整理がぐっと効率的になります。テキストをハイライトしてタグを付けておけば、ネットで出会った情報をいつでも簡単に見つけ直せます。メモを取れば考えを整理でき、エクスポート機能で Notion、Obsidian、Capacities などのお気に入りのツールへ成果を移せます。

AND/OR 条件の高度なフィルター、集中して読めるリーダーモード、AI による要約、YouTube の文字起こしのハイライト、間隔反復学習といった機能が加わり、Web Highlights はシンプルなハイライターをはるかに超えて、ネットで本格的に調べものをする人のための知識管理ツールになりました。

もっと知りたい方は、ドキュメントをひととおり読むか、ほかの活用例もご覧ください。

ご連絡は LinkedIn から、フォローは Twitter でどうぞ。