enhance-web-redesign

Surface router: /uiux。現在地：enhance-web-redesign。ネイティブの iOS／Android（SwiftUI／Compose、Web レイヤーなし）は対象外です。Apple HIG／Material を直接使用してください。

Redesign Skill

自由度：MIXED。 テイストと監査上の判断は [HIGH freedom]、スタックの維持と機能を壊さないことは [LOW freedom — run exactly] です。

推論方法

1. スキャン — フレームワーク、スタイリング、現在のパターンを確認します
2. トリアージ — まず AI らしさを確認します（3 つ以上ならスロップです。該当項目をなくしてください）
3. 修正 — 既存のスタックを使い、修正の優先順位に沿って対応します。書き直しはしません
4. 維持 — フローが引き続き機能すること、インポート前に依存関係が存在することを確認します

実例

スキャン： Vite + Tailwind v4、全体で Inter を使用、同じ大きさの機能カードが 3 枚、ホバー効果なし。 トリアージ： Inter、紫のヒーローグラデーション、カード 3 枚、「ようこそ…」——AI らしさが 4 項目あります。 修正： Geist、アクセントカラー 1 色、非対称の機能紹介行、ホバー／アクティブ状態を追加し、ルートは維持します。 維持： npm run build が成功し、新しいフレームワークは追加しません。

報告前の自己批評

• 同じスタック — フレームワークやスタイリングライブラリを移行していないこと
• AI らしさを排除 — Phase 0 で確認した特徴が、見た目を変えただけではなく実際になくなっていること
• 状態が存在 — ホバー／フォーカス／読み込み中／空／エラーの状態があること
• 適切な担当 — 1 ページの仕上げには enhance-web-ui、計画のみのスロップ対策には plan-antislop、新規開発には design-frontend を使うこと

仕組み

既存のプロジェクトに適用する場合は、次の手順に従います。

1. スキャン — コードベースを読みます。フレームワーク、スタイリング方法（Tailwind、バニラ CSS、styled-components など）、現在のデザインパターンを特定します。
2. 診断 — 以下の監査を実施します。見つかった汎用的なパターン、弱点、欠けている状態をすべて列挙します。
3. 修正 — 既存のスタックを活用して、対象を絞った改善を適用します。ゼロから書き直さず、現在の実装を改善します。

Phase 0：60 秒で行う AI らしさのトリアージ [HIGH freedom]

本格的な監査の前に、「AI が生成したような見た目」を強く感じさせる特徴をざっと確認します。3 つ以上見つかった場合、ページはスロップに見えます。これらをなくすのが最も手早い改善です。（アンチスロップの調査をもとにまとめたものです。anti-slop-ui と taste-skill を参照してください。）

• Inter／Roboto だけを書体として使っている
• ヒーロー、ボタン、アイコンに 紫から青へのグラデーション を使っている
• 横一列に 同じ大きさの機能カードが 3 枚 並んでいる
• すべてが ピル型（一律に rounded-full のバッジとボタン）
• ヒーローのコピーが 「[Product] へようこそ」／「あなたの…を改善」
• 本文のあらゆる文に ダッシュ記号 が散りばめられている
• Lucide／Feather アイコンで、ロケットが「ローンチ」、盾が「セキュリティ」を表している
• 非対称性も重なりもない、左右対称の すべて中央揃え のレイアウト
• 白いカードに、汎用的な shadow-lg の真っ黒な影を使っている
• インタラクティブ要素に ホバー／アクティブ／フォーカス状態がない
• ページの背景色に クリーム色／オフホワイト をデフォルトで使っている
• すべての見出しに イタリック体のアクセント語 がある
• すべてのセクションの上に 「01 / 02 / 03」形式の番号、または等幅フォントの小見出しラベル がある

まずこれらをなくしてから、全体の監査を行います。

デザイン監査 [HIGH freedom]

各カテゴリを確認し、見つかった汎用的なパターン、弱点、欠けている状態をすべて列挙します。カタログの各項目には、問題とその修正方法が記載されています。 タイポグラフィ · 色とサーフェス · レイアウト · インタラクションと状態 · コンテンツ · コンポーネントのパターン · アイコン · コード品質 · 戦略上の見落とし（AI が忘れがちなこと）。 監査カタログ全文：references/design-audit.md の「§Design Audit」。

アップグレード手法 [HIGH freedom]

改善する際は、汎用的なパターンを置き換えるため、タイポグラフィ、レイアウト、モーション、サーフェスに関する効果の高い手法を取り入れます（可変フォントのアニメーション、アウトラインから塗りつぶしへのテキスト切り替え、ブロークングリッド、視差効果のあるカードスタック、段階的な出現、スプリング物理、真のグラスモーフィズム、スポットライトボーダー、粒子状のオーバーレイ、色味を加えた影）。 全手法：references/design-audit.md の「§Upgrade Techniques」。

修正の優先順位 [HIGH freedom]

視覚的な効果を最大限にし、リスクを最小限に抑えるため、次の順序で変更を適用します。

1. フォントの変更 — 最も即効性があり、リスクも最小
2. カラーパレットの整理 — 相性の悪い色や彩度が高すぎる色を取り除く
3. ホバー状態とアクティブ状態 — インターフェースに動きを感じさせる
4. レイアウトと間隔 — 適切なグリッド、最大幅、一貫したパディング
5. 汎用的なコンポーネントの置き換え — ありがちなパターンを、より現代的なものに置き換える
6. 読み込み状態、空の状態、エラー状態の追加 — 仕上がりを感じさせる
7. タイポグラフィのスケールと間隔の調整 — 仕上げの上質なアクセント

ルール [LOW freedom — 正確に実行]

• 既存の技術スタックを使用します。フレームワークやスタイリングライブラリを移行しないでください。
• 既存の機能を損なわないでください。ルート、ハンドラー、状態を維持し、報告前にリポジトリのビルドとチェックを実行してください。
• 新しいライブラリをインポートする前に、まずプロジェクトの依存関係ファイルを確認してください。
• プロジェクトでTailwindを使用している場合、設定を変更する前にバージョン（v3かv4か）を確認してください。
• プロジェクトにフレームワークがない場合は、バニラCSSを使用してください。
• レビューしやすく、変更対象を絞ってください。大規模な書き換えではなく、小さく的を絞った改善を優先してください。

参考資料

• デザイン監査のカタログと改善テクニック