Web制作における対応ブラウザの選定方法

Web制作における対応ブラウザの選定方法

フロントエンドのテクニカルディレクションに求められるスキル」で出てきた話題として対応ブラウザの選定方法について掘り下げて解説を行います。

サイトのターゲット・予算・リソース・開発期間などビジネスにより選定方法は異なりますので、あくまで参考程度にしてください。

対応ブラウザを絞る意味

まず最初は「なぜ、対応ブラウザを絞るのか」という視点から。

理想論で言ってしまえばWebサイトを訪れるユーザー全てに最適なコンテンツを提供できれば申し分がありません。

しかし、現実的には各ブラウザ/OSによって実装が異なる機能があったり、実装されていない機能があったり、特有のバグを含んでいる物があったりすることもあり、そういった場合は個別のブラウザ/OSに対してデバッグやチューニングを行わなくてはいけません。

そのため対応ブラウザの数が多ければ多いほど、Webサイトの確認コストやデバッグ/チューニングのコストが増加していきます。

ある程度、人口が多いブラウザをターゲットに絞ることで、これらの確認コストや対応コストを軽減できます。

アクセス解析で判断

既存サイトのリニューアルなどではアクセス解析でアクセス数が多いブラウザからターゲットブラウザに指定をしていきます。ビジネス規模にもよりますがアクセスするユーザーが全体の10%を切る場合はターゲットブラウザにふくめる必要があるか検討するべきです。

ただ、

など単純なアクセス数以外のことも検討の材料に含める必要があります。

ただ、古いブラウザは利用ユーザーが減っていくにも関わらず開発・運用のコストとして跳ね返ってきますので、できればふくめないほうがよいでしょう。

最新バージョンのみ対応

Google ChromeやFirefoxなどでは殆どの場合、「最新バージョンのみ対応」とするのが一般的です。これらのブラウザは自動アップグレードに対応しており、古いバージョンを利用しているユーザーがほとんどいないためです。Windwos 10から搭載されたMicrsoft Edgeも自動で行われるWindows Update内でアップデートされていくので最新バージョンのみ対応で良いでしょう。

また、Macに搭載されているSafariもSafari 9よりOS X 10.9.5 Mavericks、OS X 10.10.5 Yosemite、OS X 10.11 El Capitanと過去OSにまで対応し、OSのアップデートも無料でできるため最新バージョンの対応のみでよいでしょう。
(MacユーザーはOSのアップデートを積極的にやるイメージです)

ブラウザのサポート期間を意識する

ブラウザには各メーカーのサポート期間が設けられており、それらを判断基準にする方法もある。サポートが切れたブラウザはセキュリティ的な脆弱性を含んでいる可能性があり無理に対応する必要はないでしょう。
(企業などではサポート期限が切れたブラウザを使い続けるのはセキュリティリスクが高いため情報システム部門が無理矢理にでもアップデートさせるはず[願])

この指標は自動アップグレードに対応していない、会社の都合でアップデートできないユーザーが多いIEの対応ブラウザの選定の基準にすると良いでしょう。

現在のMicrosoftのIEのサポートは以下のようになっています。

OSIEサポート期限
Windows XPIE6,IE7,IE82014年4月
Windows VISTAIE7,IE8,IE92017年4月
Windows 7IE8,IE9,IE10,IE112020年1月
Windows 8IE102015年10月
Windows 8.1IE112023年1月
Windows 10IE112025年10月

昨年、サポートが終了したWindows XPとWindows 8以外はMicrosoftがサポートを継続しています。
(Windows 8は更新プログラムとしてWindows 8.1が提供されており単体ではWindows 8.1の提供開始から24ヶ月しかサポートされない)

ただし、2016年1月12日よりMicrosoftのサポートポリシーが「各OSの最新版のIEのみをサポートする」形に変更されます。

それを踏まえると来年からは以下のバージョンがサポート対象になります。

OSIEサポート期限
Windows VISTAIE92017年4月
Windows 7IE112020年1月
Windows 8.1IE112023年1月
Windows 10IE112025年10月

参考:Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft

Windows VISTAに含まれるIE9も再来年の4月でその役目を終えます。

Windows VISTAを利用しているユーザーなどほとんどいないのでIE11のみ対応すれば良さそうです。

とは言いうものの、IE11のみ対応っていうのはかなり大きな変化で多くの方が混乱しそうなので来年はアップデート移行期間と考えてIE9以上、再来年からIE11のみとするのがよいでしょう。

大事なことなのでもう一度言いますが、サポート期限が切れたブラウザを使い続けるのはセキュリティリスクが高いためちゃんとアップデートしましょう

PCに関するまとめ

ひとまずPCに関してまとめると、

Safari/Firefox/Chrome/MS Edgeの各最新ブラウザ
IE9以上(IE9,IE10,IE11)

上記7ブラウザに対応すればよいのではないでしょうか?

タッチディスプレイはサポート対象?

タッチディスプレイに対応するかどうかも重要なポイントです。Surface Proなどタッチディスプレイ搭載型の端末のシェアは増えてきており、windows 10ではタブレットモードと呼ばれるモードに切り替えることでタッチの際の挙動が切り替わったりします。

そのため、JavaScriptなどで複雑な動きをするサイトではタッチディスプレイに対応することで工数が大幅に増加することもあります。

タッチディスプレイに対応する場合は更に対応ブラウザ/OSを絞り込むのがよいでしょう。

ex) windows 10のタブレットモードでIE11とChromeの最新ブラウザをターゲットにする。

iOS

iPhaneやiPadに関しては最新2バージョンに対応しておけばだいたいの期間で90%を超えるサポート率になるので問題ないです。(いまだとiOS8とiOS9)

iOS用にはページは作らないが、PCサイトをiOSでも見たいなどのプライオリティの場合は最新1バージョンのみでよいでしょう。

Android

Dashboards | Android Developersでブラウザシェアを確認する限り、4.1以上(4.3は除く)をサポートすればそこそこのシェアになります。

Android OS のシェア

以下の6バージョンです。

Android 4.1、4.2、4.4、5.0、5.1、6.0

対応ブラウザを絞りたい場合は比較にシェアの低い奇数番を除くのが良いでしょう。

Android 4.2、4.4、5.0、6.0

前述のブラウザのサポート期間のロジックで言えばGoogleはAndroid 4.3以下のブラウザ(のWebView)のセキュリティパッチの公開を終了しており、Googleの人はAndroid 4.3以下のOSではGoogle Play StoreよりChromeをダウンロードして利用することを推奨しています。

そのため、Chromeがあるときはインテントさせて、ないときはGoogle Playに飛ばす方法なんかが公開されていたりします。(滅び行くAndroid 標準ブラウザをサポート外にして悩みの種をなくす話 - Qiita)

Androidに関してはメーカーがバージョンアップを提供しないケースなどもあり単純にサポートが切れたので対応しないが難しいですが、Android 4.1〜4.3のシェアがそれぞれ10%前後(Android 4.3に関しては4.1%)とそれほど利用率が高くない点、その中でもChromeを利用しているユーザーが一定数いる点などを考慮して、対応ブラウザを4.4以上にするというも一つの選択でしょう。

ちなみにAnroid4.4よりOSのブラウザはChromiumベースに変更されており(Android 4.4がChromium 30、Android 4.4.3 がChromium 33)格段と安定度が増しています。

また、Android 5からは、OSのアップデートができなくてもWebView単体でアップデートが可能になっていますので最新のWebView/Chromeといった条件を付け加えることも可能になります。
(内部のWebView/Chromeのバージョンを指定しないとAndroid 5や6内で更にバージョンが断片化されてしまいます)

モバイルに関するまとめ

モバイルに関してまとめると、

iOS8、iOS9
◎Android 4.4、5.0
○Android 4.2、6.0
△Android 4.1、5.1

上記に対応すればよいのではないでしょうか?

Androidが若干の混乱ですがIEのように収束されていくことが望まれます。

Androidに関しては端末依存のバグ等も多いので対応ブラウザのみだけでなく対応端末も指定しておくと良いでしょう。(対応端末は品質保証を行うが対応端末以外は努力目標とするなど)

関連エントリー

スマホサイト案件の見積もりについて
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
Androidのviewportに対する数値指定

スポンサードリンク

«技術トレンドを追わないという勇気 | メイン | 「と、コラボ特別編 Webクリエイター新年会 featuring まぼろし」に出演します。»