最新ブラウザシェアの確認方法

ターゲットブラウザを決める理由と方法・ブラウザシェア確認方法

最終更新日:2016年11月10日

新しくWEBページを立ち上げたり、WEBページのリニューアルをするときには、考えることや決めることがいっぱいあります。
そのうち重要なもののひとつに、「ターゲットブラウザを決める」ということがあります。

ブラウザには、Edge、Chrome、Safari、Firefoxなどいくつかの種類があります。
それぞれのブラウザ(とそれぞれのバージョン)で、同じサイトでも表示が変わってしまうことがあります。
どのブラウザでも同じに見えるようにするためには、特別な対応が必要です。
対応するブラウザをどれにするのか決めることを、「ターゲットブラウザを決める」といいます。

CSS3やJavaScriptでリッチなウェブサイトを作る場合には、対応ブラウザがどこまでなのかの違いが、工数や出来ること自体に大きな影響を与えます。
ウェブサイトのパフォーマンス自体にも影響します。

ごく少数の古いブラウザのために、多くのユーザーのウェブ体験を損ねることにならないか。
対応するための工数や費用を別のことに使えば、より良い結果を出せるのではないか。
あるいは、古いブラウザや端末を利用しているリテラシーが比較的低いユーザーを切り捨ててしまってもいいのか。

「ターゲットブラウザを決める」というのは、通常思われているよりも重要なポイントです。

リニューアルであれば、今までのアクセス解析データから各ブラウザや各バージョンでどれくらいのアクセスがあるのかを確認します。
新規の場合は、過去のデータがないので手元にある類似のデータや、公開されているデータをもとに考えます。

なんでターゲットブラウザを決めるのか

上でざっと書きましたが、どうしてターゲットブラウザを決めるの必要があるのかをご説明します。
ブラウザ」というのは、ウェブサイト・ウェブページを閲覧するためのアプリ・ソフトウェアです。

ウェブページは、HTMLというプログラム言語で書かれています。
そこに、CSSという見た目を決めるプログラムや、JavaScriptという動きを付けるプログラム、さらに画像などが合わさってひとつのウェブページを作っています。
ですが、これは普通の人間が読めるものではありません。
このHTMLたちを、誰でも読める形に翻訳するのが「ブラウザ」です。

HTMLの翻訳にはルールがあります。
一昔前は、ルールを無視した独自仕様の「ブラウザ」が多かったのです。
有名なのが、Windows標準のIE(InternetExplore)です。
まだHTML含めWEB関連の技術が黎明期だったので、各ブラウザ独自の機能を付けていきました。
特にMicrosoftは業界をリードするという自負からか、数多くの独自仕様を付けていきました。
このため、「ブラウザによって翻訳方法が違う」という事態が当たり前となりました。
つまり、同じHTMLなのに、見た目が変わってしまうということです。

IE6は凄い時代でした。
IE6とそのほかのブラウザでは、まったく見た目が変わってしまう。
どちらでも見た目が変わらないように、あるいは大きな表示崩れがないよようにHTMLをコーディングする、というのが、コーダーの使命でした。
IE7、8もそれなりに対応が必要でした。
さらにこの頃から、JavaScriptを使ったサイトが増えます。
ですが、IEはここでも独自路線を走っていたので、JavaScriptも各ブラウザで同じように動くように対応する必要がありました。

現在では、ブラウザ毎の仕様の違いはそれほど大きくはなくなりました。
ですが多少の違いはありますし、「バグ」も存在します。
このブラウザでは綺麗に表示されるのに、こっちのブラウザではちょっとずれている。」
こういうのは今でも多いです。
また、CSSやJavaScript、HTML自体も進化しています。
その進化にどこまでついて行くのか、どれくらい速く対応するのか、各ブラウザによって異なります。
スマホの場合は、AndroidのOSのバージョンによって、ブラウザの仕様やバグが異なるので、どのOSまで対応するのかを決める必要もでてきました。

理想をいえば、すべてのブラウザで同じように綺麗に表示されて動くことです。
ですが、対応ブラウザがひとつ増えれば、その分確認や対応の工数が増えます。
特にJavaScriptは、古いブラウザひとつのために、多くのコードを書き足さなければいけない、ということにもなります。
コードが増えたり、古いブラウザに対応するために古い仕様に対応した作り方にしたりすると、ページも重くなります。
新しいブラウザだけなら簡単にできるリッチな動きのあるサイトも、古いブラウザまで対応すると実現不可能ということもありえます。

このため、「どのブラウザを対応するのか」という取り決めが必要です。
取り決めていれば、たまたまクライアントの担当者が古いブラウザのユーザーだったとしても、問題ありません。
決めていなければ、「崩れている」とか「動かない」といったクレームに発展します。

つまり、どのくらい古いブラウザ(のユーザー)を切り捨てるのか。
完全に切り捨てるのか、部分対応するのか(ちょっと崩れていても読めればOK、とか)などを決めることが、ターゲットブラウザを決めるということです。
切り捨てる範囲を確定するために、ブラウザのシェアや費用、サイトの特徴を考える必要があるのです。

必ずサポートするブラウザ

一般的なのは、下記のブラウザの最新バージョンは必ずサポート。
Windows Phoneは案件次第です。
Windows タブレット(タッチ対応端末)は、JavaScriptの実装方法等が他と異なるので、JavaScriptを使うサイトであれば対応範囲に入れておいたほうが無難です。

PCブラウザ

Windows

  • ・Chrome
  • ・Firefox
  • ・Edge
  • ・IE11

Mac

  • ・Safari
  • ・Chrome

スマホ

iOS(iPhone)

  • ・Safari
  • ・Chrome

Android

  • ・標準ブラウザ(Android5.0以降)
  • ・Chrome

タブレット

iOS(iPad)

  • ・Safari
  • ・Chrome

Androidタブレット

  • ・標準ブラウザ(搭載している端末がかなり減っているので、サポート外という判断もあり)
  • ・Chrome

Windowsタブレット

  • ・Edge
  • ・IE11

サポートするかどうか判断に迷うブラウザ

こちらは、アクセス履歴やシェアを見て考えます。
案件ごとに、どのようなサイトなのか、想定するユーザー層はどこなのか、ローンチ(サイト公開)日はいつか、費用はあるか、といった情報を考慮します。
対応するブラウザが多ければ多いほど、開発工数や確認工数が増えるので費用が膨らみます。
特に古いブラウザをサポートするのであれば、フロントエンド開発工数はかなり影響を受けます。

例えば、最新の技術やデザインを取り入れたイメージやビジュアル重視のサイトであれば、古いブラウザは切り捨てます。
逆に、あまりスマホやPCを買い換えないようなユーザー層や、老若男女問わず出来るだけ多くのユーザー層に対応するのであれば、それなりに古いブラウザまで対応する必要があります。

サポートブラウザの決定や仮決定は、できれば見積もり前に。
見積もりに旧ブラウザ対応という費目を入れて、判断を任せてもいいかもしれません。
少なくても、構築前に済ませる必要があります。
これをしないで構築をスタートすると、必ずと言っていいほど問題が発生します。

クライアントやユーザーからは表示が崩れているというクレーム、フロントエンドエンジニアからはそんな要件聞いていないという抗弁。
追加対応するのであればもちろん追加工数(費用)が発生しますが、クライアントに請求するのは難しいでしょう。
これらの事案が発生したのであれば、それはディレクターやテクニカルディレクターのミスです。

PCブラウザ

  • ・IE10
  • ・IE9
  • ・IE6 〜 IE8

スマホブラウザ

iOS

  • ・前バージョンのiOS Safari

Android

  • ・Android4.4 標準ブラウザ
  • ・Android4.2〜4.3 標準ブラウザ
  • ・Android それ以前の標準ブラウザ

ブラウザシェアの確認方法

最新のブラウザシェア情報を確認出来るサイトをご紹介します。
私もよく使っています。

StarCounter

有名どころではここ
http://gs.statcounter.com/

WEB系のニュースでブラウザシェアを取り上げているところも、多くはここをソースとしていますね。

「Stat」を「Desktop」と「 Browser Version Combine Chrome (all versions) & Firefox (5+)」
「Region」を「Japan」に
「Period」を「Last 3 Months」で直近の3ヶ月に

で、バージョン毎のシェアが出てきます。

スマタブinfo

http://smatabinfo.jp/

新しいサイトですがとっても便利。
日本語だしサイトデザインもみやすい。
こういう便利なサイトが増えるとうれしいですね。

Google Developers

https://developer.android.com/about/dashboards/

Androidを開発しているGoogleの開発者向け公式サイト
全世界のデータなので、日本固有のデータとは少し違います。

「Jelly Bean」(Android 4.1〜4.3)がまだ10%以上というのは悩ましいですね。。
バグが多いバージョンなので。

Apple Developers

https://developer.apple.com/support/app-store/

iOSを開発しているAppleの開発者向け公式サイト
こちらも全世界のデータなので、日本固有のデータとは少し違います。

iOS10のリリースが9月13日
データが10月25日なので、およそ40日でシェア60%となっています。

データをもとに対応ブラウザを決める

PC版の対応ブラウザを考える

上記StatCounterで2016年7月から9月の日本のPCブラウザのシェアを見てみると、
http://gs.statcounter.com/#browser_version_partially_combined-JP-monthly-201607-201609-bar

IE10が0.52%
IE9が1.13%
IE8は0.77%

古いIEは全部で2.42%

これはあくまでもPCのシェアです。
PCとスマホが半々だと仮定すると、1.21%
さらに、ローンチ(公開)日は数ヶ月後であるのが普通ですから、シェアはさらに下がるはずです。

通常であれば切り捨てても問題ないでしょう。
ただし、PV数が多ければそれだけユーザーも多いです。
例えばPV100万なら、1.21%で12,100PVは古いIEのものです。
この数字をどう考えるか。
対応するための工数見合いで考えます。

あとは、Microsoftの公式サポート期限も考えます。
Windows 10 および Windows 8.1 ではIE10以下は動作しません。
XPはもうサポート終了しているので考慮外。
ということはIE8以下はサポート外としてよさそうです。
Windows Vistaは2017年4月11日までサポートされますので、VistaとセットのIE9もここまではサポートされます。
Windows 7は2020年1月15日までなので、IE11(一応IE10も)の公式サポートもここまで。

※IE10は自動アップデートがデフォルトなので、設定を変えていなければ勝手にIE11になっています。このためシェアは極めて低いです。
※公式サポート期限:https://www.microsoft.com/ja-jp/windows/lifecycle/eos/consumer/
※Windows serverは考慮していません。

SP版の対応ブラウザを考える

サポートするAndroidバージョンを決める

同じようにStatCounterで2016年7月から9月の日本のSPブラウザのシェアを見てみると、
http://gs.statcounter.com/#mobile_browser-JP-monthly-201607-201609-bar

Androidブラウザは全体の6.79%

Androdiブラウザ内のバージョンは上記スマタブでみると、Android5.0以降が80%
つまりAndroid4.4以下は20%
これにAndroidブラウザのシェアを入れると、スマホ全体の約1.4%
スマホとPCが半々だと仮定すると、Android4.4以下は1%もありません。
これは私が管理しているサイトの実数値よりも低いですが、実数でも多くて3〜4%です。

通常のサイトであれば、もうAndroid4.4以下はサポート外としてもよさそうです。

サポートするiOSバージョンを決める

iOSは、ひとつ前のバージョンまでサポートすれば充分です。
最新バージョンだけだとちょっと不安。
iOS9のデータですが、最新OSのシェアは下記の通り。

2015年9月(リリース):52%
2015年10月:61%
2015年11月:70%
2016年1月:76%
2016年2月:77%
2016年4月:84%
2016年7月:86%
2016年9月:88%

1割から2割のユーザーは、ひとつ前のバージョンのまま使い続けるようです。

実際の案件

ちょうど最近フリーのウェブのお仕事で、テクニカルディレクターの案件を頂きました。
1ヶ月数百万PVの大衆向けのウェブサイトのリニューアル案件ですが、下記のサポート対象で提案しています。

PC

  • IE11
  • Chrome(最新)
  • Firefox(最新)
  • Edge(最新)
  • Safari(Mac、最新)
  • Chrome(Mac、最新)

Windowsはタッチ対応
MacはiOS(iPad)対応

SP

  • * Safari
  • * Chrome
  • * Android 5.0以降の標準ブラウザ

なぜこのブラウザをサポート対象とするのか聞かれた場合に、数字をもとに理由を提示できると説得力が上がります。
出来れば、サポートしない古いブラウザをサポートする場合の追加工数・費用も一緒に提示できるとより親切かと思います。