プログラマがwebサイトのデザインを組むときに幅をどれくらいにしたら良いのか問題

いつもwebサービスを作る時に、「webサイトの全体の幅をどれくらいにすれば良いか?」で迷ってしまうので、これを機にまとめていく。

色々なwebサービスとwebサイトの横幅

まずは、色々なwebサイトの横幅を調べていこう。

note

note ――つくる、つながる、とどける。

  • header 940px
  • content 610px

noteは1カラム構成になっているので、headerとcontent部分の横幅は大体3:2の比率になっている。

1カラム型のデザインであれば、横幅を無駄に長くしても読みにくくなるし、

しかし、下のサイトでは、contentを960pxにしてheaderを限りなく広く取っている。幅を広めにとることでオシャレ感が増す感じはある。

WebサイトのWidth(横幅)について ~業界毎の主要webサイト調査結果~ | Web制作会社SERENDEC

一方で下のサイトは、そもそも横幅の概念がなくなっている。下のサイトは画像、写真がメインで、少し説明文を入れているだけなので、横幅を広くすることで写真の良さを引き立て用としている。

zumtobel.us