Web Qa Spec

リンク・ナビゲーション

• グローバルナビゲーションのリンク先
• フッターリンク
• CTAボタン（お問い合わせ、資料請求など）のリンク
• 外部リンクの有無

フォーム

• お問い合わせフォームの入力フィールド一覧（名前、メール、電話番号、メッセージ等）
• 必須項目の設定
• バリデーション要件（メール形式、文字数制限など）
• 送信ボタン・確認画面・完了ページの有無

レスポンシブ対応

• ブレークポイントの確認（PC/タブレット/スマホ）
• ハンバーガーメニューの有無
• 主要コンテンツのモバイル表示方法

ステップ3：テスト項目を生成する

調査結果をもとに、以下の4カテゴリでテスト項目を洗い出す。

カテゴリ別テスト項目の考え方

① 表示・レイアウト確認

各ページについて、以下の観点でテスト項目を作る：

• ファーストビューが正しく表示されるか（テキスト・画像・背景）
• 文字が崩れていないか、フォントが指定通りか
• 画像が正常に読み込まれているか（alt属性含む）
• 余白・配置・整列が設計通りか
• テーブルやリストが正しく表示されるか
• アニメーション・スクロールエフェクトが動作するか
• ブラウザ別の表示差異（Chrome/Firefox/Safari/Edge）

② リンク・ナビゲーション

• グローバルナビゲーションの各リンクが正しいページへ遷移するか
• フッターの各リンクが正しく機能するか
• CTAボタン・バナーのリンク先が正しいか
• パンくずリストが正しく表示されるか
• 外部リンクが新しいタブで開くか
• 404ページが適切に表示されるか
• ページ内アンカーリンクが正しく動作するか

③ フォーム・入力

フォームが存在する場合、以下を網羅：

• 各入力フィールドへの入力が正常にできるか
• 必須項目を空のまま送信するとエラーメッセージが表示されるか
• メールアドレスの形式バリデーションが機能するか
• 電話番号・数字フィールドのバリデーション
• 文字数制限（超過時のエラー）
• 送信ボタンクリックで確認画面または完了ページへ遷移するか
• 完了後に自動返信メールが届くか（存在する場合）
• スパム対策（reCAPTCHAなど）が機能するか

④ レスポンシブ対応

以下の主要ブレークポイントでの表示確認：

• PC（1280px以上）
• タブレット（768px〜1279px）
• スマートフォン（375px〜767px）

確認観点：

• ハンバーガーメニューの開閉が正常に動作するか
• 文字サイズが適切か（小さすぎない・大きすぎない）
• 画像・動画がはみ出していないか
• ボタン・リンクがタップしやすいサイズか（44px以上推奨）
• テーブルがスクロール対応しているか
• フォームの入力フィールドが正常に使えるか

ステップ4：Excelファイルを生成する

Excelの構成

シート構成： 1シート（「テスト仕様書」シート名）

表のヘッダー行（1行目）：

列の詳細：

• No：通し番号（1, 2, 3...）
• ページ：対象ページ名（例：トップ、会社概要、お問い合わせ）
• カテゴリ：4カテゴリのいずれか（下記のカラーコード参照）
• テスト項目：具体的なテスト項目名（例：「ヘッダーナビゲーションのリンク確認」）
• 確認内容：テスト手順・確認ポイント（具体的に記述）
• 確認環境：対象ブラウザ・デバイス（例：Chrome/PC、Safari/iOS）
• 優先度：高・中・低
• 担当者：空欄（テスト時に記入）
• 確認結果：空欄（テスト時に OK / NG / 未実施 を記入）
• 備考・不具合メモ：空欄（テスト時に記入）

Pythonコードでの生成方法

import openpyxl
from openpyxl.styles import Font, PatternFill, Alignment, Border, Side
from openpyxl.utils import get_column_letter

wb = openpyxl.Workbook()
ws = wb.active
ws.title = "テスト仕様書"

# ヘッダースタイル
HEADER_FILL = PatternFill("solid", fgColor="1F4E79")  # ダークブルー
HEADER_FONT = Font(name="Meiryo UI", bold=True, color="FFFFFF", size=10)

# カテゴリカラー
CATEGORY_COLORS = {
    "表示・レイアウト確認": "DDEEFF",   # 水色系
    "リンク・ナビゲーション": "D9EAD3",  # 緑系
    "フォーム・入力": "FFF2CC",          # 黄色系
    "レスポンシブ対応": "FCE5CD",        # オレンジ系
}

# 優先度カラー
PRIORITY_COLORS = {
    "高": "F4CCCC",  # 赤系
    "中": "FFF2CC",  # 黄系
    "低": "D9EAD3",  # 緑系
}

headers = ["No", "ページ", "カテゴリ", "テスト項目", "確認内容", "確認環境", "優先度", "担当者", "確認結果", "備考・不具合メモ"]
col_widths = [5, 18, 22, 35, 55, 25, 8, 10, 10, 35]

カラーコードと優先度の基準

カテゴリ色：

• 表示・レイアウト確認：薄水色（DDEEFF）
• リンク・ナビゲーション：薄緑（D9EAD3）
• フォーム・入力：薄黄（FFF2CC）
• レスポンシブ対応：薄オレンジ（FCE5CD）

優先度の考え方：

• 高：サイトの主要機能・CTAに直結するもの（お問い合わせフォーム送信、ナビゲーション、トップページ表示など）
• 中：内容の正確さや使いやすさに関わるもの（各ページのレイアウト、バリデーションメッセージなど）
• 低：細部の見た目や補足的な確認（アニメーション、フッターリンクなど）

確認環境の記載例

サイトの特性に応じて選択：

• PC確認：Chrome / PC、Firefox / PC、Safari / Mac、Edge / PC
• スマホ確認：Safari / iOS、Chrome / Android
• レスポンシブ確認：Chrome DevTools（375px）、Chrome DevTools（768px）

ステップ5：ファイルの保存とリンク提供

生成したファイルは以下の形式で保存する：

テスト仕様書_{サイト名またはドメイン}_{YYYYMMDD}.xlsx
例：テスト仕様書_example-com_20260405.xlsx

保存先：/sessions/compassionate-gifted-galileo/mnt/稼働レポート/

ファイル生成後、computer:// リンクでユーザーに提供する。

補足：テスト項目数の目安

• 小規模サイト（5ページ以下）：30〜60項目
• 中規模サイト（6〜20ページ）：60〜120項目
• 大規模サイト（21ページ以上）：120項目以上

各ページを均等にカバーしつつ、重要度の高いページ（トップ・お問い合わせ）は特に詳細に記述する。

よくある注意点

• フォームが存在しない場合は「フォーム・入力」カテゴリの項目を省略して構わない
• 解析時にエラーが出た場合でも、一般的なWEBサイトのテスト項目として合理的な項目を生成する
• テスト項目の「確認内容」は、テスト担当者が実際に何をすればよいか迷わないよう、具体的な手順で記述する
• 「〇〇ページを開く → △△を確認する → 結果を記録する」という形式が理想的