Webサイトの公開前後にブラウザチェックをしていますか？
精度の高いブラウザチェックがWebサイトの品質を高めます。
こんな方におすすめ
- Webディレクターの方
- サイト運営をしている方
- ブラウザチェックの方法を知りたい方
上記のような方に、Webサイト公開前後に行うブラウザチェックについてお答えします。
わたしはWeb業界で20数年、働いているモノコト（@monokoto68）です。
これまで様々なWebサイト制作に携わってきました。
そんな現役WebディレクターがWebサイト制作のブラウザチェックについて教えます。
Webサイト公開前後に行う大事な仕事「ブラウザチェック」とは？
Webサイトも公開間近になると、基本的な部分は完成していることと思います。
ローンチに向けて、最終の詰めを行う段階で、ブラウザチェックを行います。
Webサイトのブラウザチェックとは、各ブラウザで正しく表示されているか、動作するかを確認することです。
現在さまざまなブラウザが使われています。
OSとブラウザ、その各バージョンによって仕様が異なるため、ブラウザごとにチェックが必要です。
チェックするブラウザは？
どんなブラウザで確認すればよいのでしょうか？
モノコトパソコンの場合は、WindowsのChrome、Edge、FirefoxとMacのSafari最新版で確認すれば十分でしょう。
世の中に出回っているブラウザを全てチェックすることはできません。
どのブラウザをどれくらいの深度でチェックするのかは、見積もりによります。
クライアントとの協議の上、ブラウザチェックする範囲を決定するのがよいでしょう。
指標としては、Googleアナリティクスでサイトに訪れているOS／ブラウザを確認して、ブラウザ対象範囲を決定します。
| OS | ブラウザ |
|---|---|
| Windows | IE |
| Chrome | |
| FireFox | |
| Mac | Safari |
| Chrome | |
| FireFox | |
| iPhone/iPad | iOS |
| アンドロイド携帯 | Android |
※各バージョンはその時の状況による
主なブラウザチェック項目
ブラウザチェックの項目
- 各ブラウザでの表示くずれ
- 動作不備（エラー）
- セキュリティチェック
- 文章チェック（誤字・脱字、表記揺れ）
各ブラウザでの表示くずれ
ブラウザチェックの第一の目的であるのが、表示くずれの確認です。
制作しながら随時確認をしていますが、第三者により全ページを細かく確認をしていくのがブラウザチェックの役割です。
コーダーやエンジニアは、制作中に複数ブラウザで確認をしながら作業を行っていると思いますが、全てで確認できているわけでありません。
よって、確認不足になるブラウザで表示くずれが発生することが多いのではないでしょうか。
最終段階で大きなくずれがあった場合、修正対応に余計な工数が発生するため、制作初期である基本コーディングが完了した時点で、大きな崩れがないかは確認しておくのがよいでしょう。
動作不備（エラー）
ブラウザによって仕様が異なるため、操作に不備が起こる場合があります。
Chromeでは動作していたプログラムがMacのSafariでは動かないといった具合です。
さらに、近年ではレスポンシブでWebサイトが構築されているため、PCでは動作してもスマホのAndroidでの挙動がおかしくなるなど、PCとスマホでの動作確認が必要になります。
レスポンシブWebサイトとは
レスポンシブウェブデザイン (Responsive Web Design, RWD) は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。
引用：ウィキペディア
確認方法は、要件仕様に基づいて各機能が意図した通りに動作するかを実施します。
テスト仕様書が用意されている場合もあるので、仕様書に沿って確認していきます。
セキュリティチェック
ブラウザチェックとは少し毛色が違いますが、セキュリティチェックも別工程で進めます。
SQLインジェクション、クロスサイトスクリプティングなどの対策は取られているかをチェックします。
チェックシートもダウンロードできるためご覧いただくと理解が深まるだろう。
文章チェック（文章のわかりやすさ、誤字・脱字、表記揺れ）
各ブラウザによって異なることはないのですが、ブラウザチェックで文章チェックも合わせて行います。
ユーザー目線に立って分かりやすい、読みやすい文章になっているか、誤字・脱字はないか、「下さい／ください」など表記揺れはないかをチェックします。
特に、価格・日付・曜日・人の名前は注意を払い確認しましょう。
ブラウザチェックに関するよくある質問（Q&A）
Web業界でWebディレクターとして20数年、働いてきたモノコト（＠monokoto）がお答えします。
ブラウザチェックはどれくらい詳しく見ていますか？
モノコト見積もり内容によります。
結局はどれだけの人をどれくらいの時間をかけるかによって、見積もりが変わってきますので、クライアントと協議の上、決定します。
予算がない場合は、「必要最低限は確認しますが、御社でもしっかり確認してくださいね」と話します。裏を返せば、少しくらい表示崩れがあっても大目に見てくださいと伝えていることになります。
ただし、制作する側としては最低限のクオリティは確保しなければならないため、ローンチまでのスケジュールで状況を判断しながらブラウザチェックを行います。
ブラウザチェックは誰が行っていますか？
モノコトWeb制作会社によって違うのではないでしょうか。
主に以下の3つがあると思っています。
①ブラウザチェックする専任チームが行う
②Webディレクターのチームで行う
③外部に委託する
会社やWebサイト規模によって異なるのではないでしょうか。
ブラウザチェックツールなど自動でできるものはありませんか？
モノコト全てを自動でチェックできるツールはないと思っています。
例えば、Chromeのブラウザ内で、他のブラウザやそのバージョンを切り替えて確認することができるWebサービスなどはありますが、一部を補うツールがほとんどです。
結局は、人が複数人で確認するのがよいかと思います。
公開後にもブラウザチェックは必要ですか？
モノコト必要です。
本番公開の仕方にもよりますが、特にFTPでファイルを上げ直したり、本番だけSSLに対応したりとテスト環境と本番環境で違うこともあるため、ブラウザチェックは必要です。
ただし、公開前にチェックしたのと同じ工数をかける必要はないと思います。
まとめ：ブラウザチェックはWebサイト公開前後に行う大事な仕事
ブラウザチェックはWebサイトの公開前に品質を高めるために行う大事な仕事であり、さらに公開後もブラウザチェックを行うことで安心して納品完了となるものです。
ブラウザチェックのポイント
- 各ブラウザでの表示くずれ
- 動作不備（エラー）
- セキュリティチェック
- 文章チェック（誤字・脱字、表記揺れ）
特にブラウザによって仕様が異なるため起こり得るのが、表示くずれと動作不備です。
これらの作業を行うのがブラウザチェックです。
しっかり確認して、クオリティの高いWebサイトを公開しましょう！
