デザインレビュー

ウェブアプリやページの視覚的デザイン品質をレビューします。これはUX監査（ユーザビリティ、ワークフロー、摩擦）ではなく、デザインがプロフェッショナルで、一貫性があり、洗練されているかをチェックするものです。

目標：デザインに詳しい人がこれを見たとき、「これはよく作られている」と思うか、それとも「開発者がデザインしたように見える」と思うか？

使用時期

• クライアントやチームに見せる前
• 何か「おかしく見える」が理由が特定できないとき
• 機能を構築してから完成と言う前
• リリース済みプロダクトの定期品質チェック
• UX監査の後 — これはビジュアルコンパニオンです

ブラウザツール検出

UX監査と同じ — Chrome MCP、Playwright MCP、またはplaywright-cli。

URL解決

UX監査と同じ — localhostより本番環境/ライブを優先。

チェック項目

1. レイアウトとスペーシング

チェック項目	良い例	悪い例
一貫したスペーシング	グリッド内のすべてのカード間に同じギャップ、すべてのセクションで同じパディング	あるカードは16pxギャップ、別のカードは24px。ヘッダーパディングとボディが異なる
配置	コンテンツの左端がセクション全体で垂直に整列	見出しは1つのインデント、本文は別、カードはまた別
余裕	コンテンツの周りに余裕のある空白、要素が詰まった感じがしない	テキストがコンテナの端に触れている、ボタンが入力フィールドに密集
グリッド規律	コンテンツが明確なカラムグリッドに従う	要素が自由に配置され、基本構造がない
レスポンシブプロポーション	サイドバー/コンテンツ比が各幅で意図的に見える	タブレットでサイドバーが50%を占め、コンテンツが圧迫される
垂直リズム	一貫した垂直スペーシングパターン（例：8px/16px/24px/32px規模）	ランダムなスペーシング：ここは13px、あそこは27px、どこかは8px

2. タイポグラフィ

チェック項目	良い例	悪い例
階層	h1 → h2 → h3 → 本文で明確な視覚的差異	見出しと本文が同じサイズ/ウェイトに見える
行長	本文は1行50～75文字	フルウィドステキストが150文字以上 — 読みづらい
行高	本文1.5～1.7、見出し1.1～1.3	テキストが詰まったまたは行高が過剰
フォントサイズ	一貫した規模（例：14/16/20/24/32）	ランダムなサイズ：15px、17px、22px で関連性なし
ウェイト使用	本文はRegular、ラベルはMedium、見出しはSemibold、Boldは控えめに	すべてBoldまたはすべてRegularで階層なし
テキスト切り詰め	長いテキストは省略記号で切り詰め、title属性で全文表示	テキストがコンテナをはみ出す、奇妙にラップする、または省略記号なしで切れている

3. 色とコントラスト

チェック項目	良い例	悪い例
セマンティック色	デザイントークンを使用（bg-primary、text-muted-foreground）	生のTailwind色（bg-blue-500、text-gray-300）
コントラスト比	テキストがWCAG AA（本文4.5:1、大きいテキスト3:1）を満たす	白の上の薄い灰色のテキスト、または濃い背景の濃いテキスト
色の一貫性	同じ青は同じ意味（主な色=アクション）	青が1つの場所では「クリック可能」、別の場所では「情報提供」を意味する
ダークモード	すべての要素が見える、境界が定義されている、見えないテキストなし	要素が消える、テキストが読めなくなる、画像が変に見える
ステータス色	緑=成功、黄=警告、赤=エラー 一貫している	緑が成功と「アクティブ」の両方に使われている
色の過度な使用	2～3色+中立色	虹色で階層がない

4. ビジュアル階層

チェック項目	良い例	悪い例
主要アクション	ページごとに1つの明確なCTA、視覚的に優位	3つの同じ様式のボタンが注意を競っている
まばたきテスト	ページを目を細めて見ると、最も重要な要素が際立つ	すべてが同じ視覚的重さ — 目を引く要素がない
段階的公開	最も重要な情報が見える、詳細はインタラクションで利用可能	すべてが一度に表示される — 圧倒される
グループ化	関連アイテムが視覚的にグループ化されている（近接、境界、背景）	関連アイテムが散在、無関係なアイテムが接触
ネガティブスペース	コンテンツを枠付ける意図的な空白	偶然に見える空白（不均等、閉じ込められた空白）

5. コンポーネント一貫性

チェック項目	良い例	悪い例
ボタンスタイル	1つの主要なスタイル、1つのセカンダリ、1つの破壊的 — 一貫して使用	アプリ全体で5つの異なるボタンスタイル
カードスタイル	すべてのカードが同じborder-radius、シャドウ、パディング	あるカードは丸い、あるのは角ばった、あるはシャドウ、あるはなし
フォーム入力	すべての入力が同じ高さ、同じボーダースタイル、同じフォーカスリング	高さ、ボーダースタイル、フォーカス動作が混在
アイコンスタイル	1つのアイコンファミリー（Lucide、Heroicons）、一貫したサイズとストローク	混在したアイコンファミリー、異なるサイズ、塗りつぶされたもとアウトラインのもが混在
ボーダー半径	一貫した半径規模（例：4px入力、8pxカード、12pxモーダル）	ランダムな半径値：3px、7px、10px、16px
シャドウ	1～2つのシャドウレベルが一貫して使用	すべてのコンポーネントが異なるシャドウ深度

6. インタラクション設計

チェック項目	良い例	悪い例
ホバー状態	ボタン、リンク、クリック可能カードがホバー時に変化	ホバーフィードバックなし — ユーザーがクリック可能か不確実
フォーカス状態	すべてのインタラクティブ要素でキーボードフォーカスが見える	フォーカスリングが見えないまたは背景と区別がつかない
アクティブ状態	ナブアイテム、タブ、サイドバーリンクが現在の選択を表示	アクティブアイテムが非アクティブと同じに見える
トランジション	ホバー/フォーカス時に微妙なトランジション（150～200ms ease）	トランジションなし（不快感）または遅いトランジション（遅延感）
読み込みインジケーター	非同期操作中にスケルトンスクリーンまたはスピナー	警告なしでコンテンツが表示、レイアウトが変動
無効化状態	無効な要素が視覚的に淡色化、カーソルが変わる	無効なボタンがクリック可能に見える、カーソルが変わらない

7. レスポンシブ品質

チェック項目	良い例	悪い例
モバイルナビ	クリーンなハンバーガー/シートメニュー、タップが容易	デスクトップナビがモバイルに圧迫、小さいタップターゲット
画像スケーリング	画像がコンテナに合わせて比例的に埋まる	画像が歪む、不適切に切られる、またははみ出す
テーブルレスポンシブ	モバイルで水平スクロール、またはカードにスタック	テーブルが画面より広い、列を見る方法がない
タッチターゲット	モバイルで最低44x44px	小さいリンク、近いボタン、チェックボックス
タブレット	レイアウトが768pxで機能（デスクトップと電話だけでなく）	タブレット幅でレイアウトが壊れる、奇妙なギャップ

重大度ガイド

レベル	意味	例
高	壊れているまたはプロフェッショナルでない見える	ダークモードで見えないテキスト、インラインで異なる高さのボタン
中	洗練されていない見える	一貫性のないスペーシング、混在したアイコンスタイル、省略記号のない切り詰め
低	細かい指摘	1～2px配置、わずかに異なるborder-radius、シャドウが強すぎる

出力

.jez/artifacts/design-review.md に結果を書き込む：

# Design Review: [App Name]
**Date**: YYYY-MM-DD
**URL**: [url]

## Overall Impression
[1-2文 — プロフェッショナル/洗練されていない/一貫性がない/クリーン]

## Findings

### High
- **[問題]** at [ページ/コンポーネント] — [何が悪いか] → [修正]

### Medium
- **[問題]** at [ページ/コンポーネント] — [何が悪いか] → [修正]

### Low
- **[問題]** — [説明]

## What Looks Good
[よく実行されているパターン、保持すべきパターン]

## Top 3 Fixes
1. [最高の視覚的インパクト変更]
2. [2番目]
3. [3番目]

問題が視覚的な場所のスクリーンショットを撮ります（ほとんどのもの）。

ヒント

• ダークモードとライトモード の両方をチェック — ほとんどの問題は一方にのみ現れます
• まばたきテストは階層問題を見つける最速の方法です
• コンポーネント一貫性がデベロッパー構築UIで最も一般的な問題です
• 「おかしく見える」は通常スペーシングを意味します — マージンとパディングを最初にチェックしてください
• 問題を特定できない場合は、同じカテゴリの良く設計されたアプリと比較してください