2014/06/23更新

[フロントエンド] 現在のブラウザシェアをサクッと把握したいならStatCounterが便利

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
今日はブラウザシェアを簡単に調べられる方法をご紹介したいと思います。

画像

Special Thanks to https://flic.kr/p/9zbbkX




目次




StatCounterとは

StatCounterとはサイトのアクセス解析を行うことができるツールで、 いうなればGoogle Analyticsと同じようなものです。
一般的な使い方としては、アカウントを登録して、発行されたアクセス解析用のプログラムを自分のサイトに埋め込んで、StatCounter上でUUとかPVとかを閲覧するという使い方です。 しかしStatCounterのすごいところは、それらの情報を集計して世界や国別のブラウザシェアなども確認できる機能を用意しているところです。

具体的な使い方を見ていきましょう。



StatCounterの使い方

ここでは簡単にStatCounterの使い方を説明します。

※執筆時点での使い方のため、本記事をご覧頂いている時には変わっているかもしれません。

 

まずは表示してみる

まずは表示してみましょう。http://gs.statcounter.com/にアクセスします。 アクセスすると以下のように、全世界でのブラウザシェアを確認することができます。
画像

日本のブラウザシェアを確認する

きっと本ブログをご覧の方であれば、日本でのブラウザシェアを確認したいはず! 国別のブラウザシェアを表示するには、以下図のRegionでJapanを選びます。
画像

表の表示形式を変更する

折れ線グラフで時系列でのブラウザシェアの推移も大切な情報ですが、ある時点でのブラウザシェアも知りたい場合がありますよね。 その場合には、ページ右側にあるグラフの種類を変更することで目的の情報にアクセスすることができます。以下ではBarに変更してみました。
画像

モバイルのシェアも表示する

さていままでの表ではデスクトップブラウザしか表示されていません。 モバイルのシェアを確認するには画面左下のStatをクリックして、表示したいブラウザにチェックを入れます。
画像
例えばPlatformでMobileのチェックを追加した場合は、以下のスクショのような表示に成ります。
画像

その他にも

上記で紹介した以外にも「Screen Resolution(画面解像度別)」「Browser Version(ブラウザバージョン別)」「Operating System(OS別)」などがあり、色々と便利そうです。


最後に

今回はStatCounterの紹介でした。このような統計情報を一般公開してくれているとはありがたいですね。 この情報を使って、プレゼン資料を作成したり、サービスのサポート対象を決めたり、デザインの基本サイズを決めたりできそうです。

最後までご覧頂きましてありがとうございました。





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。