リリース目前！その前に重要なブラウザチェック

こんにちは、ディレクターのともぞうです。
ディレクター連載「いいWebつくろう〜クライアントと制作会社〜」の第15回のテーマは、ブラウザチェックについてです。

デザインしたWebサイトが実際にブラウザで表示できるようになったあと、さまざまなブラウザで表示・動作確認をおこないます。その際に、重要になってくるのが動作保証環境(注)です。今回は、動作保証環境についてと、表示確認をする上で気を付けたいことについてご紹介します。
(注)LIGでの呼び方のため、各制作会社で呼び方が異なる場合があります。

動作保証環境とは？

Webサイトがデザイン通りに表示されていることや、アニメーションが問題なく動くことを保証する環境のことです。
例えば、古いInternetExplorer（以降IE）であるIE9を対象として含める場合は、IE9でも最新のブラウザであるIE11と限りなく相違ないように表示・動作するようにして、リッチな体験や情報を届けられるようにします。

LIGとしての動作保証環境

LIGが設定している動作保証環境の基本は以下の通りです。
各制作会社で設定は異なりますので一例としてご紹介いたします。

これら以外については、基本的にプログレッシブ・エンハンスメントの考えに基づいて対応を進めます。
プログレッシブ・エンハンスメントについては、こちらの記事をご参照ください。
(注)2016年3月時点のものです。

知っておきたい！新旧ブラウザの見え方を最適化する「プログレッシブ・エンハンスメント」

なっちゃん

2016.03.11

動作確認の基準

LIGがおこなうチェックでは、PCとスマホで基準が異なります。

PC

WindowsのChrome最新版などOSとブラウザのバージョンを基準に動作確認をおこないます。

スマホ

XperiaのSO-02Gなど端末を基準に動作確認をおこないます。

なぜスマホは端末を基準にするのかというと、端末固有のバグがあるためです。特にAndoroid OSはオープンソースで提供されているため、各メーカーがカスタマイズしていることがあります。そのため端末ごとに挙動が異なることもあり、OS基準にしてしまうとすべてをカバーするのが難しくなってしまうためです。
また、レスポンシブWebデザインにした場合、画面の幅も影響してくるためとても追い切れない数のパターンが生まれてしまうのです。

これらのことから、LIGではシェア率の高いといわれている端末を検証端末として保有しています。

LIGが保有する検証端末

LIGが保有している端末の一部です。基本的にはこちらの端末で動作確認をおこないます。ここに記載されていない端末でのチェックをご要望の場合は、レンタルや外部検証サービスを利用し、確認環境を整えます。

スマホ

PC

LIGでは基本的にMacが支給されるため、Windows機を動作確認用として保有しています。ここで挙げたのはあくまでも一部で、2016年3月時点で計29機保有しています。

動作保証環境以外へ対応を考える

まずは、ターゲットがどんな環境でWebサイトを見ることが多いのかを考えるといいかもしれません。

いくらMicrosoftが「古いIEのサポートを終了した！」といっても、企業で使用するPCは交換をするだけでも莫大な費用がかかってしまい、アップデートが追いついていない状況も少なからずあるかと思います。
そのためBtoBのWebサイトであれば、IE9なども対象に含めた方がより多くのターゲットにリッチな体験や情報を届けることができるかもしれません。

そういった背景から、動作保証環境の設定は適宜変えていくことがあります。
「どういった特性をもつユーザーをターゲットに据えるか」から一緒に考えて設定していきましょう。

動作保証環境以外の対応する場合の注意点

検討した結果、IE9なども対象に含めようとなった場合、注意したいことがあります。
それは費用がかさんでしまうことです。
2つの大きな理由があります。

• 古いブラウザへの特別な対応が必要
• 確認作業の増加

それぞれ解説していきます。

古いブラウザへの特別な対応が必要

IE9などの古いブラウザだと、ブラウザ自体にバグがあったり、新しい技術を使用できないことがあり、最新のブラウザであれば、手軽に対処できるところに一手間加える必要があったりします。そのため、作業が増えてしまい高コストになってしまいます。

確認作業の増加

対象環境が増えると確認することも増えてしまい、人の稼働が発生することになります。そのため費用があがってしまうことになるのです。

例えばIE9を対象と含める場合はIE11、10、9の3つのブラウザでの確認もおこなう必要がでてきてしまいます。
IE11だけを対象とした場合と比べて、2種類の確認環境が増えてしまうことになります。

バグ(不具合)を見つけたら

ここからは表示確認をおこなう上で気をつけたいことです。
「コーディングが完了しました！」と制作会社から連絡があった後、表示確認をおこないますよね。その際におかしいところを見つけたら報告をするかと思いますが、そのときに気をつけていただきたいのが以下の3点です。

• どんなバグがどこで発生しているのか
• どのブラウザでバグを発見したか
• どの状態が正しいのか

制作会社側から見て、それぞれがなぜ助かるのかを説明していきます。

どんなバグがどこで発生しているのか

そのバグによってどんなことが起きているのかを教えてほしいです。
例えば、ボタンがデザイン比べて位置がずれてしまっているよ！　だったりボタンをクリックしてもアニメーションしないんだけど！　というものです。

いったいどういうバグがどこで発生しているかがわかると、探す時間を省略できて素早く対処することができます。

どのブラウザでバグを発見したか

実はブラウザごとに挙動が異なることがあるため、Chromeで見ていたか、IEで見ていたかという点も重要になります。
また、可能であればそのブラウザのバージョンも教えてもらえると非常に助かります。例えばChromeはバージョンアップが常におこなわれているため、自動更新にしていない場合、気づかずに古いChromeを使用している可能性があるからです。

どの状態が正しいのか

そのバグが直った！　となるゴールを共有してもらうことで認識のズレなくスムーズに作業ができます。
見ればわかるだろうと思うようなバグでも、明確なゴールを提示してもらうことが重要になります。

まとめると

例えばこんな感じで教えていただけるととても助かります。

例

• バグ内容：TOPページのメインビジュアルのスライダーが崩れている
• 確認環境：IE10
• ゴール：デザイン通り正しく表示されて、スライドすること

バグ1つ報告することに対して少し長くて面倒と感じるかもしれませんが、最後の仕上げだからこそお互い手を抜かずに進めていきましょう！

まとめ

Webサイトは最終的にブラウザに表示されるため、どのブラウザを対象に含めるかも重要になってきますが、ターゲットを想像して利用が考えられるブラウザを対象にすることがポイントかと思います。とりあえず古いブラウザもカバーしておきたい！　という理由だけだとコストだけが膨れ上がって効果が見えにくいものになってしまうかもしれません。
「どういったブラウザを対象にするか？」というところから一緒に考えることができたら我々としてもうれしいです。

また、ブラウザでの表示確認まで来たらWebサイトのリリースまであと少しです！　だからこそ手を抜かず一緒にブラッシュアップをしていけたらうれしいです！

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。