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

スポンサーリンク

Webサイトの設計を始めるとき、サイトの横幅を何pxにするかが重要な問題となる。サイト幅を決定するときの判断材料はおおむね以下のようなところだろう。

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

(ターゲット層がどのようなディスプレイを使用している確率が高いか)

  • 何段レイアウトにするか
  • 固定にするか、可変にするか、レスポンシブにするか
  • トレンドを押さえていると思われる企業サイトはどうしているか
昨今普及しているディスプレイの解像度

下記サイトによれば、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...

f:id:kojikoji75:20130801203455j:plain

何段レイアウトにするか

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

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

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

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

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

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

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

f:id:kojikoji75:20130801203520j:plain

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

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

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

レスポンシブWebデザイン「超」実践デザイン集中講義

レスポンシブWebデザイン「超」実践デザイン集中講義

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)

タイトルとURLをコピーしました