ux-aesthetics-audit

ビジュアル美学監査スキル

このスキルの動作（最初にお読みください）

これは評価型のスキルです — 既存の成果物をレビューするものであり、生成は行いません。自動実行され、生成系スキルから検証ステップとして呼び出されるように作られています。これはリポジトリのビジュアル品質のバックボーンです。UI を生成するジェネレーター（pricing、login-signup、dashboard、onboarding、コンポーネント系スキル）は、乱雑に陥ったり階層を壊したりしていないかを確認するためにここへ引き継ぎます。

これはビジュアル構成を担います。重複を避けるため、意図的に2つを委譲しています。

• 色のコントラスト比、およびあらゆるアクセシビリティ上の懸念（キーボード、スクリーンリーダー、代替テキスト）→ アクセシビリティ監査。このスキルが判断するのは視覚的なコントラスト／強調と調和であり、WCAG 比ではありません。
• ユーザビリティ、フロー、インタラクションロジック → ヒューリスティック監査。このスキルが判断するのはどのように見えるかであり、どのように機能するかではありません。

スコープの規律。 直接呼び出された場合（ユーザーがこの監査を指定した場合）、この懸念のみをレビューしてください — 兄弟となる監査を引き込まないでください。オーケストレーター（ux-design-review）または生成系スキルが docs/orchestration-policy.md に基づいてこれを呼び出す場合にのみ、他のレンズと並んで実行され、そこでは**ティア B — 提供される（デザインシステムがすでにビジュアルの調和を定義している場合は抑制される）**に位置します。明示的なスコープが常に優先されます。

---

このスキルがデフォルトの動作と比べて変えるもの

デフォルトでは、ビジュアルに関するフィードバックは曖昧で主観的です — 「もっとすっきりさせて」「余白を増やして」「少し煩雑に見える」 — 原則も、重大度も、修正案もありません。このスキルは次を強制します。

1. すべての指摘が、違反された原則を明示する（階層、強調、近接など）。
2. 重大度が評価される — 走査／理解を妨げるものか、単なる磨き込みかによって。
3. 具体的な修正案であり、雰囲気ではない。
4. 明示的な過剰デザインチェック — ジェネレーターが最も見逃しやすく、「ベストプラクティスを増やす」ことが引き起こしがちな失敗モードです。

これは好みの取り締まりではありません。走査、理解、あるいは知覚される品質を損なう原則違反を指摘してください — 個人的なスタイルの好みではありません。

---

評価フレームワーク — 何を確認し、違反がどのようなものか

それぞれを順に確認してください。原則、重大度、修正案を付けて指摘します。

1. ビジュアル階層と視線の流れ

ユーザーには、1つの明確な入口と、コンテンツを通る導かれた経路があるべきです（大きさ、太さ、色、間隔、位置）。階層は動き、コントラスト、プロポーションによって達成されます。

指摘すべき場合： 最初に目が留まる場所が明らかでない。主要なアクションが最も目立つ要素になっていない。すべてが同じ視覚的な重みである。読む順序がレイアウトと衝突している。

• ❌ 3つのカード、3つの「主要」ボタン、大きなヒーロー画像、そしてバナーがすべて競合している — 目はどこへ行けばよいか分からない。
• ✅ 1つの支配的な焦点（主要なアクション／重要なメッセージ）。それ以外はすべて後退する。

2. 強調とコントラスト

強調は1つの要素を焦点にします（フォン・レストルフ効果）。コントラストは要素間の差です — 複数のコントラスト軸（大きさ＋色、形＋位置）を目指し、大胆なアクセントにはニュートラルなアンカーを組み合わせて、目が休める場所を用意します。

指摘すべき場合： すべてが強調されている（つまり何も強調されていない）。コントラストの軸が1つだけで弱い。高彩度の色が至る所にあり、緊張を吸収するニュートラルがない（「ウィリー・ウォンカ」パレット）。

• ❌ すべてのセクションが明るいアクセントカラーを使っている → ビジュアルノイズ、焦点がない。
• ✅ ほとんどがニュートラルな面で、主要なアクション用に1つのアクセントを取ってある。

3. 余白とネガティブスペース

ホワイトスペースは呼吸のための余地であり、無駄ではありません。受動的なスペースはグループ内を分離し、能動的なスペースは要素を意図的に際立たせます。受動的なスペースは「少なすぎる」になるまで気づかれません。

指摘すべきケース: 窮屈で、コンテンツが端から端まで詰め込まれている。類似した要素間の間隔が不均一・不整合。またはその逆 — 余白が多すぎてコンテンツが分断され、目的を見失っているように感じられる。

• ❌ フォームフィールドとラベルが呼吸の余地なく詰め込まれている → ストレスを感じさせ、スキャンしにくい。
• ✅ 関連する項目をグループ化し、焦点に余地を与える、一貫した十分な余白。

4. 整列とグリッド

要素は共通の軸／共有グリッド上に配置されるべきです。整列は構造的でプロフェッショナル、かつ落ち着いた印象を生み出します。

指摘すべきケース: 端がギザギザしている、要素がグリッドから外れている、マージン／ガターが不整合、ヘッダーがカラム構造に整列していない。

• ❌ ラベルは左揃え、入力は中央揃え、ボタンは軸から外れて浮いている。
• ✅ 一貫した単一の整列システム。意図的な崩しのみ。

5. グループ化と近接

関連する項目は近くに配置し、無関係な項目は離します（ゲシュタルトの近接）。類似性（共通の形状／サイズ／色）は、同等の重要度を持つ項目を統一します。

指摘すべきケース: 関連する項目が離れていたり、ボーダーで区切られている一方で、無関係な項目が詰め込まれている。同等の重要度の項目（例：カードの行）が不整合にスタイリングされている。

• ❌ フィールドのヘルパーテキストが、そのフィールド自身よりも次のフィールドに近く配置されている。
• ✅ 余白がグループ化を表現している。カードの行が一貫した単一の扱いを共有している。

6. 一貫性と反復

要素（色、形状、タイポグラフィ、余白）を反復することで、統一感と学習可能なリズムが生まれます。カラーシステムは意図的に設計されるべきです — 1つのブルーであって、3つのほぼ同一のブルーではありません。

指摘すべきケース: 同じコンポーネントが画面全体で異なるスタイルになっている。1つのトークンにすべき色／角丸／シャドウがほぼ重複している。同じ重要度のボタンが異なって見える。

• ❌ 理由もなく、わずかに異なる3つのグレーと2つのボタンの角丸。
• ✅ 小さく一貫したスタイルセットを繰り返し適用している。

7. タイポグラフィの階層

サイズ、ウェイト、スタイル、色、大文字小文字で階層を構築します — ただしこれらの手法は最大3つ程度までにし、見出しレベルは2〜3、本文テキストは16px以上に保ちます。タイポグラフィにおける色の使用は控えめに。

指摘すべきケース: 見出しに大きい＋太字＋色付き＋大文字＋イタリックが一度に重なっている。見出しレベルが3つを超えている。本文テキストが小さすぎる。色が多すぎるタイポグラフィに適用されている。

• ❌ 巨大で、太字で、赤く、しかもオールキャップスの見出し → 雑然として、叫んでいるよう。
• ✅ サイズ＋ウェイトだけでレベルを明確に分離。色は1つのアクセント用に取っておく。

8. 奥行きとエレベーション

シャドウはエレベーションを示し、浮き上がったサーフェス（カード、モーダル、FAB）に目を引き寄せます。単一で一貫した光の方向と、定義されたエレベーションスケールが、奥行きを読み取りやすく保ちます。

指摘すべきケース: 同じ画面でシャドウが異なる方向に落ちている。すべての要素にシャドウがある（そのためエレベーションが意味をなさない）。カードとその内側のボタン／アイコンにシャドウが重なっている。

• ❌ カードにシャドウ、そのボタンにシャドウ、そのアイコンにシャドウ → 濁って、本当の階層がない。
• ✅ サーフェスごとに1つのエレベーションレベル。シャドウは光の方向を共有している。

オーバーデザインパス（横断的）。 8つのチェックの後、一歩引いて見てください。競合する焦点が複数ありますか？アクセントカラーが2〜3色を超えていますか？シャドウが重なっていますか？タイポグラフィの扱いが3つを超えていますか？タスクに寄与しない装飾的要素がありますか？画面が雑然と感じられるなら、どの原則が過剰に適用されているかを名指ししてください — これがジェネレーターが頼りにする具体的なシグナルです。

---

重大度の評価

重大度	意味
Critical	階層が崩壊している — 認識できる焦点が存在しない / 主要なアクションが目立たない、あるいは雑然としすぎてユーザーが何が重要か判断できない。ビジュアルデザインがその役割を果たしていない。
Major	強調の競合、一貫性のないコンポーネントのスタイリング、窮屈または不均一な余白、位置ずれ、3つを超えるタイポグラフィの要素、衝突または重なった影 — スキャンを遅らせ、知覚される品質を損なう。
Minor	仕上げ — わずかにずれたプロポーション、1つの小さな不整合、ほぼミスに見えるような微妙なコントラストの要素。

修正がどれほど主観的に感じられるかではなく、スキャン、理解、知覚される品質への影響で評価してください。美的ユーザビリティ効果に注意してください。洗練された見た目は軽微なユーザビリティの問題に対する許容を得られますが、「見た目が良い」ことを壊れた階層の言い訳にしてはいけません。

---

監査の出力形式

## Visual Aesthetics Audit — [Screen / Component]
Context: [platform · primary task / focal action, if known]

### Critical
- [Issue] — what's wrong → fix. (Principle: …)
### Major
- …
### Minor
- …
### Working well ✓
- …

**Overdesign verdict:** [clean / borderline / overdesigned] — the 1–3 over-applied principles to pull back.
**Top 3 priorities:** the highest-impact fixes.

最後に過剰デザインの判定と優先順位付けされたトップ3を記載してください — それが呼び出し元のジェネレーターが行動する対象です。

---

良い監査の実行方法

1. コンテキストを確立する — プラットフォームとその画面の主要タスク / 焦点となるアクション。階層は、何が最も重要であるべきかに照らしてのみ判断できます。
2. 装飾ではなくタスクに資する。 すべての要素はその視覚的な重みに値するべきです。コンテンツと競合する装飾は指摘してください。
3. 好みを押し付けない。 スキャン / 理解 / 品質を損なう原則違反を指摘し、あなた個人が違う選択をするであろうスタイルを指摘しないでください。
4. 過剰デザインパスを明示的に実行する — これは最も価値の高い出力であり、ジェネレーターがこのスキルを呼び出す理由です。
5. 委ねる — コントラスト比 / アクセシビリティはアクセシビリティ監査に、ユーザビリティ / フローはヒューリスティック監査に委ね、ここで再導出しないでください。

---

よくある do/don't パターン

❌ Don't	✅ Do
「もっとクリーンに / 雑然としないように」	過剰に適用された原則 + 具体的な修正を挙げる
すべての些細な点を等しく扱う	階層 / スキャンへの影響で評価し、トップ3を示す
すべてを強調する	焦点は1つ、それ以外はすべて後退させる
弱いコントラスト次元が1つ	複数のコントラストのポイント + ニュートラルなアンカー
アクセントカラーをどこにでも	ほとんどをニュートラルに、アクセントは主要なアクションのために取っておく
見出しに太字 + カラー + 大文字 + サイズを重ねる	タイポグラフィの要素は3つ以内、見出しレベルは2〜3、本文は16px以上
カードとその内側のボタンとアイコンの両方に影	サーフェスごとに1つのエレベーションレベル、一貫した光の方向
WCAGコントラストやキーボードの問題を再導出する	アクセシビリティ監査に委ねる
主観的なスタイルの好みを指摘する	ユーザーにコストを強いる原則違反のみを指摘する

---

出典レッスン (Uxcel)

• 13 Core Visual Design Principles
• Visual Design Analysis
• Positive & Negative Space in Design
• Contrast in Design Composition
• Typographic Hierarchy
• Elevation & Shadows in Design Systems
• Establishing Relationships in Design Composition