「自分のパソコンではWEBサイトがきれいに見えるのに他の社員のパソコンから見ると崩れている」
「新しく公開したWEBサイトの表示がおかしいとお客様からご指摘を受けた」
WEBサイトの表示について、このようなお悩みを耳にすることがあります。「こちらではきれいに見えるのに、どうしてこちらからは同じように見えないのか」というものです。
この問題は、パソコンのブラウザ（インターネットを閲覧しているSafariやChromeなど）が原因となっていることが多いです。同じURLを見ていても、ブラウザが異なると見え方は変わってくるのです。ブラウザが同じでもバージョンが異なるだけで見え方が違うことも。
このような現象が起こる原因は、各ブラウザはインターネットを検索して閲覧するという役割は同じですが、ブラウザの種類ごとにWEBページを表示させる仕組みが異なるからです。
その仕組みの違い＝WEBページの表示の違いです。
つくったWebページがブラウザAでは正しく表示されていてもブラウザBでは表示が崩れている…そんな状況を引き起こしてしまうのです。WEBサイトを制作したり管理したりする側からすると非常に困りますね。
そこで今回は、上記のような表示の違いを事前に防ぐ「クロスブラウザチェック」と、「チェックツールの詳しい使い方」について解説します。
１．ブラウザの種類とシェア
まず、ブラウザの種類がどれくらいあり、それぞれどれくらいの人に使われているのか確認してみます。
代表的＝よく使われているブラウザ3つと、その特徴は以下の通りです。
①Google Chrome
世界、国内ともにシェア率No.1のブラウザです。
特徴はアプリのような後付けの拡張機能が使えること、ブラウザの動作速度が速いこと。Google社のブラウザなので、Googleが提供するサービスとの連携がしやすく、Googleのサービスをよく使うユーザーには便利なブラウザです。
②Microsoft Edge
Microsoft社のIE（Internet Explorer）の後継ブラウザです。
IEよりも高機能で、Webページに手書きできる機能や拡張機能も。現在はIEよりシェアが高くなっています。
③Safari
Safariは、iPhone、Macなどでお馴染みのアップル社が開発したブラウザです。
アップル製品との相性が良いほか、バッテリーが長持ち、表示スピードが速いなどのメリットがあります。
思っている以上にブラウザは種類が多く、それぞれに特徴があるのでパソコンユーザーも好みで変える傾向にあり、シェアも分かれています。
以下のブラウザのシェアランキングはWebブラウザシェアランキングTOP10(日本国内・世界)より引用させていただきました。
機能はバージョンによって異なるため、ブラウザ＋バージョンでシェア率が算出されます。
■ブラウザのシェアランキング (2021年1月)
１．Chrome 87.0（34.77%）
２．Chrome for Android（13.52%）
３．Edge 87（11.44%）
４．IE 11.0（7.27%）
５．Safari 14.0（6.26%）
６．Chrome 88.0（5.52%）
７．Firefox 84.0（4.8%）
８．Edge 88（4.04%）
９．Safari 13.1（1.44%）
１０．Chrome 86.0（0.98%）
このランキングから、シェアが圧倒的に高いのはChromeということがわかります。Edgeに切り替わっていっているIEもまだまだシェア率は高めです。
IE、特に古いバージョンのIEブラウザでも同じように表示させたい場合は、IEのためだけにコーディングを別途行う必要があります。そのときは新たなコーディング作業となるため、費用もかかってきます。
どのブラウザまで対応するのか、何年前のブラウザまで対応してくのか、その基準をそれぞれが持っておく必要があります。
２．どのブラウザまで対応するか基準の決め方は？
すべてのブラウザ、すべてのバージョンに対応するのは基本的には不可能です。どこまで対応すればいいのか悩んでしまう方がほとんどだと思います。
そこで、いくつか国が提供するオンラインサービスの対応ブラウザを調べてみました。国（官公庁）などの行政サービスでは多くの場合で”推奨環境”として、このサービスを利用できるブラウザを明記しています。
○マイナポイント
https://mynumbercard.point.soumu.go.jp/
「最新のバージョン」を求めていて、アップデートされていないバージョンには対応していない旨を明記しています。これはセキュリティなどの関係から、最新バージョンを求めているようです。
○政府電子調達
https://www.geps.go.jp/bizportal/
Internet Explorer 11 (32bit版)もしくはFirefox 60 (32bit版)のみ。こちらはシステムが対応していないのでブラウザの種類に制限がかけられているようです。
○政府インターネットテレビ
https://nettv.gov-online.go.jp/
こちらはスマートフォンからの利用も視野に入れてつくられているのがわかります。Android、iOSからの閲覧環境についても明記されています。
この3つを比べるだけでも、全く違う推奨環境が指定されています。
国のサービスもそれぞれに様々な側面からバランスを取って、「この基準を推奨環境としよう」と決めているのがわかります。
ブラウザは基本的にはユーザー側がアップデートによって最新の状態を保つのがベストの使い方です。それがいちばんセキュリティも高く、安全だからです。個人情報を送ってもらうようなサービスの場合は、セキュリティ面をいちばんに考慮すべきなので、「最新のバージョンで」とお願いするのも納得です。
閲覧するだけのWEBページもありますし、推奨環境を設定するのであれば、ユーザーの利用のしやすさと表示崩れへの対応のバランスを取ることが大事です。
２．ブラウザによる表示崩れのデメリット
ブラウザによってWEBページの表示が崩れていたり、もしくは表示もされていない状態だったりする場合には、それを放置するといろいろなデメリットも出てきます。
まず、そのブラウザから閲覧しているほとんどの訪問者さまが、内容を読む前に離脱してしまいます。やはり表示がおかしいWEBサイトは信頼性も下がってしまうので、なかなかじっくり読んでもらうのは大変です。
一度バックボタンを押したら、もう戻ってくることはなく、離脱につながります。
せっかく検索エンジンで上位となっていたり、良いコンテンツをつくっていたりしても、それらに全く関係がない”表示崩れ”のために、読んでいただけないWEBサイトになってしまうということです。それを知ってしまうと、「もったいないな」と思われる方もいると思います。
○SEOの側面からも大きなデメリットに
訪問者さまがすぐ離れてしまうことを離脱率といいますが、離脱率が高いと検索エンジン（＝Google）からの評価が下がります。Googleはできる限り多くのユーザーがそのWEBページを見られるようにし、内容がきちんと伝わるようにするべきと明示しています。
離脱率はアクセス解析ツール「Googleアナリティクス」で確認できます。
このように検索エンジン対策としてもデメリットがありますし、何よりもせっかく来てくださった訪問者さまが良い情報にたどり着けず困ります。そして、売上にも直結してきます。
WEB制作時にはブラウザ対応をどこまで（どの範囲で）行うのがベストか、ブラウザのシェアや自社サービスのユーザー層を確認しながら事前に制作するスタッフと相談して決めておくことが大切です。
３．各ブラウザの表示チェックツールと使い方
さまざまなブラウザの表示を一度にチェックすることを「クロスブラウザチェック」といいます。WEBサイト、WEBページが自分が見えている環境以外でも同じように正しく表示、動作しているかを確認する作業です。
制作を依頼している場合は「このブラウザのこのバージョンまで対応したい」と相談してクリエイティブ職にチェックをお願いするとよいのですが、まずは自分で確認したいという担当者さまもいらっしゃると思いますので、以下のチェックツールをご紹介します。
まずいちばん手軽なツールは会員登録をせずオンラインで使える「Browserling」です。
WindowsやAndroid機での表示が確認できます。
https://www.browserling.com/
真ん中の欄に確認したいWEBサイトのURLを入力します。
その欄の下のタブでチェックするOS、ブラウザを入れると即時チェックが可能です。
表示に問題がなければツールバーの下にWEBサイトが表示されます。
問題があればその点の指摘があり、WEBサイトが映りません。
そのほかにもっと細かなブラウザのテストをしたい場合は、会員登録が必要ですが、以下の2つのツールがあります。
○LAMBDATEST
https://www.lambdatest.com/
会員登録が必要なだけあって、ブラウザの種類は豊富にチェックできます。
ただ古いバージョンなどをチェックするには有料プランへの登録が必要です。
○BrowserStack
https://www.browserstack.com/
こちらも会員登録が必要ですが細かなチェックができます。
広告代理店さまなどで利用しているお話しをよく聞きます。私も利用していますが非常におすすめです。
有料プラン限定の機能もありますが紹介させていただきました。
まとめ
「表示が崩れている」といっても、単純に制作の問題である場合だけではなく、ブラウザ、OS、それぞれのバージョン、さらにはPCかスマートフォンか、などさまざまな要素が絡み合っています。
全部のチェック、全部の対応は難しい面もあります。官公庁だけでなくYahoo！など大規模ポータルサイトもInternet Explorerの古いバージョンは対象外としています。
「どこまで対応するか制作担当者と相談して決定しておき、制作はその基準に沿って行う」→「訪問者さまには推奨環境を明記する」という形での対応がよいのではないかと考えています。
これからもブラウザやそれぞれのバージョンのシェアはどんどん変わっていきます。また、パソコンからのアクセスはより減少、スマートフォン、タブレットからのアクセスが増加してくるでしょう。最新の利用動向を確認しながら制作を行うことをおすすめ致します。