ブラウザーチェックすべきブラウザーの種類を把握する方法

browser

この記事は約 5 分で読めます。


WEBサイトの制作の最終段階でのお話ですが、たくさん存在するブラウザーでの表示において、デザイン・レイアウト的な崩れが無いかチェックするのは、WEB制作者として責任を持って対応しなければ行けない仕事です。

HTMLコーディングを行う方、ディレクターは確実に実施する必要がありますし、「すいません。ページを見たらこの部分がちょっとズレてるんですが、、、」なんてことをクライアントに言われてしまうと、WEB制作者としての信用がガタ落ちです。

しかしブラウザーと言っても、各ブラウザーのバージョンまで考えると本当にたくさんのものがあり、どこまでブラウザーチェックの対象にする必要があるのか悩んでしまいますよね。

そこで今回は、ブラウザーチェックすべきブラウザーの対象の決め方について整理し、そのブラウザーチェックを簡単に行うためのツールを紹介致します。

ブラウザーチェックの対象を決める

世の中の需要をチェックする。

実際にどのブラウザーがどの程度利用されているのか?
日本では?世界では?どのくらいの割合で利用されているかご存知ですか?

あまり利用されていない、使っている人が少ないブラウザーでの表示をチェックしても、実際に見る人が少ない場合、意味が無い作業になってしまいます。

「実際にどのブラウザーがどの程度利用されているか?」は下記のサイトでいつでも最新版のチェックが可能です。
http://gs.statcounter.com/
img_browsewcheck01

このページを開いて最初に表示されるのは、全世界での利用割合です。
やはり国によっていろいろ流行があるのか、使っているブラウザーの割合は大きく異なります。

そのため日本国内での割合をチェックしましょう!
その方法は、下記のようにグラフの下にある「JAPAN」を選びます。
img_browsewcheck02

最初の設定だと、「どのブラウザーが利用されているか」だけで、それぞれのバージョンの情報までが含まれていません。そのため、下記のようにブラウザーのバージョンまでチェックできるように「Browser Version」を選びましょう。
img_browsewcheck03

そして、期間についてはデフォルトでは過去1年間になっているので、グラフ下の「Period」で期間を最新のものが分るように設定し、グラフの種類も右下に表示される「Bar」を選んで棒グラフにすると分りやすいでしょう。
img_browsewcheck04

この結果を見ると
・IE 11.0 - 約28%
・Chrome 35.0 - 約25%
・Firefox 29.0 - 約7%
・Firefox 30.0 - 約5.5%
・IE 8.0 - 約5.5%
・IE 9.0 - 約5%
・IE 10.0 - 約5%
・Safari 7.0 - 約3%

となっています。「IE(Internet Explorer)」の最新バージョンが一番多いですね。
Googleのブラウザー「Chrome」も頑張ってますね。
この2つのブラウザーが大多数を占めていることが分ります。

実際に見ている人は、何を使っているかチェック

このような情報を調べる時に毎回活躍するのが、Googleアナリティクス(グーグルアナリティクス)のアクセス解析情報です。

この情報からどのブラウザーが利用されているかチェック可能です。

「ユーザー > ユーザーの環境 > ブラウザとOS」をクリックするとブラウザーの利用割合を見ることが出来ます。
これによると、先ほどの「Stat Counter」で調査した様な順位で表示されますね。
img_browsewcheck05

上記の数値が、「Stat Counter」と少し異なるのは、全てのバージョンを合わせた数値になっているからでしょうか?。。
更にそこからどのバージョンがどの程度利用されているか、をチェックするのは、上記画面の「ブラウザー名」部分をクリックするとバージョンごとのデータを見ることが出来ます。
img_browsewcheck06

こちらの赤枠内は、IEの中でのバージョンの割合なので、全ブラウザー内での割合を計算する時は、それぞれをかけ算します。IE11.0の場合は「40.11% × 39.58%」で『15.88%』になります。

全体の割合の5%を目安にきめてます。

この全ブラウザーの中で、利用割合が5%以上のものは、チェックするようにしましょう。
5%以下のものは、、、無視してしまっても良いかと思います。

そうすると、一昔前までは表示に問題の多かったIE6.0はチェックしないことになりますね^^
本当にブラウザーチェックは一度エラーが見つかると、その解決までに結構時間がかかってしまいます。

多くの制作者さんは、IE6.0の表示に悩まされてきたのかと思いますので、最近のこの利用者が少なくなっていることはとても嬉しいですね

ブラウザーチェックに便利なツール

ブラウザーチェックと言っても、どのようにチェックをすれば良いのか?っと悩んでしまう人もいるかもしれません。
もちろん主要なブラウザーを自分のパソコンにインストールして1つ1つチェックすれば良いのですが、その場合そのパソコンに入っている最新バージョンのブラウザーしかチェックできません。

ブラウザーチェックが効率的にできるツールがいろいろあるので紹介させて頂きます。

オンラインでチェックできるツール

Windows版、Mac版、Linux版の多種多様なブラウザでチェックできる「Browsershots」が便利です。
img_browsewcheck07

チェックしたいブラウザーのバージョンをチェックして、
チェックしたいページのURLを入力すればOKです。

しかし、チェックするのはベーシック認証などを掛けたテストアップ中かと思いますが、ベーシック認証を掛けたページだと使うことが出来ません。。。

パスワード等を入れなくても見れる場所にアップしてチェックする必要がありますね。

ユーザーエージェントを指定してチェックができる便利なツール

次は、たくさんのブラウザーをダウンロードしてそれぞれでチェックするのが面倒な人のために、1つのブラウザでいろいろなブラウザーでの表示をチェックできるツール、アドオンを紹介致します。

Firefoxのアドオン「User Agent Switcher」

まずは「Firefox」がパソコンにインストールされていないと行けません。
Firefoxは下記よりダウンロード・インストールしてください。
https://www.mozilla.org/ja/firefox/new/

次に「User Agent Switcher」をインストールします。

□「User Agent Switcher」のダウンロードは、下記サイトより可能です。
https://addons.mozilla.org/ja/firefox/addon/user-agent-switcher/

img_browsewcheck08

インストール完了後、ブラウザーを再起動して、
Firefoxのツールメニューから「Default User Agent」を選択します。

下記のようにブラウザーのバージョンも含めて
チェックしたいブラウザーを選択することが出来ます。
img_browsewcheck09

上記で選んだブラウザーでの表示になりますので、
その後チェックしたいページのURLにアクセスすれば、
表示を確認することが出来ます。

iPhoneなどのスマホでの表示も確認できる点も
とても使い勝手が良くてよいですね。

デフォルトでは、チェックできるブラウザーの種類が多くないですが、自分でチェックしたいブラウザーを追加できるのもこのツールのスゴいところです。

その方法は、
「ツール > Default User Agent > Edit User Agent…」の順でクリックします。

表示される下記の様な画面で「New User Agent…」をクリック
img_browsewcheck10

表示される下記画面にて、「Discription」「User Agent」を入力します。

img_browsewcheck11

「Discription」は自分で管理しやすい、任意の名前で大丈夫です。
「User Agent」は下記のサイトから、チェックしたいブラウザーを選択して、コピペするだけでOKです!
http://www.openspc2.org/userAgent/

簡単にチェックできますね。

まとめ

WEBサイトの最終段階において確実に必要な「ブラウザーチェック」は、
Googleアナリティクスなどの、実際にサイトに訪れているユーザーのデータから、全体の割合のうち5%以上のものを対象としてチェックしましょう。

そしてそのチェックには、インターネット上の便利なサービスもありますし、Firefoxで利用できる便利なアドオンもあります。もちろん両方とも無料ですので、効率的なチェックのために利用してみてください。

コンテンツマーケティングの教科書7ステップガイド

成功しているECサイト店長は知っている
コンテンツマーケティングで継続的なネット集客を実現し、売上アップに成功するための最新の方法を理解できます!

STEP-1 コンテンツマーケティングとは?
STEP-2 “コンセプト”と“ペルソナ”を設定する
STEP-3 集客用ブログを構築する(Wordpress編)
STEP-4 集客用ブログを構築する(SNS活用編)
STEP-5 無料オファー設定・LPの作成方法
STEP-6 ステップメールでファン・顧客を作る方法
STEP-7 リピーターを獲得するメールマガジン活用方法

ダウンロード

最新の記事情報が取得できます。