[web自由研究 vol.1]大手携帯電話販売会社3店舗を調べてみた

webの技術を覚える・理解するには、手を動かすことも大事ですが、観察・分析なども大事!
なので定期的に時間をかけて企業のwebを観察してみようと思います。

テーマの軸として選ぶのは・・・
・割と幅広い層が閲覧するであろうページ
・大手(≒web集客に力を入れられる予算のありそうな)企業
・競合がいる企業
という視点で選びました。

今回は、携帯電話や回線だけでなく、電気やカードなどさまざまなビジネスを手掛けている大手携帯電話販売会社をリサーチしました!
言わずと知れた大手3社のdocomoau・softbankです。

カラーバリエーション

大雑把なカラーパレットを作成しました。また、アクセシビリティの観点からP型色覚、D型色覚のキャプチャを掲載します。

docomo

P型プレビュー

D型プレビュー

au

P型プレビュー

D型プレビュー

softbank


P型プレビュー

D型プレビュー

ブラウザ対応(PC)

ブラウザ対応というより、古いInternet Explorerにどのくらい対応しているのか、です。
TOPページを表示や動作の崩れがないか検証しました。PCブラウザのみです(スマホは私のところに環境がないため、ごめんなさい!)
検証にはInternet Explorerの開発者ツールにて確認しています。

表にしてまとめました。結果はこんな感じです。

最新版 IE10 IE09 IE08
docomo
au × ×
softbank ×  ×

docomoがIE9までしっかり見られました。auとsoftbankはIE9以下だと一部表示されなかったり、レイアウトが崩れてしまいました。
またdocomoはIE8以下で「当サイトは最新のInternet Exprolerでの閲覧をお勧めします。」というアラートが表示されます。(Chromeって書いてくれると100点だったな!)
古いブラウザだと速度もかなり遅くなりますね。ブラウザのバージョンをアップデートする言い訳利点をまたひとつ理解できました!

速度

昨今非常に重要視されている速度。
スマートフォン用サイトをchromeのNetworkのタブから計測してみました。
一回だけの計測だと偶然サーバーに負荷がかかっていたという可能性も出てしまうので、時間を置いて3回に分けて計測し、平均値を出しました。
どれもシークレットウィンドウでスーパーリロードをして計測しています。時差は1秒程度です。
結果がこちら

request transferred Finish DOMContentLoaded Load
docomo 219.6 1.6mb 8.23min 1.113s 1.66s
au 263.3 3.13mb 58.13min 2.42s 4.43s
softbank 147 3.96mb 3.25min 634ms 1.356s

softbankが安定した数字を出していました。リクエスト数もsoftbankのみ少なめだったので、スマホのコンテンツを精査しているのでしょうね。

その他

  • CSSの命名規則に関しては、3社とも基本的にはスネークケース(main-content)、ところどころキャメルケースやケバブケースを使用しているという感じでした。
  • 言語対応は3社とも日本語と英語のみ。
  • auの「商品・サービスラインアップ」部分のアニメーションはpngを使用している模様。かわいい。

vol.1とある通り、不定期にやっていきたいと思います。
観察を行って良いところをどんどん真似していって、自分の技術に取り入れてしまおうと思います!