Webデザインにとって重要なモニターサイズの2017年版トレンド・ポイントとは？
Webデザイナーさんは、Webデザインを行う際、ユーザーのモニターサイズを想定してデザインを行います。その際、重要なのは現在閲覧されている「モニターサイズ」のトレンドと傾向・割合を知ることが重要なポイントとなります。2017年6月現在のトレンドをアクセス解析を通して把握し、ポイントを探してみました。
ポイントはモニターの比率「16 : 9」
2017年人気モニターサイズ トップ25
当サイトのアクセス解析から、Job Stage ユーザーの実際閲覧しているモニターサイズを分析してみました。ここではトップ25位までを計測し分析してみました。Webデザイナーさんは、お仕事では「PCサイト」、「スマートフォンサイト」を制作することが多いかと思います。
今回は「PCサイト」のWebデザインのお仕事のために、スマートフォンのモニターサイズではなく、PC・タブレットのモニターサイズを分析しました。分析した結果、最終的にモニターサイズではなく、モニターの比率「16 : 9」が重要だということが結論として分かりました。
※当社調べ。2017年6月現在
何故、モニターのトレンドを把握しなければならないのか？
モニターサイズのトレンドは毎年、新しいPC、タブレット、スマートフォン、又は新しいデバイスの発売により、日々変化していってます。制作物のフォーマット、紙のサイズが決まっているグラフィックデザインと異なり、Webデザインはユーザーの閲覧環境が多種多様で、大きく影響を受けるので、どのモニターサイズで閲覧しても、デザインのクオリティを下げずに閲覧できるデザインを行う必要があるのです。
その為には、Webデザイナーは最適なデザインをお客様（クライアント）に提案する為に、毎年モニターサイズのトレンドと傾向を把握している必要があるのです。
モニターサイズの人気トップ25
Job Stageユーザーのモニターサイズをアクセス解析から、トップ25までのデータを取得しました。そちらの結果が下記の表になります。当サイトのアクセスに対して、閲覧の際の割合が多いモニターサイズが25種類ありましたので、今回は25種類のモニターを調査対象としています。こちらはWebサイトの内容、ユーザー属性によって結果が異なることが予想できます。
| 第１位 | 1920×1080 |
|---|---|
| 第２位 | 1366×768 |
| 第３位 | 1280×800 |
| 第４位 | 1440×900 |
| 第５位 | 2560×1440 |
| 第６位 | 1280×1024 |
| 第７位 | 1920×1200 |
| 第８位 | 1680×1050 |
| 第９位 | 768×1024 |
| 第10位 | 1600×900 |
| 第11位 | 1536×864 |
| 第12位 | 1280×720 |
| 第13位 | 1024×768 |
| 第14位 | 1080×1920 |
| 第15位 | 1600×1200 |
| 第16位 | 720×1280 |
| 第17位 | 1301×731 |
| 第18位 | 1093×614 |
| 第19位 | 2048×1152 |
| 第20位 | 1242×698 |
| 第21位 | 1438×808 |
| 第22位 | 1829×1029 |
| 第23位 | 1745×982 |
| 第24位 | 1200×1920 |
| 第25位 | 1188×668 |
この結果をふまえ、トレンドを把握するために、モニター比率を計算しました。その結果の表が下記になります。
モニター比率を計算し、追加した結果
| 第１位 | 1920×1080 | 16 : 9 |
|---|---|---|
| 第２位 | 1366×768 | 16 : 9 |
| 第３位 | 1280×800 | 16：10（8：5） |
| 第４位 | 1440×900 | 16：10（8：5） |
| 第５位 | 2560×1440 | 16 : 9 |
| 第６位 | 1280×1024 | 5:4 |
| 第７位 | 1920×1200 | 16：10（8：5） |
| 第８位 | 1680×1050 | 16：10（8：5） |
| 第９位 | 768×1024 | 4 : 3 |
| 第10位 | 1600×900 | 16 : 9 |
| 第11位 | 1536×864 | 16 : 9 |
| 第12位 | 1280×720 | 16 : 9 |
| 第13位 | 1024×768 | 4 : 3 |
| 第14位 | 1080×1920 | 16 : 9 |
| 第15位 | 1600×1200 | 4 : 3 |
| 第16位 | 720×1280 | 16 : 9 |
| 第17位 | 1301×731 | 16 : 9 |
| 第18位 | 1093×614 | 16 : 9 |
| 第19位 | 2048×1152 | 16 : 9 |
| 第20位 | 1242×698 | 16 : 9 |
| 第21位 | 1438×808 | 16 : 9 |
| 第22位 | 1829×1029 | 16 : 9 |
| 第23位 | 1745×982 | 16 : 9 |
| 第24位 | 1200×1920 | 16 : 9 |
| 第25位 | 1188×668 | 16 : 9 |
25種類のモニターサイズのなかで、17種類が「16 : 9」のサイズとなっています。この結果、現在Job Stageの PC専用のウェブサイトは相当の割合で「16 : 9」のモニターサイズで閲覧されていることが分かります。2017年6月のデータから導かれたモニターのトレンドです。
「16 : 9」のモニターとは？
縦横比率が「16 : 9」のモニターは、「HD」「Full HD」と呼ばれて現在人気機種のPCでも採用されているもので、ノートPC等でよく見かける比率です。何故、「16 : 9」の比率がトレンドなのか調べた結果、「デジタルテレビ」や「Blu-ray Disc（BD）のハイビジョンコンテンツ」が16 : 9の規格で制作されている為、また、液晶パネルの開発、製造の段階でコストダウンを図る際、標準仕様が「16 : 9」となったことも大きな要因の一つです。
Webデザイナーが仕事で使用しているモニターサイズの比率は？
「16 : 9」はかなり横長のワイドな印象をもつプロポーションになります。Webデザイナーが仕事で使用しているモニターサイズの比率は、「4 : 3」、「16 : 10」が主流でしたが、現在発売されているAppleのiMacは「16 : 9」のモニターとなっています。
徐々に「16 : 9」のモニターがプロの現場でも標準化が始まっているようです。モニターの比率（プロポーション）は仕事の場合は好みや慣れもあるので、一概には言えませんが、ユーザーが「16 : 9」の環境で閲覧しているなら、制作サイドも「16 : 9」のモニターでデザインを行うのは理にかなっています。
因みにプロのWebデザイナーでも愛用している人も多い「Mac Book Pro」のモニター比率は「16:10（8:5）」と、若干縦が長くなっています。
iPadは横位置で使用した際は「4 : 3」の比率となります。
「16:9」の確認用モニター
現在、当社で使用している確認用モニターはASUS社のポータブルディスプレイ 「ASUS MB168B+」。ポイントは解像度が「1,920 × 1,080 フルHD」と呼ばれているもので現在のトレンドとなっており、USB3.0ケーブルをMACに繋げるだけで使用できます。デュアルモニターとしても使用でき、業務の効率化も図れ、Webデザイン・コーディングの際にも活躍してくれる優れものです。現在、Webデザイン、コーディングの確認環境に満足していない方にはオススメのサブモニターです。
新しい「Mac Book Pro」にも設置されている「USB Type-C」のPCをすでに使用している方は「USB Type-C」対応モデルのディスプレイもございます。
Amazon｜http://amzn.to/2rpO2l2
ASUS公式サイト｜https://www.asus.com/jp/Monitors/MB168BPlus/
最終更新日：
