いよいよ、テスト環境から本番環境へサイトを移行…する前に。表示崩れは起きていないか、機能は正常かなどをチェックする必要があります。意外と時間がかかるテスト作業。見積もりが甘くて、リリースに間に合わない!ってことも。
今回はそんなことにならないように、Webサイトをリリースする前に確認すべきことを「レイアウト」「遷移」「機能」に分けてまとめていきます。
レイアウト編
レイアウトの表示はブラウザに依存します。safariやChrome、Firefoxなど「クライアントから指定されている」ブラウザでレイアウトを確認しましょう。開発担当に提出したデザインと一致しているか、デザイナーとプロジェクトマネージャーで確認します。
この後で説明する遷移や機能はブラウザ依存しないので、ブラウザを変えての確認はレイアウトのテストのみでokです。
- テストすること
- 仕様書通りの仕様になっているか
- モーションは仕様通りか
- 表示崩れは起きていないか
- 要素漏れはないか
- 上記をサイズ別で確認
サイズ別で確認する際、量が多くなるので必ずチェックリストを作成してからテストを始めましょう。開発担当の方にテスト結果を伝えるときにも、ひと目で表示崩れ場所を伝えるのに役立ちます。
Q:サイズ別で確認というのは、どういう意味ですか?
A:画面のpx最大値とpx最小値で、それぞれデザイン崩れや要素漏れがないか確認しましょう。pxの最大値と最小値はプロジェクトによって異なります。実機で見ると違う場合もあるのでブラウザの検証モードだけでなく、必ず実機で指定ブラウザでも確認しましょう。(検証モードだと大丈夫だったのに…ということも多々あるので、面倒かもしれれませんが”必ず”実機でも確認しましょう!)
実機では
- iPhoneX・iPhoneSE・iPadそれぞれで確認!
- iOSとAndroidで違うので、どちらでも確認
ちなみに… 375px(mini)が一般的に最小で、320pxはSEも対応になります。
▼Google Chrome 検証モードでのサイズ調整方法
「検証モード」→Elementsの左横にあるアイコン📱→左側の上部に表示されている「Dimensions」をResponsiveにする→数値変更で調整できます。
読み込みがおかしいな?という時は、スーパーリロード「Command+Shift+R」をしてみるといいと思います。
▼Safari 検証モードでのサイズ調整方法
Googleとsafariでは検証モードにする方法ががちょっとだけ違います。safariでは、設定しないと右クリックで検証の項目が出てきません。設定方法はこちらのサイトがとてもわかりやすかったです。
遷移編
- テストすること
- 各画面で正常に遷移できるか
- description title pathなどが仕様通りになっているか
Q:どうやってdescription title pathを確認するの?
A:拡張機能を使うと見やすいです。検証モードでも確認できますが、全てのページで検証モードで見ていくのは大変なので、拡張機能を使って一覧確認することをお勧めします。
拡張機のは、TDL Meta Checkerがおすすめ!クリック一つで、設定されているdescription title pathを確認できます。
ちなみに… フッター・ヘッターはページごとに確認しなくてok。全てに共通しているのでトップページで遷移に問題なければ大丈夫です。
機能編
- テストすること
- 各画面の機能が正常か
- スマホ時にメニューが正常に表示されているか
- URLが違う時に404ページは表示されるか
- コラムやニュースのページネーションの挙動
- コラムやニュースなどCMSが0件の時の挙動
- 検索機能
上記は最低限のテスト事項です。サイトによっては、もっとテストすべきことがあるのでその都度確認してください。
Q:各画面の機能って何ですか?
A:遷移や表示以外の動作・挙動です
Ex)ページネーション、SNS連動
例えば、テスト漏れでよくあるのがお問い合わせの際のエラー機能です。
- 確認すべきこと
- お問い合わせの必須記入が機能しているか
- 意図しない文字にエラーが出るか(郵便番号に8桁入れた時など)
お問い合わせ機能のテスト項目はこちらのサイトを参照するといいと思います
最後に
今回はリリース前に焦点を当ててまとめましたが、リリース後も必ず、サイトが正常であるかを確かめる必要があります。一人でしようとはせずに、必ずリストを作成して上でダブルチェックできる体制を組んでおくことも大切です
- リリース後の確認事項(例)
- CMSが機能しているか
- リダイレクトが機能しているか
- ツールがちゃんと接続しているか(Google Analyticsなど)
- passの確認(意外と間違えている時があります)
- 全画面パターン表示の確認(たまに一部画面がエラーとか、画像だけがテスト環境を向いててbasic認証を求められる、とかがある)
- 機能の確認(テスト設計書に沿ってもう一度確認)
クライアントの規模や要望によって、サイトの機能やリスクヘッジすべきことは増えていくため、今回の記事の内容では不十分な場合も多いです。
本記事では最低限のテスト事項をまとめました。今回の記事が参考になれば嬉しいです。