2022年 春時点での動向のまとめ
ディスプレイサイズ(解像度)シェアについて
ウェブサイトを制作する際に、ブラウザシェアと共に重要なのがその時点でのディスプレイサイズ(解像度)シェアです。
ディスプレイサイズ(解像度)とは
解像度とは、モニターの大きさの事ではなく、そのモニターが表示する事が出来る事ができる一つの点(画素)の数の事です。モニターで見ている映像や画像・文字は色の異なる点(画素)の集合体で、これら一つ一つの画素の色や明るさが変化する事で、動く映像や静止画、文字などを表示しています。
画素とピクセルは同じ考え方でウェブサイト制作の世界では、ピクセルを使うのが一般的です。1ピクセルは、1ピクセル×1ピクセルの正方形の点であり、それ以下でも以上でもありません。そして解像度は、この1ピクセルを横にいくつ、縦にいくつを並べる事ができるか?を表しています。
例えば 解像度1920×1080(フルハイビジョン)の場合は、横に1920個・縦に1080個の点を並べる事ができるという事です。全体では1920×(かける) 1080ですので、207万3600個の点を表示しているという事になります。そこでモニターの大きさの事ではないという事は、物理的な横何センチ・縦何センチという事ではなく、物理的なサイズに関係なく解像度は、そのモニターが表示している画素の数という事になります。
横幅が1メートルのモニターでも2メートルのモニターでも、解像度1920×1080のモニターでは、横1920個・縦1080個の画素を表示しているという事です。(つまり2メートルのモニターの1ピクセルの物理的な大きさは2倍という事です。)
技術の発展により、この1画素をより小さく出来る様になっている為、小さなモニターでも高解像度での表示が出来る様になっています。世の中では2K、4Kモニターというのが度々トレンドとなりますが、2Kは横1920ピクセル、4Kは4080ピクセルの解像度という事です。
ウェブサイトと解像度の関係
上記の通り、解像度はモニターが表示する画素の数という事を説明しましたが、これはウェブサイトの制作に大きく関係します。
デザインサイズをどの解像度で作るか?
ウェブサイトを制作する際には、どのデザインサイズで見せるか?が重要です。
そのサイトの特性を最大限に生かす為に、コーディング方法やサイズ決定が必要だからです。サイズ(特に横幅)は全体に渡って影響してくる為、途中でやっぱりという事が困難な部分です。その為、その制作時点でのサイズ決定が重要で、その決定に必要なのが解像度シェアです。
なるべく横スクロールを出さない事
ウェブサイトは、縦にスクロールしてみる事が前提です。稀に横にスクロールで見せるサイトもありますが、いずれにせよ縦か横かどちらかに絞らなければ、とても見づらいサイトになってしまいます。
その為、その時代の解像度シェアを調べて、デザインサイズ(横サイズ)を決定します。
ここで決定するデザインサイズは、次の事を考慮して決定します。
- 横スクロールが出ない最低サイズ
- どの時点で(下限)でスマートフォン用サイトに切り替えるか?どのサイズ以下は横スクロールが出ても良しとするか?
- 見せたい要素の最大サイズ
- どこまで広くなっても幅いっぱいに広がる要素は逆に見づらい為、横幅の上限を設定する。上限を超えた場合は、要素は常に中央に配置される様にする。
- 文字サイズの決定
- 解像度に対応した文字サイズ。物理的に小さい端末(スマートフォンやモバイルノートPC)でも解像度が高い場合、文字が小さくて読みづらくならない為の対策。
画像をなるべく綺麗に見せる為に
用意する画像の解像度を決定する際に解像度シェアが関係してきます。解像度とは、モニターの大きさの事ではなく表示している画素数と説明した様に、モニター解像度に対しての画像解像度を考慮して画像を用意しなければなりません。
例えば2000年代初期のモニターシェアは800×600が主流でしたが、この頃で画面の半分の画像を用意する場合、その画像サイズは400ピクセルでした。これをフルハイビジョン(1920ピクセル)の画面で表示すると画面の4分の1程度のサイズで表示されます。これでは小さすぎて画像で表現したい事が表現しきれないという事になります。かといって、無理やり400ビクセルの画像を800ピクセルに大きくすると、画像がボヤけた感じに表示されます。
つまり画像や動画を用意する際に、解像度シェアを考えて画像サイズを用意する必要があるという事です。
apple系端末のシェアが増えると…
iPhoneは既に主流ですが、macBookやipadなどのシェアがもっと増えた場合は、もっと高解像度が必要となります。apple系の端末では高解像度のRetinaディスプレイの為、画像のRetina対応が必要になってきます。Retinaディスプレイは、フルハイビジョン(1920×1080ピクセル)に対しMacBook Pro 13で2560×1600ピクセル、MacBook Pro 16で3456×2234ピクセル、iMac Retina 5K 27では5120×2880ピクセルとより高解像度となっています。Retina対応とは、このような高解像度ディスプレイに対応したHTML上の指定方法で、解像度に応じた画像を読み込む方法です。未だMacシェアはそれほど高くはないので、この様な指定方法はケースバイケースですが、今後Mac・Windowsに関係なく高解像度を売りにしたPCやモニターが出現すると思われますので、解像度シェアのチェックは必須です。
タブレットやスマートフォンでは、CSSピクセルとデバイスピクセルという2つの解像度があります。CSSピクセルは、コーディングで使う単位で端末の解像度の違いにより、見え方が異なってしまわない様に導入されているピクセル単位で、デバイスピクセル比を基準に決定されています。iOSとAndoroidでは仕様が異なっている関係で、若干見え方が異なる場合があります。コーディングでは、この端末による見え方の違いをなるべく最小にする為の工夫を行っています。
デバイスピクセルは実際の解像度で、画像表示の場合はこちらの単位が使われます。その関係で上記のRetina対応が必要となります。
2022年 4月の日本におけるディスプレイサイズシェア
デスクトップ用モニターのシェア
| 順位 | 解像度 | シェア率 |
|---|---|---|
| 1. | 1920×1080(フルハイビジョン) | 25.93% |
| 2. | 1366×768(Full Wide XGA) | 13.63% |
| 3. | 1536×864 | 10.97% |
| 4. | 1280×720(High Definition) | 4.91% |
| 5. | 2560×1440(Wide Quad-High Definition) | 3.53% |
一般的なワイドモニターで価格的にも手が届きやすい1920×1080が主流です。A4サイズのモバイルノートPCで多く採用されている1366×768も次点にきています。HDモニターの1280×720も未だ健在です。よく企業で支給されているモニターとして見かけます。流石に、4対3のモニターはほとんど無くなった様です。
タブレット ディスプレイサイズのシェア
| 順位 | 解像度 | シェア率 |
|---|---|---|
| 1. | 768×1024 ipad mini(～5)、ipad(～6)、ipad Pro9.7など | 42.44% |
| 2. | 800×1280 | 10.34% |
| 3. | 810×1080 ipad 7～9など | 7.06% |
| 4. | 601×962 | 5.09% |
| 5. | 600×960 | 4.82% |
タブレットは端末によって、サイズが一定で無い為、把握しづらいのですが、ipadの少し古いタイプが主流の様です。※表示ピクセルはCSSピクセルで実際の解像度(デバイスピクセル)は、もっと高解像度です。
尚、当社でサイト制作する際はタブレット向けにはPCサイトサイズで見せる為の指定をしています。
スマートフォン ディスプレイサイズのシェア
| 順位 | 解像度 | シェア率 |
|---|---|---|
| 1. | 375×667 iPhone 6～8及びSE2 など | 16.69% |
| 2. | 390×844 iPhone 12・13 miniなど | 13.30% |
| 3. | 375×812 iPhone X・XS・11 proなど | 12.47% |
| 4. | 414×896 iPhone XS・11 Pro MAXなど | 11.85% |
| 5. | 360×640 XPERIAシリーズなど | 6.00% |
iPhoneは常に最新の機種を購入するユーザーから古い機種を使い続けたり、中古機種を使うユーザー、SEを使うユーザーなど分散されていると思われます。流石にiphone5以前を使うユーザーはかなり減った為、ひと昔前に基準だった320×568サイズ(現在シェアは1.91%)は無視して良いレベルとなりました。