ニュースでブラウザのシェアの情報を見ることがありますが、PC・モバイルと別れているため、全体を100にした場合の割合が計算できません。
今回は、自社で運営する日本国内向けサイトのAnalyticsから、全体を100としたブラウザのシェアを調べてみました。
2016年8月22日追記 2016年版を追加しました。
全ての数字は、全体を100％とした場合のパーセンテージです。
例えば、「iOSのSafariの最新(8以上)」の27.95は、iOS＋Android＋PC＋Macの全ブラウザを100とした場合の割合です。よって、
iOSのSafariの計 = iOSのSafariの最新(8以上) + iOSのSafariの8未満
となっています。
| OS | ブラウザ | バージョン | サイト1 | サイト2 |
|---|---|---|---|---|
| iOS | 計 | 46.28 | 34.79 | |
| Safari | 計 | 42.02 | 31.73 | |
| 最新(8以上) | 27.95 | 20.49 | ||
| 8未満 | 14.07 | 11.24 | ||
| Safari (in-app) | 3.65 | 2.65 | ||
| Chrome | 計 | 0.6 | 0.4 | |
| 最新(42以上) | 0.43 | 0.36 | ||
| 42未満 | 0.17 | 0.04 | ||
| Opera Mini | 0 | 0 | ||
| Android | 計 | 35.12 | 25.5 | |
| Android Browser | 計 | 18.76 | 13.93 | |
| 4以上 | 18.19 | 13.65 | ||
| 4未満 | 0.57 | 0.28 | ||
| Chrome | 計 | 16.14 | 11.38 | |
| 最新(42以上) | 3.98 | 3.09 | ||
| 42未満 | 12.16 | 8.29 | ||
| Firefox | 0.09 | 0.05 | ||
| Opera＋Opera Mini | 0.1 | 0.04 | ||
| Windows | 計 | 17.31 | 36.81 | |
| IE | 計 | 11.68 | 28.06 | |
| 11.0 | 9.33 | 20.38 | ||
| 9.0 | 0.95 | 2.88 | ||
| 8.0 | 0.7 | 2.88 | ||
| 10.0 | 0.53 | 1.42 | ||
| 7.0 | 0.13 | 0.4 | ||
| 6.0 | 0.04 | 0.1 | ||
| Chrome | 計 | 3.76 | 6.59 | |
| 最新(42以上) | 3.57 | 6.27 | ||
| 42未満 | 0.19 | 0.32 | ||
| Firefox | 計 | 1.69 | 1.98 | |
| 最新(37以上) | 1.6 | 1.79 | ||
| 37未満 | 0.09 | 0.19 | ||
| Opera | 0.11 | 0.11 | ||
| Safari | 0.02 | 0.02 | ||
| Mac | 計 | 1.03 | 2.65 | |
| Safari | 計 | 0.66 | 1.8 | |
| 最新(8以上) | 0.22 | 0.65 | ||
| 8未満 | 0.44 | 1.15 | ||
| Chrome | 0.23 | 0.53 | ||
| Firefox | 0.14 | 0.31 | ||
| Opera | 0 | 0 | ||
シェアは実際にAnalyticsのデータから調べています。
期間は2015年5月22日～6月21日で、サンプル数はサイト1は69万セッション、サイト2は15万セッションです。いずれのサイトもレスポンシブウェブデザインによりスマホレイアウトに対応しており、また日本語の日本国内向けのサイトです。サイト1は比較的スマホユーザーが多く、サイト2は比較的PCユーザーが多いサイトです。
シェアが少ない一部のブラウザはバージョン別に表記していません。
ただし、4位までのシェアが10％を超えて抜けているため、iOSのSafari、WindowsのIE、Androidの標準ブラウザ、AndroidのChromeの4つがブラウザ四天王という感じです。
四天王の合計シェアは85.1～88.6％に上ります。
あるスタイルを使用したとき、そのスタイルが見れないユーザーが実際にはどのぐらいいるのかを調べてみました。全てIEに関するデータです。
rgbaで指定した色・box-shadow・border-radius・backgrond-size・一部の疑似クラスはIE8以下が未対応ですが、多くても3.4％と95％以上のユーザーは見れます。
animation・text-shadow・gradientは上記にIE9を含むため、サイトによっては1割ほどの人が見れない可能性があります。
display: inline-blockに未対応のブラウザは0.5％と極小です。
| 表示・表現されないCSS | 対象ブラウザ | 影響範囲（対象ブラウザシェアの合計） |
| rgbaで指定した色 box-shadow border-radius background-size 疑似クラス:last-child、:fist-of-type、:last-of-type、:nth-child、:nth-of-type | IE6～IE8 | 0.9～3.4％ |
| animation text-shadow gradient | IE6～IE9 | 1.8～6.3％ |
| border-image | IE6～IE10 | 2.4～7.7％ |
| display: inline-block 疑似クラス:before | IE6～IE7 | 0.17～0.5％ |
ベンダープレフィックスに関する記事のところで説明した内容です。
一見、ベンダープレフィックスを何もつけなくても、95％ぐらいの人には問題ないようですが、そもそも古いIEでは未対応のスタイルがあるため、上記のシェアが加算されます。
例えば、
box-shadowだけを指定した場合は約90％のユーザーをカバー、
box-shadow/-webkit-box-shadow/-moz-box-shadow/-o-box-shadowとした場合は約95％のユーザーをカバー、
という見込みを立てることができます。
| ベンダープレフィックスの使用状況 | 影響するCSS | 対象ブラウザ | 影響範囲（対象ブラウザシェアの合計） |
| -webkitを付けない | -webkit-animation -webkit-keyframes -webkit-transform | Safari5、Android2 | 約2％ぐらい （iOSの8未満のうち5％をSafari5として計算） |
| -moz/-oを付けない | -moz-○○ -m--○○ | 古いFirefox/Opera | 1～2％ （多く見積もって） |
まめわざでは、スマホ対応はもちろん、webkitベンダープレフィックスを設置し、レイアウトについてはIE6までチェックしているので、かなりのユーザーに情報をお届けできます。
ホームページの作成・運用には、例えば本件のような調査・分析・検討が必要ですが、まめわざならそのような検討課題はシステムが自動で行うため、コンテンツ作成に集中できます。