拡大・縮小機能からみるブラウザの課題

拡大・縮小はレガシー機能?

JIS X 8341-3:2004 には、ブラウザの機能で文字の拡大・縮小ができるようにしたり、ユーザースタイルシートで変更できるようにすることを推奨しています。当時多く方が利用していた IE6 は、ピクセル指定の文字の拡大縮小が出来なかったこともあり、ブラウザの機能とは別に JavaScript で実現した文字サイズ UI が実装されてたのだと推測しています。もちろん、JIS規格が IE 中心で見ていたとは思っていませんが、ブラウザによって拡大・縮小の解釈が様々でした。その名残もあって今でも Web サイトに文字サイズ変更の UIが設置されている場合があります。

今は時代も変わりほとんどのブラウザがピクセル指定がしてあってもレイアウトも文字も拡大・縮小出来る機能を実装しています。こうした時代の変化を考慮して JIS X 8341-3:2010 では、文字に関する達成基準のニュアンスが変わっています。現在は「コンテンツ又は機能を損なうことなく,テキストを支援技術なしで200%までサイズ変更できなければならない。」としています。200% という数値が出て来ているので一見厳しくなったようにみえますが、今のブラウザの拡大・縮小機能を考慮すると厳しい基準とは言い難いですし、それほど意識しなくても達成できます。

それでも今もなお文字サイズ変更の UI が設置されているのはなぜでしょうか。昔の名残でそのまま設置している・・・なんてこともあるかもしれませんが、理由はそれだけではないと思います。ブラウザの機能として長くある「拡大・縮小」ですが、メニューのなかに隠れているのがひとつの問題。そもそもブラウザという存在を意識していない人が多いわけですから、そんな機能があるとは知らない方がいるはずです。そういった場合、Webサイトから見えていたほうが、分かりやすいわけです。

隠れている機能から触れる機能へ

ブラウザのインターフェイスから隠れている機能とは書きましたが、IE7 と IE8 ではウィンドウの下からすぐにアクセス出来るような UI を設けており操作がしやすいです。IE9 では Chrome を意識し過ぎたのか、ステータスバーが消えてしまい文字拡大・縮小機能も一緒になって消えてしまっているようで残念ですね。他のブラウザでも設定やプラグインを利用すれば、機能を前面に出すことが出来るものもありますが、ワンステップ遠いイメージは今も昔も変わりません。

なんとなく隠れ機能と化している拡大・縮小機能ですが、タブレットの普及により意識せずとも Web サイトの拡大・縮小がしやすくなりました。GUI を通してではなく、ジェスチャーを通して機能が使われるようになってきたわけです。Webサイトにあたかも直接触れながら操作する感覚は拡大・縮小という機能の利用も自然に行いやすいのでしょう。こうしたジェスチャーインタラクションが TV のように利用者とデバイスが離れている場合にどう採用できるのかも注目です。

Webサイトとブラウザとのより強い連携

ブラウザというアプリケーションのレイヤーと Web サイトのレイヤーが利用者にとってあやふやに見えるのも、Webサイトにブラウザがもつべき機能として拡大・縮小機能を求めてしまう理由なのかもしれません。例えば Gmail を使っていると、Gmail という Web アプリケーションがもつ UI と、Gmailを表示している Web ブラウザの UI がそれぞれ存在しています。年々、ブラウザの GUI はシンプルになってきていますが、それでも2つの異なるアプリケーションの UI が同時に存在しているという状況は変わりません。熟練したパソコンユーザーであれば、どの機能が Web アプリケーションに属し、どの機能が Web ブラウザに属しているのか分かるかもしれませんが、そうではない方も少なくありません。見ているページをメール送信する機能も、ブラウザとページでそれぞれ実装しているケースがあるので、どちらを使えば良いのか迷いそうですよね。

Webサイトとブラウザが分断した関係で成り立っているのも、文字サイズ変更の UI を設置しているひとつの理由だと考えています。どちらが持つべき機能か現状では分かり難いから、「とりあえず実装」と考えていまうのかもしれません。それぞれが役割分担しなくても、機能が共有出来る部分はしてしまったほうが良いと考えています。

Mac OSX に実装されているメニューのハイライト。検索するとメニューの場所を知らせてくれます。

ブラウザの機能を使って Web サイトを操作することが出来ても、Web サイトからブラウザの機能を操作出来る方法がない場合があります。JavaScript で Web ブラウザのもつ印刷機能にアクセスして、紙を印刷することくらいなら出来ますが、せいぜいそれくらいです。Webサイトは、お気に入りにも履歴にもアクセス出来ませんし、当然ながら文字の拡大・縮小機能も使えません。もし、JavaScript で window.zoomIn(); と記述すればブラウザの機能にアクセスすることが出来ればどれほど楽でしょうか。開発者はわざわざ自家製で機能を作ることもありませんし、利用者はサイトによって異なる拡大・縮小の動作に悩まされることもありません。説明ページを用意しなくても、Mac OSX のようなメニューのハイライト機能を JavaScript から実行することが出来れば、利用者は簡単に機能を見つけることが出来るはずです。

Web サイトが拡大・縮小の機能をもつことは昔の名残かもしれませんし、無駄と考えることもできるでしょう。しかしそれと同時に未だ残されているデザインの問題を浮き彫りにしているといえます。タッチインターフェイスのような解決方法も出てきましたが、Webサイトがより身近な存在になってきている今だからこそ、GUI とは違う部分で Web ブラウザはより透明な存在を目指さなければならないのかもしれません。

【追記】CSS で zoom という属性がありますが、こうした属性でブラウザが独自の解釈をしてしまうよりかは、ブラウザがもっている機能に直接アクセスできたほうが良いなと考えています。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。