PC画面の解像度が上がっています。ウェブサイトの最適な横幅は？

先日、PCモニターの解像度が上がっていて、それでウェブサイトの横幅とか、文字の大きさをどれくらいでデザインするのが適当なのか、という話題で盛り上がった。

これまで、800px 幅解像度のモニターでちょうど収まるくらいの幅でデザインされることが一般的で、これは当時の最も普及しているPCモニターの大きさに由来していた。気がつけばノートPCでも 1024px 幅のモニターが主流となっていて、でも、それでも人によってはサイドバーを表示してたりするから、やっぱり 800px でしょ、っていう感じで、800pxを常識としたままここまでやってきてしまった。

でも、周りを見渡してみれば、Yahoo!のトップページも950px幅。ニュースサイト系でも 1000px 幅固定みたいなデザインも、結構あるのね。

で、どんなサイズだと最もよいのか、という話になるわけです。

画面幅が最も直接的にユーザに影響するのは、テキストの可読性。文字が読みやすいためには、文字を大きくするのが手っ取り早いのは正しいと思うけれども、それよりもむしろ「1行に何文字収まるか」の方が重要だと感じている。多すぎてもダメだし、少なすぎてもダメだ。極端な話をすれば、どんなに文字が大きくても、1行に2～3文字しか入らなくしてしまえば読めないし、1行に100文字入っていても、読めない。だから、画面幅を大きくすれば、当然文字の大きさもそれに合わせて大きくすることになるでしょう。この発想は自然だと思う。

しかし、単にそうするなら、もともと800pxだった画面をアスペクト比(縦と横の比率)を変えずに拡大したレイアウトになっちゃって、これが優れているかというと、必ずしもそうとは思えない。

• 画面が小さいユーザには迷惑。
• ロゴとかボタンとかの画像も大きくなるので、ページの容量が増える。
• 回線が遅い人とか、ケータイ端末の人には迷惑。
• インターネット回線のトラフィックも増加。

ユーザビリティの本とかでは、リキッドデザイン(ウィンドウの幅に合わせて流動的にフィットするデザインのこと)が一般的に推奨されているが、これも画面が広い場合には、1行が長くなりすぎてしまうために、意外と読みづらかったりする(ワイドモニターとかだと特に)し、固定されない画面を美しくデザインするのもなかなか難しい。

こう考えると、Operaブラウザに付いてるような画面拡大機能を使ってもらった方が、ユーザに優しいのではないかと思えてくる。 Internet Explorer 7 でもこれと似た機能が実装されたし。つまり、誰にでも読みやすいレイアウトを実現するには、「ユーザが自分で調整できるのがベスト」という結論になる。

そこで、この機能「ユーザが自分で調整できる」を担当する責任範囲の切り分け方。ウェブサイトに実装するべきか、ブラウザに実装するべきか。個人的には「ブラウザに実装」案に一票だ。ウェブサイトの使い方が、十人十色、人によって千差万別であるならば、ブラウザ側に工夫があった方が効率的だし、サイト側のソースコードもシンプルにできる。とは思うのだが、それを大声で主張するには、乗り越えなければならない条件が付く。

• ウェブサイトが標準仕様に従って構築されている前提が必要。
• 一般のユーザに、もう少し知識を持ってもらう必要がある。自分に合ったブラウザを選んで、より自分が見やすいように表示する機能を勉強してもらって、それが一般に常識的に浸透しているという前提が必要。

でも、これって結構難しいことで、特に後者はハードルが高い。義務教育のカリキュラムに追加して、それが浸透するのを20年前後待つ以外にいい方法は思いつかない。

しかも、ケータイに乗っているフルブラウザの類やiPhone(iPod touch)に乗っているSafariブラウザなどのデモや紹介記事を見ていると、「この小さい画面でPCとまったく同じ表示ができますっ！」が宣伝文句になっているような気がするのだが、これが残念で仕方ない。PCの画面サイズに合わせてデザインされているサイトを、あの小さい画面で見ても見やすいわけがないのですから。Wiiのインターネットチャンネル向けに Yahoo!が導入したという、「10feet UI」という考え方というのがあるらしいのだけど、これと同様の考え方を、ブラウザ側にも取り入れる必要があるのではないか、と思うのです。

デザイナが細部までこだわって、最高に美しく見やすいと思うように調整された画面のデザインを、ユーザは自分に合った見やすさのために、ブラウザを通して一旦破壊して再構成する。それが最高のユーザビリティだなんて、皮肉だけれど、まぁ、これは仕方がない。

そもそも、どうしてこのような話が厄介になるのかというと、W3Cのウェブ標準技術は、1枚の静的なHTMLファイルに、どのようなデバイスからでもアクセスできるようにしたい、という理念があって、そして、この考え方は確かに素敵だし、なんとなく実現できてしまいそうな雰囲気があって、でも実際はそう簡単ではないところが、厄介の種なのではないかと思う。

よくよく考えれば、このウェブ標準の思想は、前人未到の快挙への挑戦。「どのようなデバイスからでも」の中には、画面の解像度が法外に高いモニターだったり、昔ながらの800pxモニターのモバイルPCだったり、印刷する場合とか、テレビ画面とか、ケータイ電話のような小さい画面とか、接続回線の速い人、遅い人、音声読み上げブラウザ、点字、テキストブラウザなど、私などは見たこともないようなデバイスも含まれていたりする。

これほどまでに多様な閲覧者を想定したメディアはこれまで他に例がない。その上、Flashのようなインタラクティブなアニメーションだったり、入力フォームから情報を送信させてみたり、動画や音楽を貼り付けてみたり。それはそれは当然大変なハズ。ちゃんと思った通りに動作するかテストするだけでも、ものすごい時間を要する。

やはり、どれかは我慢しないとダメなのだろうか。耳が聴こえない人が普通のテレビドラマを観ても楽しめないように、逆に、手話がついてるドラマを耳が聴こえる人が見たら邪魔に感じるように。はたまた、小説を読むのと、同じ小説の朗読を聴くのとではまったく別の表現に感じてしまうように。

自分にとってコレはお仕事でもあることなので、もう少しじっくり考えてみます。