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

WEB制作

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

サイトの横幅ってそんなに重要なの?

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

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

statcounter っていう便利なサイトを見つけたので、2017年7月から2018年7月までの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 10 billion monthly page views.

PCブラウザの種類

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

ChromeはMacユーザーもWindowsユーザー利用しているからだよね。Firefoxは主にWindowsユーザーだね。

PCブラウザ解像度

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

最近はNetflixとかHulu、U-Nextとかの映像配信サービスをパソコンで見ている人がいっぱいいると思うから、購入時にフルHDモニタを選ぶのはもはや当然かもね。

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

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

やはり、一般的なサイトの横幅は1200px以下が理想

というわけで、「1200px以下」が理想だと思う。「1200px」ではなく「1200px以下」と答えたのは、3段組みか2段組みかで読ませる文章部分のレイアウトにより変わるため。

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

横幅小さいと解像度が大きいモニターで閲覧した時にバランスが悪いから難しいところだね。

ちなみに、このブログの横幅は1080pxです!

このサイトの横幅はなんで1080pxなの?

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

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

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

横組みの場合は20〜30文字程度が読みやすいと言われている。例えば映画の字幕の場合、1行16文字で2行までと大抵決まっている。画面上の字幕は32文字が一回で見せる最大表示。

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

えー、でも横組みで20〜30文字くらいが読みやすいんでしょ!?

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

そうかー、結局レスポンシブだもんね。

ついでに、スマホの情報も見てみる

もう今やPCよりもSP対策の方が当たり前になっておりますが、ついでにグラフがあるので見てみよう。

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

OSの利用率が、「Windows」の次が「iOS」っていうのが、iPhoneとiPadがいかにたくさん利用されているかがわかるよね。

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

もう、ほんとにユウヤはガジェット大好きだからなぁ。

いかがでしたでしょうか。ま、デザインで結局どうにてもなっちゃう問題でもありますが、サイト制作の参考になれば幸いでーす!

2020年9月追記

上記情報がだいぶ古くなり、最近またサイト制作を再開するにあたりチェックしていたら、結構今は本当の意味でのレスポンシブになっているなぁと感じた。

つまりは、スマホでレイアウトがキレイに表示されるのはもちろんの事、かなり大きな画面でもレイアウト破綻を起こさないよう、解像度に依存されないよう設計されているサイトが目立つようになってきた。当時2年前で左右幅1200pxくらいが結構多かったのですが、最近は1400pxくらいが多いかもしれないです。

ただ、上の話は企業やメーカー等のサイトの話であって、ブログっていう意味だと結局縦に長くなるデザイン、またスマホ閲覧に最適化されている方がよいので、このサイト、左右1080pxくらいでよいとは思いますよ!