最適なWebsiteの横幅を考えてみる

あなたは、最適なWebsiteの横幅って、どれくらいか考えてみたことはありますか?

今回は、最適なWebsiteの横幅について、考えていきたいと思います。

大手サイトを参考にしてみる。

  • Yahoo!→950px
  • 楽天→1340px
  • ZOZOTOWN→980px
  • UNIQLO→960px
  • Apple→1000px
  • HOT PEPPER→950px
  • 食べログ→980px
  • cookpad→970px

1000px前後が多く、予想に反して意外と狭い。

とはいえ、リキッドレイアウト採用したり、画像をブラウザサイズいっぱいまで表示したりと、モニターの幅を有効に使って印象を強くしようという意思を感じます。

モニター解像度のシェアから考えてみる。

「StatCounter」を利用して、ディスプレイモニター解像度(画面解像度)のシェアを調べました。

ディスプレイモニター解像度(画面解像度)

 

一番幅の狭いものが1280pxとなっており、1280px以内で制作すれば約8割のモニターはカバーできることになります。

ちなみに1920×1080が約3割を占め1位になっていますが、以前はしばらく1366×768が1位でした。

1920×1080はフルHDの解像度と同じですね。

動画ブームで映像視聴の機会が増えているせいなのか、最近ではノートPCもこの解像度のものが登場しています。

レイアウトのしやすさから考えてみる。

リキッドレイアウトで制作するときは、カラム幅を意識する必要はないのですが、固定幅でレイアウトするときは、1カラムあたりの幅を整数で指定したいところです。

カラムを横並びにしたときに、整数値でグリッドが切れるかが問題です。

結論

  1. 1000px前後が主流
  2. 1280px以内で作ればブラウザの8割はカバーできる
  3. 固定レイアウトの時、整数値でwidthを指定できる

例として、上の図は1200pxを8カラムで切ったものです。

1カラムは140px、カラム間のマージンを10pxとしたときに1200px内に収まります。

これらを考えると、1・2・3・4・5・6・8・10・12・15で割り切れる960px、1080px、1200pxがフレキシブルにグリッドの設計ができ、最適な横幅になるのではないでしょうか?

K.O

K.Oウェブ・ディレクター

投稿者プロフィール

2016年11月

この著者の最新の記事

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Facebookページ

アドイロのSNS


記事のアーカイブ

ページ上部へ戻る