こんにちは、ハヤマです。
今回は、ブラウザチェックについて書いていきたいと思います。
はじめに
ブラウザチェックとは、コーディングしたページがブラウザ上で正常に表示されているかを確認する作業のことを指します。 より良いサイトを作るには、サイト設計とそれに基づいたデザイン、実装するコーディングの知識やスキルがとても重要になりますが、 このブラウザチェックという作業も疎かにすることのできない工程です。 せっかく素敵なサイトが完成しても、情報が間違っていたりバグが残っていたら元も子もありません。 クオリティを上げるためにも、しっかりと確認することが大切です。
アームズではチェックのレギュレーションを社内で共有し、品質保持を心がけています。
とはいえ、日々様々なサービスが更新されているWebの世界。
少し前にもEdgeがChromiumベースになったりしましたが（おかげで、Edge限定で発生していたバグが少なくなりました（喜））、
状況に応じてチェック内容や方法も適宜改善しなければいけません。
今後気になるサービスや情報があればこちらのブログでも紹介できればと思ったのですが、
まずはそもそもの「ブラウザチェック」という作業について説明します。
ブラウザチェックで行うこと
「ブラウザチェック」で確認する対象として、大きく以下の内容が挙げられます。
※フォームの動作確認など動的な確認は別のテストとして扱っています。
①デザインデータとのスタイルの比較
- フォントスタイル（font-family、font-size、font-weight、letter-spacing、line-heightの値など）
- 配色（color、background-color、border-colorのコードなど）
- 余白（margin、paddingの値など）
②文字校正
- デザイン通りにテキストが挿入されているか
- 誤字・脱字がないか※
- 表記揺れ（例：「お問い合わせ／お問合せ」などの同一文言での送り仮名の揺れ、英数字の全角・半角混合など）※
※誤字・脱字、表記揺れに関してはデザインデータ制作時に確認を済ませておくのがベストですが、コーディング着手後に原稿が届いた場合はこのタイミングでチェックします。
③対象ブラウザでのレイアウト崩れがないか
横スクロールの発生（特にIE環境にて、flexバグが見受けられます）やブラウザ幅によって発生するカラム落ち、Webフォントが適用できずに代替フォントになる場合（IEなど）のレイアウト崩れなどが起きないかを検証します。
ブラウザの種類
PC
・Microsoft Edge
・Internet Explorer
・Google Chrome（Mac / Windows）
・Firefox（Mac / Windows）
・Safari
スマートフォン
・iOS Safari
・iOS Google Chrome
・Android Google Chrome
※サイト内容によって対象ブラウザは変わります。
※各バージョンは制作会社の規則やその時の状況で異なります。
個人的にブラウザ起因で起こる現象として、よく見受けられたと思うのは以下です。
特にIE（他ブラウザでもちらほら）：flexバグ問題
参考サイト：flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
IEでは他ブラウザと違って明確にボックスの幅を明示しないとレイアウト崩れを起こすことがあります。
Chrome（Windows）：游ゴシックのRegularがかすれて見える問題
参考サイト：【2020年版】游ゴシックを使ったおすすめfont-family指定 | なこラボ
WindowsのChromeでは、游ゴシックのRegular（font-weight: 400;（normal））の時に文字がかすれてしまいます。
（MacではMediumが適応されるため問題ありません。）
その他にも、游ゴシックを指定したテキストをIEで表示すると他のブラウザでは発生しない不要なした余白が発生するため、游ゴシックフォント使用の際は注意が必要です。
またスマートフォンでのチェックでよくあるのが、幅320pxのデバイスで発生するカラム落ちもしくは要素の重なり。 ですが、対象となるデバイスがギリギリサポート対象に含まれているiPhone SE（第1世代）のみとなったので、そろそろ検証対象は幅375pxからでも良さそうです。
④配置画像の確認
- retina対応になっているか（@2xの画像が設定されているか）
- 画像のAlt、SVGのtitleが正しい内容になっているか
⑤head内の情報確認
- titleが設定されているか
- descriptionなど、必要なmeta要素が設定されているか
- OGPが設定されているか
⑥リンクの確認
- リンク先が正しく設定されているか（必要に応じてtarget="_blank"を設定しているか）
- リンク切れを起こしていないか
⑦動画再生確認
- youtubeや動画ファイルが正常に再生されるか
⑧JavaScriptの動作確認
- ページスクロールやアニメーション、ソートなど、想定した動作が行われているか
ブラウザ環境ごと（特に多いのがIE）で異なる挙動をすることがあります。
また、複数のスクリプトを入れている場合に相互で影響して起きるバグもあるので、注意が必要です。
さいごに
以上、今回は基本的なブラウザチェック内容についてまとめました。
サイトのクオリティは落とさないよう確認しつつ、されど効率的に。
これらを大切に、今後もサイト制作に励んでいきたいと思います。
