ELEMENT, INC.

Webサイトのデザインをする時に、どのサイズで作成すればいいか迷うことがありますよね。最近はスマートフォンのサイズにも対応したレスポンシブのサイトでなければいけません。

今回はパソコンとスマートフォンのそれぞれのWebサイトの適切なサイズについて解説をしていきます。これからWebサイトのデザインをする人は是非参考にしてみてください。

Webサイトのサイズを知ることから始める

Webサイトのデザインを行うには、適正なサイズを知ることから始まります。適当な大きさでは上手く画面に表示ができないこともあります。現在ではスマートフォンが普及しているので、スマートフォンのサイズに合ったレスポンシブデザインも必要です。

Webデザイナーとして仕事をしていく上で、まずサイズを正確に知ることが大切です。

日本のパソコンとスマートフォンのサイズ(解像度)

日本で使われているパソコンやスマートフォンのサイズはどれが一番シェアが高いのでしょうか？今回はStat Counterという統計情報から日本のパソコンとスマートフォンのサイズを見ていきましょう。

この記事で使われている情報は2020年の情報になります。

パソコンの解像度のシェア

日本で使われているパソコンのサイズは1920×1080と1366×768が最もシェアが高いと言えます。いわゆるワイド型のデスクトップが多いことがこのグラフから分かります。

Webサイトやランディングページを作成する時はこのサイズを意識して、作成するのが良いと言えます。

スマートフォンの解像度のシェア

スマートフォンのサイズは375×667、360×640のシェアが高いです。375×667のサイズはApple社のスマートフォンに多いサイズです。360×640のサイズはAndoridの端末で多いと考えられるサイズです。

Appleのスマートフォンのサイズが多いので、このサイズを意識して作成していく必要があります。

パソコン版のWebデザインはどのサイズで作るべきか？

パソコンサイズでデザインを行う時は、デスクトップでよく使われている「1920×1080」と「1366×768」のサイズで作れば良いというものではありません。パソコンのWebサイトデザインの最適な大きさをしっかりと考える必要があります。

多くの企業が採用しているサイズを知る

日本の多くの企業は「1920×1080」と「1366×768」のサイズで作られてはいません。下の図をご覧ください。

実は横幅が950pxから1000px程度の大きさで作られていることが分かります。つまり、パソコンのWebサイトの横幅は960px、980px、1000px、1024px、1040pxあたりから作成するのが良いです。

なぜ、1000pxの横幅が良いのか？

パソコン版のWebサイトのデザインを行う際になぜ良いのでしょうか？これは実際のモニターから比較して見ることで、良い理由が一目で分かります。

ほとんどモニターサイズで問題なく、Webサイトを見ることができるサイズが1000pxになるのです。

スマホ版のWebデザインのサイズはどれが良いのか？

ほとんどユーザーはスマートフォンでWebサイトを見ることが多いです。最近はパソコンでWebサイトを見ない人も増えてきているので、スマートフォンユーザーを意識したデザインが求められます。

スマートフォン版のWebサイトは750px

スマートフォン向けのWebサイトのデザインを作成する場合、750pxで作成されることがとても多いです。その理由はスマートフォンの解像度にあります。

Apple社製スマートフォンやAndoridoの端末の大きさは375×667、360×640が多いのですが、これは750pxには当てはまりませんよね。では、なぜ750pxが良いのでしょうか？

Retinaディスプレイを理解する

最近のスマートフォンの解像度が日に日に上がってきており、特Retinaディスプレイが使われることが多いです。

Retinaディスプレイとは画素が細かく、人間の目の限界を超えた細かさの解像度です。従来の解像度に比べて倍以上の解像度になるので、画像や映像がより繊細で綺麗に見ることができます。

スマートフォンやパソコンに表示される画像はドットと言われる細かい点の固まりが集まって、目で物を認識できるように表示されています。Retinaディスプレイは従来のもの比べて倍以上の数のドットがあるので、細かく綺麗な画像を見ることができるのです。

750pxで作成する理由

Apple社製スマートフォンで考える場合、以下の表ようなサイズがあります。ディスプレイのサイズだけで考える場合はiPhone7のように375×667のサイズで問題はありません。

しかし、Retinaディスプレイを考慮すると以下の計算式で本当に適正なサイズを出すことができます。

375px(ディスプレイの横幅の大きさ)×2倍(Retinaディスプレイ対応比)=750px

Retinaディスプレイ対応でWebサイトのデザインを作成する場合はこの考え方で簡単に適正サイズを知ることができます。

まとめ

Webサイトのパソコンのサイズは1000px、スマートフォンの場合は750pxの横幅で作成するのが良いと分かりました。Webサイトのサイズは様々なモニターや端末があるので、全てのものに合わせることは難しいですが、より今のユーザーに合ったサイズは作ることはできます。

これからWebサイトを作成する方はこの記事を参考にしながら、作成をしてみてください。