Tools

Webページのテキストをハイライトする方法:オンラインハイライターの完全ガイド

ハイライトは、世界で最も古い学習テクニックの一つです。紙からスクリーンへと移行する中で、新世代のオンラインハイライターが登場し、あらゆるWebページにマーキングし、読書を整理し、インサイトを他の人と共有できるようになりました。このガイドでは、Web上でのテキストハイライトについて知っておくべきことをすべて解説します。

14分で読めます
重要なポイント
    • オンラインハイライターは大きく2種類に分かれます。ブラウザ拡張機能でオリジナルページ上に直接ハイライトするもの(Glasp、Hypothesis、Linerなど)と、コンテンツを別のリーダーにスクレイピングするもの(Pocket、Feedly、Instapaperなど)です。
  • オリジナルページ上でのハイライトは、再訪時にいつでもハイライトが表示され、共有も簡単で、元の文脈が保たれます。スクレイピング型のハイライターは安定したオフラインコピーや広告なしの読書環境を提供しますが、共有やポータビリティに制限があります。
  • 始めるのに2分もかかりません。ブラウザ拡張機能をインストールし、Webページ上でテキストを選択してクリックするだけでハイライトできます。Glaspなどのツールは4色のハイライト、メモ、タグ、Notion・Obsidian・Readwiseへのエクスポートに対応しています。
  • 研究によると、ハイライトは本質的に効果がないわけではありません。2013年のDunloskyの研究で「低効用」と評価されたのは、多くの人が受動的にハイライトしているためです。1段落1文のように選択的に行い、メモやレビューと組み合わせれば、強力な能動的学習テクニックになります(Yue et al., 2015)。
  • 最も効果的なハイライトの実践方法は研究に裏付けられています。テキストの10〜20%以内にとどめること、色分けシステムで情報を分類すること、自分のメモを追加すること、定期的に復習すること。過度なハイライトはテストの成績をかえって下げることが分かっています(Fowler & Barker, 1974)。

オンラインハイライターとは?

オンラインハイライターとは、Webページ上のテキストを選択してマーキングできるツールです。紙の本に蛍光ペンを引くのと同じ感覚で使えます。多くのオンラインハイライターはChrome、Safari、Edge、Brave、Opera向けのブラウザ拡張機能として動作します。インストールすると、あらゆるWebページの上にハイライトのレイヤーが追加され、文章や段落を選択してワンクリックで保存できるようになります。

オンラインハイライターは、学生、研究者、ライター、そして日常的にWebで読書をするすべての人にとって欠かせないツールになっています。ページ全体をブックマークして、なぜ保存したのか忘れてしまう代わりに、自分にとって重要な箇所を正確にキャプチャし、メモを追加して、後から見返すことができます。

この記事では、Webページ向けのハイライターに焦点を当てています。PDF、動画、音声、モバイル専用アプリのハイライターは扱いません。


Webページハイライトの2つのアプローチ

ハイライトの具体的な方法に入る前に、ハイライトツールが採用している2つの根本的に異なるアプローチを理解しておきましょう。

アプローチ1:オリジナルページ上でのハイライト

最初のアプローチは、ブラウザ拡張機能を使って、オリジナルのWebページの上に直接ハイライトレイヤーを追加するものです。記事やブログ投稿を開くと、拡張機能によってテキストを選択して色付きでハイライトできます。ハイライトはオリジナルページに紐付けられるため、次にそのページを訪れたときにも表示されます。

このカテゴリの人気ツールには、Glasp、Hypothesis、Weava、Linerなどがあります。

仕組み: 拡張機能は、閲覧中のページに小さなスクリプトを注入します。テキストを選択してハイライトカラーを選ぶと、拡張機能がその選択箇所の位置とコンテンツを記録して保存します。同じURLに戻るたびに、拡張機能がオリジナルコンテンツの上にハイライトを表示します。

アプローチ2:スクレイピングされたページ上でのハイライト

2つ目のアプローチは、仕組みが異なります。Pocket、Feedly、Matter、Instapaperなどのツールは、オリジナルページからコンテンツをスクレイピングし、自社のサーバーにコピーを保存します。ユーザーはオリジナルではなく、それらのツールが作成したバージョンの記事上で読み、ハイライトします。

これらのツールは主にブックマーク、後で読む、コンテンツ発見のためのアプリです。ハイライト機能は副次的なもので、有料プラン限定であることも少なくありません。例えば、Feedlyのハイライト機能は有料会員のみが利用可能です。

仕組み: URLを保存すると、ツールがページのHTMLを取得・解析し、広告やナビゲーションを除去してクリーンなバージョンを保存します。この保存されたコピー上でハイライトするため、ハイライトはオリジナルページとは独立しています。


2つのアプローチの比較

機能オリジナルページ型(拡張機能)スクレイピング型(後で読むアプリ)
セットアップブラウザ拡張機能をインストールアカウント作成 + 各記事を保存
ハイライトの表示オリジナルページ上で表示アプリ内でのみ表示
コンテンツの鮮度常にライブページを読み込む保存時のスナップショット
共有他の人と簡単に公開共有可能通常はプライベートまたは制限あり
オフラインアクセスインターネット接続が必要オフラインで利用可能なことが多い
広告オリジナルページの広告が表示される広告が除去される
エクスポートツールによる(Glaspは.txt、.md、.csv、.htmlに対応)通常は制限あり
コスト無料が多い(Glaspは無料)ハイライト機能に有料プランが必要なことが多い
リスクページ構造が大幅に変わるとハイライトが表示されなくなる場合があるコンテンツは固定コピーで更新されない

オリジナルページ型のハイライトを選ぶべき場合: Webコンテンツを多く読み、再訪時にいつでもハイライトを確認したい、そして読書内容を他の人と共有したい場合。ほとんどのユースケースにおいて、こちらのアプローチをおすすめします。

スクレイピング型のハイライトを選ぶべき場合: オフラインで読みたい、広告のない集中した読書環境が欲しい、または削除される可能性のあるコンテンツを扱っている場合。


ブラウザ拡張機能でテキストをハイライトする方法

ここでは、無料のソーシャルWebハイライターであるGlaspを使ったテキストハイライトの手順を紹介します。GlaspはChrome、Safari、Brave、Edge、Operaなどに対応するブラウザ拡張機能として利用できます。4色のハイライト、メモ、タグ、そしてObsidian、Roam Research、Notion、Readwiseへのエクスポートや、.txt、.md、.html、.csvなどのファイル形式に対応しています。

ステップ1:サインアップと拡張機能のインストール

まず、無料のGlaspアカウントを作成します:

👉 Glaspにサインアップ

次に、お使いのブラウザ向けの拡張機能をインストールします:

👉 Chrome拡張機能(Brave、Edge、Operaでも動作します)

👉 Safari拡張機能

インストール後、ブラウザのツールバーにあるGlaspアイコンをクリックしてサイドバーを開き、ログインしていることを確認してください。

GlaspはMacおよびWindowsのデスクトップで利用できます。

ステップ2:テキストを選択してハイライト

読みたいWebページに移動します。ハイライトしたいテキストを選択すると、4色のカラーオプションを含む小さなポップアップが表示されます。いずれかの色をクリックすると、テキストが即座にハイライトされます。ハイライトされた文はGlaspのサイドバーにも表示されます。

Browser Extension Sidebar

ハイライトをクリックしてメモ欄に入力することで、メモを追加することもできます。読書中に自分の考えを記録するのに便利です。

ステップ3:プロフィールページでハイライトを整理

すべてのハイライトと記事は、Glaspのプロフィールページに集約されます。アクセスするには、サイドバーのホームアイコンをクリックするか、glasp.coにアクセスしてください。

Glasp User Profile

プロフィールページでは、以下のことができます:

  • ハイライトした全記事を閲覧 日付順に表示
  • ハイライトを検索 キーワードで検索
  • ハイライトをエクスポート 「Copy Content」や「Share」ボタンをクリック
  • 複数形式でダウンロード (.txt、.md、.html、.csv)
  • 他のツールと同期 Readwise、Notion、Obsidian、Roam Researchなど

https://www.youtube.com/watch?v=7mU62hM5GP4

ステップ4:他のユーザーから発見し学ぶ

Glaspのユニークな機能の一つが、Exploreページです。他の読者の記事やハイライトを発見できます。トピック別に閲覧したり、特定のテーマを検索したり、他の学習者が何をハイライトしメモしているかを確認できます。

特定のトピックで記事を検索:

https://www.youtube.com/watch?v=2hEWk7XzuaI

著者で検索:

https://www.youtube.com/watch?v=q-yAv7aJ2bY

このソーシャルな要素により、ハイライトはプライベートな活動から共有された学びの体験へと変わります。同じ記事に対する他の人の視点にアクセスしたり、見逃していた関連コンテンツを発見したり、同じ興味を持つ学習者のネットワークを構築できます。


Webページのハイライトがあなたにもたらすメリット

ハイライトは単にテキストに色を付けるだけのものではありません。「ハイライトは時間の無駄」という話を聞いたことがあるかもしれませんが、その主張は研究の誤解に基づいています。心理学者John Dunloskyによる2013年の画期的な研究ではハイライトを「低効用」と評価し、メディアは「ハイライトをやめよう!」という見出しを広めました。しかし、Dunloskyのチームが具体的に評価したのは、ほとんどの学生が実践しているようなハイライト、つまり深い処理を行わずにほぼすべての行にマーカーを引くやり方でした。テクニック自体が問題だったのではなく、やり方が問題だったのです。(研究の詳細な解説については、こちらの記事をご覧ください:ハイライトの科学

意図を持って使えば、ハイライトは学習と生産性の両面で本当に効果的なツールです。その具体的な仕組みを見ていきましょう。

学習面のメリット

アクティブリコールと間隔反復で記憶を強化する

人間は読んだことの大部分を数日で忘れてしまいます。エビングハウスの忘却曲線によると、復習なしでは1週間以内に新しい情報の最大80%を失います。ハイライトは個人の復習ライブラリを作り出します。Glaspのようなツールは過去のハイライトを取り上げるウィークリーまとめメールを送信し、余計な手間なく自然な間隔反復を生み出します。分散学習(間隔を置いて復習すること)は、Dunlosky自身の研究が「高効用」と評価している2つのテクニックのうちの一つです。

能動的な読書と選択的な関与を促す

ハイライトするとき、あなたは何が重要かを判断しています。Yue et al.(2015)の研究によると、何をハイライトするか決める行為が、読者に各文の重要性を評価させ、記憶の保持を大幅に改善する能動的な処理を生み出します。これは、すべてにマーキングして何にも深く関与しない受動的なハイライトとは正反対のアプローチです。

デジタルハイライトは紙を上回る可能性がある

Mason et al.(2024)の研究では興味深いパターンが見つかりました。紙ではハイライト頻度が増えるほど理解度が低下しましたが、デジタルテキストでは逆の結果が出たのです。デジタルツールはより正確な選択が可能で、ハイライトの検索、整理、復習も容易です。これは、従来の紙のハイライトに対するWebハイライトの確かな優位性です。

ソーシャルラーニングを可能にする

一人で読書する場合、記事から得られる価値は完全に自分の視点に依存します。同じ記事で他の人がハイライトした箇所を見ることができれば、複数の視点にアクセスできます。コーネル大学の研究では、ソーシャルアノテーションが分散認知の一形態を生み出し、理解と記憶の保持を改善することが示されています。これがGlaspのソーシャルハイライトの背後にある原理です。すべての読者のハイライトが文脈を追加し、記事を全員にとってより価値のあるものにします。

複数のソースにまたがる知識を文脈化する

数週間、数か月にわたって何十もの記事にハイライトを付けていくと、パターンが見えてきます。異なるソースのアイデア間のつながりに気付くようになります。ハイライトライブラリは、あなたの理解がどのように進化してきたかを反映する個人のナレッジベースとなります。

生産性面のメリット

リサーチとライティングを加速する

レポート、記事、学術論文を書く人にとって、リサーチのワークフローは常に同じです。ソースを見つけ、読み、重要なポイントを抽出し、整理して、書く。ハイライトは抽出のステップを効率化します。重要な箇所を見つけるために記事全体を読み返す代わりに、読みながらハイライトしていきます。書く段階になると、ハイライトはすでに整理されてライティングツールにエクスポートできる状態になっています。

他者との共有で文脈を保つ

同僚から「良い記事だよ!」とだけメッセージが添えられたリンクを受け取ったことはありませんか?クリックすると3,000語の記事が表示され、相手がどの部分に価値を感じたのか、なぜ共有したのかまったく分かりません。ハイライト付きのリンクなら、記事だけでなく、どの部分が響いたか、その理由も一緒に共有できます。曖昧なコンテンツ共有が、焦点の定まった生産的なコミュニケーションに変わります。

再読の時間を削減する

記事の重要なポイントをハイライトしておくと、視覚的なアンカーが生まれます。次にそのページを訪れたとき、ハイライトをざっと見るだけで、記事全体を読み返さなくても数秒で要点を思い出せます。何十ものソースを扱う研究者にとって、これは何時間もの節約になります。


効果的なWebハイライトのベストプラクティス

すべてのハイライトが同じように役立つわけではありません。Fowler and Barker(1974)の研究では、ハイライトするテキストの量が増えるにつれてテストの成績が低下することが判明しました。すべてをハイライトした学生は、実質的に何もハイライトしていないのと同じでした。ハイライトを有用にしている視覚的な差別化は、ページの70%をマーキングすると消えてしまいます。

以下は、ハイライトの習慣をより効果的にする、研究に裏付けられた実践方法です。

厳選する:1段落につき1文

重要なアイデア、意外な事実、または自分の考え方に挑戦する箇所のみをハイライトしましょう。研究では、テキストの10〜20%以下のハイライトが推奨されています。一般的な段落なら、1文、多くても2文程度です。まず段落全体を読み、何が重要かを考え、それから核となるアイデアだけをマーキングしましょう。この「まず読んで、次にハイライト」というアプローチが、熟練した読者のテキストとの向き合い方です。

自分のメモを追加する

余白への注釈と組み合わせると、ハイライトはDunloskyの研究で「高効用」と評価されたテクニックに匹敵する効果を持つ能動的学習戦略になります。ある文が考えを触発したら、すぐに書き留めましょう。未来の自分が感謝するはずです。文脈のないハイライトは数週間後に意味が分からなくなることがありますが、「これはXについて読んだ内容と矛盾する」のようなメモ付きのハイライトは価値を保ち続けます。Glaspではハイライトにメモを添付でき、自分の思考をソース素材のすぐ隣に残しておけます。

色分けシステムを使う

色と注意力に関する研究では、異なる色を使って情報を分類すると、認知処理の追加レイヤーが生まれることが示されています。色をカテゴリに割り当てることで、読書中に分類のステップが強制され、これ自体が精緻化処理の一形態となります。Glaspの4色を使えば、次のようなシステムを構築できます:

意味
黄色核となる主張やメインアイデア
裏付けとなるエビデンスやデータ
疑問点やさらに調べたいこと
ピンク他の読書内容とのつながり

このシステムを一貫して使いましょう。やがて、読書中に脳が自動的に情報を分類するようになり、ハイライトがひと目で読み取れるようになります。

定期的に復習する

ハイライトはプロセスの半分に過ぎません。残りの半分は、ハイライトを見返すことです。最近のハイライトのウィークリーレビューをスケジュールに入れるか、Glaspのウィークリーまとめメールを活用しましょう。復習の際は、ソースを読み返す前に各ハイライトの文脈を思い出してみてください。これが検索練習の一形態となり、Dunloskyの研究が最も効用の高い学習テクニックの2つのうちの一つとして評価しているものです。

ソース別ではなくトピック別に整理する

ほとんどの人は、ハイライトを記事単位で整理します。より有用なアプローチは、トピックやプロジェクト単位で整理することです。NotionやObsidianなどのツールにハイライトをエクスポートするとき、ソースURLではなくテーマごとにグループ化しましょう。これにより、思考やライティングを支えるナレッジベースが構築されます。

これらの実践方法の背後にある科学のより詳しい解説(選択性、色分け、デジタルと紙のハイライトの比較、ソーシャルアノテーションに関する研究の全容を含む)については、こちらの記事をご覧ください:ハイライトの科学:なぜ多くの人が間違ったやり方をしているのか(そして正しいやり方)


Frequently Asked Questions

Webページに使える最良の無料オンラインハイライターは?

Glaspは、Chrome、Safari、Brave、Edge、Operaに対応するブラウザ拡張機能として動作する無料のオンラインハイライターです。4色でテキストをハイライトし、メモを追加し、複数の形式でエクスポートし、他の読者がハイライトしている内容を発見できます。他の多くのツールとは異なり、Glaspのコア機能は完全に無料です。

どんなWebサイトでもテキストをハイライトできますか?

はい、Glaspのようなブラウザ拡張機能型のハイライターは、ほぼすべてのWebサイトで動作します。いくつか例外があります。拡張機能をブロックするページ(Chrome Web Storeのページや特定の銀行サイトなど)や、通常と異なるレンダリングのページ(一部のシングルページアプリケーションなど)ではハイライトがサポートされない場合があります。しかし、記事、ブログ投稿、Webページの大多数では、ハイライトは問題なく動作します。

ハイライトはページ上にずっと残りますか?

Glaspのようなブラウザ拡張機能型のハイライターでは、拡張機能がインストールされていてログインしている限り、ページを訪れるたびにハイライトが表示されます。著者がページのコンテンツを大幅に再構成した場合、一部のハイライトが正しく表示されないことがありますが、ハイライトされたテキストはGlaspプロフィールに常に保存されています。

ハイライトを他のアプリにエクスポートできますか?

Glaspは複数の形式でのハイライトエクスポートに対応しています:.txt、.md(Markdown)、.html、.csv。また、Readwise、Notion、Obsidian、Roam Researchとの直接連携も可能です。個別の記事からでも、プロフィールページから一括でもエクスポートできます。

WebページのハイライトとPDFのハイライトは違いますか?

はい。Webページのハイライトは、Webコンテンツの上にレイヤーを追加するブラウザ拡張機能を使用します。PDFのハイライトは通常、専用のPDFリーダーやアノテーションツールを使用します。一部のツール(Glaspを含む)は両方に対応していますが、基盤となる技術は異なります。このガイドは、特にWebページのハイライトに焦点を当てています。

ハイライトは本当に学習に役立ちますか?それとも単なる作業ですか?

2013年の有名なDunloskyの研究はハイライトを「低効用」と評価しましたが、具体的に評価されたのは受動的で無差別なハイライトでした。その後の研究(Yue et al., 2015; Mason et al., 2024)によると、選択的なハイライトをメモ取りや復習と組み合わせると、本当に効果的な学習戦略になることが示されています。ポイントは、テキストの10〜20%以下にとどめ、定期的にハイライトを見返すことです。研究の詳細な解説については、ハイライトの科学をご覧ください。

他の人に自分のハイライトは見えますか?

ツールによって異なります。Glaspはソーシャルハイライターとして設計されているため、ハイライトはデフォルトで他の人に公開され、共有学習コミュニティが形成されます。Hypothesisのように公開モードとプライベートモードの両方を提供するツールもあります。Pocketのようなスクレイピング型のハイライターは、ハイライトをプライベートに保ちます。プライバシーとソーシャルラーニングのどちらを優先するかに合わせて、ツールを選びましょう。

オンラインハイライターを使うには何かインストールが必要ですか?

オリジナルページ型のハイライターの場合、はい、ブラウザ拡張機能のインストールが必要です。これは、拡張機能が閲覧中のWebページとやり取りしてハイライトを表示・保存する必要があるためです。拡張機能なしでオリジナルWebページをハイライトできると謳うツールがあれば注意してください。別のドメインのページコピーにリダイレクトしている可能性があります。


← 記事一覧に戻る

Start building your knowledge library

Highlight what matters as you read across the web. Save insights from articles, books, and YouTube videos in one place.

Get Started Free