サイト制作に使われている一般的な解像度
サイト制作で悩むのが画面サイズです。どれくらいの解像度の端末を意識してレイアウトやCSSを構築すれば良いのか、迷うこともあります。その結論をここで出すことはできませんが、現状の解像度のシェア状況を知っておくことで、おすすめの画面サイズの目安が見えてくるはずです。以下、PCおよびスマホの解像度の現状を紹介します。
PCの解像度
PCの解像度は1920px×1080pxまたは1366px×768pxが多いらしいです。
【参考】モニター解像度のシェアを調べてみた(2018年1月版) | WEBSEEYA(ウェブシーヤ)
1920px基準だと1366pxでレイアウトが崩れるでしょうから注意が必要ですね。以前シェアが多かった1024px×768pxはシェアが下がる傾向なので、そこまで小さいPCを意識しなくても良いのかもしれません。
スマホの解像度
スマホの解像度は375px×667pxや320px×568pxが多いようです。言うまでもありませんが幅320pxできちんと表示されるかチェックが必要です。
【参考】2017年版|スマホ画面解像度シェア&HP制作に最適なサイズとは?|MWORKS
画面サイズのおすすめとは
上記のデータを見ると、PCは1000px前後、スマホは375pxあたりを想定して作成すれば良さそうですが、スマホについては「Retina対応」のディスプレイを考慮して2倍のサイズが必要になるので750pxあたりまで意識する必要がありそうです。
【参考】Webサイトデザインの横幅サイズ!もう何pxか迷わない! 2017年1月版 | FASTCODING BLOG
実際のサイトはどれくらいなのか、以下のページが参考になります。
これを見ると1000px前後が多いようです。
縦幅にも注意が必要
画面サイズというと横幅ばかり気になるかもしれませんが、縦幅も少しは気にした方が良いでしょう。たとえば、ランディングページなどを作るときに、画面をパッと開いたとき目に入る部分(ファーストビュー)の高さを気にしないと、重要なメッセージが切れてしまったりします。
PCとスマホを同時に考えると高さ500px前後くらいまでが見えているという意識でファーストビューのレイアウトを考えた方が良いかもしれません。
シェアの高い解像度1920×1080に合わせて高さ1000pxの画像を作っても、半分くらいしか認識されないかもしれません。ヘッダーを消した場合と残した場合とでも違ってくるでしょう。このあたりは確認しながら進めていく必要がありそうです。
【参考】LPやWEBサイトの縦幅(ファーストビューの高さ)は何pxが適切か?
PCにしてもスマホにしても、100%全員の端末で完璧に見える画面は難しいかもしれませんが、ひとまず現状の解像度のシェアをおさえておくだけでも取り組み方が違ってくるのではないでしょうか。参考にしてください。