1000px弱時代のWebデザイン

2008年01月27日プログラミングTIPS

2008年に入り、日本一のWebサイト「Yahoo! JAPAN」の横幅が950pxになりました。
一定のテスト期間を終えての、この横幅の変更は、ユーザーからの反発が少なかった結果とも言えます。

ワイド型の液晶ディスプレイ急増、1年で7割に、22型にも勢い

によれば、この1年でワイドディスプレイの普及が進み、横幅1280px以上で表示できるユーザーが急増しています。

ユーザーの解像度（ZAPAnet調べ）

ZAPAnet調べの最近1ヶ月間のユーザー解像度は、このようになりました。

順位	解像度	割合
1	1024x768	42.86%
2	1280x1024	22.81%
3	1280x800	13.14%
4	1280x768	3.60%
5	1680x1050	3.05%
6	1440x900	2.72%
7	1400x1050	1.77%
8	1152x864	1.30%
9	1920x1200	1.29%
10	1600x1200	1.26%

相変わらず、1024x768のXGA環境のユーザーが約4割います。
見方を変えてみると、5割以上のユーザーが横幅1280px以上であるとも言えます。
ほとんどのユーザーが横幅1024px以上表示でき、半数以上のユーザーが1280px以上表示できるわけです。

2008年1月時点での最適なWebサイトの最大横幅

このことから、2008年1月時点での最適なWebサイトの最大横幅は、横幅1024pxのユーザーがストレス無く閲覧できる1000px以下になると言えます。
1024px限界まで使わないのは、ウィンドウ枠やスライダーバーの表示分を考慮しているためです。
余白なども考慮すると950px〜1000pxくらいが最適な最大横幅と言えるかもしれません。
Yahoo! JAPAN以外にも、ニコニコ動画やmixiなどのサイトも1000px近い横幅のデザインになっています。

ディスプレイ以外の要因

さらに忘れてはいけないのは、以下の要因です。

ADSL、CATV、FTTHなどへの高速通信への移行
(x)html＋CSSによるデザイン
PCのハイスペック化

通信料の多いサイトや表示の重いサイトでも、楽々表示できる環境が揃ってきました。
このことが、Yahoo! JAPANの横幅が950pxに変わってもユーザーに受け入れられた結果だと言えます。
もし、950px程度にデザイン変更して他のユーザーに文句を言われたら、

Yahoo! JAPANだって950pxだよ！

と言ってしまえば良いので簡単ですね。（ユーザーの環境別に横幅を可変させるのも良いかもしれません）

今後のWebデザインについて

以上のことから、1000px弱の最大横幅でも問題はありません。
ただし、あくまでも「最大横幅」であるため、つねに限界まで表示する必要はありません。
今までのディスプレイ横幅800pxに合わせていた、横幅770px程度であっても問題ありませんし、1000px弱の横幅でも問題ありません。
サイトに趣旨に合わせたデザインで良いわけです。

web広告は左メニューの方が7％ほど効果が高かった*ホームページを作る人のネタ帳

では、「左メニュー効果」についても述べられています。

サイト運営者の視点から見れば「どちらがいいとは判断できず」ということらしいです。
ユーザーの視点から見た場合は、またちょっと違うかもしれません。
ブログは、個別の記事を見てもらうことが一番とも言えるし、関連するエントリや他のエントリも見てもらうことも大事とも言えます。
特に、人気記事などがたくさんある人気ブロガーなどは、それらの記事を表示するための3カラム化も悪くないのかもしれません。
1000px弱まで横幅を広げても文句を言われなくなったということは、選択肢が増え、デザインの幅が広くなり、サイト運営者の個性も出しやすくなりました。

3カラム型Webサイトデザインについて

770px時代の3カラム型Webサイトデザインは、正直窮屈な部分があって、個人的に嫌いでした。
サイドバーを2つ表示するためにページコンテンツの横幅が狭くなったり、サイドバーの文字がやたら小さかったり…。

「左上の魔術師」理論

から9ヶ月が経ち、3カラム型Webサイトデザインも受け入れやすくなりました。
ディスプレイの高解像度化により、ページコンテンツの幅を広げられるようになったからです。

3カラム型Webサイトデザイン

ヘッダー
左サイドバー	ページコンテンツ	右サイドバー
フッター

ヘッダー
ページコンテンツ	右サイドバー1	右サイドバー2
フッター

サイドバーに比べて、ページコンテンツの幅が狭すぎず、しっかりと内容が表示できるようになっていれば、3カラム型でも全然問題ありません。
770px時代の3カラム型は無理があっても、1000px弱なら3カラム型に無理がありません。
770px時代の2カラム型に、1カラム追加して1000px弱になったと考えれば、一番重要なページコンテンツの内容が小さくなったりはしないので、3カラム型もありだと思っています。

本日、また3カラムへ転向。
ZAPA氏の記事では、この形が嫌いなようなので、個人的に恐る恐る転向。Yahooの勢いにのってしまおう大作戦。

web広告は左メニューの方が7％ほど効果が高かった*ホームページを作る人のネタ帳

への返信としては、「Yahooの勢いにのるのもありだし、標準横幅が広がった今なら、3カラムも問題ないと思っています」になります。

自分で960pxのWebサイトを作ってみて

現在、1000px弱時代に合わせて、960pxのサイトをひとつ作っています（このブログではないですよ）。
実際に作ってみると、770pxよりもはるかに表現力があることを実感しています。
サイドバーを2つ表示していても、ページコンテンツを広く表示できるところが良いですね。
全体幅が広いので、画像も大きく使えます。

そういうわけで、これからは表現力の高い1000px弱のWebサイトを作っていっても良いのではないでしょうか？
もちろん、一番重要なのは「中身」ですけれど。

ZAPAブログ2.0