Hatena::ブログ(Diary)

IT戦記 このページをアンテナに追加 RSSフィード Twitter

2011-12-09

Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア )

はじめに

みなさん、お元気ですか><リリースも終わって、一息ついたあまちゃんです!

ヽ(´ー`)ノわー

さて今日は、最近「お花サプライズ!」というサービスをリリースしたのですが、そのときにちょっと面白いデータを見つけたのでそのいきさつも含めて紹介したいと思います。

f:id:amachang:20111209032253p:image

(今日のテーマはこの円グラフ)

フェイスブック系のサービスはどのブラウザに対応すれば良い?

よく、ウェブサービスを開発するときの悩みとして「古いブラウザでのデザインをどのくらいケアするか?」というものがあります。

「お花サプライズ!」でも、割と短い期間で実装することを目標としていたり、本番の HTML を書いた経験があまりないメンバーが多くいたことで「IE6IE7 への対応が鬼門なんじゃないか?」という心配が常にありました。

そこでよぎる甘い誘惑

このご時世、 IE6 とか IE7 に特別対応する必要なんてないんじゃね?

で、調べてみると大概の場合は「やっぱり IE6IE7 は無視できない… orz」となるのですが、「お花サプライズ」は、ターゲットユーザをフェイスブックだけに限定しています。

フェイスブック自体が「IE6 を非推奨にしていたりする」ということもあるので

ひょっとしたら IE6IE7 をそこまでケアしなくても大丈夫なんじゃないだろうか?

そう思って、ちょっと調べてみました。

ウェルカムページメーカーのデータをもとに調べる

実は、お花サプライズ!を作る前にちょっと作ったプチサービスがありまして、それがフェイスブックページのウェルカムページを作るサービス「ウェルカムページメーカー」です。

作ってからずっと放置してるんですけど、何げにずっと伸びてて、今は 3100 ページ以上のフェイスブックページに導入されていて、月間ユニークユーザーベースで 110,000 人からのアクセスがあります。

f:id:amachang:20111209030036p:image

(9月〜今日までの訪問数、にょきにょき〜)

使われているページも、アナウンサーのページや、 歌手のページ、アニメのページ、EC サイト、企業のページ、個人のページと色々なページに使われていて、そこまで偏りはないと思うので、このサービスの統計をもとにフェイスブックでのブラウザシェアを考えてみたいと思います。

また、フェイスブックのウェルカムページを見れるのは基本的には PC なので、モバイルはこの統計には含みません。

昨日から 30 日前までのデータを使う

まずは、バージョンを問わないブラウザのシェアを見てみると以下のようになりました。

訪問数ベース↓

f:id:amachang:20111209032250p:image

PV ベース↓

f:id:amachang:20111209032251p:image

やはり、 IE を使っている人が多いですね!

では、次に IE をバージョンごとに分割したグラフを作ってみます。

訪問数ベース↓

f:id:amachang:20111209032253p:image

IE6: 3.15%、 IE7: 5.09%

PV ベース↓

f:id:amachang:20111209032252p:image

IE6: 3.78%、 IE7: 5.87%

表にまとめると以下のようになりました

ブラウザ訪問数(%)PV(%)
IE63.153.78
IE75.095.87
IE827.9232.81
IE914.8619.04
IE100.000.00
Chrome23.0416.36
Firefox14.3413.77
Safari8.686.16
Android Browser1.520.98
Opera0.510.52
0.890.71

やはり、フェイスブックユーザに限定すると IE6IE7 のユーザが少ないことが分かりますね。

ブラウザに対応するために必要なコスト

次に、各ブラウザに対応するコストを僕の主観で数値化してみる

以下の数値は、プロジェクト全体でかかる時間のうち、特定ブラウザへの対応時間以外にかかる時間を 1000 としたときに、どのくらい時間を費やす必要があるかを数値化したもの

ブラウザJavaScript で同じ挙動を実現するのに必要な時間CSS で文言が見えないなどの大きな崩れを解消するのに必要な時間CSS で見た目の崩れをすべて解消するのに必要な時間
IE6102060
IE7101030
IE8215
IE9213
IE10212
Chrome111
Firefox111
Safari111
Opera512

単位訪問あたりの作業時間を計算してみる

サービスへの訪問数 1% あたりのコストを計算してみる

ブラウザ1% の訪問に対して JavaScript で同じ挙動を実現するのに必要な時間1% の訪問に対して CSS で文言が見えないなどの大きな崩れを解消するのに必要な時間1% の訪問に対して CSS で見た目の崩れをすべて解消するのに必要な時間
IE63.176.3515.87
IE71.961.965.08
IE80.070.040.18
IE90.130.070.20
Chrome0.040.040.04
Firefox0.070.070.07
Safari0.110.110.11
Opera9.801.963.92

このように見ると IE6CSS のくずれを直すこと、また、 Opera の JavaScirpt に対する修正があまり生産的でないことが分かりますね><

というわけで「お花サプライズ!」では

以下のようなポリシーでブラウザ対応することにしました

  • IE6
    • JavaScript はちゃんと動くように
    • 大きく崩れてても気にしない。ただし、押せないリンクやボタン、隠れて読めない文字があるのは許さない
  • IE7
    • JavaScript はちゃんと動くように
    • レイアウトが大きく崩れてるようなのは修正。多少の崩れは気にしない。押せないリンクやボタン、隠れて読めない文字があるのは許さない
  • Opera
    • 試さない(運任せ)
    • きっと、 Opera さんならやってくれる…!!!
  • 全般的に

まあ、そもそも

特定ブラウザに「対応する」って言い方はあまりよくないですね(><ごめんさない

こういう場合は、「なるべく多くの人が使ってるブラウザが実装してない仕様を使わないようにする」というのが正しいのかもしれません。

まあ、何にせよ。

これだけ色々な種類のブラウザが出てくると一つ一つのブラウザへの対応というものの重要性は薄れつつあるのかもしれませんね。

それなりに多くのブラウザでそれなりに動くのがちょうどいいと思うのですよヽ(´ー`)ノ

最後に

みなさんも、フェイスブックユーザをターゲットとしたサービスを作ることがあれば参考にしてみてくださいー

ではではーヽ(´ー`)ノ

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

トラックバック - http://d.hatena.ne.jp/amachang/20111209/1323396944