Home JavaScript Greasemonkey PHP

PC ディスプレイの解像度とウェブサイトの横幅2009-01-19


レイアウトの基本となる画面サイズ色々:ITpro
実際のレイアウトサイズの目安には基準があり、最も低い環境に配慮した SVGAサイズなら760×420ピクセルが、標準的なサイズのXGAなら955×600ピクセルが妥当な大きさである。
ウェブサイトを作成するのであれば、最初のデザイン段階で気にしたいですね。

OTCHY.NET は、XGA 以上の環境を基準として、横幅を 950 ピクセル に合わせています。
ダウンロードした 2 カラムのWP テーマを改造して 3 カラム×950 ピクセルにしたものです。
Yahoo も今は 950 ピクセルなので、現状で最もポピュラーな横幅かと思います。

さて、それだけではおもしろくないので、WCR の先月 (2008年12月) のアクセス解析結果から、ユーザの画面の解像度部分を公開してみます。
WCR というサイトであるが故のバイアスはかかっていますが、IE の比率が約 8 割のサイトなので、概ね今時の一般的な PC 環境と合致していると考えられます。
(技術寄りのサイトほど、FireFox の比率が高まる傾向があるため)

WCR 画面解像度 トップ 10

これを見て気づいたのは、XGA と SXGA を合わせて過半数ではあるものの、1280 × 800 や、1440 × 900 等のワイド画面が思ったより多いという事です。
最近のノート PC でワイド画面が増えている事が影響していると思われます。

11位以下を見ても、横の解像度が 1024 ピクセル未満の環境は、1 % を割り込む状況なので、「横幅は 600 ピクセル以内で!」と声高に喧伝されていた 20 世紀終盤頃からすると、隔世の感がありますね。

ちなみに、WCR 自体は横幅を 900 ピクセルでデザインしています。
900 ピクセルオーバーのデザインでは、XGA 環境であっても、ブラウザのサイドバーにブックマークを表示している場合に右端が切れてしまうためです。
WCR では、右サイドバーにも比較的重要な情報を載せているため、多少右端が切れてしまっても、情報を取得できるように配慮しています。

逆に OTCHY.NET は同じ 3 カラムでも、サイドバーを右に 2 本の構成として、一番右のバーには比較的重要度の低い情報を載せています。
個人ブログサイトという事で、ある程度割り切った作りに出来るのは楽ですね。

カテゴリ: Development タグ: ディスプレイ 解像度