Webサイトのリリース前テスト入門｜表示・リンク・フォームを確認する手順

Webサイトが完成しても、「どこからテストすればいいの？」と迷いますよね。

画面を何となく眺めるだけでは、リンク切れやフォーム通知の失敗まで見つけるのは難しいものです。

とはいえ、最初からすべての端末や専門的な検査を用意する必要はありません。

まずは確認する環境を決め、表示、リンク、フォーム、公開直後の順に進めると整理しやすくなります。

この記事では、リリース前テストを実際に進める手順を順番に紹介します！

1. テストする端末と環境を決める

最初に、どの端末とブラウザで確認するかを決めましょう。

思いつくたびに環境を変えるより、最初に小さなテスト表を作った方が抜け漏れを減らしやすいです。

新しいサイトで利用状況がまだ分からない場合は、まず次の組み合わせから始めると分かりやすいです。

• パソコン1台とスマートフォン1台
• 普段利用者が使うと想定している主要ブラウザ
• ログインしていない通常の利用者の状態
• 会員機能がある場合はログイン前とログイン後

既存サイトのリニューアルなら、アクセス解析や社内の利用状況から、よく使われている端末とブラウザを優先します。

すべての機種を自社だけでそろえる必要はありません。

手元にない環境は「未確認」として残し、制作者やテストを担当できる人へ確認を依頼しましょう。

では、テストを始める前に、次のものも用意してください。

• 公開対象のページ一覧
• 確認用URL、本番URL、切替予定日時と手順
• テスト用と分かる氏名・メールアドレス・問い合わせ内容
• 通知を受け取る運営者側のメールボックス
• 問題を記録する表や共有資料

問題の記録には、ページURL、端末、ブラウザ、操作、現在の状態、期待する状態、スクリーンショットを残します。

記録表は、次の形にすると確認と修正を同じ場所で管理できます。

問題がない場合も「確認済み」と記録すると、どこまで試したかが分かります。

まずパソコンとスマートフォンで主要な流れを一度通し、影響が大きい画面から確認範囲を広げていきます。

この準備をしておくことで、同じ問題を何度も説明し直さずに済みます。

2. 全ページの表示を確認する

表示テストは、トップページだけで終わらせないのがポイントです。

公開対象のページ一覧を上から開き、ページ単位で結果を残します。

各ページで見る項目はこちらです⇩

• ページがエラーにならず開くか
• 見出しと本文が予定した内容になっているか
• 画像が欠けたり、不自然に切れたりしていないか
• 文字と背景を無理なく読み分けられるか
• 文章、画像、表が画面の外へはみ出していないか
• メニューや固定ボタンが本文を隠していないか
• 読み込み中の表示が残ったままになっていないか

スマートフォンでは、縦向きだけでなく横向きも一度見ておくと安心です。

パソコンでは、ブラウザの横幅を少しずつ狭めると、特定の幅だけで起きる重なりに気づけることがあります。

画面を狭くしたときに内容がどう並び替わるかは、W3Cのリフローに関する解説でも扱われています。

ページ全体に不要な横スクロールが出たら、どの画像や表がはみ出しているかまで記録します。

ボタンは、見えているだけでなく押しやすさも確認が必要です。

ボタンの大きさや間隔を見るときは、W3Cの操作対象の大きさに関する解説も確認の基準になります。

まずは実機で押し、「隣を押してしまう」「指で隠れて選びにくい」と感じる場所を記録しておくと比較しやすくなります。

同じレイアウトを使うページが多いサイトでも、料金、問い合わせ、会社情報など重要なページは個別に確認しましょう。

3. リンクとボタンをたどる

リンクテストでは、「開いたか」だけでなく、「正しい内容へ移動したか」まで見ます。

利用者が使う順番に、入口から目的のページまでたどってみましょう。

確認するリンクとボタンは次のとおりです。

• ヘッダーとフッターのメニュー
• ロゴからトップページへ戻るリンク
• パンくずリストやページ内リンク
• 本文中の関連記事や外部サイトへのリンク
• 料金、予約、購入、問い合わせなどの主要ボタン
• 電話番号とメールアドレスのリンク
• 使用している場合はSNSへのリンク

リンク先が表示されても、古い料金表や終了したサービスへ移動していれば修正が必要です。

同じ言葉のボタンがページごとに違う場所へ移動していないかも確認が必要です。

電話とメールのリンクは、スマートフォンで押し、意図したアプリや操作へ進むかを見ます。

外部サイトへのリンクは、相手側のページが変更・削除されることもあるため、公開前に一度開いておくと安心です。

リンクの数が多い場合は、自動確認ツールを補助に使う方法もあります。

ただし、自動確認で正常と出ても、移動先の内容が正しいかまでは判断できない場合があります。

問い合わせや購入など、大事な流れは、人の目で最後までたどるのがポイントです。

4. フォームを最初から最後まで試す

フォームは、入力画面から運営者側の受信までを一つの流れとして確認します。

表示されているだけで「動いている」と判断せず、テスト用の内容で実際に送ってみましょう。

確認する順番はこちらです。

1. 項目名と入力例を読む
2. 必須項目を空欄にしてエラーを確認する
3. メールアドレスなどへ形式の違う内容を入れる
4. 正しいテストデータを入力する
5. 確認画面がある場合は内容を見直す
6. 送信して完了表示を確認する
7. 自動返信と運営者側の通知を確認する

W3Cのフォームに関するチュートリアルでは、項目を識別するラベル、入力の説明、検証、利用者への通知などが整理されています。

エラーは赤い枠だけではなく、「何をどう直せばよいか」が文章でも分かるかを見ます。

W3Cのフォーム送信結果の通知に関する案内では、エラーだけでなく、送信が完了したことを伝える成功メッセージも扱われています。

完了画面が出ても、確認はまだ終わりではありません。

自動返信、運営者側の受信、設定している場合は複数担当者への受信を別々に確かめましょう。

迷惑メールフォルダも確認し、送信元、件名、返信先が運用しやすい内容になっているかも確認してください！

フォームに該当する機能がある場合は、次の項目も追加で試します。

• 文字数の上限や入力できる文字の条件が案内どおりか
• 個人情報の取り扱いや規約への同意欄と、案内ページへのリンクが正しいか
• ファイル添付の形式と容量制限が分かり、添付したファイルを運営者側で開けるか
• 送信ボタンを続けて押しても、同じ問い合わせが重複して登録されないか
• 迷惑送信対策を設定している場合、通常の利用者が送信を完了できるか

予約や決済を伴うフォームは、通常の問い合わせより影響が大きいため、サービスが用意するテスト機能や専門の確認手順を使ってください。

テストには本物の顧客情報や決済情報を使わず、事前に用意したテストデータだけを使ってください。

テスト後は、不要な問い合わせデータや添付ファイルを適切に削除しましょう。

5. 公開直後にもう一度確認する

確認用の環境で問題がなくても、本番への切り替えでURLや設定が変わることがあります。

公開作業が終わったら、同じ日に本番URLでもう一度確認しましょう。

公開直後に見る項目は次のとおりです。

• 正式なURLが https:// で開き、ブラウザの警告が出ないか
• メニュー、主要リンク、画像が本番URLで開くか
• 問い合わせを送信し、完了表示と通知を確認できるか
• 公開したいページに意図しない検索除外設定が残っていないか
• 公開しない完了ページや管理用ページを検索対象にしていないか
• URLを変更した場合、古い主要URLから新しい対応ページへ移動できるか
• アクセス解析が予定したアカウントへ記録されるか
• サイトマップに公開対象のURLが含まれているか

Google検索では、noindexをページの検索登録を防ぐルールとして使えます。

ただし、Googleがnoindexを確認するには、そのページをクロールできる必要があります。

詳しい条件はGoogleのnoindexに関する公式資料で確認できます。

すべてのページを一括で公開設定へ変えるのではなく、公開したいページと公開しないページを分けるのが大切です。

URLを変更した場合の転送方法は、Googleのリダイレクトに関する公式資料が参考になります。

検索エンジンから現在のページがどう見えるかは、Search ConsoleのURL検査ツールで公開URLをテストできます。

URL検査で登録可能と表示されても、検索結果への掲載を保証するものではありません。

まずはトップページと主なサービスページから確認すると進めやすいです！

公開前全体の見方は、「ホームページ公開前チェック完全ガイド」でも整理しています。

まとめ

リリース前テストの流れを、最後に5段階で振り返ってみましょう。

• 端末、ブラウザ、ログイン状態、テストデータを決める
• 公開対象の全ページを開き、表示の問題を記録する
• メニュー、リンク、ボタンを利用者の順番でたどる
• フォームを入力から完了・通知まで送信する
• 公開直後に本番URL、検索設定、計測を再確認する

一度で問題を全部見つけようとしなくても大丈夫です。

まずは、公開対象のページ一覧に「端末・ブラウザ・結果」の3列を足して、小さなテスト表を作ってみてください。

そして最初の1ページで、何か問題があればURL、操作、画面まで残しながら、整理していきましょう！

関連記事

• 自作ホームページを公開する前に｜初心者が見落としやすい注意点