クロスブラウザテスト（複数ブラウザテスト）を必ずやっておくべき理由

※このページでは広告のリンクを含みます

公開されたWebサイトはユーザー各自のブラウザで閲覧することになります。本記事ではクロスブラウザテストが必要な理由とチェックすべきブラウザを解説します。クロスブラウザテストを理解することでユーザーにとって優しいWebサイトを提供することができます。

クロスブラウザテストが必要な理由

公開されたWebサイトはユーザー各自のブラウザで閲覧することになります。特にInternet ExplorerとEdge、Chrome、FireFoxなどの別のブラウザでは見た目やサイトの動作が違うものになってしまうことは多いです。

なので必ず複数のブラウザで確認することが品質上とても大事です。

現場では、複数のブラウザで確認する際、事前に制作仕様書でクライアントと決定しておきます。
詳細は「Webサイトをコーディングする前に必ず用意しておきたい制作仕様書」で説明しています。

企業によってはクロスブラウザテストのテストブラウザの種類、個数によって費用に加算していく場合があります。
クロスブラウザテストのテスト対象ブラウザを決定、クライアントと合意を取るためにブラウザのシェア率が確認できる「statcounter」等を判断材料のひとつとして決めていきます。

引用：「statcounter」2021年6月度日本のブラウザシェア率

また、Webサイトのアクセス解析ツールを導入している場合など、アクセス計測より閲覧ブラウザを調べることもできます。

個人でやる程度であれば、自身のもっているパソコンにブラウザをインストールすることで問題ないと思います。
Edge、Chrome、FireFoxは各最新バージョンをインストールすればよいでしょう。

Internet Explorerに関しては、「Internet Explorer のダウンロード」からダウンロードするとよいでしょう。（Windowsのみ）

Macユーザーに関してはInternet Explorerが使用できないため、ブラウザテストのためにWindowsマシンを持っているというWebデザイナーもいます。

また、ブラウザテスト用に各ブラウザが入ったマシンを用意しているWeb制作企業もあります。

Webサイトを制作し終えてクロスブラウザテストで確認をすると崩れてしまうことも少なからずあります。
そのような場合、事前にそのHTMLタグやCSSプロパティが各ブラウザに対応しているのか否かを確認できるサービスが「Can I use」になります。

検索エリアに調べたいHTMLタグやCSSプロパティを入れるとブラウザの対応・未対応がわかります。
　

ちなみに、色の凡例は下記のとおり。

Googleアナリティクスと連携することで世界と日本と自分のサイトの訪問者におけるブラウザの対応シェア率が確認できたりカスタマイズができるのでWeb制作者は「Can I use」を一度は使ってほしいと思います。

この記事のポイントを抜き出してみました。
忙しい人向けやとりあえず結果をだけを学びたい方にどうぞ。

クロスブラウザテスト（複数ブラウザテスト）を必ずやっておくべき理由

クロスブラウザテストが必要な理由: Internet ExplorerとEdge、Chrome、FireFoxなどの別のブラウザでは見た目やサイトの動作が違うものになってしまうことは多いため。
クロスブラウザテストのブラウザのシェア率を知る: クロスブラウザテストのテスト対象ブラウザを決定、先方と合意を取るためにブラウザのシェア率が確認できる「statcounter」等を判断材料のひとつとして決めていきます。
クロスブラウザテストでチェックしたいブラウザ: Edge、Chrome、FireFoxは各最新バージョンをインストールする。
制作中に対応ブラウザを確認する: 制作中に使用したいHTMLタグやCSSプロパティが各ブラウザに対応しているのか否かを確認できるサービス「Can I use」を使用します。

クロスブラウザテストの考えを初めて知ったのは、プロのWebデザイナーになって2年目くらいだったと思います。

それまで、テーブルレイアウトコーディングという<table>タグを使用してレイアウトを組み立てていく手法で作成していたので、そこまでブラウザ間で差異は無いというイメージでしたね。

しかし、業界の流行りがテーブルレイアウトからCSSでレイアウトを組み立てるフェーズに移行したことで、ブラウザ間の表示の差異が出てきたんですね。
その時に、各ブラウザでチェックする必要が出てきました。

今後もクロスブラウザテストの必要性が続いていくので、必ずクロスブラウザテストをするクセをつけておきたいですね。