最初に私たちのおすすめを。 Proxy Mail QA は私たちの製品なので中立ではありません。また、このツールキットのうち対象となるのは1行だけです:サインアップ、ログイン、アカウントメールの確認です。速度、アクセシビリティ、SEO、リンク切れ、セキュリティ、デバイスごとの見た目には別のツールが必要で、その大半は無料です。以下で紹介しますが、いずれも私たちの製品ではありません。
構築中
| ツール | 見つけられること |
|---|---|
| 型チェッカー(TypeScript) | 実行前に、間違った場所にある間違ったデータ |
| リンター(ESLint)とフォーマッター(Prettier) | よくあるミスや一貫性のないコード |
| ブラウザの DevTools | コンソールのエラー、Network タブの失敗したリクエスト、デバイスモードでのレイアウト |
| プレビューデプロイ(Vercel、Netlify、Cloudflare Pages) | 変更ごとのリンク。マージ前に実際のサーバーで確認できます |
| AI コーディングエージェント(Qoder、Claude Code、Cursor) | 各変更の二重チェックと、以下のチェックの代行 |
公開前と公開後
| 分野 | 確認する内容 | ツール |
|---|---|---|
| 速度 | スマートフォンでの読み込み時間、レイアウトのずれ、画像サイズ | Lighthouse(Chrome DevTools 内)、PageSpeed Insights(トラフィックが増えると実際の訪問者のデータも追加されます)、WebPageTest |
| アクセシビリティ | ラベル、コントラスト、見出し、キーボード操作、スクリーンリーダー | axe DevTools、WAVE、Lighthouse。その後、キーボードだけの操作とスクリーンリーダー(VoiceOver、NVDA)で確認します。自動ツールが見つけられるのは問題の一部だけです |
| HTML とリンク | 無効なマークアップ、リンク切れ、存在しないページ | W3C Markup Validation Service、W3C Link Checker、または Screaming Frog などのクローラー |
| デバイスとブラウザ | 小さな画面でのレイアウト、Safari と Firefox の違い | DevTools のデバイスモード、実機のスマートフォン、手元にないデバイスには BrowserStack や LambdaTest |
| SEO | インデックスされたページ、タイトルと説明、構造化データ | Google Search Console、Bing Webmaster Tools、Lighthouse の SEO 監査、Google のリッチリザルトテスト |
| セキュリティの基本 | HTTPS の適切な設定、セキュリティヘッダー、既知の脆弱性があるパッケージ | Qualys SSL Labs、Security Headers、npm audit または Dependabot、自分のステージングサイトに対する ZAP(旧 OWASP ZAP) |
| サインアップ、ログイン、アカウントメール | メールが届くこと、コードやリンクが機能すること、適切に送信されていること、ちょうど1通届くこと | Proxy Mail QA。ローカル開発中にメールを見るだけなら Mailpit |
| フロー全体 | 変更後もサインアップ、購入手続きなどの流れが機能すること | Playwright または Cypress |
| 公開後 | サイトが稼働していること、エラーを把握できること、利用者が必要なものを見つけられること | 稼働監視ツール(UptimeRobot、Better Stack)、Sentry、アクセス解析 |
Proxy Mail QA が確認すること、しないこと
確認するのは、サイトのうちメールに依存する部分です。
- 試行ごとの新しい非公開テスト用アドレス。テストが古いコードを拾うことはありません。
- メールから取り出した確認コード、またはサインイン、招待、リセットのリンク。
- メールの送信方法:SPF、DKIM、DMARC、
localhostへのリンクやプレーンなhttp、リンク先、有効期限の記載の有無、プレーンテキストパートの有無。 - メールがちょうど1通届いたこと、または1通も届かなかったこと。
- フォームで試せる珍しいアドレス、名前、パスワード。フォームがそれらをどう扱うか確認できます。
Proxy Mail QA for Chrome で手動で、npm パッケージを通じて Playwright や Cypress で、または MCP server を通じて AI エージェントから使えます。
確認しないのは、デザイン、文言、速度、アクセシビリティ、SEO、セキュリティです。SMS も受信しません。
エージェントにチェックを任せる
Qoder などの AI エージェントは、このツールキットの大半をプレビューデプロイ上で代わりに実行できます:コマンドラインからの Lighthouse、リンクチェッカー、Playwright テスト、そして Qoder Marketplace から Proxy Mail QA を接続すればサインアップメールも。最初のプロンプトの例です。
Check the preview at https://acme-git-new-pricing.vercel.app before I merge.1. Run Lighthouse for the home page and the sign-up page, on mobile. List anything under 90, with the biggest fixes first.2. Run a link check over the site and list broken links.3. Sign up with a new Proxy Mail QA address, finish the verification, and run check_email with expect_host set to the preview's host. count_emails should be 1.4. Give me one list of what to fix, most important first.それでも公開前に、スマートフォンでサイトを自分の目で確認してください。分かりやすいかどうかを教えてくれるツールはありません。
サイト全体を段階的に確認する方法は、ウェブサイトの確認を手伝ってをご覧ください。