ウェブサイトの確認を手伝って

最初に私たちのおすすめをお伝えします。 Proxy Mail QA は私たちの製品なので、中立ではありません。これはウェブサイト全体をチェックするための計画で、その大部分には Proxy Mail QA はまったく必要ありません。おすすめするのは、メールが関わる手順です。サインアップ、コードやリンクでのサインイン、パスワードのリセット、招待、フォームが送る確認メールです。速度、アクセシビリティ、リンク、検索、セキュリティについては、私たちのものではない無料ツールを挙げています。Proxy Mail QA はデザインや文言を評価せず、SMS も受信しません。

1. 訪問者として使ってみる(15分)

まずスマートフォンで、次にノートパソコンで、サイトを初めて見る人としてすべてのページを見て回ります。

• 5秒で、このサイトが何のためのもので、次に何をすればよいかわかりますか?
• すべてのボタンとリンクは、書かれているとおりに動きますか?
• 崩れている、重なっている、スマートフォンのキーボードの下に隠れているものはありませんか?
• 諦めたくなるほど遅いものはありませんか?

どんなに小さなことでも、すべて書き留めてください。どのツールよりも多くの問題が見つかります。

2. すべてのフォーム

各フォーム(お問い合わせ、ニュースレター、サインアップ、予約、購入手続き)について:

• まず空のまま送信し、次に誤りのある内容で送信します。各エラーは該当する項目のところに、言葉で表示されるべきです。
• 正しく送信します。ページには次に何が起こるかが書かれているべきです。
• メール(確認、領収書、「後ほどご連絡します」など)が送られる場合は、届くこと、読みやすいこと、リンクが動くことを確認します。

フォームごとに新しい Proxy Mail QA のテスト用アドレスを使えば、どのメールがどこから来たかがわかり、自分の受信トレイには何も届きません。Labs でマーケティングとオファーのメールをオンにすると、マーケティングメールの確認と配信停止のチェックもできます。

3. アカウント(サイトにある場合)

Proxy Mail QA が最も役立つのはここです。

1. 新しいテスト用アドレスで サインアップ します。Proxy Mail QA for Chrome なら、ワンクリックでメール、名前、ユーザー名、生年月日、パスワードが入力され、確認コードが届くとページ内に表示されます。
2. 認証 してから、サインインしていることを確認します。
3. サインアウトして、もう一度サインインします。 拡張機能がテスト用アカウントと保存されたパスワードを提示します。
4. パスワードをリセット し、古いパスワードが使えなくなることを確認します。
5. サイトが対応していれば メールアドレスを変更 し、古いアドレスと新しいアドレスの両方に通知が届くことを確認します。
6. アプリで 各メールを一度は最後まで読みます。送信者、件名、すべてのリンクです。ステージングサイト上の localhost へのリンクには警告が表示されます。

4. 速度

ホームページと、料金やサインアップなど最も重要な2ページで Lighthouse(Chrome DevTools → Lighthouse、モバイル)を実行します。大きな項目から直してください。たいていは画像です。アクセスが集まれば、PageSpeed Insights で実際の訪問者のデータも見られます。

5. アクセシビリティ

• 同じページで axe DevTools または WAVE を実行します。
• 各ページをキーボードだけで操作します。Tab で移動し、今どこにいるかが常に見えることを確認します。
• スクリーンリーダー(Mac や iPhone では VoiceOver、Windows では NVDA)でフォームを試します。

自動ツールで見つかるのは問題の一部だけです。残りはキーボードとスクリーンリーダーで見つかります。

6. リンクとページ

• リンクチェッカー(W3C Link Checker、または Screaming Frog などのクローラー)を実行し、壊れたリンクを直します。
• 存在しないページを開きます。404 ページは、利用者が元に戻れるよう手助けするべきです。

7. 検索

• 各ページに固有のタイトルと説明があります。
• サイトが Google Search Console に登録され、サイトマップが送信されています。
• 見つかってほしくないページ(ステージング、管理画面)はインデックスされていません。

8. セキュリティの基本

• すべてのページが HTTPS で読み込まれます。Qualys SSL Labs で設定を、Security Headers でヘッダーを確認できます。
• ページのソースや JavaScript に秘密鍵が含まれていません。
• 管理ページにはサインインが必要です。
• サイトがパッケージを使っている場合は npm audit または Dependabot を使います。

これはセキュリティテストではありません。サイトで支払いや個人データを扱う場合は、きちんとしたテストを受けてください。

9. 信頼と法務

• サイトの実際の動作に合ったプライバシーポリシーと利用規約。
• 連絡手段。
• 訪問者の地域で必要な Cookie を使う場合は、Cookie の通知。

10. 公開後

• サイトが停止したときに知らせる稼働監視(UptimeRobot、Better Stack)。
• 誰かからメールが来る前に何が壊れたかわかるエラー追跡(Sentry)。

Proxy Mail QA が役立つ手順

エージェントに頼む

Qoder で開発している場合は、Qoder Marketplace から Proxy Mail QA を接続し(またはプラグインをインストールすると、account-email-audit を含む8つのスキルが追加されます)、次のように頼みます。

Check my site at https://staging.acme.dev. Start a Proxy Mail QA run.
1. Trigger every account email the site sends (sign-up verification and its resend,
   password reset, sign-in code or link, invite, email change) with new test
   addresses, check each with check_email, and list what to fix.
2. Submit the contact form with a new test address and check the confirmation email.
3. Run Lighthouse on mobile for the home, pricing and sign-up pages.
4. Check every internal link.
Finish the run and give me one list, most serious first: things that are broken, then
confusing, then slow.

最初に直すもの

1. 壊れている:サインアップできない、メールが届かない、フォームが入力内容を失う、ページがエラーになる。
2. わかりにくい:次に何をすればよいかわからない、エラーが直し方を示していない。
3. 遅い:スマートフォンで数秒以上かかるページ。
4. その他すべて。

ツールをまとめて見るには、ウェブサイトの構築とチェックに役立つツールをご覧ください。