ウェブサイトの横幅はどれくらいがいいのか？訪問者のブラウザサイズから考える

ウェブサイトの横幅をどの程度の広さにしたらいいのか、というのはいつもいつも悩むことです。時代によってディスプレイのサイズも変わってきますしね。

実際に自分のウェブサイトを見ている人がどんなブラウザを使っているのか、その表示領域の広さはいくつなのか、そんな情報もGoogleアナリティクスで調べることができます。今回は私のメインサイトのデータから、最適なウェブサイトの横幅を考えてみます。

なお、今回はPCでの表示の話です。モバイルなものは無視します。

ブラウザの表示領域サイズの調べ方

Googleアナリティクスは訪問者の様々なデータを記録してくれています。たとえばディスプレイの解像度なんかも記録され、その集計データを確認できます。

ただみんながみんなフルスクリーンにしてブラウザ表示しているわけじゃないですよね。私も（よく変化しますが）だいたい横幅1280ピクセルくらいのウィンドウにしてブラウジングしています。このときの実際の表示領域についても、アナリティクスは記録してくれています。

普通のプライマリディメンションにはないのですが、セカンダリディメンションに「ブラウザのサイズ」というものがあります。これを使うと実際の表示領域ごとに表示してくれます。

サイズごとのユーザー割合

一言でブラウザのサイズといってもかなりの種類になります。自分でサイズ調整できるわけですからね。アナリティクスの数字も下一桁は丸められています。

とりあえず、ブラウザサイズの種類として上位5000件のデータから集計してみました。（これで98%くらいはカバーしているはず。）

ブラウザ幅	割合
1930px-	1.01%
1610px-1920px	22.54%
1450px-1600px	12.23%
1290px-1440px	25.41%
1010px-1280px	31.81%
970px-1000px	2.40%
770px-960px	3.80%
650px-760px	0.49%
0px-640px	0.32%

どこで区切っているのかは私の趣味です。まぁ、1010-1440pxの人で50%以上なので、このあたりがボリュームゾーンなんでしょうね。今この記事をPCで見ている方は、ブラウザサイズどれくらいにしているでしょうか？

ウェブサイトに最適な横幅は？

上の集計を少し見かたを変えて、「横幅何pxならどれだけの人が横スクロールバーを出さずに済むのか」という表にしてみました。

サイト幅	OKな人の割合
640px	99.69%
720px	99.44%
800px	98.75%
880px	98.02%
960px	95.73%
1040px	90.02%
1120px	84.32%
1200px	77.84%
1280px	62.97%
1360px	42.97%
1440px	37.06%
1520px	32.40%
1600px	24.01%
1680px	20.66%
1760px	18.61%
1840px	17.50%
1920px	1.43%

ちょっと分かりにくいかもしれませんが、ウェブサイトの幅が◯◯pxのとき、それを横スクロールバーを出さずにいられているのか（それ以上のブラウザサイズにしているか）ということです。ウェブサイトの幅が1000pxなら、93.93%の人は横スクロールバー出てないということです。

横軸がサイト幅です。幅が広がるほど横スクロールバーなしで見られる人は減っていきます。1200pxあたりから一気に落ちますね。

うーん…。私の今のメインサイトは横幅1200pxで作っているんですよね。いや、パディングを入れて1280pxかな…。とすると4割近くの人は横スクロールバーが出てしまっているんですね。これは多い…。

まとめ

どこまで許容するかというのは人によると思いますが、私の場合は横幅1100pxくらいに抑えたほうが良かったかなぁ、と思っています。うーん、サイトをリニューアルしたばかりだけど、どうしよう…。

もちろん、これは私のメインサイトにおける結果なので、他のサイトが同じ結果になるというわけではありません。でもまぁ大体の傾向は似てくる気がしますけど。

こういった結果を踏まえて、今後はサイトづくりに活かしていきたいですね。そろそろはてなブログの新しいテーマも作りたくなってきています。この辺考えて作ってみたいです。

（まぁ、ちゃんとレスポンシブにしておけば横スクロールバー出ないんですけど。）

おまけ

今この記事を見ているあなたのブラウザ表示領域サイズは↓です。