サイト更新後の確認方法｜表示・操作・問い合わせ

更新した内容と、更新前の状態を確かめる

何を更新したかを制作担当に確認します。WordPress本体、追加機能であるプラグイン、見た目を決めるテーマ、ページの文章や画像では、影響を受ける場所が違います。複数を更新した場合も、更新したものと更新前後の版を区別します。

できれば、更新前に主要なページと操作を確かめておきます。店舗案内を開く、メニューから別のページへ進む、問い合わせ欄を選ぶ、というように、利用者が行う操作を決めます。画面を保存するだけでなく、何を押して何が起きたかが分かる記録を残すと比較できます。

すでに更新が終わっている場合は、保存してある画面や操作記録を使います。過去の記録がない箇所について、以前は正常だったと決めつけることはできません。制作担当が扱える作業用のサイトがあれば、そこで以前の版と比べます。

変更前には、サイトのファイルとデータベースをまとめて保存するバックアップも確認します。データベースは文章や設定などを保管する場所です。保存ファイルの所在と、戻す作業を担当する人を確かめてください。ファイルがあることと、実際に元へ戻せることは別なので、復元を試していない点は区別します。

参考：WordPress公式：更新前のバックアップと確認

同じページで同じ操作をして、変わったところを見つける

比較は、できるだけ同じ端末・同じブラウザーで行います。ブラウザーは、Chromeなどサイトを開くアプリです。見ているページ、画面の横幅、ログインしているかもそろえます。これらを一緒に変えると、更新が影響したのか、表示条件が変わったのかを調べにくくなります。

Chromeの利用者ごとの保存設定を切り替えている場合は、前後で同じものを使います。これはChromeプロファイルと呼ばれます。同じものを使っていても、ログインや保存データが途中で変わる場合があるため、比較する条件を制作担当と確認してください。

画像や部品の読み込みが終わってから、更新前に試した操作を行います。ボタンを押す回数、選ぶ項目、入力する内容を同じにします。読み込み中や画面が移動している途中の一瞬だけで、動かなかったと判断しないようにします。

メニューなら、押すと項目が開き、リンクを選ぶと予定のページへ進む状態が確認する目安です。問い合わせ欄なら、選んだ内容が表示され、入力条件に合わないときは、その項目と直し方が分かる表示が出るかを見ます。期待する動きと、実際に画面に出た結果は分けて比べます。

次の図は、説明用に作った二つの別の記録です。メニューでは、更新前は項目が表示された記録があり、更新後は項目を確認できなかった記録があります。もう一つのフォームの記録では、更新後も選んだ内容の表示は記録されていますが、入力条件を知らせる表示は調べられていません。二つ目は最初の問題を直した結果ではありません。

パソコン用の図を原寸で開く · スマホ用の図を原寸で開く

図の説明を読む

説明用の別々の二記録。メニューの開閉：確認する操作の記録名はメニューの開閉、確認した場所は同じ作業用サイト、ブラウザーと保存設定の条件は同じChromeプロファイル（Chromeに保存した利用者ごとの設定）、画面幅の説明条件は390（説明用の画面幅）、確認したページは店舗案内、押したもの・選んだものはメニューボタンを一度押す、更新前の保存版は更新前の保存版、更新前に画面に出た結果は項目が表示された記録あり、更新後の保存版は更新後の保存版、更新後に画面に出た結果は項目を確認できなかった記録あり、原因は未確認、修正後の結果は未確認。選択欄と入力条件を知らせる表示（原記録：選択欄と検証表示）：確認する操作の記録名は選択欄と入力条件を知らせる表示（原記録：選択欄と検証表示）、確認した場所は同じ作業用サイト、ブラウザーと保存設定の条件は同じChromeプロファイル（Chromeに保存した利用者ごとの設定）、画面幅の説明条件は390（説明用の画面幅）、確認したページは相談フォーム、押したもの・選んだものは同じ選択欄を一度選ぶ、更新前の保存版は更新前の保存版、更新前に画面に出た結果は選択表示と検証表示を確認した記録あり（選択内容と、入力条件を知らせる表示を確認）、更新後の保存版は更新後の保存版、更新後に画面に出た結果は選択表示の記録あり。検証表示は未確認（入力条件を知らせる表示はまだ確認していない）、原因は未確認、修正後の結果は未確認。二つ目は一つ目の修正後ではない。実送信/受付は未実施で、作業用の結果を公開先へ移していない。

二つの記録では、原因と修正後の結果は分かっていません。項目を見つけられなかったという記録から、今後も動かないと決めつけることはできません。記録の項目ごとの内容は、必要に応じて補足を開いて確認できます。

参考：Playwright公式：利用者に見える動作と比較条件

メニューとリンクは、目的のページへ進めるか試す

メニューを閉じた状態からボタンを押し、項目が開くかを見ます。次に、必要な項目を選び、目的のページへ進むかを確かめます。開くだけでなく、閉じる操作も試してください。パソコンとスマートフォンでメニューが異なるサイトでは、それぞれの操作を確認します。

リンクやボタンは、予定したページの名前や内容が表示されるかを見ます。画面の中の見出しへ移るリンクなら、到着した見出しが画面上部の固定された案内に隠れないかも確認します。見た目が変わっただけで、目的の場所に着いたとは判断しません。

キーボードでも使う項目では、次の項目を選ぶTabキーでリンクやボタンへ進み、Enterキーなどその部品に合う方法で操作します。選択位置の印が見えるか、行き先へ進めるかを確かめます。画面がスクロールしたことと、キーボードで操作する位置が移ったことは別です。

参考：W3C：キーボードとフォームの初期確認

問い合わせは、入力から担当者への受付まで確認する

問い合わせフォームは、空欄で進める、必要な項目を入力する、選択欄を変更する、というように、試す内容を先に決めます。入力の間違いを知らせる表示が、どの項目に、どんな操作の後に出るかを見てください。選んだ内容が残るか、間違いを直した後に先へ進めるかも確かめます。

「フォームが壊れた」だけでは、同じ問題を調べられません。たとえば、どの選択欄で何を選び、その後に何が表示されたかを制作担当へ伝えます。入力条件に合うかを知らせる表示は、技術的には検証表示と呼ばれます。選択内容が見えたことと、その表示を確認したことは区別します。

送信まで試す場合は、試験に使う宛先と入力内容、受付を確認する担当者を先に決めます。予約が成立したり実際の顧客へ通知が届いたりする操作は、画面を見るだけの確認と分けて扱います。試験の範囲を決めずに実顧客へ送らないでください。

送信後は、画面に完了の案内が出るかだけでなく、必要に応じて会社側に受付が残り、担当者が確認できるかまで確かめます。選択欄の表示、入力条件の確認、送信の処理、会社側の受付は別の段階です。この記事の二つの説明用の記録では、実送信と受付は行われていません。

通信を調べる制作担当は、ブラウザーの開発者ツールで、その操作に対応する要求と応答を見ます。要求はブラウザーからの依頼、応答は相手から返った結果です。返事があっただけでは、画面や会社側の受付が意図どおりになったとは限りません。

操作を自動で試す道具を使う場合も、利用者が選ぶ項目と、確認する結果を決めます。試験用の返事を用意した確認と、実際の外部サービスの結果は別です。WordPressの詳しい記録が必要なときは、制作担当が作業用環境の記録を調べます。公開先での設定変更を、毎回の確認に必須の作業にはしません。

参考：Chrome公式：操作に対応する要求・応答の確認

参考：WordPress公式：デバッグの使用環境

テストメールとフォーム操作の記録を分ける確認

問題が見つかったら、同じ操作で確かめ直す

違いが見つかったら、ページ、更新前後の版、使った端末・ブラウザー、押したもの、期待した動き、画面に出た結果を制作担当へ伝えます。たとえば「店舗案内のメニューボタンを1回押したが、更新後は項目を見つけられなかった」と具体的に示します。原因がまだ分からないときは、プラグインなどの原因名を決めつけません。

制作担当は、関係する処理や読み込まれたファイルを調べ、直す箇所を絞ります。複数の設定を同時に変えると、何が結果を変えたのか追いにくくなります。古い表示を読み込んでいる疑いがあっても、保存元を調べずにすべての保存データを消すことを、一般的な手順にはしません。

修正後は、問題が出たときと同じ操作を、同じ条件で再び試します。直った箇所だけでなく、変更が関係するほかの操作も確認してください。共通メニューを直したなら、関係するページで開閉や移動を試す、というように範囲を決めます。

元の問題が直ったかを確かめることと、変更がほかの動作へ悪影響を与えていないかを確かめることは、目的が違います。後者は回帰試験と呼ばれます。修正作業が終わったという報告だけでなく、必要な操作を試した結果で確認します。

参考：ISTQB公式：修正確認と回帰試験の違い

公開したページでも、利用者がする操作を試す

作業用のサイトで確認できたら、公開したページでも、確認済みの版が反映されたかを見ます。利用者が開くページで、メニュー、リンク、問い合わせの必要な操作を試してください。作業用と公開先で配信や外部サービスなどが違う場合は、その条件も制作担当と確認します。

次の説明用の記録は、公開先でメニューボタンを押す予定だけを示しています。環境とページは決まっていますが、使うブラウザー、画面幅、前後の版、操作した結果はまだありません。作業用の別記録を公開先の結果として使うことはできません。

更新後の確認は、表示を見る、実際に操作する、問い合わせの必要な受付まで確かめる、という順序で進めます。更新前と同じ条件で比べ、問題が出た箇所を具体的に伝え、修正後と公開先で確かめてください。

試す範囲を先に決めたい場合は、次の記事で重要な操作の選び方を整理できます。本稿は、決めた操作を更新後に実際に比べる方法を扱っています。

回帰テストの優先順位と確認範囲を決める