Webサイトを制作した後はインターネット上に公開していきますが、その前に行うべき工程が「ブラウザチェック」です。

ブラウザとはWebサイトへのアクセスに使用するソフトウェアのことで、代表的なものには「Google Chrome」や「Internet Explorer(IE)」などがあります。

日本では多くのインターネットブラウザが使用されており、2020年3月時点のブラウザ市場シェアは「Google Chrome」「Safari」「Firefox」「Internet Explorer(IE)」の順となっています。

ブラウザチェックとは、自社の制作したWebサイトがこれらのブラウザで正常に動作するのかをチェックするもので、表示のズレや誤作動などが起きていないかを確認していきます。

しかし、OSとブラウザの組み合わせは700通り近くあるため、すべてのパターンをチェックすることはできません。

したがって、Web制作担当者はブラウザチェックの重要性を理解すると同時に、効率的なブラウザチェック方法を知っておく必要があるのです。

ブラウザチェックでは「補助ツール」を使用してチェックを自動化することが可能ではありますが、ブラウザチェックで必要なチェック項目すべてをカバーできるわけではないと覚えておきましょう。

動作保証環境とは、制作したWebサイトが正常に表示されるブラウザを示したもので、OSとブラウザ双方のバージョンごとで対応している環境を明記していきます。

例えば、OSを「Windows」ブラウザを「Google Chrome」に設定してブラウザチェックを行った場合、制作したWebサイトが正常に表示されると動作保証環境に指定できるわけです。

ブラウザチェックは、言い換えれば動作保証環境として追加できる「OS」と「ブラウザ」を探し出す作業といえます。

ブラウザチェックを行う理由

ブラウザチェックを行うのは、制作したWebサイトが「異なるブラウザ間」で「動作不具合」や「表示崩れ」といったエラーとなることを防ぐためです。

よくバグが発生しやすいとされるのが「Internet Explorer(IE)」で、その他のブラウザでは問題なく動作していた表示が崩れてしまうことがあります。

また、PCやスマートフォン(携帯端末)といった「異なるデバイス間」で起こるエラーがあることも覚えておきましょう。

特に、ユーザーの利用するデバイスの画面サイズに合わせて表示を行う「レスポンシブWebデザイン」は、PCで正常に動くものの、スマートフォンでは不自然な動作になることがあります。

GoogleがMFI(Mobile First Index)を発表したように、スマートフォンからWebサイトにアクセスを行うユーザーが増えていることを考えると、スマートフォン閲覧時における表示崩れは避けたいところです。

ブラウザチェックの範囲

ブラウザチェックの範囲は、Webサイトに訪問するユーザーが使用しているOS・ブラウザに対応することが重要です。

Googleが無料で提供している「Googleアナリティクス」を使用し、Webサイトに訪問したユーザーのデータを見ることがポイントとなります。

しかし、Webサイトを制作したばかりの時は、訪問するユーザーが「どのようなOS・ブラウザを使ってアクセスするのか」が分からないことでしょう。

そうした場合は自社がターゲットとしているユーザー像(ペルソナ)を改めて確認し、どのようなデバイスからアクセスが行われるのかを仮定していきます。

若い世代からのアクセスを見込んでいる場合は、スマートフォンをアクセス手段として利用することが考えられるため、「iPhone」「Android」それぞれの携帯端末でチェックが必要になります。

また、過去のアクセス事例や他社の事例を参考にしてみると良いでしょう。

Webサイトに訪れるユーザーは「ジャンル」や「時間帯」によって偏りがあるため、競合サイトに訪れているユーザーは自社サイトにも訪れる可能性が高いといえます。

PCでブラウザチェックを行う場合

PCでブラウザチェックを行う場合は、「OSとブラウザのバージョン」を基準にチェックを行いましょう。

PCにおけるブラウザチェックではOSを1つに決め、複数のブラウザでのWebページ表示を見ていきます。

また、同じOS・ブラウザであってもバージョンによって表示が崩れる場合があるため、1つのOS・ブラウザから複数のバージョンもチェックする必要があります。

例にすると、「Windows(OS)のバージョン10でInternet Explorer(ブラウザ)のバージョン11の動作を確認する」といった具合です。

スマートフォンでブラウザチェックを行う場合

スマートフォンでブラウザチェックを行う場合は、「シェアの高い携帯端末」を基準にチェックを行いましょう。

なぜなら、スマートフォンでは端末ごとでバグが発生しやすいからです。

すべてのスマートフォン端末でブラウザチェックを行うは現実的ではないため、スマートフォンの市場シェアを参考にしながら端末でチェックすると良い でしょう。

ブラウザチェックの主なチェック項目

ブラウザチェックで主に確認するのは「表示崩れ」です。

Google ChromeやInternet Explorerなど、各ブラウザで表示を確認していきます。

ここで注意したいのは、「市場シェア上位のブラウザのみをブラウザチェックの対象とする」ということです。

日本における市場シェアは「Google Chrome」45.3%、「Safari」31.6%、「Firefox」7.2%、「Internet Explorer」6.1%と、上位2つが圧倒的なシェアを誇っています。

この数字だけを見ると、「上位2つのブラウザで正常に表示されるのであれば問題ない」と判断しかねませんが、この状況からいえるのは「未だInternet Explorerからのアクセスがある」ということです。

つまり、表示崩れが起こりやすいとされるInternet Explorerのブラウザチェックを怠ると、Internet Explorerからアクセスするユーザーに対して適切に表示が行われない恐れがあります。

ターゲットとなるユーザーがInternet Explorerを使用する可能性を考えると、ブラウザチェックの重要性が理解できるのはないでしょうか。

また、動作不具合がないかをチェックすることも項目の1つといえます。

特にレスポンシブWebデザインを採用しているWebサイトではブラウザごとで不具合が生じることもあるため注意が必要です。

Webサイト制作や組織づくりに関するお悩みは、エニィにご相談ください

エニィは、Webサイト制作を通じてビジネスを洗練化する会社です。そのため、単に見た目が綺麗だけのWebサイトを制作することはありません。顧客の事業成長に貢献し、経営資産となるブランディングのためのWebサイトを制作いたします。

Webサイト制作に関するご相談やお悩みを抱えている企業様はお気軽にお問い合わせ下さい。また、これまでご支援してきたWebサイトの制作事例について、Web上には公開していない具体的な案件の詳細や費用などをまとめた資料をご用意しております。ご興味頂けましたら、ぜひダウンロード下さい。

この記事を書いた人

磯崎史弥

WEBの戦術設計や提案を得意とするWEBプランナー。実務のディレクション及び技術面の知識も豊富で、クライアントの意向をWEBプランニングに落とす事ができます。 コーディングや開発は事業スケールを意識した設計を中核にチーム形成まで視野に行うため多くのプロジェクトを成功に導いてきました。 commnet 正解や成功までの道は一つではないと思います。 特定の解法に拘らず、任意のケースにおいて実現可能な道とその先にある結果を提示することで、クライアントの決断を助ける活動をしていきたいと思っています。