2020年版・Webサイトのブラウザチェックを超簡単に行う方法

オウンドメディアなどWebサイトを立ち上げたり、リニューアルしたりするとき面倒な作業といえば、ブラウザチェック。ブラウザチェック作業自体も手間がかかりますが、まずどのブラウザ・OSを対象にすればいいのかを決めるのも悩むところですよね。

最近はBtoBのWebサイトでも、PCだけではなくスマートフォンやタブレットで閲覧するユーザーも増えてきました。対応範囲が広くなり、ますますブラウザチェックの負担が増えているのではないでしょうか。

ちょうど2020年8月、マイクロソフトが旧ブラウザ「Internet Explorer（IE）」のサポートを終了する予定という発表を行いました。こうした最新事情もおさえておきたいところ。

そこで2020年版として、効率的にオウンドメディアなどのWebサイトをブラウザチェックする方法についてまとめました！

まずはブラウザチェックの対象となるブラウザを絞り込もう

日本で使われているブラウザは？国内のブラウザシェアをリサーチ

ブラウザチェック対象を決めるには、日本全体でどのブラウザがよく使われているか、いわゆる「ブラウザシェア」を知っておきたいところ。「Stat Counter」というサイトでは、誰でも簡単にエリアやデバイス、期間を絞ってブラウザシェアを調べることができます。

ここでは2020年8月・日本エリアという条件で、PCとスマホそれぞれのブラウザシェアを調べてみました。

PCのブラウザシェア（日本・2020年8月）

• 1位 Chrome（58.9％）
• 2位 Edge（10.8％）
• 3位Safari（9.25％）
• 4位IE（9.2％）

出典：https://gs.statcounter.com/browser-market-share/desktop/japan/#monthly-202008-202008-bar

スマートフォン・タブレットのブラウザシェア（日本・2020年8月）

• 1位　Safari（59.0％）
• 2位　Chrome（34.1％）
• 3位　Samsung Internet Browser（2.8%）

出典：https://gs.statcounter.com/browser-market-share/mobile-tablet/japan/#monthly-202008-202008-bar

PCのブラウザシェアを見ると、Windows OSでは「Chrome」「Edge」、Mac OSでは「Safari」を対象にすれば全体の8割をカバーできることがわかります。

一方スマホとタブレットはiOSの「Safari」とAndroidの「Chrome」、この２つだけでほぼ8割カバーできますね。このあたりをWebサイトのブラウザチェック対象にすれば、ほぼ問題ないはずです！

バージョン違いのブラウザチェックは必要？

なおWebサイトのブラウザチェックというと、どのバージョンでチェックすればいいか？という点も気がかりではないでしょうか？

現在はほとんどのブラウザが自動で最新バージョンにアップデートされますので、最新バージョンのみブラウザチェックの対象にすれば大丈夫です（かつてはIE6とIE8など複数のバージョンでブラウザチェックすることもありました）。

Internet Explorerは今後どう扱えばいい？

冒頭でも紹介した通り、マイクロソフトが正式にIE（現在最新バージョンは11）のサポートを終了する予定と発表しました。といっても以前から話は出ていたので、急な話ではないですが。

ただ日本では、IEの利用率がまだわりと高いんですよね。上記で紹介した2020年8月のブラウザシェア（日本エリア・PCのみ）を見ると、IEのシェアはなんと約9％もありほぼSafariと同じぐらいあります。

一方で世界全体で見ると、IEのシェアは2.6％しかないんですよね。日本が特にIE利用率が高いというわけです…。

この理由は、おそらくですが日本企業が社内向けシステムなどをIEベースで開発していたため。オウンドメディアなど外部ユーザー向けWebサイトで言えば、IEのシェアが現状高くてもあまり気にする必要はないと思います。

つまり今後Webサイトを立ち上げたりリニューアルしたりする場合は、サポート終了予定であるIEはブラウザチェックの対象外にしたほうがいいでしょう。すでに大手の制作会社では、IEをブラウザチェックの対象外にしているところもあります。

自社サイトがどんなブラウザで見られているかもチェック

もしすでに自社のWebサイトやリニューアル前のWebサイトがあれば、アクセス解析をしておくのもお忘れなく。どんなブラウザで実際にアクセスされているか、参考までにチェックしておきましょう。

Googleアナリティクスの場合、以下のページでデータをチェックすることができます。

• ユーザー＞テクノロジー＞ブラウザとOS

なおスマートフォンかPCかについては、以下のページで割合を見ることができます。

• ユーザー＞モバイル＞概要

Webサイトの扱うテーマによっては、一般的なブラウザシェアと比率が多少違うこともあります。念のためチェックしておくと安心です。

ブラウザチェックの実作業では、ツールを使って効率化しよう

ブラウザチェックの対象をある程度絞り込みできたら、実際にブラウザチェック作業に入ります。ここでもできるだけ効率化を目指したいところ。

特にここ最近ブラウザチェックで注意したいのが、スマートフォンでの確認。スマホはPCと表示サイズが大きく違うこともあり、表示が崩れたり一部が表示されなかったりといったトラブルになりがち。念入りにチェックしたいところです。

ただしスマートフォンの実機でブラウザチェックしようとすると、意外と面倒ですよね。公開前のWebサイトになると、個人所有のスマートフォンではアクセス制限がかかっていてブラウザチェックできないなんてケースもあります。

こんなときは、ブラウザチェックツールを使うのがおすすめ。ブラウザチェッツールは、指定したデバイスやブラウザでWebサイトにアクセスしたのと同じ状態を表示してくれます。これなら普段使っているPCを使って、iOSのSafariのブラウザチェックも可能になるというわけです。

ブラウザチェックツールを使ってみる

ブラウザチェックツールとしては「BrowserStack」や「Browserling」といったものがよく知られています。

• BrowserStack https://www.browserstack.com/
• Browserling https://www.browserling.com/

「BrowserStack」「Browserling」ともに無料版と有料版が用意されています。無料版でもある程度は使えますが、いろいろな機能を使おうとすると有料版にアップグレードする必要が出てきますね。またどちらも海外のツールなので、ちょっと使い方がわかりづらいかもしれません。

Chromeブラウザの「デベロッパーツール」なら無料でブラウザチェックできる

実は「Chrome」ブラウザでも、スマートフォンや他のブラウザの仮想環境を作る機能があるんです。この「デベロッパーツール」を使ってブラウザチェックするという方法もあります。

デベロッパーツールの使い方

Chromeメインメニュー（右上にある「…」ボタン）＞その他のツール＞デベロッパーツールを選ぶと、デベロッパーツールのウィンドウが表示されます。「User Agent」という項目にて「Select Automatically」のチェックを外すとブラウザを選択できるようになります。

Chromeのデベロッパーツールでは、画面サイズをスマートフォンやタブレットにしてブラウザチェックすることもできます。デベロッパーツールウィンドウの上にあるスマホのアイコンをクリック。すると画面サイズやデバイスを選択できるようになります。

Chromeでここまでブラウザチェックができるって、意外と知られていないですよね。ぜひ使ってみてください！

ブラウザチェックを自動化できるツールもある

「BrowserStack」「Browserling」や「Chrome」のデベロッパーツールは、基本的には複数のブラウザの仮想環境を作れるというもの。実際にWebサイトにアクセスして画面表示に問題がないか見るには、やはり手作業になります。

ただ、こうした作業も自動化できるツールが最近は登場しています。例えば「Autify(https://autify.com/ja)」というツール。「Autify 」はAIを搭載したソフトウェアテストの自動化ツールですが、実はブラウザチェックの自動化も可能なんです！ただしブラウザチェックのみとして使うには、ちょっとコストが高いですね。

特にスマートフォンで画面表示に問題があると、致命的なことも。例えばオウンドメディアで「記事の続きを読む」ボタンが実はタップできないところに表示されていた…なんてことになったら、大問題ですよね。

こうしたトラブルを避けるためにも、実はブラウザチェックは重要なんです！IEのサポート終了予定の告知にあわせて、あらためてブラウザチェック体制ついて検討してはいかがでしょうか？