Webデザインにとって重要なモニターサイズの2017年版トレンド・ポイントとは?


web-design-monitor-size-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サイトの内容、ユーザー属性によって結果が異なることが予想できます。

第1位 1920×1080
第2位 1366×768
第3位 1280×800
第4位 1440×900
第5位 2560×1440
第6位 1280×1024
第7位 1920×1200
第8位 1680×1050
第9位 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

この結果をふまえ、トレンドを把握するために、モニター比率を計算しました。その結果の表が下記になります。

モニター比率を計算し、追加した結果

第1位 1920×1080 16 : 9
第2位 1366×768 16 : 9
第3位 1280×800 16:10(8:5)
第4位 1440×900 16:10(8:5)
第5位 2560×1440 16 : 9
第6位 1280×1024 5:4
第7位 1920×1200 16:10(8:5)
第8位 1680×1050 16:10(8:5)
第9位 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社のポータブルディスプレイ 「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/