design-review

デザインレビュー

Web アプリやページのビジュアルデザインの品質を確認します。これは UX 監査（使いやすさ、ワークフロー、操作のしづらさを確認するもの）ではありません。デザインがプロフェッショナルで、一貫性があり、洗練されているかを確認します。

目標は、デザインにこだわる人がこれを見て「よくできている」と思うか、「開発者がデザインしたように見える」と思うかを確かめることです。

使用するタイミング

• クライアントやチームに見せる前
• 何かが「しっくりこない」ものの、理由がわからないとき
• 機能を構築したあと、完成とする前
• リリース済みの製品を定期的に品質確認するとき
• UX 監査のあと。こちらはビジュアル面を補完します

ブラウザツールの検出

ux-audit と同じです — Chrome MCP、Playwright MCP、または playwright-cli を使用します。

URL の解決

ux-audit と同じです — localhost より、デプロイ済みまたは公開中の URL を優先します。

確認項目

1. レイアウトと余白

確認項目	良い例	悪い例
余白の一貫性	グリッド内のすべてのカード間で間隔が同じで、すべてのセクションのパディングが同じ	カードによって間隔が 16px のものと 24px のものがある。ヘッダーのパディングが本文と異なる
配置	コンテンツの左端が、各セクションで垂直方向に揃っている	見出し、本文、カードの開始位置がそれぞれ異なる
ゆとり	コンテンツの周囲に十分な余白があり、要素が窮屈に感じられない	テキストがコンテナーの端に接している。ボタンが入力欄に詰めて配置されている
グリッドの整然さ	コンテンツが明確な列グリッドに沿っている	要素が自由に配置され、基盤となる構造がない
レスポンシブ時の比率	どの画面幅でも、サイドバーとコンテンツの比率に意図が感じられる	タブレットでサイドバーが 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 など、関連性のないサイズが使われている
ウェイトの使い分け	本文はレギュラー、ラベルはミディアム、見出しはセミボールド、ボールドは控えめに使用	すべてボールド、または階層がなくすべてレギュラー
テキストの切り詰め	長いテキストは省略記号で切り詰められ、title 属性で全文を表示する	テキストがコンテナーからはみ出す、不自然に折り返される、または省略記号なしで途切れる

3. 色とコントラスト

確認項目	良い例	悪い例
意味に基づく色	デザイントークン（bg-primary、text-muted-foreground）を使用している	生の Tailwind カラー（bg-blue-500、text-gray-300）を使用している
コントラスト比	テキストが WCAG AA を満たしている（本文は 4.5:1、大きなテキストは 3:1）	白地に薄い灰色のテキスト、または暗い背景に暗いテキスト
色の一貫性	同じ青色が、どこでも同じ意味を持つ（プライマリー＝操作）	ある場所では青色が「クリック可能」を意味し、別の場所では「情報」を意味する
ダークモード	すべての要素が見え、境界線が明確で、テキストが消えない	要素が見えなくなる、テキストが読めなくなる、画像の見た目がおかしくなる
ステータスカラー	緑＝成功、黄＝警告、赤＝エラーが一貫している	緑色が、意味の異なる「成功」と「アクティブ」の両方に使われている
色の使いすぎ	2～3 色とニュートラルカラー	明確な階層がなく、虹のように多くの色が使われている

4. 視覚的な階層

チェック項目	良い例	悪い例
主要なアクション	ページごとに明確な CTA が 1 つあり、視覚的に目立つ	同じスタイルのボタンが 3 つあり、注目を奪い合っている
目を細めて見るテスト	ページを目を細めて見ても、最も重要な要素が目立つ	すべての視覚的な重みが同じで、目を引くものがない
段階的な情報開示	最も重要な情報が表示され、詳細は操作すると表示される	すべてが一度に表示され、圧倒される
グループ化	関連する項目が視覚的にグループ化されている（近接、境界線、背景）	関連する項目が散らばり、無関係な項目が隣接している
ネガティブスペース	コンテンツを引き立てる、意図的に設けられた余白	偶然できたように見える余白（不均一、行き場のない空白）

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

チェック項目	良い例	悪い例
ボタンのスタイル	プライマリ、セカンダリ、破壊的アクション用のスタイルが各 1 種類あり、一貫して使われている	アプリ全体でボタンのスタイルが 5 種類ある
カードのスタイル	すべてのカードで角丸、シャドウ、パディングが同じ	角丸のカード、角のあるカード、シャドウ付きのカード、シャドウなしのカードが混在している
フォーム入力欄	すべての入力欄で高さ、境界線のスタイル、フォーカスリングが同じ	高さ、境界線のスタイル、フォーカス時の動作が混在している
アイコンのスタイル	アイコンファミリー（Lucide、Heroicons）が統一され、サイズと線の太さも一貫している	アイコンファミリーやサイズが混在し、塗りつぶしとアウトラインも入り交じっている
角丸	一貫した角丸の尺度（例：入力欄は 4px、カードは 8px、モーダルは 12px）	3px、7px、10px、16px など、角丸の値がばらばら
シャドウ	1〜2 段階のシャドウが一貫して使われている	コンポーネントごとにシャドウの深さが異なる

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

チェック項目	良い例	悪い例
ホバー状態	ボタン、リンク、クリック可能なカードがホバー時に変化する	ホバー時の反応がなく、何がクリック可能なのか分からない
フォーカス状態	すべてのインタラクティブ要素でキーボードフォーカスが見える	フォーカスリングがない、または背景に溶け込んで見えない
アクティブ状態	ナビゲーション項目、タブ、サイドバーリンクに現在の選択状態が表示される	アクティブな項目が非アクティブな項目と同じに見える
トランジション	ホバーやフォーカス時に控えめなトランジションがある（150〜200ms ease）	トランジションがない（唐突）、または遅い（もたつく）
読み込みインジケーター	非同期処理中にスケルトンスクリーンやスピナーが表示される	警告なくコンテンツが表示され、レイアウトがずれる
無効状態	無効な要素の表示が薄くなり、カーソルも変化する	無効なボタンがクリック可能に見え、カーソルも変化しない

7. レスポンシブ品質

チェック項目	良い例	悪い例
モバイルナビゲーション	シンプルなハンバーガーメニューまたはシートメニューで、タップしやすい	デスクトップ用ナビゲーションがモバイル画面に押し込まれ、タップ領域が小さい
画像の拡大縮小	画像が縦横比を保ったままコンテナ全体に表示される	画像が引き伸ばされる、ひどく切り抜かれる、またははみ出す
テーブルのレスポンシブ対応	モバイルでは横スクロールできる、またはカード形式に切り替わる	テーブルが画面幅を超えているのに、列を見る方法がない
タッチ領域	モバイルで少なくとも 44x44px ある	リンク、閉じるボタン、チェックボックスが小さい
タブレット	768px でもレイアウトが適切に表示される（デスクトップとスマートフォンだけでなく）	タブレットの画面幅でレイアウトが崩れたり、不自然な隙間ができたりする

重要度の目安

レベル	意味	例
高	壊れている、またはプロらしくない印象に見える	ダークモードでテキストが見えない、横並びのボタンの高さが異なる
中	仕上がりが粗く見える	余白に一貫性がない、アイコンのスタイルが混在している、省略記号なしでテキストが切り詰められている
低	細かな指摘	1〜2px の位置ずれ、角丸がわずかに異なる、シャドウが強すぎる

出力

.jez/artifacts/design-review.md に指摘事項を書き出します。

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

## Overall Impression
[1-2 sentences — professional / unpolished / inconsistent / clean]

## Findings

### High
- **[issue]** at [page/component] — [what's wrong] → [fix]

### Medium
- **[issue]** at [page/component] — [what's wrong] → [fix]

### Low
- **[issue]** — [description]

## What Looks Good
[Patterns that are well-executed and should be preserved]

## Top 3 Fixes
1. [highest visual impact change]
2. [second]
3. [third]

視覚的な問題がある場合は、指摘箇所のスクリーンショットを撮影します（大半が該当します）。

ヒント

• ダークモードとライトモードの両方を確認してください。問題の多くは、どちらか一方でしか現れません
• 目を細めて見るテストが、階層構造の問題を見つける最も手早い方法です
• 開発者が作成した UI で最もよくある問題は、コンポーネントの一貫性の欠如です
• 「何か違和感がある」と感じる場合、たいていは余白が原因です。まずマージンとパディングを確認してください
• 問題を特定できない場合は、同じカテゴリのよくデザインされたアプリと比較してください