review-web-designWebデザインをレイアウト品質、タイポグラフィ、カラー使用、スペーシング、 レスポンシブな動作、ブランド一貫性、ビジュアル階層の観点でレビューする。 デザイン原則の評価と改善推奨事項を網羅する。開発前のデザインモックアップレビュー、 実装済みサイトのデザイン品質評価、デザインレビューセッションでのフィードバック提供、 ブランド一貫性の評価、またはブレークポイントをまたいだレスポンシブ動作の確認に使用する。
Independent GitHub snapshot · Automated classification · Original documentation governs
Webデザインを視覚的品質、一貫性、デバイスをまたいだ効果性について評価する。
ビジュアル階層はユーザーの目を重要度の順にコンテンツへと導く。
## Visual Hierarchy Assessment
| Page/Section | Focal Point | Hierarchy Clear? | Issues |
|-------------|-------------|-----------------|--------|
| Homepage | Hero section CTA | Yes | Secondary CTA competes with primary |
| Product page | Product image | Mostly | Price not prominent enough |
| Contact form | Submit button | No | Form title same size as body text |
期待結果： 主要な各ページ/セクションの明確なビジュアル階層が評価されている。 失敗時： モックアップが利用できない場合は、ブラウザの開発者ツールを使用してライブコードから評価する。
/* Example well-structured type scale (1.25 ratio) */
:root {
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39.06px */
}
期待結果： タイポグラフィが一貫性、可読性、階層について評価されている。 失敗時： デザインが3つ以上のフォントファミリーを使用している場合は統合を推奨する。
## Colour Assessment
| Usage | Colour | Contrast Ratio | WCAG AA | Notes |
|-------|--------|----------------|---------|-------|
| Body text on white | #333333 | 12.6:1 | Pass | Good |
| Link text on white | #2563eb | 5.2:1 | Pass | Good |
| Muted text on light gray | #9ca3af on #f3f4f6 | 2.1:1 | FAIL | Increase contrast |
| CTA button text | #ffffff on #22c55e | 3.1:1 | FAIL for small text | Use darker green or larger text |
期待結果： カラーパレットが一貫性、アクセシビリティ、意味的一貫性について評価されている。 失敗時： 正確な比率を確認するためにコントラストチェッカーツール（WebAIM）を使用する。
スペーシング監査：
## Spacing Consistency Check
| Element Pair | Expected Gap | Actual Gap | Consistent? |
|-------------|-------------|------------|-------------|
| Section title to content | 24px | 24px | Yes |
| Card to card | 16px | 16px/24px | No — inconsistent |
| Form label to input | 8px | 4px/8px/12px | No — varies |
期待結果： レイアウトが体系的なグリッドとスペーシングスケールを一貫して使用している。
失敗時： スペーシングが一貫していない場合は、スペーシングスケールの採用を推奨する（例：Tailwindの space-*）。
主要なブレークポイントでテストする：
| ブレークポイント | 幅 | 対象 |
|---|---|---|
| Mobile | 375px | iPhone SE / 小型スマートフォン |
| Mobile L | 428px | iPhone 14 / 大型スマートフォン |
| Tablet | 768px | iPad ポートレート |
| Desktop | 1280px | 標準的なノートパソコン |
| Wide | 1536px+ | デスクトップモニター |
各ブレークポイントで確認：
## Responsive Review
| Breakpoint | Layout | Touch Targets | Text | Images | Navigation | Issues |
|-----------|--------|---------------|------|--------|------------|--------|
| 375px | OK | OK | OK | Overflow on hero | Hamburger | Hero image clips |
| 768px | OK | OK | OK | OK | Hamburger | None |
| 1280px | OK | N/A | OK | OK | Full nav | None |
| 1536px | OK | N/A | Line length too long | OK | Full nav | Add max-width to content |
期待結果： 主要なすべてのブレークポイントでデザインがテストされ、問題が文書化されている。 失敗時： レスポンシブテストツールが利用できない場合は、CSSメディアクエリのカバレッジをレビューする。
期待結果： ブランド要素がガイドラインに対して検証され、具体的な逸脱が記録されている。 失敗時： ブランドガイドラインが存在しない場合は、これを推奨事項として記録し、代わりに内部一貫性を評価する。
## Web Design Review
### Overall Impression
[2-3 sentences: overall quality, strongest and weakest aspects]
### Visual Hierarchy: [Score/5]
[Key findings with specific references]
### Typography: [Score/5]
[Key findings with specific references]
### Colour: [Score/5]
[Key findings with specific references]
### Layout & Spacing: [Score/5]
[Key findings with specific references]
### Responsive Design: [Score/5]
[Key findings with specific references]
### Brand Consistency: [Score/5]
[Key findings with specific references]
### Priority Improvements
1. [Most impactful change — specific and actionable]
2. [Second priority]
3. [Third priority]
### Positive Notes
1. [What works well and should be preserved]
期待結果： レビューが優先順位付けされた改善事項を含む具体的なビジュアル参照フィードバックを提供している。 失敗時： スコアリングが恣意的に感じられる場合は、代わりにより単純なpass/concern/failシステムを使用する。
review-ux-ui — ユーザビリティ、インタラクションパターン、アクセシビリティ（ビジュアルデザインを補完）setup-tailwind-typescript — デザインシステムのためのTailwind CSSの実装scaffold-nextjs-app — Next.jsアプリケーションのスキャフォールディング