ブラウザチェックはポイントを押さえて効率的に！
September 15, 2022
こんにちは。
アークコミュニケーションズ Web&クロスメディア事業部営業セクションです。
私たちは、お客様とのコミュニケーションの一環として、ニュースレターを配信しています。このニュースレターでは、Webサイトにまつわるちょっとした知識などを紹介していきます。
第16回は、効率的にブラウザチェックを行うための、注意ポイントやコツをご紹介します。
ブラウザチェックとは
ブラウザチェックとは、新しいWebサイトや新規コンテンツを公開する際、ブラウザ上での表示崩れの有無や、動作に問題がないかどうかを確認する工程です。ちゃんと表示していても、別のブラウザで見るとページの見え方や動きが異なることがあるため、チェックは欠かせません。
とはいえ、現在はWebの標準化が進み、従来のような大きな相違はかなり減ってきています。かつてのようにすべてのブラウザを事細かに検証するのではなく、ポイントを絞ってより効率的にチェックすることが重要になっているのです。
チェックするブラウザは絞り込む
かつては、WindowsやMacOS、スマートフォンのバージョンとInternetExplorer、Chrome、Firefox、Safariを掛け合わせて非常に多くの環境でチェックを行う必要がありました。
ところが、表示エンジンの共通化やWebの標準化により、ブラウザによる固有の動きはかなり少なくなりました。アークコミュニケーションズではブラウザのシェアや表示特性などを鑑みて、次のブラウザでのチェックを標準としていますので参考にしてみてください。
- Windows11：Google Chromeの最新版
- iOS 16：Apple Safari最新版
- Android 13：Google Chrome最新版
※ 2022年9月現在の標準。最新版はお問い合わせください。
※ 参考：PCでのWebサイト検証にEdgeやInternet Explorerはまだ必要？
PCの画面幅は必ず変更してチェックを
ブラウザ固有の表示崩れが少なくなってきた現在ですが、もっとも多い不具合が、表示している画面幅によって起こる表示崩れです。
ブラウザ幅を広くしたり、狭くしたりして挙動に問題がないかどうか、確認しましょう。
キャッシュに惑わされないチェック方法
修正を重ねたWebページの場合、修正前のキャッシュがブラウザに残り、修正後の状態がなかなか表示されないことがあります。キャッシュを無視する再更新（Windows Chromeの場合Shift+F5 または Ctrl+Shift+R）を使うのも手ですが、Chromeの「シークレットウインドウ」を利用すると、キャッシュがクリアされた状態のWebページを確認することができます。
シークレットウインドウはGoogle Chromeの画面右上の「⁝」から、「シークレットウインドウを開く」を選択すれば開くことができます。
※注意：サーバーキャッシュ等ですべてがクリアされない場合があります。
スマートフォンはエフェクトに注意
iPhoneとAndroidでは、画面をスクロールした際のエフェクトやアニメーション動作に差が出る場合があります。そのため画面を実際に動かしてチェックしましょう。
また、画面を横にした表示でも必ずチェックしましょう。
スマートフォンはOSの選定が大事
iPhoneについてはユーザーが最新のOSにアップデートする率が高いため、最新OSのもので確認しましょう。
一方で、Androidは機種の制限でOSが簡単にアップデートできないことが多いため、シェアの多いバージョンでのチェックが必要です。
＜上級編＞デベロッパーツールを使って効率的にチェック
Google Chromeのデベロッパーツールを使うと、画面幅や様々なOS、ブラウザでの表示をシミュレーションできます。本来は、正規の環境で見るのが理想ですが、機器が手配できない場合や、スピーディーにチェックしたい場合は有効です。
デベロッパーツールはChromeの画面上で右クリックし「検証」を選択するか、F12キーを押すことで、画面の右側か下部に表示されます（Windowsの場合）。
デベロッパーツールの「ビューポートコントロール」（様々な画面幅での見た目を確認できるツール）によるチェック方法は以下をご参照ください。
※参考：Google Chromeのデベロッパーツールでスマホサイトの表示をチェックする方法
デベロッパーツールの詳しい使用方法についてご質問がございましたら、弊社までお問い合わせください。
以上、効率的なブラウザチェックの参考になれば幸いです。 上記に関して、ご質問等ございましたら、お気軽に弊社までお問い合わせください。
関連記事
関連サービス
