Agent-almanac review-web-design

install

source · Clone the upstream repo

git clone https://github.com/pjt222/agent-almanac

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/pjt222/agent-almanac "$T" && mkdir -p ~/.claude/skills && cp -r "$T/i18n/ja/skills/review-web-design" ~/.claude/skills/pjt222-agent-almanac-review-web-design-f7e96a && rm -rf "$T"

manifest: i18n/ja/skills/review-web-design/SKILL.md

source content

Review Web Design

Webデザインを視覚的品質、一貫性、デバイスをまたいだ効果性について評価する。

使用タイミング

開発前にデザインモックアップやプロトタイプをレビューする場合
実装済みウェブサイトまたはウェブアプリケーションのデザイン品質を評価する場合
デザインレビューセッションでビジュアルデザインにフィードバックを提供する場合
複数のページやセクションにわたるブランド一貫性を評価する場合
ブレークポイントをまたいだレスポンシブデザインの動作を確認する場合

入力

必須: レビュー対象のデザイン（URL、モックアップファイル、スクリーンショット、またはソースコード）
任意: ブランドガイドラインまたはデザインシステムドキュメント
任意: ターゲットオーディエンスの説明
任意: 参照デザインまたは競合他社の例
任意: 特定の懸念領域

手順

ステップ1: ビジュアル階層の評価

ビジュアル階層はユーザーの目を重要度の順にコンテンツへと導く。

明確な焦点: 各ページ/画面に明らかなエントリーポイントがあるか？
見出し階層: 見出しが論理的に降順になっているか（H1 → H2 → H3）？
サイズのコントラスト: 重要な要素がサポート要素より大きいか？
カラーのコントラスト: CTAと主要なアクションが視覚的に目立つか？
ホワイトスペース: スペーシングが論理的なグループを効果的に分離しているか？
読み取りフロー: レイアウトが自然な読み取りパターンに従っているか（F字型、Z字型）？

## 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 |

期待結果： 主要な各ページ/セクションの明確なビジュアル階層が評価されている。 失敗時： モックアップが利用できない場合は、ブラウザの開発者ツールを使用してライブコードから評価する。

ステップ2: タイポグラフィの評価

フォント選択: フォントはブランドとコンテンツタイプに適切か？
フォントのペアリング: 見出しと本文フォントが補完し合っているか（最大2〜3ファミリー）？
タイプスケール: 一貫したスケールが使用されているか（例：1.25のメジャーセカンド、1.333のパーフェクトフォース）？
行の高さ: 本文テキストの行の高さは1.4〜1.6、見出しは1.1〜1.3
行の長さ: 本文テキストの行の長さは45〜75文字（最適は約66）
フォントウェイト: ウェイトの変化が階層を示すために一貫して使用されているか
フォントサイズ: 本文テキストのベースフォントサイズが少なくとも16pxか

/* 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つ以上のフォントファミリーを使用している場合は統合を推奨する。

ステップ3: カラー使用のレビュー

パレットの一貫性: カラーパレットが意図的で限定されているか（通常3〜5色＋ニュートラル）？
ブランドの整合性: カラーはブランドガイドラインと一致しているか？
コントラスト比: テキストがWCAG AA（通常テキストは4.5:1、大きいテキストは3:1）を満たしているか
意味的カラー: カラーが意味のために一貫して使用されているか（赤=エラー、緑=成功）？
色覚異常: 情報がカラーだけで伝えられていないか？
ダーク/ライトモード: サポートされている場合、両方のモードが可読性とブランド一貫性を維持しているか

## 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）を使用する。

ステップ4: レイアウトとスペーシングの評価

グリッドシステム: 一貫したグリッドが使用されているか（12カラム、オートレイアウト、またはカスタム）？
スペーシングスケール: スペーシングが体系的か（4px/8pxベース、またはTailwindのようなスケール）？
整列: 要素がグリッドに整列しているか（「ほぼ整列した」項目がないか）？
密度: 情報密度がコンテンツタイプに適しているか（データ重視 vs. マーケティング）？
ホワイトスペース: ホワイトスペースがグループ化と分離のために意図的に使用されているか？
一貫性: 類似したセクションが同じようにスペーシングされているか？

スペーシング監査：

## 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-*

）。

ステップ5: レスポンシブデザインの評価

主要なブレークポイントでテストする：

ブレークポイント	幅	対象
Mobile	375px	iPhone SE / 小型スマートフォン
Mobile L	428px	iPhone 14 / 大型スマートフォン
Tablet	768px	iPad ポートレート
Desktop	1280px	標準的なノートパソコン
Wide	1536px+	デスクトップモニター

各ブレークポイントで確認：

レイアウトの適応: レイアウトが適切にリフローするか（モバイルでスタック、デスクトップで並列）？
タッチターゲット: インタラクティブ要素がモバイルで少なくとも44x44pxか？
テキストの可読性: ビューポートに適したフォントサイズか？
画像のスケーリング: 歪みやオーバーフローなしに画像がリサイズされるか？
ナビゲーション: モバイルナビゲーションがアクセシブルか（ハンバーガー、ボトムナビなど）？
水平スクロールなし: コンテンツがビューポートから水平にはみ出していない

## 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メディアクエリのカバレッジをレビューする。

ステップ6: ブランド一貫性の確認

ロゴの使用: ロゴが正しくレンダリングされているか（サイズ、スペーシング、クリアゾーン）
カラーの正確性: ブランドカラーが仕様と一致しているか（16進値が「大体」ではなく正確か）
タイポグラフィの一致: フォントがブランドガイドラインと一致しているか
トーン/声: UIコピーがブランドパーソナリティと一致しているか
アイコングラフィ: アイコンが一貫したセットから使用されているか（スタイル、ウェイト、グリッド）
写真スタイル: 画像がブランドガイドラインと一致しているか（該当する場合）

期待結果： ブランド要素がガイドラインに対して検証され、具体的な逸脱が記録されている。 失敗時： ブランドガイドラインが存在しない場合は、これを推奨事項として記録し、代わりに内部一貫性を評価する。

ステップ7: デザインレビューの執筆

## 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システムを使用する。

バリデーション

すべての主要なページ/セクションのビジュアル階層が評価されている
タイポグラフィが可読性、一貫性、スケールについて評価されている
カラーコントラストがWCAG AAの最低基準に対して検証されている
レイアウトとスペーシングがグリッド一貫性について確認されている
レスポンシブデザインが3つ以上のブレークポイントでテストされている
ブランド一貫性がガイドラインに対して検証されている（またはない場合は内部一貫性が評価されている）
フィードバックがビジュアル参照（ページ、セクション、要素）を含む具体的なものである

よくある落とし穴

根拠なしの主観: 「このカラーが好きじゃない」は実行可能でない。なぜか（コントラスト、ブランドの不一致、アクセシビリティ）を説明すること。
アクセシビリティを無視する: ビジュアルデザインレビューにはWCAGコントラストチェックが含まれなければならない。ユーザーを排除する美しいデザインは良いデザインではない。
モックアップのみをレビューする: レスポンシブ動作、ホバー状態、トランジションをテストすること — 静的レイアウトだけではなく。
解決策を規定する: 特定の修正を指示するのではなく（「#333を使用せよ」）、問題を説明すること（「このテキストはこの背景では読みにくい」）。
コンテキストを忘れる: 銀行アプリとゲームサイトは異なるデザイン標準を持つ。適切なコンテキストに対してレビューすること。