Webサイトを制作するにあたって、XDやFigma、IllustratorやPhotoshopを使っている方は多い事でしょう。
そしてそれらのツールで制作するとき、ほぼ全てに共通して一番最初に行うのがアートボードの作成です。
でも、アートボードを作る時に毎回、私は思うのです。
今の画面サイズって何が主流なんだ…？
…と。
というわけで、今回はWebデザインを作る上で、アートボードサイズをどうやって決めるのか？という点について見ていきたいと思います。
画面サイズのシェア率を見てみよう
世の中には、PCのモニターだけでも様々なサイズのものが存在します。
インターネット黎明期と呼ばれる時代（大体20年くらい前）では、比率4:3のものが主流でしたね。
その中でも多かったのは1024×768pxサイズでしょう。
しかし、今では上記サイズのモニターはほとんど見なくなりました。
ではどんなサイズが主流なのかというと、2023年8月現在では1920×1080pxサイズが一番シェア率が高いという結果となっています。
PC画面サイズ（日本国内）
PC画面サイズ（世界）
おそらく、この記事をPCで見ている皆さんが使用しているモニターも1920×1080pxだと思いますが、このサイズはいわゆる「FHD」または「フルHD」などと呼ばれ、CMや家電量販店等でも目や耳にしたことがあるかもしれません。
PCモニターだけでなくテレビやカメラでも使用されている規格のため、一般的な規格と言えるでしょう。
日本国内と世界全体、どちらで見てもフルHDモニターのシェア率が高いという事ですね。
今ではコンパクトなノートパソコンやタブレットPCでも画面がフルHDなものもあるため、完全にPCオンリーのサイズではありませんが、その分幅広い端末に対応できるサイズと言って良いでしょう。
PCだけじゃない！スマホにもいろいろな画面サイズがあります
PCだけでなくタブレットやスマートフォンにも、画面サイズの概念は存在します。
これらの端末も、Webサイトを閲覧する際に使われているものですので同様にシェア率というものが存在します。
タブレットに関してはサイズの幅が広い事と、タブレットPC呼ばれているものがあり、こちらはタブレットとしての側面とPCとしての側面どちらも持ち合わせているため、Webデザイン段階においてあまり考慮されることはありません。
ですので、スマートフォンに絞ってシェア率を見ていきましょう。
スマホサイズ（日本国内）
スマホサイズ（世界）
日本国内と世界でシェア率のトップが分かれる結果となりました。
日本国内で言えば375pxがシェア率トップとなっていますが、この２つのグラフを見ていくと、日本国内と世界でスマホの画面サイズに明確な傾向の違いがあるのがわかります。
日本国内では横360px以下のシェア率が合計約10％ほどとなっているのに対し、世界では360px以下が20％を超えています。
一方で、日本国内では375pxが25％ほどなのに対して世界では360pxは10％に満たない結果となっています。
シェア率を見た上で…
これまでの流れで、PCとスマートフォンのシェア率を見てきました。
現時点でシェア率が高いのはPCが横1920px、スマートフォンは国内外でそれぞれ375pxと360pxで分かれていました。
これらの情報を見ていくと、PCでは1920pxで作るのが良いと言えますが、スマホは２種類あるため判断に迷ってしまいますね。
日本の制作会社では、この場合375pxで作る事が多い事でしょう。実際、トラムでも375pxを基準に制作をしています。
しかしながら、375pxで作っているからといって360pxの事を考慮しなくて良いというわけではありません。
シェア率が低いとはいえ、360pxの端末も現役で使われているわけですから、375pxだけであわせてしまうと360pxの時に意図しない表示崩れが起きる事は想像に難くないでしょう。
まとめると…
- PCは横1920pxで作ると良い
- スマホは375pxで作りつつ360pxを表示確認の対象に含めると良い
となります。
シェア率の高いサイズに合わせることのメリット
画面サイズのシェア率に合わせてデザインを制作する事で得られるメリットをそれぞれご紹介します。
デザインの再現性
シェア率が高い＝Webサイトを見るときに1920pxの画面で見られている割合が一番多い ということなので、その画面サイズに合わせてデザインすることで意図した通りの形に見てもらいやすくなります。
レスポンシブ対応のしやすさ
PCであれば、使用されている画面サイズの中で2番目に大きいサイズであることと、一番大きい横2560pxのモニターはシェア率が極端に低いため、実質的な最大サイズであると考える事ができます。
つまり、1920pxに合わせて作った後はそれより小さい画面幅に合わせた調整を行うだけで良いので、調整がしやすいのです。（感じ方には個人差があります）
スマホの場合も、375px（または360px）を最小サイズとすることで、それより大きい画面幅に合わせた調整を行うだけとなります。
画像サイズが粗くなりにくい
画像は元々のサイズより大きいサイズで表示されると、ほとんどの場合は粗くなってしまいます。
しかしながら、実質的な最大サイズである1920pxで作成することで、ほぼすべての画面で粗くなる心配がなくなります。（2560pxのモニターで見られたときは、何も見なかったことにしましょう）
これがもし1366pxで作成して書き出していた場合、画面の1920pxにあわせて1366pxの画像が引き延ばされて表示されるため、画像が粗くなってしまうのです。
最後に
2023年9月時点では、PCは1920px、スマホは375px（360px対応有り）が良いと考えられます。
しかしながら、今はよくても1か月後、1年後、2年後…と、シェア率は少しずつ変化していく事でしょう。
気付いたら全然違うサイズのモニター、端末が普及していた！何てこともあるかもしれません。
常に最新の情報をインプットして、制作に反映していく制作者でありたいですね。
