最適なページ幅は何ピクセル?

 Webページのコンテンツの幅は特に決められておりません。しかし、実際いろいろなサイトをブラウジングしていると、特に昔に作ったサイトではコンテンツの幅が狭く、左にキュッと寄ってしまっているようなサイトもしばしば見掛けます。これは、サイトを作った当時は今よりも狭い画面で閲覧することを想定してサイト設計をされているからです。

 それでは、2012年3月の時点でサイトを設計するにあたって、どれくらいのページ幅が望ましいのか考えてみましょう。

 まずは、googleのアクセス解析から訪問者のトレンドを解析してみます。

 画面サイズのベスト10までの中では、6位の320x480ピクセルはスマートフォンですので拡大表示ができるので例外として、それ以外の最小幅は4位の1024x768ピクセルになります。この1024ピクセルの画面幅からブラウザの左右のスクロールバー等を差し引いた数字が、950~960ピクセルと言われています。Yahoo!のトップページが950ピクセル、mixiが955ピクセル、DreamweaverのXGA(1024x768)の初期設定が955ピクセルを採用しています。

 このような事情から、現時点では幅は最大で950~960ピクセルで設計するのが望ましいと思います。(筆者はレイアウト上割り切れやすい数字が望ましいと思うので、960pxを推奨しておきます。)ただ、ページレイアウトの都合上、もっと狭い幅にしたい場合には800ピクセルや850ピクセル等の数値でも構いませんが、上の写真にもありますとおり、すでにフルスペックハイビジョン幅1920ピクセルの画面で見ている人もいることは意識しておく必要があります。

 なお、画面の高さについては、最小で650ピクセル程度、最大でその2~3ページ分(1800ピクセル程度まで)が望ましいと思います。ブラウザの縦スクロールはマウスのスクロールボタンで簡単にできるので、あまり神経質になる必要はありません。

PageTop