layout-review

name	layout-review
description	画面レイアウト系タスクのE2Eテスト後にスクリーンショットを取得し、PRにキャプチャと「なぜこのレイアウトが要件を満たしているか」の判断根拠をコメントする。
when_to_use	画面レイアウト系タスクの実装完了後、E2Eテスト実施時に自動的に実行する。「レイアウトレビュー」「layout-review」「キャプチャ貼って」などの発言時にも使用。
context	fork
agent	frontend-engineer

画面レイアウトレビュー（スクリーンショット付き判断根拠の記録）

引数: $ARGUMENTS（PR番号。例: 123）

概要

画面レイアウト系タスクでは、レイアウトの正しさは感性的な判断が伴うため、第三者（レビュワー・ユーザー）が「なぜこのレイアウトでOKと判断したのか」を検証できるようにする。

E2Eテスト実施時にスクリーンショットを取得し、PRコメントとしてキャプチャ画像と判断根拠を投稿する。

前提条件

• Playwright MCP が利用可能であること
• ローカル開発サーバーが起動済みであること
• 対象のPRが作成済みであること

実施手順

Step 1: PR情報と要件の確認

gh pr view $ARGUMENTS
gh pr diff $ARGUMENTS

• PRの変更内容から、レイアウトに関わる変更箇所を特定する
• 関連する wireframe.md のセクションを確認し、期待されるレイアウト仕様を把握する

Step 2: スクリーンショット取得計画の策定

以下の観点でスクリーンショット取得計画を策定する:

• 対象画面: 変更が影響するページ・コンポーネント
• ビューポート: モバイル（375px）とPC（1280px）の両方
• 状態バリエーション: 初期表示、データあり/なし、エラー状態など
• 重点確認ポイント: wireframe.md で定義されているレイアウト要素

Step 3: Playwright MCPによるスクリーンショット取得

Playwright MCPを使って以下を実行する:

1. 対象ページにアクセスする
2. モバイルビューポート（375px幅） でスクリーンショットを取得する
3. PCビューポート（1280px幅） でスクリーンショットを取得する
4. 必要に応じて、操作後の状態（タブ切り替え、モーダル表示等）のスクリーンショットも取得する

スクリーンショットは Playwright MCP の browser_take_screenshot で取得する。

Step 4: スクリーンショットの保存

取得したスクリーンショットを以下のディレクトリに保存する:

docs/screenshots/pr-{PR番号}/
├── mobile-{ページ名}-{状態}.png
└── desktop-{ページ名}-{状態}.png

mkdir -p docs/screenshots/pr-$ARGUMENTS

Playwright MCPから取得したbase64画像データをファイルに保存する。

Step 5: レイアウト判断根拠の言語化

wireframe.md の仕様と実際のスクリーンショットを照合し、以下の観点で判断根拠を言語化する:

1. 構造的一致: wireframe.md で定義された要素（ヘッダー、フッター、カード、タブ等）が正しく配置されているか
2. レスポンシブ対応: モバイルファーストの設計が守られているか、PC表示で適切に余白・カラムが調整されているか
3. 視覚的階層: 見出し、本文、アクションボタンの優先度が視覚的に明確か
4. 間隔とアラインメント: 要素間の余白が一貫しているか、テキストや画像の配置が揃っているか
5. 操作性: タップ/クリック可能な要素が十分なサイズを持っているか
6. アクセシビリティ: コントラスト、フォントサイズ、セマンティックHTML が適切か

Step 6: PRコメントの投稿

スクリーンショットをコミット・プッシュした後、GitHub raw URLを使ってPRコメントを投稿する。

# スクリーンショットをステージング・コミット・プッシュ
git add docs/screenshots/pr-$ARGUMENTS/
git commit -m "docs: PR#$ARGUMENTS レイアウトレビュー用スクリーンショットを追加"
git push

# リポジトリ情報を取得
REPO=$(gh repo view --json nameWithOwner -q '.nameWithOwner')
BRANCH=$(git branch --show-current)

# PRコメントを投稿
gh pr comment $ARGUMENTS --body "$(cat <<'EOF'
## レイアウトレビュー

### スクリーンショット

#### モバイル表示（375px）
![モバイル](https://raw.githubusercontent.com/${REPO}/${BRANCH}/docs/screenshots/pr-${PR}/mobile-{ページ名}.png)

#### PC表示（1280px）
![PC](https://raw.githubusercontent.com/${REPO}/${BRANCH}/docs/screenshots/pr-${PR}/desktop-{ページ名}.png)

### レイアウト判断根拠

| 観点 | 判定 | 根拠 |
|------|------|------|
| 構造的一致 | OK/NG | wireframe.md の仕様と照合した結果の説明 |
| レスポンシブ対応 | OK/NG | モバイルファースト設計の準拠状況 |
| 視覚的階層 | OK/NG | 見出し・本文・ボタンの優先度が明確か |
| 間隔とアラインメント | OK/NG | 余白の一貫性、要素の配置 |
| 操作性 | OK/NG | タップターゲットのサイズ、操作しやすさ |
| アクセシビリティ | OK/NG | コントラスト、フォントサイズ、セマンティックHTML |

### 総合判定

{このレイアウトが要件を満たしていると判断した理由の総括}

### 参照した仕様

- wireframe.md: {該当セクション名}
- routing.md: {該当ページのパス}

---
This layout review was generated by Claude Code (frontend-engineer agent)
EOF
)"

注意: 上記はテンプレートであり、実際のコメントでは各項目を具体的な内容に置き換えること。

禁止事項

• スクリーンショットなしでレイアウトが正しいと判断すること
• 「問題なさそう」「良さそう」など曖昧な判断で完了とすること
• wireframe.md を参照せずにレイアウトの正しさを判断すること
• モバイル表示のみ、またはPC表示のみでレビューを完了すること（両方必須）