最近、Webサイトの幅が広がってきた2008-04-08

久しぶりにBBCのサイトを覗いて見たら、トップページのデザインが変わっていました。といってもテイストは前と同じで、変わったのはレイアウトに余裕が出来たこと。ようは幅が広がったのです。

そういえばYahoo!Japanのトップページも今年変更されましたが、デザインがすっきりしたと同時に幅も広がっています。

Webサイト「幅」のトレンド

大手ニュースサイトやポータルサイトがWebサイトの幅を広げてきたということは、世の中の流れがそうなってきたのかもしれません。かつては、Webページの幅は800px（ピクセル）までが基本とされてきましたが、最近はこれを越えているサイトが増えています。

そこで、大体何ピクセルくらいの幅になっているのか、ニュースサイトを例にちょっと調べてみました。

• BBC：1002ｐｘ
• Yahoo Japan：975px
• goo：971px
• 日経Net：973px
• 毎日新聞：指定なし（リキッド）
• 朝日新聞：指定なし（リキッド）
• Web Designer（参考）：760px

大体1000ｐｘ前後ですね。「指定なし（リキッド）」というのは、ブラウザの幅に合わせてサイトの幅も拡大/縮小するタイプです。ちなみに、毎日新聞だけちょっと変わっていて、基本はリキッドなんだけど、トップページは固定してるように見える。多分中の要素の幅を固定しているんでしょう。

かつては一番下のWebDesignerのように800ｐｘ以下で固定したサイトが主流だったし、今でも多く残っています。しかしこれだと、折角幅広モニタで見ても、左右の余りのスペースが広がるだけで、肝心のコンテンツは真ん中のチマチマしたスペースに押し込まれたままです。まあ、保守的というか古臭いというか、Web1.0って感じが僕はします。

皆が見ている「幅」

だからこそ、1000pxくらいに広げるのがナウいのだ！これで、スペースを無駄にせず、見た目もすっきり、万事OK・・・ってそんな単純な話なのでしょうか？

突然ですが、下は当ブログ閲覧者のモニタ解像度の内訳（セッションベース）です。

みなさん、これを見てどう思いましたか？実は、僕は最初ちょっと意外でした、1280*1024（SXGA)あたりが主流だろうと思っていたので。

しかし実際には、最も多いのは1024*768（XGA)でした。これって、少し前のノートパソコン、大分前のデスクトップパソコンの解像度じゃないかと・・・どうやら、店に置いてある最新パソコンを見ていると、これがユーザーの環境だと錯覚してしまうのかもしれません。

もっとも、幅1200px以上という観点でグラフを見れば、緑のSXGAに加えて、赤、黄、水色、薄緑・・・はみんなそうですから、足し算して６割近くが1200px超で見ている事になります。

しかし、ここで忘れてならないのは、このデータはあくまでもモニターの解像度であって、ブラウザの解像度ではないという事です。 ブラウザのウインドを画面一杯に広げているとは限らないし、広げていても左側に「お気に入り」を表示しているかも知れません。

つまり、はっきりしているのはモニター解像度以上のサイズでは見れないということだけで、どんなサイズのウインドにWebサイトを表示しているかは人それぞれなのです。

Window size is freedom!

そう考えると、冒頭の1000pxというサイトの幅は少々強引な気がします。僕自身モニタは1280*1024 （SXGA)ですが、横にブックマークを表示しているので、Webサイト表示エリアは1000px弱です。よって、BBCとかだと横方向のスクロールバーが出現してしまいます。

この「横スクロールを出させること」はWebデザインとしてはNGです。 縦スクロールは構わないとされていますが、それに横スクロールが加わったら、2次元移動しながらページを閲覧しないといけなくなります。

まあ、1000px近くあれば、横幅は僅かにはみ出しているだけなので、そのまま縦スクロールだけでいけるかも知れませんが、やはり横スクロールが出たら、何が隠れているのか気になるんじゃないでしょうか。

では、やはり800px以下に戻せばよいのか？それも違います。上述のようにスペースを無駄にするだけです。

ここまで来たらもうお解かりでしょう、ようは幅を固定するからいけないのです。朝日や毎日、そして僕のサイトのように（＾＾　ウインドサイズに合わせてサイトの幅も延び縮みさせればよいのです。

幅を固定するということは、ユーザーに向かって「このサイトはこのサイズで見ろ」と言っているようなものです。そんなもん大きなお世話です。「どんなサイズで見ようがユーザーの自由だ！ 」です。