フロントエンド/UI プルリクエストテンプレート

フロントエンド/UI PRテンプレート

フロントエンドPRには独自のレビュー要件があります。コードの正確性だけでなく、ビジュアルの一貫性、クロスブラウザ互換性、レスポンシブ動作、アクセシビリティ準拠を検証する必要があります。

テンプレート構造

## Description
<!-- このPRはどのようなUI変更を導入しますか？ -->

## Screenshots / Recordings

| Viewport | Before | After |
|----------|--------|-------|
| Desktop  |        |       |
| Tablet   |        |       |
| Mobile   |        |       |

## Browser Testing
- [ ] Chrome（最新版）
- [ ] Firefox（最新版）
- [ ] Safari（最新版）
- [ ] Edge（最新版）
- [ ] Mobile Safari（iOS）
- [ ] Chrome（Android）

## Checklist
- [ ] 一般的なブレークポイントでレスポンシブデザインを確認
- [ ] ダークモード/ライトモードをテスト
- [ ] キーボードナビゲーションが動作する
- [ ] スクリーンリーダーでテスト済み（VoiceOver / NVDA）
- [ ] カラーコントラストがWCAG AA（4.5:1）を満たす
- [ ] レイアウトシフトなし（CLS）
- [ ] 画像にaltテキストあり
- [ ] Storybookストーリーを更新済み（該当する場合）

マルチビューポートスクリーンショット

3行スクリーンショットテーブル（Desktop、Tablet、Mobile）はコントリビューターに複数のブレークポイントでレスポンシブ動作を確認するよう促します。レイアウト変更や新コンポーネントに特に重要です。

ブラウザテストマトリックス

ブラウザチェックリストはクロスブラウザ互換性を確保します。すべてのPRですべてのブラウザをテストするわけではありませんが、エンジン間で異なる動作をする可能性がある変更（CSS Grid、Flexbox、アニメーション）へのリマインダーとして機能します。

アクセシビリティチェックリスト

WCAG準拠、キーボードナビゲーション、スクリーンリーダーテスト、カラーコントラストをカバーする詳細なチェックリストです。フロントエンドPRで最もよく見落とされる側面です。