こんにちは。アイレットデザイン事業部の黒木です。
アイレットデザイン事業部ではINSIDE UI/UXと題して、所属メンバーがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。
今回はマークアップが完了したページのブラウザチェックをどのようにしているのかを紹介していこうと思います。
ブラウザチェックとは
Webサイトなどは自分の作成環境でデザインがきちんと再現されていればそれで終わりではありません！
実際のユーザーがそのWebサイトを見る環境は様々です。
それに加えて作成したサイトが全ての環境で同じように表示されるとは限りません。
ブラウザ特有の仕様などがあり、それが影響してサイトの表示が崩れたりすることがあります。
そのため、本番環境に公開される前によく使用されるブラウザではきちんとサイトが表示されるかを確認する必要があります。
対象ブラウザについて
チェックするブラウザは案件開始時に「利用推奨環境」定義し、それにもとづいて確認を行います。
そのため案件によって対象ブラウザは変わってくるのですが、色々な案件を通して主に確認しているブラウザは以下になります。（2024年11月現在）
- Windows Microsoft Edge
- Windows Google Chrome
- Windows Firefox
- Mac Safari
- Mac Google Chrome
- Mac Firefox
- Android Google Chrome
- iOS Safari
- iOS Google Chrome
上記ブラウザも最新バージョンのみの確認だけでなく、シェアのことも考えて1つ前のバージョンまで確認することもあります。
各OSの対応バージョンは、最新バージョンもしくは最新含む2メジャーバージョンを対象とするケースが多いです。
Windows10については2025年10月にサポートが切れるため、開発期間が長いシステムの場合は予め対象から外すことも検討されます。
注意していること
①デザインチェック
まず、基本ですがデザイナーが作成したデザイン通りになっているか確認します。
この時見た目だけではなく動きなどがきちんと要件通りになっているのかの確認も行います。
▼例えば・・・
- ホバーアクション
デザインではホバー（マウスカーソルが要素の上に乗った時）して要素の見た目が変わった後のものを用意してもらいますが、どのように見た目が変わるかがデザイナーの意図通りになっていないことがあったりします。
そのため、実際の画面を見てきちんと意図通りになっているのかの確認が必要になります。
- モーダル
モーダルを開いて閉じる時に「閉じる」ボタンを押して閉じるようになっていることが多いですが、最近のモーダルではボタン押下以外にモーダル以外のところを押した際にも閉じるようになっていることがあると思います。
モーダルによってはモーダル以外のところを押しても閉じない方がいいなどもあるのできちんとその案件の要件通りになっているかの確認が必要です。
②文字溢れ・文字入力
文字溢れ
管理画面などの動的な画面では、作成時のサンプルテキストよりも実際使われるテキストの方が文字数が多くなる可能性があります。
文字数が多くなって改行などが起きた際に表示が崩れることがないかの確認をしています。
▼例えば・・・
- 長いテキスト
メールアドレスやURLなどの途中で切れず連続するテキストはデフォルトでは長くなっても改行してくれないため、画面外にはみ出してしまうことがあります。
それが原因で横スクロールが発生してしまうこともあります。横スクロールが発生してしまうとユーザーも使いづらくなってしまうため注意が必要です。
文字入力
各ブラウザで問題なく入力ができるかどうかを確認しています。
この時に入力形式が正しいものになっているかどうかも確認します。
▼例えば・・・
- コンボボックスである必要のある入力欄がテキストボックスになっていたりしないか
- パスワード入力欄がパスワード用のテキストボックス（文字を入力したら「●」などで文字が隠れる）になっているかどうか など
③JavaScriptの動き
ページ内でアコーディオンやページスクロールなどのJavaScriptが使用されている場合、各ブラウザでも問題なく動いているかの確認を行います。
④スマホ実機特有の動作確認
スマホのブラウザは画面スクロール時にブラウザのURL入力欄が隠れるなど操作によって独特な挙動をします。
ハンバーガーメニューの開閉や、スクロールに伴う固定要素の挙動など、PCブラウザのデベロッパーツールやエミュレーターではわからない部分は実機での動作確認を行います。
まとめ
Web制作過程であまり表に出てくるような作業ではないですが、ブラウザチェックは多くのユーザーが快適にサイトを使う上でとても重要な過程になります。
確認するブラウザ数も少なくないのと確認する内容も多いですが、より良いサイト作成のために今後もブラウザチェックは欠かさず対応していこうと思います。
