ウェブサイトに最適な横幅について考えてみる

Some rights reserved by kevin dooley

■ウェブサイトに最適な横幅ってどれくらいなんだろう？

普通のウェブサイトでもECサイトでもブログでも、
デザインする上で気にしてしまうのがサイトの横幅という人も結構いるんじゃないでしょうか？

幅が広ければ画面いっぱいに表示させてスタイリッシュかつ大胆に見せることが出来る反面、一部のモニターでは画面サイズの制約上表示が崩れてしまったり全体が収まりきらなかったりして見づらくなることもあります。

かといって、狭過ぎると今度はサイト内のコンテンツの量に制約が出てきてしまい思い通りの配置が出来なくなったりもします。

そこで今回はウェブサイトの幅を決める時に参考になるサイトをご紹介します。

■主要WEBサイトの横幅まとめ一覧

http://ultra-zone.net/website_width

こちらのサイトでは国内の大手企業などの公式サイトから、各社のサイトがどれくらいの横幅に設定されているのかを確認することが出来ます。
ブラウザで表示させた時に横スクロールバーが出現しない最小値を横幅としているとのことです。
（画面いっぱいに出来る可変幅のことではなく縮めてバーが出ないで一番狭く出来る部分のこと）
このサイトが便利だなーと思ったのは、単にPixel単位で並べているのではなく、業種ごとに分けられて掲載されている為、例えばIT系ならどれくらいの幅のサイトが多いのか、小売系のサイトならどの程度の幅が多いのかなども確認出来るところです。


下に行くにつれ幅が広くなって行きます。

■950から980ピクセルあたりのサイトが多い。

警視庁が一番狭い設定なのはどのような端末でも問題なく見れる事を優先した結果なのかな？と勝手に思っていますが、全体的に950ピクセルのあたりにYahoo!JAPANやBIGLOBE、So-net、ぐるなび、楽天（可変タイプ）などのポータル系やECサイトなどが固まっており、この辺りが不特定多数の利用者に配慮しているサイズなのかなと考えています。

掲載された中で一番幅が狭いのは警視庁のウェブサイトで720ピクセル。

そこから980ピクセルあたりまでに大手企業のサイトやSNSなどの有名サービスも固まっており、Google、MSN、Facebookなどもこの辺りに集中しています。
そこから1000ピクセルを超えてしまうと一気に設定しているサイトが少なくなるのは、サイト利用者のブラウザから見た時に問題なく表示される最小値の限界を示しているのではと思います。

Adobeのサイトは969ピクセル。

ただ、昔はそれこそYahoo!や警視庁のサイト幅くらいが普通だったのがブラウザ環境もワイドになってきていて最近では真四角の画面でネットを見ている人もあまり居ないと思いますし、モバイル用は別にあるはずなのでこれからも徐々に幅が広がって行く可能性もあると思います。

■ちなみにこのブログは1080pxにしています。

このサイトに書いてある感じでは相当広い幅だと思います。。。
IKEAの公式サイトより少し狭いくらいで全体的にもそれ以上の幅のサイトは少ないですね。
実は一番最初はもっと広くした方のですが、やはり端末によって表示に問題があったので横スクロールが出ない範囲に修正し直しています。

ちなみにスマホではスマホ版で表示出来るようになっています。

■自分と似ている業種や利用者の端末を考えながら設定した方がよさそう。

サイト幅にパクリは無いと思うので（笑）この辺りから自分のサイト幅を考えてみるのも有りだと思います。

自分の作りたいサイトデザインやコンテンツの配置が行え、なおかつ巨大なモニターでなくとも普通に横スクロールすることなく観覧出来る幅とを両立出来るピクセルが自分のサイトの一番ベストな幅になるのだと考えています。