IE11 の読み取りビューの紹介

IE11 では、アドレス バーのボタンをクリックまたはタップすると、Web ページの記事を読み取りビューで表示することができます。

読み取りビューは、Windows 8.1 向け Internet Explorer 11 の新機能です。この機能を使用すると、読みたい Web ページのメイン コンテンツに集中することができます。読み取りビューは、記事に関連するしないを問わず、周りにある不要な情報は表示せずに、読みたい Web ページの記事やブログ記事だけを表示する機能です。読みたい記事を見つけたら、読み取りビューに切り替え、落ち着いて読むことができます。記事を読み終えたら、読み取りビューを終了するだけで、サイトのブラウジングに戻ることができます。

読み取りビューで表示した Web ページの記事

読み取りビューは "イマーシブ" な IE にネイティブに実装された機能です。追加でインストールする必要はありません。IE がサポートするすべての言語に対応しており、テキスト量が多いページで利用できます。

IE11 の読み取りビューの使用方法

読み取りビューの使い方は簡単です。アドレス バーの [読み取りビュー] ボタンをクリックするだけです。キーボードを使用している場合、Ctrl + Shift + R キーを押して、読み取りビューでページを表示することもできます。

[読み取りビュー] ボタンは、"記事に相当" するコンテンツを持つページのアドレス バーに表示されます。ボタンが表示されていない場合、ページを読み取りビューで適切に処理することはできません。

読み取りビューを終了するには、アドレス バーのボタンをもう一度タップまたはクリックするか、Esc キーを押します。前のページに戻るには、[戻る] ボタンをタップまたはクリックします。タッチ対応デバイスを使用している場合は、スワイプして前のページに戻ります。

優れたリーディング エクスペリエンスの条件

IE11 で読み取りビューを開発したときの目標は、ページを快適に読めるビューを作成することでした。ブラウザーを一時的に特定の記事を読むためだけの場とすることで、元のページよりも読みやすくすることを目標としました。同時に、記事の URL、著者、その他の関連するコンテキスト情報だけでなく、コンテンツの整合性も保持したいと考えました。IE はこの機能を実装した最初のブラウザーではありませんが、印刷媒体の発行者たちが何世紀にもわたって使用し、改良し続けてきた読みやすさに関するベスト プラクティスを取り込み、オンラインでの閲覧に適用することで、他のブラウザーよりも優れたエクスペリエンスを実現する機会を得ました。

フォントの選択、行の長さ、余白、段落の設定マーカー、行間、カーニング、コントラスト、画像の配置など、ページの読みやすさにかかわる項目はたくさんあります。IE11 の読み取りビューにおける工夫をいくつか紹介します。

オンラインでの閲覧向けに新しいフォントをデザイン

IE11 の読み取りビューでは、Windows 8.1 向けの Sitka と呼ばれる新しいフォントを利用します。このフォントは、Mathew Carter 氏が、印刷だけでなく、オンラインでの閲覧にも適している Clear Type (英語) テキスト レンダリングを開発した Advanced Reading Technologies チームと協力して、Microsoft 向けに開発しました。

Sitka フォントを利用するメリットの 1 つは、異なる太さによる視覚的な拡大縮小にも対応することです。調査によると、異なるサイズのテキストを読みやすくするのに効果があるのは、文字の間隔、ストロークのサイズ、エックスハイトです。視覚的なファミリは、Web 上でよく使われる多くの書体のように固定されておらず、特にサイズや用途に合わせて最適化されたスタイルを持ちます。そのため、同じファミリを使っても、テキストが非常に読みやすくなり、異なるサイズのスタイルが利用できます。たとえば、読み取りビューでは、画像のキャプションに、ストロークが太く、エックスハイトが高く、文字の間隔が広い Sitka Small を使います。そして記事のタイトルには、ストロークが細く、文字の間隔が狭い Sitka Banner を使います。

ここに、太さの異なる 2.0em サイズの Sitka を 3 つ示します。この画像から、このサイズのテキストに対しては、文字の間隔が狭く、幅が狭い Sitka Heading を使用すると最も読みやすいことがわかります。

今度はここに、太さが同じの 0.8em サイズの Sitka を 3 つ示します。このサイズのテキストに対しては、エックスハイトが高く、文字の間隔が広い Sitka Small を使用すると最も読みやすいことがわかります。

Sitka は、デザイン プロセスに組み込まれた科学的な読みやすさの調査に基づいてデザインされた初めてのフォント ファミリでもあります。ほとんどのフォントは読みやすさの調査を受けていません。調査を受ける数少ないフォントも、フォントがほぼ完成してから調査を受けます。しかし Sitka は、デザイン プロセスで繰り返しテストされました。

さらに読み取りビューでは、平均的なサイズよりも大きいフォント サイズを使用します。調査により、フォント サイズが大きいほど読むスピードが速くなることがわかったためです (きわめて大きいサイズまでテストされました)。

目にやさしいレイアウト

Web の記事の中には、ページに余分なコンテンツが溢れていて、読むのに苦労するものもあります。それに対し、IE11 の読み取りビューの目標は、ページを見やすくすることです。その目標に向け、レイアウトの改善に効果のあるいくつかの要素に注目しました。特に、列幅、行の高さ、テキスト サイズのバランスをうまくとることを目標にしました。

たとえば、読み取りビューでは、ユーザーがフォント サイズを変更することができるため、フォントの拡大に合わせて行間を調整する機能も重要でした。ほかに、列の間、画像の周囲、段落と段落の間のパディング (余白) も考慮しなければなりませんでした。目標は、不要なもののないすっきりしたページにすることです。パディングの設定により、目や脳がテキストをたどりやすくするだけでなく、記事の要素をすばやく認識して違いを識別しやすくなります。

"次へ、次へ、次へ…" リンクの削除

Web 上には、複数のページに分かれたコンテンツから成る記事がたくさんあります。記事が多くのページにまたがっている場合、読み続けるためには、"次のページ" に進むためのリンクを何度もクリックする必要があります。また、次のページが読み込まれるまで待たなければならないため、読むのが中断されます。

IE11 の読み取りビューは、記事のすべてのページから主要なコンテンツを組み合わせ、どのデバイスでもうまく動作するスクロール対応の単一ページにまとめます。"次のページ" に進むためのリンクをクリックする必要はなく、指やマウスを使って画面をスクロールするだけで読み進めることができます。画面上のテキストの位置は、細かく制御することができます。

タブレットや大型モニターなど、ワイドスクリーンのデバイスを使用している場合、読み取りビューでは、記事を複数列から成る水平方向のスクロール対応ページとして表示することができます。

タブレットを縦長モードにして読んでいる場合や、IE と別のアプリのウィンドウを横並びで表示している場合、読み取りビューの記事は、単一列の、垂直方向のスクロール対応ページとして表示されます。原則として、IE のウィンドウがテキストを 2 列で表示できるほど広くない場合は、単一列で垂直方向のスクロール対応レイアウトが使用されます。

読み取りビューのしくみ

読み取りビューで表示できる Web サイトであると判断したら、読み取りビューでは、さまざまなヒューリスティックを使用してページの該当するコンテンツを識別し、抽出します。さらに、それを基に新しいページを (メモリ内に) 作成します。Web は大規模で動的な空間であるため、エンジニアリング上、IE のアルゴリズムは、読み取りビューで閲覧できる可能な限り多くのサイトを対象に、最も関連性の高いコンテンツを抽出することを目標にしています。こうしたヒューリスティックは、ページのどのコンテンツが "メイン" コンテンツであるかを判断するために、HTML タグ、ノードの深さ、画像サイズ、文字数を調べます。

読み取りビューの抽出アルゴリズムで使用される主なルールについて詳しくは、インタラクティブな読み取りビューの Test Drive デモ (英語) をご覧ください。これらのヒントが、コンテンツ マネージャーや開発者がサイトを読み取りビューでうまく表示できるようにするうえで役立つことを願っています。

記事を快適に読めますように。

IE11 の読み取りビュー機能を提供できることを嬉しく思っています。ぜひお試しのうえ、感想を共有してください。

— Jane Liles、Bonnie Yu (Internet Explorer プログラム マネージャー)

— Marty Hall (Internet Explorer インタラクション デザイナー)