Web をもっと大きく Part 1: ズームの機能強化

---

Making the Web Bigger Part 1: Improvements to Zoom
http://blogs.msdn.com/ie/archive/2009/05/18/making-the-web-bigger-part-1-improvements-to-zoom.aspx

---

今回も IE Blog の試訳です。

以下の文章は IE Blog の 5/13 の記事 Making the Web Bigger Part 1: Improvements to Zoom を hebikuzure が私的に試訳したものです。翻訳については Microsoft Corporation およびマイクロソフト株式会社とは無関係に hebikuzure が公開情報に基づき独自に行ったものであり、この文書の内容についての文責は公開者である hebikuzure にあります。翻訳の内容および技術的内容については正確を期すよう十分な注意を払っておりますが、誤りや不正確な部分が含まれている可能性がありますので、本文書を利用される際には原文も併せてご確認ください。

---

ディスプレイ技術が進歩し、Web にアクセシビリティーが全面的に取り入れられるようになり、ブラウザーでのズームと高 DPI のエクスペリエンスはますます重要になってきました。これは一連の記事の最初となるもので、最新のディスプレイで Web の読みやすさを向上させるための Internet Explorer 8 での変更と機能向上について説明しています。この記事では、ズームのユーザー エクスペリエンスの向上に焦点を合わせたいと思います。

ズームの使い方

最初に、Internet Explorer 8 のズームの使い方を振り返りましょう。Internet Explorer 7 のズームは光学ズームのようなもので、ページ上のすべての要素が 100% (‘標準’) の表示で描画された際のサイズに相関して拡大縮小されました。その結果、必要以上に水平スクロールバーが表示されるなど、ユーザーにいろいろな問題をもたらしています。Internet Explorer 8 の新しいズームは、ピクセルのような絶対的な単位で定義された要素を拡大縮小し、パーセントのような相対的な単位で定義された要素には影響を与えません。Internet Explorer 8 のズームのレイアウトと描画の動作の全体についての詳細は、Beta 1 の時の Saloni のブログ記事を参照してください。人により好みは大きく異なりますが、Web ページをズーム イン、ズーム アウトする方法は 4 つあります。

• ユーザー インターフェイスを通じて
• キーボード ショートカットを通じて
• マウス ホイールを通じて
• タッチ ジェスチャーを通じて (Windows 7 で利用可能)

ユーザー インターフェイス

ページをズームするためのもっとも一般的で見てわかる方法は、ブラウザー ウィンドウの右下隅のズーム アイコンをクリックする事です:

虫眼鏡をクリックすると、ズームを 100%、125%、150% に切り替えます。虫眼鏡の右側の下向き矢印をクリックすると、ズームのより細かなオプションが表示されます:

上の図と同じオプションには、コマンド バーの ‘ページ’ をクリックし、‘ズーム’ を選択してもアクセスできます。

キーボード ショートカット

キーボード ショートカットは、今見ている Web ページをズーム イン・ズーム アウトする一番手早い方法でしょう。

• Control キー と ‘+’ キーを同時に押すと、25% 拡大します
• Control キー と ‘-’ キーを同時に押すと、25% 縮小します
• Control キー と ‘0’ キーを同時に押すと、100% 表示に戻します

キーボード ショートカットを使ってズーム率を増やしたり減らしたりする場合、ズーム率の値は 100% を基準にします。例えばズームが 115% に設定されている時にキーボード ショートカットを使ってズーム率を二段階減らすと、ズームはまず 115% から 100% に、次に 100% から 75% になります。

マウス ホイール

マウスにホイールが付いていれば、マウス ホイールを使っても Web ページのズーム イン、ズーム アウトが手早くできます。Web ページを表示している時に、Control キーを押したままマウス ホイールを回します。ホイールを向こう側に回すとページはズーム インし、反対にホイールをこちら側に回すとページはズーム アウトします。スクロール ホイールの刻みごとのズームの増加/現象は 5% です。

タッチ ジェスチャー

タッチ ジェスチャーを使ったズームの使い方については、この記事の後の方で取り上げる予定です。最後までお読みください!

ズームの持続性

Internet Explorer 8 は新しいタブや新しいウィンドウを開いたときも現在のズームの設定を記憶しています。例えば、Web ページを見ていて現在の 100% のズーム設定より 125% の方が使いやすいと思ったとします。そこで右下隅にある虫眼鏡をクリックしてページを 125% に拡大します。Internet Explorer 8 はこの設定を記憶して、これからのすべてのタブとウィンドウを 125% で開きます。実際には、前述のどの設定方法を使ってもズーム レベルは、もう一度設定しなおすまで Internet Explorer 8 に記憶されています。Internet Explorer 7 はこれとは異なった動作で、すべての新しいタブやウィンドウは既定のズーム値に設定されます。もしこの動作の方が良ければ、設定を変更できます:

1. コマンドバー の ‘ツール’
2. ‘インターネット オプション’ のメニュー項目
3. ‘詳細設定’ タブ

‘新しいウィンドウとタブの拡大レベルをリセット’ オプションをクリックし、‘OK’ をクリックします:

ズーム中に視点を見失う事をなくす

ベータ版へのフィードバックは、多くの IE ユーザーが Web ページのズーム イン/ズーム アウトの際に、ドキュメント内でそれまで見ていた場所が分からなくなっている事を示していました。Internet Explorer のタッチ機能チームと Windows 7 のタッチ機能チームとの協力のおかげで、この問題を解決するフォーカル ポイント ズームと呼ばれる機能を搭載できました。

フォーカル ポイント ズームとは何か？

フォーカル ポイント ズームによって、Internet Explorer は要素内の特定のフォーカル ポイント (焦点) を保ったまま Web ページのズーム イン/ズーム アウトができるようになりました。これにより、より直感的なエクスペリエンスが得られ、把握していた状況を失ってしまう事が少なくなります。例えば、www.msn.com を読んでいて、オバマ大統領の耳を中心にズームしたいとしましよう。フォーカル ポイントは下のスクリーン ショットのように大統領の耳になります:

好みの状態にズームしても、ブラウザーはフォーカル ポイントを保持し続けます:

フォーカル ポイントのビューポートに対する相対的な位置が変化しておらず、要素のコンテンツ (大統領の耳) に対する相対的な位置も変化していない事に注目してください。

フォーカル ポイント ズームの使い方は？

実際に、どのズームの方法でもフォーカル ポイント ズームを利用できます。ただしフォーカル ポイントの決定方法はそれぞれに異なります:

• マウス ホイール ズーム – マウス カーソルの位置がフォーカル ポイントになります。これにより非常に正確なズーム イン/ズーム アウトが可能になります。
• キーボード ズーム – フォーカル ポイントはビューポートの中心になります (下図を参照してください)
• ユーザー インターフェイス ズーム – フォーカル ポイントはビューポートの中心になります (下図を参照してください)

Windows 7 RC、マルチタッチ ハードウェアとフォーカル ポイント ズーム

もし幸運にも最新の Windows 7 のリリース候補版をインストールしたマルチタッチが有効な PC を持っているのなら、フォーカル ポイント ズーム機能をさらに役立て、特別なタッチ対応ズーム機能を試す事ができます。

ピンチ ズーム

最初の機能は、親しみのある物でしょうが ‘ピンチ ズーム’ です。二本の指をタッチ画面に下ろしてピンチ ジェスチャーを始めると、フォーカル ポイントは二本の指の真ん中に設定されます:

指を離すように動かすと、Internet Explorer はページをズーム イン (ズーム率を増加させる) し、反対に指を近づけると、Internet Explorer はページをズーム アウト (ズーム率を減少させる) しますが、いずれの場合もフォーカル ポイントは保持されます。発生するズームの量は、現在のズーム レベルに対応した距離の変化に正比例します。

‘ツー フィンガー タップ’ ズーム

二番目の機能は Windows 7 のツー フィンガー タップ ジェスチャーを使い、画面上の要素を二本の指でタップする事により素早くズーム インします。(IE チームではこれを “コブラ タップ” と呼んでいます) フォーカル ポイントは二本の指の中間に設定され、対象となる要素はフォーカル ポイントの下にある要素になります。上の図では、大統領の写真が対象の要素です。Internet Explorer 8 は対象の要素がビューポートからはみ出さない範囲で、対象の要素に可能な限り最大のズーム インを行います。もしページを移動する前に同じページで二度目のコブラ タップ行うと、ページは既定のズーム設定に戻ります。

重要な点は、タッチ ジェスチャーでのズーム レベルの変更はページの遷移、新しいタブ、新しいウィンドウに渡って保持されないという事です。多くの人は主に、よく見てからリンクをクリックするためにタッチ ズーム機能を使っている事がユーザー テストからわかりました。既定のズーム レベルは前述の通り、ユーザー インターフェイス、キーボード、またはマウスを使って変更できます。

フォーカル ポイント ズームが期待通り動作しない場合

フォーカル ポイント ズームが期待通りに動作しない場合があります。第一に留意していただきたいのは、Internet Explorer 8 がフォーカル ポイントを保持するためには、Web ページにスクロールバーが表示されている必要があるという事です。低いズーム レベルにしている場合や Web ページの製作者が工夫を払ってどのサイズでもスクロール バーが表示されないようにしている場合、Internet Explorer 8 はスクロール バーが無いのでフォーカル ポイントを保持するためにページをパンする事ができません。そうしたページの一例が www.wikipedia.org で、ほとんどすべての要素がパーセンテージのような相対的な単位で定義されています。例えば要素のサイズがビューポートに対するパーセンテージで定義されていれると、要素自身はフォーカル ポイント ズームのために適切なパンをするのに必要なスクロールバーが表示される原因にはなりません。

さらに、多くの要素が相対的にあるいはJavaScript を使って定義されているため、ウィンドウ サイズの変更の際に Web ページのレイアウトが再配置されると、フォーカル ポイントは期待されている通りに正確には保持されません。もっともこの問題はフォーカル ポイントが正しくないのではなく、フォーカル ポイントを含んでいる要素のコンテンツが顕著に移動してしまうのです。

Windows の DPI 設定にズームを合わせる

Web ブラウジングのエクスペリエンスと Windows のエクスペリエンスを合致させるために、Internet Explorer はズーム設定を Windows の DPI 設定に合わせます。例えば Windows の DPI スケールが 120 DPI に設定されていると、Internet Explorer 8 は Web ページのコンテンツを 125% にズームします。これは 96 DPI からの相対的なスケールで、120/96 は 1.25 あるいは 125% です。高 DPI と Internet Explorer 8 についての詳細は、MSDN のホワイトペーパー‘DPI Scaling’ section of the ‘Making the Web Bigger’ を参照してください。もちろん既定で異なるズーム レベルで Web ページを表示したければ、この記事の最初で説明したようにズーム レベルを変えるだけです。Internet Explorer 8 は最新の設定を記憶します。

次回までに

過去数か月間でなしとげられたズームの機能向上を活用していただき、フィードバックを伺うのを楽しみにしています。数週間後に予定しているこのシリーズのパート 2 をお待ちください。ズーム、高 DPI と開発者プラットフォームについての技術的な側面について焦点を合わせる予定です。その間、上記で紹介した Zoom and High DPI ホワイトペーパー が皆さんの役に立つでしょう。

-Harel Williams, ユーザー エクスペリエンス PM