【サイト制作】WEBサイトのベストな横幅は？改めてPCのブラウザ（解像度）を考える。

サイトを作る時に、最近の傾向も踏まえて「サイトの横幅」をどのくらいにすればいいのかなぁなんて。んでちょっと調べてみたよ。毎回よく悩むけど。

メーカーのサイトなんかでブランディングを意識している場合は、映像を使ったりしてウィンドウサイズに合わせて大きく全画面表示するのがもはや定番になってしまっているね。でも一般的な企業サイトとか医療系のサイトとか、割とカッチリしたサイトを作る場合はサイトの横幅を決めて作る場合が多いかな。

といっても、最近の傾向ではデスクトップPCのモニターの解像度はどんどん大きくなっているからね。4Kモニタ（4096px X 2160px）なんてのもあるし。

Chromeが圧倒的シェアなのがわかるけど、IEってまだまだシェアがあるんだね、Mac派には信じられないよ。

一番気になっていたデスクトップでのブラウザ解像度を見てみよう。フルHDモニタ（1920px X 1080px）が圧倒的シェアだね。予想はしていたけど、思ったよりも多いなぁ。

2位が1366px X 768px（WXGA）これはちょっと前に流行ったサイズだね。
おそらくこの辺りのサイズの買い替え時には今後フルHDになるよね。今後は1366px X 768pxの数は減ってくると思うよ。

3位「2560px X 1440px（WQHD）」はここ最近で伸びてきているWQGA。フルHD（1920px X 1080px）よりも高解像度だし、4Kモニタ（4096px X 2160px）だと、実際にデスクトップで利用するにはやっぱり文字が小さ過ぎるので、WQHDの需要が伸びているのだと思う。

フルHD（1920px X 1080px）で閲覧した場合は、1200pxで制作すれば余白が720pxで、左右360pxくらいだから丁度いいよね。
WXGA（1366px X 768px）でもまだ余白が取れるからそれもOK。
WQHD（2560px X 1440px）のモニター使って人ってウィンドウ2つくらい開きながら作業していると思うから、それも踏まえて「1200px以下」かな。
WXGA（1280px X 800px）もカバーできるしね。

実はこのブログを始めるにあたって、サイトの横幅をどうするかはだいぶ悩んだよ。
ブログで一番重要なことは読みやすいことだからね。特にブログで全画面表示なんてないなーって思うよ。もちろん、俺はWEBデザイナーだからオシャレにデザインしたいんだけどね。オシャレにすればするほど、読みづらいサイトになっちゃうんだよなぁ（笑）

まず初めに2段組みで考えていて、右上に300pxの固定バナーを設置するように考えたんだよ。すると右の段は300pxでバナーやナビゲーション、左段は文章スペースになるよね。

文章部分が横に長いと実は読みづらくなるんだ。ある程度で折り返す方が読みやすい。

とは言っても、大きなモニターで見た時にサイトが小さく見えるは嫌だし画像も大きなものを見せたいので、左段は残り780pxなわけだけど、余白20pxあるから実際は760pxで、現在、文章で表示されている横組みの文字数は44文字、吹き出しの中で36文字だよ。

実際にはみんながみんな画面いっぱいに広げて見ているわけではないからね。ウィンドウを小さくしてみている人もいるし、PCじゃなっくてタブレットとかスマホもいるからね。あと、1080pxって中途半端な数値は、8の倍数の呪縛から逃れられないってことですか（笑）

上は、利用しているOSの統計。見るべきところは、「Windows」と「OS X」、「iOS」と「Android」だね。これを見るといかにたくさんの人がスマホを利用しているかがわかるね。スマホの利用率がPCを上回ったなんて総務省の発表もあったけど、たしかにこれを見るとそうなのかもね。

なんと！
1位は圧倒的に375px x 667px!!これは明らかにiPhone6・7・8だね！！
2位はGALAXY系。
3位がiPhone5等、
4位iPhone Plus系だね。
レティーナなので2倍解像度だとして、スマホは750pxで考えておけばいいか。ま、私は未だにBootstrapを使っているので、引き続き767pxでスマホレイアウトにレスポンシブする！