こんにちは、デザイナーの中道です。
今回は、Web制作に欠かせない画面サイズについての記事です。
前回も同じような話（画面サイズについて）を掲載しましたが、今回はさらに深く足を突っ込んだ「最適な画面サイズ」についてお話しします。
自分もデザインする時はいつもこの「最適な画面サイズ」に悩まされます。どのサイズでデザインを作成すれば、誰もが見やすいデザインになるのか…と毎回葛藤しながら作成しています。
今回はそんな葛藤のうえ、現在自分なりに納得した考えをまとめてみました。
画面サイズとは、当たり前ですが「PC、タブレット、スマホ」などでWebサイトが表示される画面サイズのことです。
ということは、画面サイズはデバイス、デバイスの機種によってサイズはバラバラです。
そもそも、PC、タブレット、スマホでは画面比率も違うため、すべてを同じ見え方にすることはできません。
下記記事にも記述していますが、そもそも画面比率が違うデバイスはレスポンシブ対応を行う必要があります。
そのため、1つのデザインですべての画面サイズを賄うことは不可能で、必ず「横長」と「縦長」のデザインが必要になります。
ということは、「横長」と「縦長」のそれぞれに対しての最適な画面サイズが分かれば良いということです。
前述したとおり、画面サイズはデバイスやデバイスの機種によってバラバラです。
さらに、画面サイズも日々変化し続けますし、そもそもPCでは全画面でブラウザを開かないこともあるため、誰もが同じ画面で見ることは不可能です。
なので、「今、一番使用されている画面サイズ」を基準に画面サイズを決めるしかなさそうです。
https://gs.statcounter.com/screen-resolution-stats/desktop/japan
こちらは、2023年6月現在のPC画面のシェア率の推移です。
1番多いのは1920×1080pxですね。なので、現在は横長サイズは「1920×1080px」を基準に考えると良さそうです。（サイト制作が完了した際は、2番目・3番目のサイズの確認もすることをおすすめします。）
https://gs.statcounter.com/screen-resolution-stats/all/japan
こちらは、2023年6月現在のすべてのデバイスのシェア率の推移です。
1920×1080pxに次いで多いのが縦長の「390x844px」です。縦長は「390x844px」を基準に考えると良さそうです。
一年前までは、375x667pxが縦長では一番シェア率が高かったのですが、最近では390x844pxのシェア率が高くなってきています。
タブレットサイズは、スマホの縦長と画面比率が違います。（スマホ画面のアスペクト比（縦横比）は19.5：9（もしくは16：9）、タブレット画面は4：3が多いようです。）
なので、制作の際は少し注意が必要ですが、シェア率の推移から見ても一旦タブレットのみのデザインは作成せず、横長サイズや縦長サイズのデザインから応用することをおすすめします。
しかし、タブレットからの流入が多い場合はタブレットメインのデザインを作成する必要があります。
前述の「タブレットからの流入が多い場合はタブレットメインのデザインを作成する必要がある」のように、現在のサイトへの流入が一番多い画面サイズをメインに考えてデザインを作成するという方法もあります。
むしろこちらが一番、サイトにとって最適な画面サイズと言えるかもしれません。
上図は、アウラコーポレートサイト（このブログのサイト全体）の「画面サイズ別のアクセス数」のグラフです。圧倒的に横長の1920×1080pxが多いですね。次いで390x844pxの縦長サイズ。
ですので、アウラのサイトの場合は、この2サイズをメインにデザインを作成すれば良さそうです！
※こちらの図は、GA4（Google アナリティクス4）の「レポート」→「ユーザー」→「テクノロジー」→「概要」→（画面の解像度）から確認が可能です。
多くの人に見やすい画面サイズを意識してWebデザインを作成することで、より多くのユーザーの満足度を得ることができます。
また、どのような意図でどのようなターゲットに見せたいかなど、ターゲットを絞った画面サイズを意識することで、効率の良い制作が可能になります。
最適な画面サイズはそのような考えをもとに決めることが重要だと、自分の中で納得しました。
これまでも、デザインの時点ではOKをいただけても、いざコーディングなどの制作が完了して実際のサイトを確認していただいた際に「なんか違うな…」ということがたまにあったりしました。
このような認識の相違がないよう、画面サイズの特徴や最適なサイズを理解して制作をしたり、ご説明できるよう、これからも理解を深めていきたいです。
今後もどんどん進化し続けるWebについていけるよう、知識も最新アップデートしてより新しいデザインを作成いていきたいです。
