WEBサイトの検証。ブラウザはどこまで対応する？

WEB制作に携わる仕事をしている方であれば、誰しもが経験したことがあるであろうWEBブラウザによる表示崩れなどのバグ。現在はモバイル端末の台頭により、PC用のブラウザのみ気にすればいいということではなくなってきています。本記事ではブラウザ、画面のサイズなどマルチデバイス対応への注意点を説明していきます。

WEBブラウザの種類

あらかじめどこまでを対応するのかルール決めをしておかないと、後々問題になってくるのがWEBブラウザの対応範囲です。HTMLを構築するコーダーには特に敏感に気にしてほしいブラウザですが、現在の日本で利用されている主要ブラウザは以下になります。
※2019年12月時点での情報です

※現在公式サポート中のバージョンは「Internet Explorer（以下IE）11」のみです。（2018年7月、2019年2月にマイクロソフトが「IE11を使い続けるのは危険・最新のブラウザを使用するように」との声明を出しています。）

PCはGoogle Chromeの利用が大半を占めており、スマートフォンの場合はSafariが大半のシェア率を占めています。スマートフォンの場合、日本人のiPhone利用率が高いためこのような数値となっていると考えられます。

PC用ブラウザへの対応

PCへの対応に関しては、IE以外については基本的には最新バージョンへ自動的にアップデートがかかるため、検証作業も最新バージョンで行えば問題がありません。
IEに関しては悩まされている制作者も多いかと思います。バージョンによっても見え方が変わってくる可能性があり、「IE◯◯だけ崩れてる」や「IE◯◯だけ動画が再生されない」などの指摘がはいることがあります。しかし公式のサポートも切れていることもあり、IEの古いバージョンを利用されている方はごく少数です。弊社では基本的には公式でサポートをしているIE11.00までの対応としています。（ちなみにIE11.00のサポートが切れるのは2025年となっています。）

☆PC用ブラウザへの対応
IE以外は最新バージョン、IEは11まで（必要であれば旧バージョン）の対応をする

スマートフォン用ブラウザへの対応

続いてスマートフォンへの対応についてですが、ブラウザと合わせて、OSのバージョン、解像度ごとに確認が必要になってきます。ブラウザのバージョンは同じでも、スマートフォンの解像度が違うと、見え方も変わってきます。

スマートフォンの検証はPCのデベロッパーツールを利用して検証をする

スマートフォンの検証にはPCのデベロッパーツールを利用することをおすすめします。様々なOS、デバイスがある現代で全ての環境での検証というのは、とてもできるものではありません。すべてのバージョンで検証を行う場合には専用の端末を用意する必要がありますし、バージョンも日々アップデートがかけられ最新版がリリースされています。
弊社でも検証用に複数の端末を検証機として用意はしていますが、それでも検証ができない場合にはブラウザのデベロッパーツールで検証をしています。

【デベロッパーツール】
・Google chrome
・Firefox
※しかし稀にデベロッパーツールと実機での見え方が変わってくるケースもあるので注意が必要です。

☆スマートフォン用ブラウザへの対応
実機があれば実機での確認。ないならデベロッパーツールを活用してなるべく主要なデバイス、OSでの検証を行う

ちなみにタブレットは？

タブレット端末は現在販売されているものはノートPCと、ほぼ同様の解像度になっているのでPCサイトが表示されることが多いです。クライアントの閲覧環境が極端に古くない限りは問題なく表示されると思いますが、念のためクライアントの閲覧環境をあらかじめ確認しておく必要があります。

まとめ

ここまでのまとめとして、ブラウザの対応は基本的には最新バージョンでの確認を行い、クライアントの環境で特殊な例があれば事前に確認しておくということが必須になると思います。
2019年も終わりますが、2020年以降新たなブラウザ、OSが出てくるかもしれません。制作側とすれば、どのブラウザも統一した環境でWEBサイトを見られるようになってくれれば一番助かりますが、一時期の「○○バージョンでのバグが～」などと発生していた時代から比べれば、ブラウザ、デバイス間の違いはフラットに（緩く）なっている印象があります。
2020年、どのようなサービスが出てくるのか期待しましょう。

WEBディレクター ／ T.K