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

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

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

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

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

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

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

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