2020.04.22

WEBデザインの最適な横幅サイズを検討しました

WEB技術

WEBサイトをデザインする上で、
どのサイズで作成するか迷ったことはありませんか?
日々さまざまなサイズのデバイスが登場しているなか、
WEBデザイナーにはそれらすべてに対応した
レスポンシブデザインが求められています。

現在は2500px以上の高解像度のディスプレイも増えていますが、
サイトの幅もこれらのサイズに合わせるべきなのでしょうか?
そこで今回は、WEBサイトをデザインする上で、どのサイズが適切か、
パソコンとスマートフォンのそれぞれのサイズを検討してみました。

●国内シェアNo.1のパソコン・モバイルの解像度とは?

今回はStat Counterというサイトから
日本で使われているパソコン・モバイルの統計情報を調べました。

パソコンで最もシェアが高いのは1920✕1080。
次に1366✕768という結果になっています。

スマートフォンでは375✕667(Apple端末)のシェアが1位。
360✕640(android端末)が2位ということが分かりました。

WEBデザインを作成する際は、
もっともシャアが高い解像度を意識する必要があります。

●日本の企業サイトで採用されているサイズ

では実際に今ある有名サイトなどは、
1920pxで作られているのでしょうか。

答えはNOです。

調べてみると横幅950~1100pxで作られているものが多く、
1920pxに合わせて作られたサイトはありませんでした。

多かったのが920px,960px,1000pxの3パターン。
なので、これらのいずれかを選択するのがいいでしょう。

●スマートフォンのサイズ選びと注意点

最近ではRatinaディスプレイが使われているものが多く、
物理的な幅が狭くても、高解像度というのがスマホの特徴です。

そのため今では、Ratinaディスプレイを考慮して
2倍のpx数で横幅を決めるというのが主流になっています。

現在のスマホサイトでは横幅700~800pxで作成されており、
375px(iPhone6.6s.7.8)✕2の750pxを採用しているものが多くありました。

●まとめ

今回の調査結果により、パソコンサイズは1000px、
スマートフォンサイズは750pxが適切であるということが分かりました。

弊社でも上記のサイズを採用し、ユーザーに最適なサイト作成を行っています。

全てのデバイスにサイズを合わせるのは難しいですが、
時代に合わせて柔軟に対応してカスタマイズしていきましょう。

クリサイ
pagetop