Tag Archive トレンド

コーディング

2022年 春時点での動向のまとめ

  • デスクトップPC向けでは、1200ピクセルを最小として1300ピクセルを標準幅がおすすめ。また、フルサイズ部分は2000pxでも良いが、今後の事を考えると4000pxの画像を用意する事も考えて良いかもしれません。その辺りは、ファイルサイズ等を考えて妥協点を見出す必要があり。
  • スマートフォンユーザーは、どれがシェアが圧倒的という訳ではないが横360ピクセル×縦640ピクセル(縦長時のサイズ)を基準にすると良と思われます。このサイズでシェア9位(2.23%)以上は対応できると思われます。

 

 

ディスプレイサイズ(解像度)シェアについて

ウェブサイトを制作する際に、ブラウザシェアと共に重要なのがその時点でのディスプレイサイズ(解像度)シェアです。

 

ディスプレイサイズ(解像度)とは

解像度とは、モニターの大きさの事ではなく、そのモニターが表示する事が出来る事ができる一つの点(画素)の数の事です。モニターで見ている映像や画像・文字は色の異なる点(画素)の集合体で、これら一つ一つの画素の色や明るさが変化する事で、動く映像や静止画、文字などを表示しています。

 

画素とピクセルは同じ考え方でウェブサイト制作の世界では、ピクセルを使うのが一般的です。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月の日本におけるディスプレイサイズシェア

statcounter 調べ

 

デスクトップ用モニターのシェア

順位解像度シェア率
1.1920×1080(フルハイビジョン)25.93%
2.1366×768(Full Wide XGA)13.63%
3.1536×86410.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×128010.34%
3.810×1080
ipad 7~9など
7.06%
4.601×9625.09%
5.600×9604.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%)は無視して良いレベルとなりました。

このページの関連記事

この記事には、以下の関連記事がございます。合わせてご覧ください。

コーディング

このページは、2022年04月25日に作成したページです。
このページに掲載している仕様・機能・操作手順は、現在リリースされているバージョンと異なる場合がございます。

2022年 春時点での動向のまとめ

  • スマホのみしか利用していないユーザーは5割、スマホ・PC両方利用が5割弱、PCのみしか利用していないユーザーは2%程度。スマートフォンユーザーの割合がほとんどとなっています。このことからレスポンシブ対応していないサイトは一層不利となっています。
  • デスクトップPCでは、Chromeが首位、Edgeも2割程度。IEは3%程度で且つ22年6月に完全にサポート終了となる為、無視して良いと思われます。
  • スマホでは、若年層はSafariが多く、中高年ではChromeが多いどちらも無視はできない。
  • タブレットでは、iPadとAndoroidで半々どちらも無視はできない。

 

 

ブラウザシェアについて

インターネットブラウザは、ウェブサイトを表示する為には必須のソフトウェアです。

制作したウェブサイトは、インターネットブラウザを通してユーザーが閲覧する事になります。

その為、これからウェブサイトをリニューアルする場合や、新たに制作する場合にはその時点でのブラウザシェアを把握する事が重要になります。

 

ブラウザシェアと制作技術の関係

ウェブサイト制作は、HTML・CSS・JavaScript が基本となります。この3つの技術でブラウザでの表示を担う事になります。

 

これに加えてお客様のウェブサイトが目的とする機能をPHPやCGI…等の技術を使って、ウェブサイトの機能を実現する事が出来ます。

これらの技術は、時代の変化と共に常にアップグレードされてゆきます。その時代のトレンドに合わせて、使える機能が増えたり、逆に廃止される機能があります。

HTMLは、それほど頻繁にアップグレードされません。当社が開業した2001年から既に20年が経過しますが、HTML4.0→XHTML1.0→HTML5と3回しか変わってません。

 

CSSのバージョンアップ

CSSは見た目や構造などのスタイルを構築するための言語として1996年に発表されました。現在CSS1~3と3つのバージョンがあります。2021年現在はCSS3が使用されています。

CSS3は全体がモジュール化され、ユーザーはどのモジュールを利用するのか、自由に選択できるようになりました。その関係で、モジュールごとに仕様の策定が進められていて、まだ草案段階のものもあるため、仕様が変更されています。

その為、どの機能が使えるか?ブラウザのバージョンによって大きく異なっています。既に策定されている機能であっても、ブラウザが対応しているか否かで使用が制限される事になります。

ブラウザの対応状況は、プロパティ毎に発表されており、当社技術者はその対応状況と制作時のブラウザシェア動向によって、その機能を利用するか否かを決定します。

 

JavaScriptのバージョンアップ

1990年代にLiveScriptという名で開発されたJavaScriptは、ECMA総会によって毎年6月頃にアップデートされています。2021年現在の最新仕様はES2021(ECMAScript2021)です。

JavaScriptは2015年前後で仕様が多く変わっており、2014年以前のJavaScriptは古いブラウザ用に設計されている為、現在は2015年以降の仕様でJavaScriptを書くことが求められています。

 

どのブラウザに対応させるか?

上記の様に、制作するサイトに使用する機能を決定する為に、制作時点でのブラウザシェアを知る事は重要となります。

既に策定されている機能が、使えなくなる事はあまりありませんが、新しい機能がブラウザやそのバージョンによって対応していないという事はよくあります。

新しい機能は、より便利で高機能な為、使用できるのに越したことはありませんが、特定のブラウザやそのバージョンによって機能せず、表示されなかったり、体裁崩れを起こす事は望ましくありません。

かといって古いバージョンも含めて対応させるというのは、現実的ではありません。

そこで、最新のブラウザシェア動向を基準に対応・非対応の切り分けを行います。

基本的には、お客様の意向を優先しますが、当社の基準として次の様な基準を設けています。

 

制作開始時または納品時点で…

  • ブラウザシェアが5%以上あるブラウザは対応する
  • そのブラウザメーカーがサポート※1しているブラウザは、対応する。
  • そのブラウザがサポート終了していても、ブラウザシェアが5%以上ある場合は対応する。
  • 大手サイト(Yahoo等)がサポート終了を発表したブラウザは対応しない。

 

1 ブラウザメーカーがセキュリティアップデートを対応している

 

業種やターゲット層によっての違い

ブラウザシェアは、ウェブサイトのターゲット層・業種によっても違いがあります。

2022年現在の動向として、日本全体を見ると次の様な動向です。

参考資料: 〈調査報告〉インターネットの利用環境 定点調査(2021年上期)

 

  • PC・スマートフォンの比率はスマホのみしか利用していないユーザーは5割、スマホ・PC両方利用が5割弱、PCのみしか利用していないユーザーは2%程しかない。
  • ブラウザシェアは、Google Chrome 5割。Safariは3割。Edgeは1割。
  • スマートフォン利用者のOSは、iPhone・Androidが半々。

 

上記は、全体としての動向であり、業種別やウェブサイトのタイプによって異なります。

例えば、B to B 向けのウェブサイトの場合、2020年までは日本では以前としてinternet explorer 11(通称IE11)のシェアが高い状態でした。IE11は22年6月15日に完全にサポート対象外となりますが、2021年の夏ごろを境にChromeやEdgeに乗り換えるユーザーがほとんどになった様に思えます。当社取引の大手企業でも、ほとんどの企業が、IE11の利用を禁止し、ChromeやEdgeへと切替が完了しました。

 

若者向けでは、PCでのアクセスは1割程度で9割はスマートフォンでのアクセスです。また10代~20代男性のiPhoneシェアが7割、Andoroidが3割となりますので、そのままSafari(iPhone標準ブラウザ)が7割、Chrome(Andoroid標準ブラウザ)が3割となります。10代~20代女性ではiPhoneシェアが8割、Andoroidが2割となっています。

中高年向けでも、スマホユーザーは年々増える傾向で、OSにおいてはiPhoneとAndoroidのシェアは逆転しており、iPhoneシェアが4割、Andoroidが6割となります。これはAndoroidの知名度よりも、日本メーカー=安心という心理が働いている影響で日本メーカーで発売されているスマートフォンにはAndoroid OSが搭載されている為である事から、Andoroidシェアが大きいと思われます。

 

 

2022年 4月の日本におけるブラウザシェア

statcounter 調べ

 

PC ブラウザのシェア

順位ブラウザ名シェア率
1.Chrome60.54%
2.Edge21.4%
3.Firefox7.92%
4.Safari5.38%
5.internet explorer2.98%

 

デスクトップPCブラウザでは、Google Chromeが首位となっており、Windows標準のブラウザであるEdgeが次点です。デスクトップPCの利用者は、企業関係者が多い為、以前として企業ではWindows PCの利用率が高い事が分かります。

 

 

スマートフォン ブラウザのシェア

順位ブラウザ名シェア率
1.Safari59.16%
2.Chrome34.63%
3.Samsung Internet2.99%
4.Firefox0.93%
5.Android0.9%

スマートフォンブラウザでは、Safariが首位となっており、Chromeが次点です。iPhoneシェアが高く10代~20代のOSシェアと一致するのでスマートフォンをよく利用しているのは、10代~20代の若年層が多いという事が分かります。

 

 

タブレット ブラウザのシェア

順位ブラウザ名シェア率
1.Safari49.32
2.Chrome33.32%
3.Android15.95%
4.Opera0.61%
5.Edge0.26%

タブレット ブラウザのシェアでは、スマートフォン同様にSafariが首位となっており、Chromeが次点です。但し、Safari対Chrome+Android では半々という結果ですので、ipadタブレットとAndroidタブレットがシェアを分け合っているという結果です。
※ Androidブラウザは、Androidシステムの一部でWebView(ブラウザを呼び出す事なくWebページを表示する事ができるアプリ)

このページの関連記事

この記事には、以下の関連記事がございます。合わせてご覧ください。

HTML Snippets Powered By : XYZScripts.com