Webサイトをデザインする場合、ページの縦横のサイズをどう想定するのかは悩ましい問題だ。多くの場合、ユーザーのディスプレイ解像度の調査結果などを参考に、サイトのコンテンツの傾向などを加味して想定するサイズを決定する。これに対してCSS-TRICKSが面白い試みを紹介している。

CSS-Tricksはまず、必要になるのはディスプレイのサイズではなく実際に使われているブラウザのウィンドウサイズの方だと指摘。Google Analyticsのような統計情報収集サービスはディスプレイサイズしか集計してくれないので、jQueryを使った簡単なJavaScriptと、データをMySQLに保存するためのちょっとしたPHPのコードを追加してブラウザのウィンドウサイズデータを収集する方法を説明。その結果を簡単に紹介している。

集計されたデータはCSS-Tricksにアクセスしてくるブラウザに限定されているため、アクセスしているユーザはWebデザイナやWebデベロッパに偏っていると見られる。汎用的に利用できるデータとはいえないが、ひとつの例として参考になる。報告されている主な傾向は次のとおり。

  • もっとも多いディスプレイ解像度は1680x1050。利用者の割合は13%に及んだ。ディスプレイサイズの平均値は1526x967。
  • もっとも多いディスプレイ縦横比は16:10。利用者の割合は46%。これに29%の16:9、12%の5:4、8%の4:3が続く。
  • ディスプレイのほとんどは横長。2%のみが縦長。
  • ブラウザウィンドウの平均サイズは1366x784。
  • ブラウザウィンドウのほとんどは横長。3%のみが縦長。
  • フルスクリーンにして使っているユーザは1%に満たないが、それに近いサイズで使っているユーザは多い。

ディスプレイが縦長として報告されているデータはスマートフォンやタブレットデバイスなど、縦で利用することが多いデバイスからのアクセスが関与しているものとみられる。