web, サイト運営

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

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

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

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

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

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

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

f:id:c-miya:20180608183026j:plain

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

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

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

とりあえず、ブラウザサイズの種類として上位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%の人は横スクロールバー出てないということです。

f:id:c-miya:20180608192047j:plain

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

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

まとめ

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

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

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

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

おまけ

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

著者近影 Shunta MIYAGISHIMA

茨城県つくば市在住のウェブサイト運営者。ネット上ではc-miya、orefolderなどの名前で活動しています。

ストレスに弱いので、できるだけ好きなことだけをして生きたいと思いながら生活しています。「楽しい」が優先順位の一番上に来るようにしたいですね。