知っておくと便利！ Webサイトを作るときに知っておくとかなり便利なサイト横幅の決め方

昨今普及しているディスプレイの解像度

下記サイトによれば、1366×768、1920×1080、1280×1080あたりが主流のようだ。（2013年1月時点）

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

Tracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly pa...

gs.statcounter.com

何段レイアウトにするか

企業サイトでは2段が主流の模様。2段にした場合は幅は狭くしても問題ないだろう。

固定にするか、可変にするか、レスポンシブにするか

「レスポンシブ」とは、webサイト表示の判断基準としてデバイス種を用いるのではなく、ブラウザの横幅サイズを判断基準にして柔軟に調整するという手法のこと。CSSで切り分けているので、レイアウト自体が変わる。CSSだけで実装可能。

一方、よく比較対象として引用される「リキッドデザイン」は可変レイアウトの一種で、ブラウザの横幅サイズに応じて可変するが、パーツのレイアウト自体は変わらないというもの。

トレンドを押さえていると思われる企業サイトはどうしているか

各企業サイトのレイアウト幅をまとめたものがあった。（2012年12月時点）

Webサイトの横幅まとめ

デスクトップ向けページの横幅をまとめた一覧表です。190の企業や組織について、業種ごとにまとめました。表中の赤字は、レスポンシブWebデザインのサイトです。マウスカーソルを乗せると、ブレイクポイントの一覧を表示します。レスポンシブデザインの...

ultra.zone

集中度が高かった層を挙げてみると、

• 950px : Yahoo!JAPAN,楽天市場、@nifty、BIGLOBE等
• 960px : ソフトバンク、NTTデータ、はてな、さくらインターネット、東芝、NEC等
• 980px : Google、MSN、Facebook、Flicker、libedoor、食べログ等

となっており、950px〜980pxが主流であった。