【最新版 2020年】Webデザインにとって重要なモニター解像度のトレンド・ポイントとは？
Webデザイナー、Webエンジニアさんにとって、Webデザインを行う際、ユーザーのモニターサイズを想定してデザインを行います。その際、重要なのは現在閲覧されている「モニターサイズ」のトレンドと傾向・割合を知ることが重要なポイントとなります。そこで今年もJOB STAGEは、2020年7月現在のトレンドをアクセス解析を通して把握し、ポイントを探してみました。Web業界に転職を考えている方にとっても役に立てる内容となっていおります、是非、皆様の勉強やお仕事にお役立てください。
外せないユーザーのデバイスカテゴリの割合
JOB STAGEへのユーザーのアクセスに関してアクセス解析を行なったら、ユーザーのデバイスカテゴリの割合はスマートフォン、タブレットユーザーが60%以上となっております。スマートフォン、タブレットユーザーが増えたといえても、PCユーザーは約4割。まだまだPCサイトのデザイン・コーディングも必要な時代です。この結果を踏まえて2020年におけるモニター解像度のトレンド・ポイントを分析していきます。
デバイスカテゴリの割合
モバイル：59.57%
PCデスクトップ：38.32%
タブレット：2.11%
※計測期間:2020年5月1日〜7月1日
モニター画面の解像度トップ10
モニター画面の解像度トップ10は、1位〜10位まで、全てスマートフォン（モバイル端末）からのアクセスがトップ10を占めています。特に最初にお伝えした通りPCユーザー減少しPCデスクトップからのアクセスは38.32%となり40%以下の結果となっています。デスクトップPCが減少している結果が、モニター画面の解像度の結果にも大きく影響を与えています。
| 第１位 | 375×667：32.64% |
|---|---|
| 第２位 | 414×896：19.43% |
| 第３位 | 375×812：17.42% |
| 第４位 | 360×640：7.32% |
| 第５位 | 320×568：3.13% |
| 第６位 | 414×736：3.04% |
| 第７位 | 360×720：2.49% |
| 第８位 | 768×1024：1.50% |
| 第９位 | 360×740：1.30% |
| 第10位 | 360×760：1.29% |
まだまだ大切なレスポンシブデザイン
単純にアクセス解析トップ10の結果を踏まえると、2020年も引き続きモバイル端末に向けたウェブデザイン、コーディングを考えたWebサイトの構築が重要になっていることがわかります。また、特定の画面解像度の端末が人気なのではなく、様々な画面解像度の端末が幅広く利用されているのがわかります。レスポンシブデザインが2020年度も引き続きWeb業界にとって重要なものとなっています。次に気になるユーザーの端末環境の結果をみていきましょう。
モバイル・タブレットデバイスのトップ10
日本では圧倒的にAppleのiPhoneユーザーが多いと各メディアで報じられていますが、JOB STAGEユーザーも75%以上がiPhoneからのアクセスとなっています。そこで気になるiPadは1.8%と意外と少数。それ以外はAndroid OSを搭載した端末となっております。下記の表を分析すると、Microsoft、Google、Samsung、Sonyの端末等、端末自体は特定のメーカーが人気あるのではなく分散しているのがわかります。
| 第1位 | Apple iPhone：75.86% |
|---|---|
| 第2位 | Apple iPad：1.82% |
| 第3位 | Microsoft Windows RT Tablet：0.84% |
| 第4位 | Huawei ANE-LX2J P20 Lite：0.48% |
| 第5位 | Sony SO-01K XZ1：0.42% |
| 第6位 | Google Pixel 3a：0.41% |
| 第7位 | Samsung SC-02K Galaxy S9：0.40% |
| 第8位 | Samsung SC-02K Galaxy S10：0.39% |
| 第9位 | Sony SOV36 XZ1：0.35% |
| 第10位 | Samsung SC-02J Galaxy S8：0.30% |
Webデザインへのアプロートはどうすべきか？
いままでの分析をまとめると、
スマートフォン、タブレットユーザーが約6割。
PCユーザーが4割。
スマートフォンユーザーの画面解像度は特定のサイズにかたよりなく、様々な解像度の端末が利用されています。スマートフォンユーザーに向けては、今まで通りレスポンシブデザインでWebサイトの制作を行う必要があることがわかりました。
そこでPCユーザーに向けてはどのようなデザインアプローチが必要でしょうか？
PC端末の画面解像度TOP10
| 第1位 | Windows：1920×1080 | 比率：16 : 9 |
|---|---|---|
| 第2位 | Windows：1366×768 | 比率：16 : 9 |
| 第3位 | Macintosh：1440×900 | 比率：16 ： 10（8：5） |
| 第4位 | Windows：1536×864 | 比率：16 : 9 |
| 第5位 | Windows：1280×720 | 比率：16 : 9 |
| 第6位 | Macintosh：2560×1440 | 比率：5 : 4 |
| 第7位 | Windows：1280×1024 | 比率：5 : 4 |
| 第8位 | Macintosh：1920×1080 | 比率：16 : 9 |
| 第9位 | Macintosh：1280×800 | 比率：16 ： 10（8 ： 5） |
| 第10位 | Windows：1920×1200 | 比率：16 ： 10（8 ： 5） |
PCからのアクセスもモバイル同様、様々な解像度のユーザーに分散しています。解像度だけで分析するとわかりづらいですが、表の右の画面の比率で考えるとわかりやすいです。利用されている比率は3種類しかありません。
1. 16 : 9
2. 16 ： 10（8：5）
3. 5 : 4
3の「5 : 4」以外は横長のワイドの画面解像度（モニター）が利用されています。PCはあくまでも結構ワイドな横長を意識してデザインする必要があります。
まとめ
モバイルは様々、PCはワイド
いかがでしょうか？ 最終的にはモバイル、PCと分けて分析しましたが、モバイルは様々な画面解像度なのでフレキシブルなデザイン・レイアウトが重要で、PCはワイドモニターが中心なのでワイドで表示された時の見栄えを意識したデザイン・レイアウトが重要なことがわかりました。2020年は引き続きレスポンシブデザインを基本に様々な端末でも見栄えが良くみえるデザインをする必要がありそうです。
初心者の方はグラフィックデザインとの違いを意識しましょう！
グラフィックデザインは紙面のフォーマットが決まったなかでデザイン、レイアウトする反面、Webデザインはグラフィックデザインと違って、様々なデバイスで閲覧してもクオリティが下がらないデザイン・レイアウトを求められます。現在Webデザイナーの方は理解されている方も多いと思いますが、これから転職してWebデザイナーになろうとしている方は、このポイントを意識してポートフォリオ制作に役立ててください。
最終更新日：
