「サイトの横幅」再論：950px時代のウェブデザイン

まなめさんのところの﹁304 Not Modified: ウェブサイトの横幅最適サイズはいくつ？﹂という記事は約1年前のものだが、ここに挙げられたポータルサイトの横幅を再調査してみた。さらに、いくつか有名サイトを加えている。計測には﹁Webデザイナーのための﹁ピクセル定規﹂Windows版﹂を使用した︵CSSの内部設定を見てもいいのだが、何となく︶。並び順は﹁横幅の広い順﹂である。


●Vector‥1000px

●Amazon.co.jp‥988px以上

●goo‥970px

●フレッシュアイ‥966px

●Yahoo! JAPAN‥950px

●livedoor:950px

●MSN Japan‥950px

●楽天市場‥950px

●Infoseek‥950px

●mixi‥950px

●Excite エキサイト‥920px

●はてな‥860px

●価格.com‥830px︵個別商品ページは930px︶

●まなめはうす‥790px

●Googleグループログイン画面‥750px

●Google検索表紙‥中央部540px

●Wikipedia‥リキッドデザイン


まなめさんの調べた1年前の数値より全体に大きくなっていて、﹁ポータルサイトの横幅はおよそ950px﹂が2009年はじめの時点でのデフォルトであるといえる。Yahoo!、MSN、livedoor、楽天／Infoseek、mixiがいずれもこの数値である。

それより大きいのは、vectorの1000pxきっかりが最大。Amazon.co.jpは最小988px以上の変動幅で表示されるので、﹁約1000px以上推奨﹂ということになろう︵それ以下の画面サイズだと横スクロールが出るが、それ以上なら画面全体に広がる︶。続いて、gooの970px、フレッシュアイの966px。

一方、950px以下に抑えているのが、Google検索の540pxを筆頭に、はてなの860px、エキサイトの920pxである。

﹁サイトの横幅は950px時代﹂というのは、ポータルサイトを見る限り、現状の認識として正しいようである。

ちなみに、当ブログは本文640px︵旧コンテンツはリキッド︶、表紙のみ800pxを採用している。

■表紙の本文カラムは案外狭い

しかし、一行幅が長すぎると読みづらいということは、どのサイトも認識しているようである。いわゆる﹁W3C準拠でリキッドデザインをかたくなに守っているサイト﹂の多くは当然ながら﹁画面の横幅いっぱいに文字が表示される﹂ようになっているが、少なくともわたしにとっては読みづらい。自分のサイトでも﹁閾ペディアことのは﹂はWikipediaと同じwikiシステムであるMediaWikiを使用しているので横幅非固定なのだが、画面を広くして見たときには2段組とかにしたくなってくる︵もちろんCSSを使えばいろいろできるのだが、そこまで手が回っていない︶。

さて、上記のポータルサイトの表紙の場合、設定された横幅いっぱいいっぱいに1カラムでデザインしているのではなく、2列または3列の段組となっている。﹁サイドバーと本文﹂といった区分けがなされており、一行字数が長くなりすぎないようになっている。

そこで、各サイトのカラムごとの幅︵内のり︶を測ってみた。カラム間の隙間があるので、合計しても上記横幅にはならないことはご了承いただきたい。また、原則としてトップページで計測した。


●Vector‥150px、425px、310px

●Amazon.co.jp‥180px、約470px以上、300px

●goo‥200px、400px、350px

●フレッシュアイ‥155px、488px、300px

●Yahoo! JAPAN‥170px、410px、350px

●livedoor:130px、500px、300px

●MSN Japan‥160px、440px、300px

●楽天市場‥640px、300px

●Infoseek‥170px、405px、350px

●mixi‥270px、440px、223px

●Excite エキサイト‥610px、300px

●はてな‥600px、240px

●価格.com‥525px、300px︵個別商品ページは740px、180px︶

●まなめはうす‥600px、180px

●Googleグループログイン画面‥450px、260px

●Google検索表紙‥中央部540px


価格.comの個別商品ページや楽天市場のように商品情報を豊富に示したいサイトは広めになっているが、本文カラムの横幅は400～500pxにおさまっているものが多い。

左サイドバーは150～180pxのところが多い。これはナビゲーションに必要十分なサイズということだろう。

一方、右サイドバーは300pxというところが多いが、これは横幅300pxいっぱいの広告表示を実現させるためである。

このブログは個別記事ページが640px、表紙だと580px＋210pxである。サイト全体の横幅はポータルサイトに比べると狭い方だが、本文表示スペースの横幅としてみれば、実はポータルサイトの表紙デザインより広めの設定になっていたのだった。︵※実はこの表現は誤誘導である。というのは、各ポータルサイトは表紙以外の個別ページ︵ニュースや検索結果表示など︶では通常、リキッド的なデザインを採用しているところが多いので、やはりこのブログが横幅狭めであることは間違いない。︶

■実際の﹁ブラウザの横幅﹂統計

先月、パソコンのインストールをし直したので、IE7はインストールしたときのままのサイズになっている。それを全画面表示にしないでそのままの広さで測ると、約770pxの表示域があった。たいていのポータルサイトははみ出てしまう。しかし、それをよしとしているということは、﹁ブラウザは全画面表示にして見ることを前提﹂という考えが浸透しているのだと思われる︵あるいは、実際のブラウザの横幅ではなく、モニターの解像度のみをもとにして考えているからかもしれない︶。パソコン初心者は﹁設定時のそのまま﹂で使う傾向が強いように思うのだが……。

ちなみに、この770px幅だと、﹁最小988px幅だけれども大きい方にはリキッドデザイン﹂のAmazon.co.jpも、はみ出してしまう。したがって、Amazonをリキッドデザインの優れたサイトと見なすことはできない。

︵追記。Win版Safariはインストール時の表示域が約1000px幅。Firefoxが980px幅。︶

では、実際のところはどうだろうか。これは当サイトへのアクセスに限定されるが、BROWSIZE.ORGを使って、モニターの解像度ではなく実際のブラウザーの表示域の横幅を調べた結果は以下のとおりである︵ここ1か月間のパーセンテージ表示︶。

︵※18:00追記。この記事をアップしてまもなく、BROWSIZE.ORGの管理人akiyanさんが集計ページの範囲設定に﹁950ピクセル﹂を追加してくださいました。コメント欄参照のこと。そこで集計数値を変更しました。また、以下の分析も一部修正しました。ありがとうございます！︶


●0～640‥2.2%

●641～800‥7.8%

●801～850‥6.5%

●861～900‥3.4%

●901～950‥5.0%

●951～1024‥30.1%

●1025～1152‥14.4%

●1153～1280‥23.8%

●1281～1400‥2.3%

●1401～1600‥2.4%

●1601～2048‥2.0%

●2049～9999‥0.0%


大きい方からの累計をとっていくと、以下のようになる。


●0pxより画面が広い人‥100.0%

●640pxより画面が広い人‥97.8%

●800pxより画面が広い人‥90.0%

●860pxより画面が広い人‥83.5%

●900pxより画面が広い人‥80.1%

●950pxより画面が広い人‥75.1%

●1024pxより画面が広い人‥44.9%

●1152pxより画面が広い人‥30.5%

●1280pxより画面が広い人‥6.7%

●1400pxより画面が広い人‥4.4%

●1600pxより画面が広い人‥2.0%

●2048pxより画面が広い人‥0.0%


これは﹁640pxであれば97.8%の人が横スクロールなしに見られる﹂ということになる︵大きい画面なら狭いサイトも当然見られるという﹁大は小を兼ねる﹂の原則に基づいて考えている。余白が空きすぎるという点は考慮していない︶。

ポータルサイト標準といえる950pxで見ると、デフォルトサイズで横スクロールが出ない人はおよそ75.1％ということになる。およそ4分の1の人は、ブラウザーからポータルサイトの右端がはみ出しているわけだ。

これが1024px幅のサイトになると半分を切ってしまう。Amazon.co.jpのトップページは、右端が見えていない人が結構いそうだ。

ここで、何パーセントの人を切り捨てるのをやむなしと考えるか、という問題になる。﹁リキッドデザインなら誰も切り捨てなくてよい﹂という意見はこの際置いておいて、このブログで表紙800pxを採用しているということは1割の人を切り捨てていることになる。しかし、個人サイトで9割に対応しているというのはよく健闘している方だと思ってもらいたいところである︵企業サイトや公的サイトではもう少し高い対応率を要求されるだろう︶。

一方、現時点で950px幅のサイトを中心に考えるということは、4分の1の人に不便さを感じさせるというのと同義である。これはちょっと多すぎる。あるいは、右サイドバーに広告を載せている出稿者は、実際の表示回数の4分の3程度しかきちんと見てもらえていないと認識すべきであろう︵実際には、スクロールバーを移動させて見る人も多いので、もう少し閲覧数は増えるだろうけど︶。また、右サイドバーにログイン窓が設定されていることが多いが、これも一定数の人がスクロールさせないと使えないということに留意すべきである。

なお、このブログの本文640px幅はやや狭い部類に入るかもしれないが、現時点では特に広げようとは思わない。自分の環境では一行約40字。多少、ブラウザ設定で大きくしたり小さくしたりすると変動するが、40字といえば一般の新書や単行本の一行字数に近い︵縦書き・横書きの違いはあるが︶。

■画像幅の問題はやや解消されたが、まだ無視はできない

IE7やFirefoxでは﹁サイト幅に合わせて印刷﹂されるので、以前のように﹁ページの左端から640pxを超える画像があると、はみ出た部分が右側が印刷されない﹂という問題はかなり減ってきたといえる。しかし、現在もなおIE6などのユーザーがかなりいる︵当ブログでは通常、アクセス総数の約30%がIE6.0︶。

企業の﹁アクセス﹂ページなどで、会社の地図を印刷しようと思ったら地図の半分︵または全部︶が印刷されていなかった、というトラブルはよく見聞きする。というか、わたし自身もIE6のころ︵昨年12月以前︶は、地図ページを印刷したら地図が切れていたということがよくあった。印刷方向を変えることで解決したりしたが、その設定がわからないパソコン初心者なら、最悪の場合、客を逃がすことにもなりかねない。﹁ページ印刷640px問題﹂はいまだ検討の必要のある問題といえよう。

したがって、印刷の必要がある画像を含むページは、印刷時にページの左端から640px以内に収まるよう考慮する必要がある。それは印刷用CSSを利用することによって解決してもよいと思うが、ブラウザでの印刷を想定した画像は、最大でも横幅640px以内で作成する必要があろう。

■リキッドデザイン主義は﹁実際的﹂ではない

もちろん、ウェブの﹁理想﹂的には、リキッドデザインがよいだろう。ユニバーサルデザインの観点からいえば、すなわち﹁ありとあらゆるブラウザで情報が漏れなく伝わる﹂という意味では、間違いなくリキッドデザインを採用すべきなのだろう。

しかし、それではデザイン上の制約が大きくなりすぎる。また、本文の文字情報は基本的にリキッドにできたとしても、画像というものは原則としてピクセル単位で固定された大きさを持つ。ここにウェブデザイン上の矛盾というか難点がある。

そして、わたしは﹁デザインも情報の一つ﹂であると考えている。タグやデザイン指定を取り去った文字情報だけがサイトで提供される情報であるとは考えない。たとえば、ゴスロリサイトでは、黒背景に赤文字でフォントサイズ小を設定するのが﹁正しい﹂といえる。

一方で、特に紙デザインを主に扱う人たちがウェブデザインをすると、﹁1px単位までかっちり指定﹂した上で﹁Mac OS XのSafariで閲覧してください﹂なんてことになりかねない。下手すると全部画像で出力して貼り付けてきたりする。これもまた逆に行きすぎた、ウェブを知らなすぎる態度であると思う。

たとえば企業なり何なりからウェブサイトデザインの依頼があったとする。まずは、ウェブデザイン上の制約︵たとえば、ブラウザーやモニターの環境によって、色あいその他の見え方がどうしても違ってしまうこと︶を理解してもらうことが必要だ。もし、そのような理解がかけらもなく、﹁このパンフレットと同じサイトを作ってくれ﹂と頭ごなしに言われるのであれば、黙ってpdfで置いておけばいい︵どうせSEOなんか理解できないだろうから︶。もちろん、そんな極端な例は減ってきた︵と思いたい︶。

デザインが精密になればなるほど、それは固定化された要素が大きくなってくる。リキッドな要素が増えるということは、それだけデザインを犠牲にすることである。もしデザインと可動性を完全に両立する人がいたら、それは天才的ウェブデザイナーといっていい。もちろんそういう人たちもいるだろうが︵ぜひそういうデザインを拝見したい︶、多くの場合、ウェブデザインはウェブの原理とデザイン上︵あるいはマーケティング上︶の要請との間での妥協の産物となる。

わたしは以前から﹁ウェブデザインは、伸び縮みするゴムの上にデザインするようなつもりでないとできない﹂と思っている。文字サイズや一行文字数もどんどん変わるので、ある程度の融通が必要なのだが、その上に固定サイズの画像も載せなければならない。なんともやりにくい話である。

やりにくいが、仕方ない。ユニバーサルデザインでないデザインは、決して﹁悪﹂ではないのだ。ウェブデザインは、それを閲覧するターゲットに対して、最も効果的に制作者の意図を伝えることができるようにするのが最大の目的のはずである。そのために﹁できるだけ﹂ユニバーサルデザインの観点を取り入れることは必要だが、それに縛られすぎては本末転倒だろう。

リキッドデザイン主義者の中には、こう主張する人たちもいる。﹁ウェブサイトは閲覧者側の見たいように見られるべきだ。わたしが見たい大きさの文字で、わたしが見たいブラウザ幅でページを閲覧できなければならない。そうでない固定的デザインは、制作者側の意図を閲覧者に押しつけるものであり、悪である。文字サイズやサイトの横幅は閲覧者が自分で設定して決めるべきである﹂と。︵いちいち例は挙げないが、この手のウェブデザインの議論において、こういった批判はさんざん受けてきた︶

現実問題として、﹁多くの閲覧者が特に設定などをしないで見たときに、サイト公開側の意図に沿ったウェブデザインで見せたい﹂という要請は多いし、またその要請をかなえてこそウェブデザイナーと言えると思う。見せる側の意図を完全に排除し、閲覧者の自由度のみを主張するのは極めて偏った見方だと思うし、また現実問題として、ウェブブラウザーの操作において文字サイズ等を自在に設定できるユーザーは案外少ないものである︵こんなページを見ている人なら当然できるような操作でも、ネットやパソコンになじんでいない一般の人たちには極めて高度な作業となることは、よくよく認識すべきである。そして、その教育を啓蒙する努力はあってよいが、多くの人に啓蒙できるという期待を持つべきではないと実情を見て思う︶。

というわたしの意見は別にしても、このページの情報を、2009年1月の時点における日本語サイトの現実の統計として利用していただければ幸いである。

■追記

このエントリーをアップしてから、﹁web屋が主張する﹁リキッドレイアウト﹂に騙されないために＠鍵っ子ブログ﹂を読んだ。その主張には全面的に賛同する。

このブログ記事によれば、リキッドデザイン主張者が﹁余白がもったいない﹂とも述べているようだが、そもそも、紙のデザインでも、余白を上手に生かせずにとにかく紙面を埋め尽くそうとするのは、初心者デザイナーのよくやる﹁センスのない誤り﹂なのだ。余白を埋めればいいというものではない。

また、自動で段組を増やす仕組みはすばらしいと思うが、IEの実際のシェアを無視しているとすればそれは何をかいわんやである。実際の閲覧者に届けられるデザインよりも理念が大事だとすれば、やはりそれは本末転倒だろう。