超入門：Webデザインと解像度のハナシ

アプリケーションにとって最適な画面解像度とは？

　私が初めてウェブ開発の世界に足を踏み入れたときは、640x480の画面解像度を前提にアプリケーションを作るのが慣例であった。現在、一般的にはその標準は800x600であると考えられているが、ウェブ開発コミュニティの間ではより高い解像度を標準にしようという動きもある。確かに、新しい標準を用いるのがよい場合もあるかもしれない。しかし、その決定を下す前には、さまざまな要素について検討する必要があるだろう。

解像度のすべて

　画面解像度の詳細に関して、簡単に復習してみよう。「解像度」という用語は画像のシャープさや明瞭さを表す語であり、プリンタやモニタの出力品質を表す際によく用いられる。たとえば「モニタの画面解像度」と言った場合は、画面上にあるドット（ピクセル）の数を示している。

　画面解像度が800x600ということは、600のライン上に各々800個の別個のドットが表示されるということだ。そのため、全体では48万ピクセルが表示される。ただし、画面上での実際の表示結果に関しては、画面によってdpi（ドット／インチ）の値が異なるので、画面サイズに依存することになる。それでは、ウェブアプリケーションでの解像度の選択についてここでもう一度注目してみよう。

ベストな見え方は？

　経験からすると、標準的なウェブアプリケーションの利用環境を考える際には、絶対に開発者の作業環境を判断基準にしてはいけない。なぜなら、我々開発者は一般的に標準よりも高性能なマシンを持っており、（ウェブアプリケーションを利用する際の）技術的な経験も豊富で、さらにモニタはマルチディスプレイから高性能フラットディスプレイまでさまざまだからだ。たとえば、私の同僚はもっとも一般的な1024x768のモニタと共に、高解像度のモニタも併用している。

　しかし、大部分のユーザは普通もっと低い解像度のモニタを利用しているものだ。開発者はよく、モニタの価格が下がっており、フラットパネルも幅広く普及していることを挙げて、高解像度でも問題ないと考える。しかし実際のところ、ほとんどのユーザは解像度をデフォルト設定から変更することにすら興味がないのだ。そうした理由から、800x600の業界標準がよく利用され、パブリックなサイトにおいてはいまだに正しい経験則となっているのである。

解像度とサイズは同じではない

　画面解像度について考えるときによく問題となるのは、画面解像度と実際のブラウザのサイズや表示領域は同じであると勘違いしてしまうことだ。たとえば、私は解像度が1024x768のマシンを使っているが、ブラウザのウィンドウを多数表示することもよくあり、その場合ウィンドウは実際の画面サイズよりもかなり（高さや幅が）小さくなってしまう。「利用者はブラウザのウィンドウを最大化してサイトを表示するものだ」と仮定してはいけないのである。

重要なのはサイトの場所

　対象とする画面解像度を考える際には、そのウェブアプリケーションの利用者がどこにいるのかが重要となる。たとえば、イントラネット内で動作するアプリケーションを構築しており、利用者が組織として管理されている（と思われる）場合には、より柔軟な選択が可能になるだろう。そのようなアプリケーションでは、組織内部での解像度標準を独自に設定し、それを考慮しながら開発を行えばよい。

　一方、インターネット上で動作し不特定多数が利用するようなパブリックなアプリケーションを開発するならば、設計にはより多くの制限が課せられる。これは珍しいことではなく、利用者のブラウザのような他の要因もこの考え方に沿っていなければならない。対象とする利用者では何が一般的なのか、インターネットの統計を用いて明確にするのもよいかもしれない。

　特に、既存のサイトに手を加える際には、利用者の統計をとるのがベストだろう。なぜなら、利用者について把握できれば、それに応じて適切に設計を調整することが可能になるからである。このように、対象とする利用者について知ることは非常に重要であり、これにはアクセシビリティの問題も絡んでくる。

アクセシビリティ

　身体的な障害があったり、アクセシビリティ上の問題を抱えている利用者は、旧式の装置を用いてウェブアプリケーションを利用する可能性がある。より大きな画面で利用したり、もしくはずっと小さい画面で利用したり、さらにはスクリーンリーダで利用することもあるのである。これは、パブリックなサイトではより大きな問題になる。このような利用者層に対応するには、徹底的にテストを行うのがもっともよい。異なった画面解像度でテストするのはもちろんのこと、アプリケーションのウィンドウサイズを最大化時よりも縮小してみることも必要である。Screen-Resolution.comは、さまざまな解像度のテストに役立つサイトである。

　特に注意しなければならないことは、水平方向のスクロールが必要にならないかということだ。水平スクロールはさまざまな問題を引き起こす。本稿ではアクセシビリティに関しては網羅しきれないので、より詳しい情報はW3C Web Accessibility Initiativeを参照して欲しい。

　さて、次ページではJavaScriptによって訪問者の解像度を調べ、その値に応じてサイトの表示を調整することに挑戦してみよう。