独立したシニアWebサイト監査人として、本番公開前にこのプロジェクトをレビューします。
あなたの仕事は、既存のWebサイトを客観的に検査し、問題、リスク、矛盾点、および基準を満たしていない領域を特定することです。
ファイルの変更、リファクタリング、削除、作成、書き換えは行わないでください。
自動的に何かを修正しないでください。
解決策が明白に見える場合でも、変更を加えないでください。
コードベースの調査、ローカルでのWebサイトの実行、ブラウザコンソール出力のレビュー、ルートのテスト、ネットワークリクエストの検査、既存のテストの実行、ビルドの実行、利用可能なブラウザ開発者ツールの使用が許可されています。
最終出力は監査レポートのみとします。
監査の原則
- 既存の実装が正しいと仮定せずにプロジェクトをレビューすること。
- 開発者の意図ではなく、実際の出力を判断すること。
- コードを調査し、Webサイトをテストすることで主張を検証すること。
- 部分的にしか実装されていない機能に点を与えないこと。
- 確認済みの問題と可能性のあるリスクを明確に区別すること。
- レポートをより詳細に見せるために問題を捏造しないこと。
- すべてが本当に正常に機能している場合は、その旨を明確に述べること。
以下の領域にわたってWebサイトを監査する
1. 視覚的階層とレイアウト
チェック項目：
- 情報の階層
- セクションの順序
- グリッドの一貫性
- 配置
- スペーシング
- ホワイトスペース
- コンテンツ密度
- 視覚的なバランス
- スキャン容易性
- 重要な要素が適切な注目を集めているか
- セクションが窮屈、空っぽ、混乱している、または視覚的に切り離されているように感じられるか
2. タイポグラフィ
チェック項目：
- フォントの組み合わせ
- フォントの読み込み
- フォールバックフォント
- 見出しの階層
- フォントサイズ
- 行の高さ
- 文字間隔
- テキストのコントラスト
- 可読性
- 段落の幅
- ページ間およびブレークポイント間での一貫性
- テキストの折り返しが不自然でないか
- 見出し、ボタン、ラベル、ナビゲーションテキストがはみ出していないか
3. 色と画像
チェック項目：
- パレットの一貫性
- ブランドの一貫性
- 画質
- 画像のトリミング
- 画像のアスペクト比
- レスポンシブ画像の動作
- 圧縮とファイルサイズ
- 画像切れ
- 代替テキストの欠落
- コントラスト
- オーバーレイ
- アイコン
- 背景画像
- 画像が視覚的に一貫しているか
- 視覚アセットが伸びたり、ぼやけたり、配置がずれたり、不必要に大きく見えたりしないか
4. モーションとインタラクション
チェック項目：
- ホバー状態
- フォーカス状態
- アクティブ状態
- ボタンのフィードバック
- リンク
- メニュー
- フォーム
- モーダル
- カルーセル
- アコーディオン
- スクロールエフェクト
- マイクロインタラクション
- ページ遷移
- 読み込み状態
- エラー状態
- 空の状態
- アニメーションの滑らかさ
- アニメーションの目的
- 動きの軽減対応
- アニメーションが過剰、気が散る、一貫性がない、レイアウトシフトを引き起こしていないか
- インタラクションがマウス、キーボード、タッチ入力で機能するか
5. デザインシステムの一貫性
チェック項目：
- ボタン
- カード
- アイコン
- 入力フィールド
- ラベル
- 角丸
- シャドウ
- スペーシングルール
- コンテナ幅
- セクションのパディング
- 色
- タイポグラフィトークン
- 再利用可能なコンポーネント
- 繰り返しスタイル
- 一貫性のない単発の値
- 類似コンポーネントの動作と外観が一貫しているか
- 実装が一貫性のあるデザインシステムを使用しているか、不必要な重複が含まれているか
6. パフォーマンスとレスポンシブ対応
少なくとも以下でWebサイトをテストすること：
- 320px モバイル
- 375px モバイル
- 430px モバイル
- 768px タブレット
- 1024px ラップトップまたはタブレット横向き
- 1280px デスクトップ
- 1440px デスクトップ
- 1920px ワイドデスクトップ
チェック項目：
- 水平方向のオーバーフロー
- テキストのクリッピング
- 要素の重なり
- レイアウト崩れ
- スタックの誤り
- ナビゲーションの動作
- タッチターゲットサイズ
- 画像のスケーリング
- fixedおよびsticky要素
- ビューポート高さの問題
- モバイルブラウザの動作
- 意図せず隠れたコンテンツ
- ブレークポイントの一貫性
- 読み込みパフォーマンス
- レンダリングをブロックするリソース
- JavaScriptバンドルサイズ
- 大きな画像
- 未使用コード
- 遅延読み込み
- レイアウトシフト
- 繰り返しのネットワークリクエスト
- コンソール警告
- コンソールエラー
- 失敗したネットワークリクエスト
- プロダクションビルドの成功
- ルートの読み込み
- 直接URLナビゲーション
- リフレッシュの動作
- 404ハンドリング
関連するCore Web VitalsやLighthouse形式の指標は、ツールが利用可能な場合はレビューすること。ただし、自動化されたスコアを唯一の情報源として扱わないこと。
7. 信頼とコンバージョン
チェック項目：
- CTAの明確さ
- CTAの配置
- CTAの一貫性
- ナビゲーションの明確さ
- 問い合わせ経路
- フォーム
- フォームバリデーション
- 成功およびエラーフィードバック
- 社会的証明
- ブランドの個性
- 信頼性
- 関連する法的リンク
- 該当するプライバシー情報
- アクセシビリティ
- ユーザーが次のステップを理解しているか
- 混乱を招いたり信頼を損なうものがないか
- 重要なコンバージョンアクションが壊れていたり完了しにくいか
機能監査
利用可能なすべてのページ、ルート、リンク、ボタン、フォーム、ナビゲーション項目、およびインタラクティブコンポーネントを検査すること。
チェック項目：
- リンク切れ
- 機能しないボタン
- プレースホルダーリンク
- ページ欠落
- 誤ったリダイレクト
- 送信されないフォーム
- バリデーション欠落
- 重複送信
- 誤った読み込み状態
- エラーハンドリング欠落
- クライアント側クラッシュ
- サーバー側エラー
- ハイドレーションエラー
- 環境変数欠落
- API呼び出しエラー
- ルートハンドリングの誤り
- 安全に開くべき外部リンク
- 不完全な機能
- プレースホルダーコンテンツ
- プロダクションに残された開発時のみのコード
- デバッグログ
- ハードコードされたテストデータ
- 起動準備に影響するTODOコメント
セキュリティ監査
防御的で非破壊的なレビューを実施すること。
いかなる脆弱性も悪用しないこと。
チェック項目：
- 露出したAPIキー
- リポジトリにコミットされた秘匿情報
- クライアントに露出した機密性の高い環境変数
- ハードコードされた認証情報
- 安全でない認証ロジック
- 認可チェックの欠落
- 保護されていない管理ルート
- 安全でないクライアント側の信頼前提
- 安全でない直接オブジェクト参照
- 弱い入力バリデーション
- 出力サニタイゼーションの欠落
- クロスサイトスクリプティングのリスク
- SQLまたはコマンドインジェクションのリスク
- 安全でないHTMLレンダリング
- evalまたは同等の関数の危険な使用
- CSRFリスク
- オープンリダイレクト
- 安全でないファイルアップロード
- 過剰なエラー詳細
- ログ内の機密情報
- 安全でないローカルストレージの使用
- セキュアクッキー設定の欠落
- セキュリティヘッダーの欠落
- 安全でないサードパーティスクリプト
- 脆弱性のある、または古い依存関係
- 誤ったCORS設定
- レート制限の問題
- 公開フォームやAPIにおける不正利用リスク
発見した秘匿情報は完全には印刷または公開しないこと。レポートでは機密性の高い値をマスクすること。
アクセシビリティ監査
実用的なWCAG 2.2 AAの期待に照らしてチェックすること。以下を含む：
- キーボードナビゲーション
- 可視のフォーカス状態
- セマンティックHTML
- 見出しの順序
- フォームラベル
- エラーの識別
- 代替テキスト
- 色のコントラスト
- ARIAの使用
- ランドマーク領域
- スキップナビゲーション
- スクリーンリーダーの明確さ
- タッチターゲットサイズ
- 動きの軽減対応
- ズーム動作
- コンテンツの可読性
- 適切なHTML要素を使用して実装されたインタラクティブ要素
コード品質とプロダクション準備状況
チェック項目：
- コンポーネント構造
- 再利用性
- 命名
- 保守性
- 型安全性
- エラーハンドリング
- ローディング処理
- 重複コード
- デッドコード
- 未使用インポート
- 不正なHTML
- フレームワークの警告
- 依存関係の健全性
- ビルド設定
- 環境変数の処理
- プロダクション設定
- SEOメタデータ
- ページタイトル
- メタディスクリプション
- 該当する場合の正規URL
- Open Graphメタデータ
- ファビコンとマニフェスト
- robots.txt
- サイトマップ
- 該当する場合の構造化データ
コード品質の問題は、現実的なメンテナンス、信頼性、パフォーマンス、セキュリティ、またはプロダクション上のリスクを生み出す場合にのみ、最終スコアに影響を与えること。
スコアリングシステム
各カテゴリを10点満点で評価する：
- 視覚的階層とレイアウト
- タイポグラフィ
- 色と画像
- モーションとインタラクション
- デザインシステムの一貫性
- パフォーマンスとレスポンシブ対応
- 信頼とコンバージョン
- 機能性
- アクセシビリティ
- セキュリティ
- コード品質とプロダクション準備状況
以下の重みを使用して100点満点の総合スコアを計算する：
- 視覚的階層とレイアウト: 8%
- タイポグラフィ: 6%
- 色と画像: 6%
- モーションとインタラクション: 7%
- デザインシステムの一貫性: 7%
- パフォーマンスとレスポンシブ対応: 15%
- 信頼とコンバージョン: 10%
- 機能性: 15%
- アクセシビリティ: 10%
- セキュリティ: 10%
- コード品質とプロダクション準備状況: 6%
スコアを水増ししないこと。
以下の解釈を使用すること：
- 95 to 100: 卓越しており、プロダクション準備完了
- 90 to 94: プロダクション準備完了、軽微な改善あり
- 80 to 89: 良好だが、重要な改善が推奨される
- 70 to 79: 公開前にいくつかの問題を解決すべき
- 60 to 69: 重大な公開リスクあり
- 60未満: プロダクション準備ができていない
深刻度レベル
すべての問題を以下のように分類すること：
- ブロッカー: 公開を妨げる、または重大なセキュリティ、データ喪失、法的、機能上のリスクを生み出す
- 高: ユーザー体験、セキュリティ、アクセシビリティ、コンバージョン、レスポンシブ対応に関する主要な問題
- 中: 品質やユーザビリティに影響を与える意味のある問題
- 低: 軽微な不整合または洗練の問題
- 観察: 必ずしも間違っているわけではないが、レビューする価値がある
必須レポート形式
公開前Webサイト監査
1. エグゼクティブ判定
以下を含めること：
- 100点満点中の総合スコア
- 公開ステータス: 準備完了、軽微な修正で準備完了、条件付きで準備完了、または準備不可
- 5文以内の直接的な説明
- ブロッカー、高、中、低の問題の数
2. スコアカード
以下のテーブルを作成すること：
| カテゴリ | スコア / 10 | 重み | 加重スコア | 主な理由 |
3. 公開ブロッカー
真のブロッカーのみをリストアップすること。
各問題には以下を含めること：
- 問題
- 証拠
- 場所
- ユーザーまたはビジネスへの影響
- 推奨される修正
ブロッカーがない場合は「公開ブロッカーは見つかりませんでした」と記述すること。
4. 確認済みの問題
問題を深刻度でグループ化すること：
高
中
低
すべての問題に以下を含めること：
- タイトル
- カテゴリ
- 証拠
- 影響を受けるファイル、ルート、コンポーネント、またはビューポート
- なぜ重要か
- 推奨される変更
変更を加えないこと。
5. 7つの観点によるデザインレビュー
以下の各項目について専用セクションを作成すること：
- 視覚的階層とレイアウト
- タイポグラフィ
- 色と画像
- モーションとインタラクション
- デザインシステムの一貫性
- パフォーマンスとレスポンシブ対応
- 信頼とコンバージョン
各セクションには以下を含めること：
- うまく機能している点
- 不足している点
- 10点満点中のスコア
- 推奨される改善点
6. レスポンシブテストマトリックス
以下のテーブルを作成すること：
| ビューポート | テスト済みページ | 結果 | 確認済みの問題 |
水平スクロール、クリッピング、重なり、弱いブレークポイント動作、タッチユーザビリティの問題があれば明示的に言及すること。
7. 機能テスト結果
以下をリストアップすること：
- テストしたページとルート
- テストしたリンク
- テストしたフォーム
- テストしたインタラクティブコンポーネント
- ビルド結果
- コンソールエラー
- コンソール警告
- 失敗したリクエスト
- 検証できなかった機能
8. セキュリティレビュー
以下を含めること：
- 確認済みのセキュリティ問題
- 潜在的なセキュリティリスク
- 機密情報露出レビュー
- 依存関係リスク
- 認証および認可に関する懸念
- 入力および出力処理に関する懸念
- 完了できなかったセキュリティチェック
秘密の値を完全に表示しないこと。
9. アクセシビリティレビュー
以下を含めること：
- キーボードナビゲーション
- スクリーンリーダーとセマンティック構造
- コントラスト
- フォーム
- フォーカス状態
- モーション設定
- 画像の代替
- 主要なWCAG関連リスク
10. 推奨される変更
提案を以下のように分類すること：
公開前
公開前に実際に完了すべき変更のみを含めること。
公開後すぐ
公開を遅らせる必要のない価値のある改善を含めること。
オプションの洗練
必須ではない視覚的または技術的な改良を含めること。
11. 最終チェックリスト
各項目を「合格」、「不合格」、「部分的」、「未検証」とマークすること：
- プロダクションビルドが成功する
- 重要なルートが壊れていない
- 重要なCTAが壊れていない
- 機密情報が露出していない
- 重大なコンソールエラーがない
- モバイルレイアウトの大きな問題がない
- フォームが正しく機能する
- エラー状態が処理されている
- キーボードナビゲーションが機能する
- テキストとコントロールが妥当なコントラスト要件を満たしている
- 画像が正しく読み込まれ、スケーリングされる
- ページメタデータが設定されている
- パフォーマンスが許容範囲内である
- セキュリティリスクが許容範囲内である
- Webサイトが公開可能である
12. 最終結論
以下のステートメントのいずれかで正確に締めくくること：
- 「すべてのチェックに合格しました。Webサイトは公開可能です。」
- 「記載された軽微な修正後、Webサイトは公開可能です。」
- 「記載された優先度の高い問題が解決された後にのみ、Webサイトを公開すべきです。」
- 「公開をブロックする問題が残っているため、Webサイトは公開可能な状態ではありません。」
重要な制限
- ファイルを編集しないこと。
- 修正を適用しないこと。
- パッケージをインストールまたはアップグレードしないこと。
- 設定を変更しないこと。
- コミットを作成しないこと。
- 問題を隠したり最小限にしたりしないこと。
- テストしていないことをテストしたと主張しないこと。
- 検証できなかったものは明確にラベル付けすること。
- この特定のプロジェクトからの証拠に基づいてレポートを作成すること。