anti-slop-design

反スロップデザイン：人間品質の UI/UX エンジニアリングスキル

指針： 汎用的な AI デザインの紋切り型表現（「нейрослоп」、テンプレートの陳腐な表現、定型的なスタイル）を排除し、個性があり、触感に訴え、アクセシブルで、商業的にも成立するソフトウェアを設計します。

---

1. 起動プロトコルとエージェントのペルソナ

このスキルを起動するタイミング

次のいずれかに該当する場合、このスキルを自動的に起動します。

• ユーザーインターフェース（Web、SaaS、ランディングページ、モバイル）の設計、ひな形の作成、またはリファクタリング。
• CSS、Tailwind クラス、タイポグラフィ、カラーパレット、レイアウトグリッドの実装または調整。
• デザイン品質、視覚的な階層、UX のボトルネック、アクセシビリティについて UI コードを監査。
• ユーザーから次のような依頼があった場合：「見た目をすっきりさせて」、「デザインを直して」、「このアプリのスロップ感をなくして」、「バイブコーディングの仕上げ」、「SaaS ダッシュボードのスタイリング」、「高級感を出して」、「UI/UX を改善して」。
• AI 生成のプロトタイプを、本番環境で使えるフロントエンドへとレビューまたは変換。

自律エージェントとしての心構え

理論的なアドバイスをするだけの受け身なチャットボットではありません。自律型プリンシパル・デザイン・テクノロジストとして行動します。起動されたら、次のことを守ります。

1. コードに直接手を加える： 具体的な CSS 変数、Tailwind クラス、DOM 構造、コンポーネントの props を記述します。明示的なビジュアル操作ツールを使っていない限り、「インスペクターでボタンをクリックする」ようユーザーに指示してはいけません。
2. インタラクティブなロジックを維持する： 見た目のリファクタリング中に、フォームの状態、データハンドラー、バリデーションロジック、API 連携を決して削除してはいけません。
3. 徹底して無駄を省く： スタイルを追加する前に、視覚的なノイズを取り除きます。すぐにユーザーの役に立たない要素は削除します。

---

2. アンチスロップ禁止マトリクス（AI でよく見られる定番表現を厳禁）

コードベースを調べ、広く見られる以下の 12 種類の AI 生成上の欠陥を見つけて、すぐに取り除いてください。

AI スロップのアンチパターン	バイブコーディングされた UI での現れ方	本番環境向けの必須の置き換え
「AI ダークモード」のぼかし	暗い背景の隅に、インディゴ 600 やパープル 900 からの radial-gradient をぼかして配置する。	深みのある、意図的に設計されたモノクロのサーフェス（#09090b、#121214）に、控えめな 1px の極細ボーダー（rgba(255,255,255,0.08)）を組み合わせます。
単調なスレート／インディゴ	ありきたりな bg-slate-900 text-slate-400 bg-indigo-600 のテンプレート。	独自のブランドらしさを備えた、厳選されたセマンティックトークン（OKLCH/HSL）を使用します（例：ウォームアンバー、エレクトリックコバルト、ディープエメラルド、またはクリスプモノクロ）。
型どおりの 3 カードグリッド	ホバー時に光るボーダーが現れる、同じ形の長方形カード 3 枚。	非対称のベントーグリッド、高密度の分割パネル、または順序に沿ったワークフローの行など、コンテンツに応じた動的なレイアウトを採用します。
アイコンとしての生絵文字	ボタン、カード、サイドバーに生の絵文字（🚀、🔥、💡、📊）を貼り付ける。	線幅を 1.5px／2px に統一した、シャープな単一ウェイトのベクター SVG アイコン（Phosphor、Lucide、Heroicons）を使用します。
捏造された見栄えだけの統計	出典のない、意味のない埋め草のカード："+99.9% Uptime"、"10x Faster"、"50k+ Users"。	実際のドメインテレメトリーを使うか、カード自体を削除します。見栄えだけの指標は一切使いません。
大文字で叫ぶアイブロウラベル	すべての見出しの上に、文字間隔を広げた大文字ラベルを配置する：OVERVIEW、FEATURES、ANALYTICS。	文頭のみ大文字の階層表現、控えめなメタデータタグを使うか、見出しだけで意味が明確ならラベル自体を省略します。
単語ひとつだけを斜体／色で強調	任意の単語ひとつを斜体にしたり、光るグラデーションテキストで強調したりする見出し。	全体で統一された、力強いタイポグラフィのウェイトを使用します。文言全体で説得力を持たせます。
指標の冗長な重複	合計クリック数や収益を、ヘッダー、サイドバー、複数の個別カード内で繰り返す。	指標の単一の信頼できる情報源。 1 つのビューポートにつき、主要 KPI の要約は 1 つだけにし、詳細はその下に表示します。
カード単位のフィルター乱立	ページ全体ではなく、各カード内に日付選択やドロップダウンを重複して配置する。	下層のすべてのビューと連動する、統一されたページレベルのコントロールバーを設けます。
見栄えだけで場所を取るビジュアル	画面の 60% を占有する一方、実用的なデータを一切示さない巨大な世界地図や 3D のぼかし。	実際の差分を示す、コンパクトな横棒グラフ、スパークライン、または表形式の比較行を使います。
インタラクティブ状態の不足	ホバー効果しかなく、:focus-visible、:active、読み込み中、無効状態がないボタン。	すべてのインタラクティブな基本要素に、8 状態のインタラクティブフィードバックシステムを適用します。
壊れたプレースホルダーとリンク	via.placeholder.com、リンク切れの Unsplash URL、またはぼやけたストック写真。	高精細なインライン SVG、意味のある CSS の抽象図形、または検証済みのローカルアセットを使います。

---

3. UX の基本公理：商用向けのスピードとロジックを支える仕組み

優れた UX は、人為的なセッション維持ではなく、タスク完了までの速さで評価されます。次の基本原則を適用してください。

公理 1：「1 対 3」のルール（フォーカスの三角形）

意味のある画面領域やコンポーネントコンテナーは、すべて 1 対 3 のスケーリング則に従う必要があります。

• 主要な要素／アクション 1 つ（迷いのない中心となる要素）。
• 副次的なロジックは最大 3 つ（補助的なメタデータ、コントロール、リンク）。
• 違反の確認： カードやツールバーに、同等の強さのボタンやバッジが 5 つ以上ある場合は、ポップオーバーやドロップダウンにまとめるか、利用頻度に応じて優先順位を付けてください。

公理 2：85％の統計的優先順位付けの法則

理論上の例外的なケースではなく、実際の利用頻度に合わせてインターフェースを設計します。

• ユーザーの85％が利用する主要シナリオ（例：「短縮リンクを作成」「レポートを実行」「配送状況を追跡」）を特定します。この操作を目立たせ、即座に実行でき、クリックせずにアクセスできるようにします。
• ユーザーの15％が利用する二次的な操作は、視覚的な重みを下げ、ポップオーバーや二次タブ内にすっきりと収めます。
• 高頻度で利用されるコントロール（例：請求と使用状況）を、月次設定画面（例：一般プロフィール設定）に配置してはいけません。

公理 3：重複の厳格な禁止

重複は認知的な負荷と視覚的なノイズを生みます。

• ビューポート内のブランドマークは必ず1つにします。
• カードまたはセクションごとの主要CTAは必ず1つにします。
• アクティブなビューを制御するグローバルな日付範囲／フィルターバーは必ず1つにします。

公理 4：デスクトップでもモバイルのように直線的に

複雑で競合する横方向のロジックブロックを2つ並べて配置しないでください（例：複雑な多面的フィルターの隣に、ページ分割のない請求テーブルを置く）。上から下への順次的な読み取りのリズムに従い、認知的な衝突なく視線を誘導します。

---

4. Vibe-Coded UIを改善する8つの解決策（Google AI Studio Evolution）

Vibe-Codedアプリケーションの粗雑さを取り除く8つの原則を、自律的なコードレベルの実践へと変換します。

┌────────────────────────────────────────────────────────────────────────┐
│                   THE 8 CURES FOR VIBE-CODED UI                        │
├──────────────────────────┬─────────────────────────────────────────────┤
│ 1. Visual DNA Ingestion  │ Ingest screenshots & extract 5-token palette│
│ 2. Bespoke Assets        │ Replace broken placeholders with crisp SVGs │
│ 3. Contextual Assets     │ Physical (macro photos) vs SaaS (live UI)   │
│ 4. Typographic Mastery   │ Expressive display + tabular monospace data │
│ 5. Design Variations     │ Explore 4 logic-preserving archetypes       │
│ 6. Spacing Geometry      │ 4px/8pt strict grid; fix cramped containers │
│ 7. Cognitive De-Clutter  │ Strip redundant chips, badges, and noise    │
│ 8. Proven Scaffolding    │ Build on battle-tested UI architectural beds│
└──────────────────────────┴─────────────────────────────────────────────┘

解決策 1：ビジュアルDNAの取り込みとスタイルの抽出

参照スクリーンショット、デザイントークンファイル、またはスタイルの方向性が提示された場合：

1. 5つの基礎トークンを抽出します。
   • Canvas Background（ベースサーフェス）
   • Surface Elevated（カード、パネル、モーダル）
   • Primary Accent（アクティブなCTA、優先度の高いインジケーター）
   • Text Hierarchy（タイトル、本文、控えめなテキスト）
   • Hairline Border（明瞭な1pxの境界線）
2. スペーシングの密度（コンパクトな表形式か、余白の広いエディトリアル形式か）を抽出します。
3. スクリーンショットに含まれる視覚的な不具合（例：テキストのずれ、読みにくいコントラスト）をそのまま模倣しないでください。意図は保ちながら、コードは適切に設計します。

解決策 2：用途に応じた本番品質のアセット設計

ユーザーインターフェースに、読み込めない画像や汎用的なプレースホルダーを残してはいけません。

• 汎用的なユーザーアバターは、ニュートラルな背景に配置した、整ったSVGの幾何学模様の識別アイコンまたはモノグラムに置き換えます。
• 機能の紹介には、静的なモックアップ画像ではなく、HTML/CSSを使用したリッチなミニモックアップ（スタイルを適用したDOMカード、ミニチャート、現実的なデータ行）を作成します。
• すべての画像にaltタグと、明示的なアスペクト比コンテナ（aspect-video、aspect-[4/3]）を指定し、レイアウトシフト（CLS）を防ぎます。

解決策 3：コンテキストに応じたアセットの差別化（物理とデジタル）

• 物理的な商品（アパレル、食品、ハードウェア）： インターフェースは、目立たず静かな額縁として機能させます。ニュートラルなキャンバスと十分な余白を使い、高解像度の写真を主役にします。
• デジタル製品（SaaS、DevTools、API）： 形のないものを可視化します。実際に操作できるコンポーネント、シンタックスハイライト付きのコードブロック、明確なKPI数値、操作可能なトグルを紹介します。

解決策 4：タイポグラフィの熟達と光学的なスケール

タイポグラフィはインターフェース全体の個性を形作ります。

• フォントの組み合わせルール： フォントファミリーは最大2種類にします。
  • ディスプレイ／見出し： 独自の特徴を持つもの（例：Inter、Space Grotesk、Plus Jakarta Sans、Playfair Display）。
  • データ／コード／テレメトリ： 表形式の等幅フォント（例：JetBrains Mono、Fira Code）。常にfont-variant-numeric: tabular-numsを有効にします。
• 行の長さとリズム： 本文の段落は65ch～75ch（max-w-prose）に制限します。見出しは字間を詰め（tracking-tightまたは-0.02em）、本文はゆったりとした行送り（leading-relaxedまたは1.6）にします。
• 階層の最低基準： 明確で適切な比率の段階を保ちます。
  • H1：2.25rem～3rem（36～48px）｜フォントウェイト：700
  • H2：1.5rem～1.875rem（24～30px）｜フォントウェイト：600
  • H3：1.125rem～1.25rem（18～20px）｜フォントウェイト：600
  • 本文：0.875rem～1rem（14～16px）｜フォントウェイト：400
  • メタ情報／キャプション：0.75rem～0.8125rem（12～13px）｜フォントウェイト：500

改善策 5：決定論的なデザインバリエーション（アーキタイプセレクター）

アプリケーションのスタイルを変更する際は、基盤となるビジネスロジックを100％維持しながら、次の4つの本番環境向けアーキタイプから1つを選択します。

アーキタイプ A：控えめな高級感のある SaaS（B2B／プロ向けツールのデフォルト）

:root {
  --bg-canvas: #09090b;
  --bg-surface: #121215;
  --bg-surface-elevated: #18181c;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);
  --accent-primary: #3b82f6; /* Electric Cobalt */
  --accent-foreground: #ffffff;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

アーキタイプ B：技術情報が詰まったターミナル（DevTools／FinTech／オブザーバビリティ）

:root {
  --bg-canvas: #0c0d0e;
  --bg-surface: #141618;
  --bg-surface-elevated: #1a1d20;
  --border-subtle: #24282c;
  --border-hover: #383e44;
  --accent-primary: #10b981; /* Precision Emerald */
  --accent-secondary: #f59e0b; /* Amber Alert */
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm: 2px;
  --radius-md: 4px;
}

アーキタイプ C：エディトリアルで洗練されたデザイン（メディア／ポートフォリオ／長文コンテンツ）

:root {
  --bg-canvas: #faf8f5;
  --bg-surface: #ffffff;
  --border-subtle: #e8e4df;
  --border-hover: #d1ccc4;
  --accent-primary: #1a1a1a;
  --text-primary: #1a1918;
  --text-secondary: #635f59;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Newsreader', 'Inter', sans-serif;
  --radius-sm: 0px;
  --radius-md: 2px;
}

アーキタイプ D：温かみのある手触り（モダンなコンシューマー向けツール／クリエイターツール）

:root {
  --bg-canvas: #f4f4f0;
  --bg-surface: #ffffff;
  --border-subtle: #e2e1db;
  --border-hover: #cbcaa;
  --accent-primary: #d97706; /* Warm Ochre */
  --text-primary: #1c1917;
  --text-secondary: #78716c;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

改善策 6：スペーシングの直接的な整合とマイクロジオメトリー

• 8pt の空間リズム： コンテナのパディングには、正確な値を使用します。4px（極細線）、8px（コンパクト）、12px（標準のコントロール用パディング）、16px（カード用パディング）、24px（セクションのガター）、32px／48px／64px（大規模なセクション間の余白）。
• 不整合な角丸をなくす： 内側要素の角丸は、外側コンテナの角丸から要素間のパディングを引いた値にします。 radius_inner = max(0, radius_outer - padding) （例：外側のカードの角丸が16px、パディングが8pxの場合、内側のボタンの角丸は16pxでも0pxでもなく、8pxにします。）
• ボタンの視覚的な整列： アイコン付きボタンでは、gap-1.5〜gap-2を指定し、アイコンのサイズをフォントの x 高に視覚的に合わせます（例：14pxのテキストには16pxのアイコン）。

改善策 7：認知的ノイズの除去（注釈の見直し）

インターフェースを体系的に監査し、装飾的な余計な要素を取り除きます。

1. 重複するバッジ： データ自体、または状態を示すシンプルな色付きドット（w-2 h-2 rounded-full bg-emerald-500）で状態が伝わる場合、「Active」「Live」「Status」のピル型バッジを削除します。
2. 不要な説明文： ボタンのラベルだけで意味が明確な場合、ボタンの下にある説明文を削除します（例：「Save Changes」ボタンの下にある「Click this button to save your changes」を削除します）。
3. 不要なコンテナ： 単一の入力欄や一文だけを囲む、枠線やドロップシャドウ付きのカードを削除します。グループ分けには余白を使います。

改善策 8：体系的な骨組み（実績のある UI レイアウト）

自由形式で無秩序なレイアウトは決して生成しないでください。すべてのビューに、実績のある構造的な骨組みを使用します。

• SaaS アプリケーションシェル： 固定のグローバルサイドバー（モバイルでは折りたたみ可能、幅は240pxまたはアイコンレール型の64px）＋ページヘッダー（パンくずリスト、検索、グローバルアクション、プロフィール）＋スクロール可能なメインコンテンツ（max-w-7xl mx-auto px-6 py-8）。
• 高密度ダッシュボード： 固定されたページ単位のコントロールバー（日付ピッカー、検索、表示モード）＋上部の KPI グリッド（4列、必ず1行）＋分析エリアの分割（主要なトレンド70％／副次的な内訳30％）＋ページネーション付きの詳細データテーブル。
• コンバージョン向けランディングページ： 無駄のないナビゲーション（ブランド、リンク3〜4個、CTA 1つ）＋感情に訴えるヒーロー（オファーの H1、補足オファー、主要ボタン1つ、副次リンク1つ、主役となるビジュアル）＋ソーシャルプルーフの帯＋3段構成のベネフィット・ベントーグリッド＋インタラクティブな製品プレビュー＋透明性の高い料金表＋利用しやすいフッター。

---

5. マイクロインタラクションと8状態のインタラクティブフィードバックシステム

静的なボタンや反応しない入力欄は、AI が生成した素人っぽい UI であることをすぐに露呈させます。すべてのインタラクティブなプリミティブは、必ず8つの状態すべてに対応する必要があります。

[1. Default] ──► [2. Hover] ──► [3. Focus-Visible] ──► [4. Active/Press]
     │                                                        │
     ▼                                                        ▼
[5. Disabled] ◄── [6. Loading/Spinner] ◄── [7. Error] ◄── [8. Success]

Emil Kowalski のアニメーション判断マトリクス

1. 頻度の確認：
   • 1日100回以上実行される操作（キーボードショートカット、コマンドメニューの開閉、テーブル行の選択）：継続時間0ms（即時）。アニメーションは絶対に使用しないでください。
   • 標準的なインタラクション（ツールチップ、ドロップダウン、ポップオーバー）：120ms～180ms。
   • モーダルとフルスクリーンのドロワー：200ms～250ms。
2. イージングのルール：
   • UI にease-inは絶対に使用しないでください。開始が遅く、もたついて感じられます。
   • 反応が鋭く、緊張感のある**ease-out**を使用します：cubic-bezier(0.23, 1, 0.32, 1)。
   • ポップオーバーとドロップダウンは、画面中央ではなく、必ずトリガーポイントを基点に拡大します（transform-origin: top left/right）。
3. 触覚フィードバック：
   • :activeでは、2～3％縮小します：transform: scale(0.97); transition: transform 60ms ease-out;。

/* Production Button CSS Standard */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  border-radius: var(--radius-sm, 6px);
  background: var(--accent-primary, #3b82f6);
  color: var(--accent-foreground, #ffffff);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms ease-out, transform 80ms ease-out, border-color 140ms ease-out;
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent-primary, #3b82f6);
  outline-offset: 2px;
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

---

6. 5 フェーズのエージェント型実行ループ

UI デザイン、再デザイン、またはフロントエンドのリファクタリングタスクを実行する際は、次の 5 フェーズのループに正確に従ってください。

flowchart TD
    P1["Phase 1: Diagnostic Audit & Clutter Strip"] --> P2["Phase 2: Design Archetype & Token Setup"]
    P2 --> P3["Phase 3: Macro-Layout & 1-to-3 UX Hierarchy"]
    P3 --> P4["Phase 4: Component Craft & 8-State Feedback"]
    P4 --> P5{"Phase 5: 7-Axis Pre-Emit Quality Gate"}
    P5 -- "Score < 4 on any axis" --> P3
    P5 -- "All axes >= 4" --> Output["Ship Production Code"]

フェーズ 1：診断監査と不要要素の除去

• 既存の DOM/CSS をスキャンし、12 の AI スロップのアンチパターンを確認します。
• 重複したコントロール、繰り返し表示されるメトリックカード、配置が不適切なフィルターを特定します。
• 機能しないチップ、冗長なバッジ、見せかけの背景グラデーションをすべて取り除きます。

フェーズ 2：デザインのアーキタイプとトークンの設定

• 該当するアーキタイプ（Quiet Luxury SaaS、Technical Dense、Editorial、Warm Tactile）を選択します。
• サーフェス、ボーダー、テキスト、プライマリアクセント用のクリーンな CSS カスタムプロパティを宣言します。
• フォントの組み合わせ（Display + Tabular Monospace）を定義します。

フェーズ 3：マクロレイアウトと 1 対 3 の UX 階層

• ページレベルのコントロールバーを実装します。
• 1 対 3 のスケーリングルールを徹底します。ビューポートのセクションごとに、支配的なフォーカス要素を 1 つにします。
• 複雑なデスクトップセクションには、モバイル向けのリニアなレイアウトを適用します。

フェーズ 4：コンポーネントの作り込みと 8 状態の仕上げ

• 生の絵文字をすべて、鮮明な SVG ベクターアイコンに置き換えます。
• すべての入力に <label>、自動補完、視認できる :focus-visible リングがあることを確認します。
• 触覚的な :active の微小なスケーリングと、素早いトランジション（< 200ms）を適用します。

フェーズ 5：7 軸の出力前品質ゲート（必須の自己批評）

最終コードを提示する、またはタスクの完了を宣言する前に、7 軸の品質ゲートに照らして実装を評価します。

---

7. 7 軸の出力前品質ゲートチェックリスト

7 軸すべてについて、完成したコードを 1〜5 で採点します。完了前に、すべての軸で $\ge 4$ を達成する必要があります：

軸	評価指標	基準チェックリスト（$\ge 4$ が必要）
1. アンチスロップの徹底度	AI の陳腐な表現がないこと	[ ] 紫／インディゴの放射状背景ブロブがゼロ [ ] 機能アイコンとして使われる生の絵文字がゼロ [ ] 1 語だけの斜体見出しがゼロ [ ] 見せかけの虚栄指標やマーケティングの誇張カードがゼロ
2. UX の速度と 1 対 3 ルール	論理的な明瞭さと効率	[ ] ビューポートのセクションごとに、明確なプライマリアクションが 1 つ [ ] セカンダリアクションは最大 3 つ [ ] 日付ピッカーと全体フィルターがページレベルで統一されている [ ] 重複したメトリックカードや冗長なボタンがゼロ
3. タイポグラフィの規律	個性と階層	[ ] フォントファミリーは最大 2 種類 [ ] すべてのメトリックで等幅数字を有効化（tabular-nums） [ ] 本文の行長が $\le 75\text{ch}$ [ ] ラベルにはセンテンスケースを使用し、字間を広げた大文字の叫び表現は使わない
4. 余白と幾何学的な計算	空間のリズムと整列	[ ] 4px／8pt グリッドを厳守 [ ] 入れ子状の角丸の計算式を遵守：$R_{\text{inner}} = R_{\text{outer}} - P$ [ ] 窮屈なカードがなく、カード内の余白は最低 16px [ ] アイコンとテキストの組み合わせを視覚的に中央揃え
5. マイクロインタラクションと動き	物理的な感触と応答性	[ ] UI トランジションは素早く、200ms 未満 [ ] 高頻度アクション（1 日 100 回以上）のアニメーションは 0ms [ ] 触覚的な :active { transform: scale(0.97) } フィードバックがある [ ] もたつく ease-in カーブがない
6. アクセシビリティとキーボード操作	WCAG 2.1 AA 準拠	[ ] すべてのインタラクティブ要素に視認できるフォーカスリング（:focus-visible）がある [ ] フォーカス用の代替リングなしで outline: none を使用していない [ ] アイコンのみのボタンに aria-label がある [ ] セマンティック HTML タグ（<button>、<a>、<nav>、<main>、<header>）を使用
7. モバイルとレスポンシブなリニア配置	デバイス間の安定性	[ ] モバイルのビューポートで、縦方向にきれいに積み重なる [ ] 水平方向のスクロールオーバーフローがゼロ（overflow-x: hidden／フレックス折り返し） [ ] モバイルのタッチターゲットは最小 44x44px [ ] テーブルデータはカード形式、またはスクロールしやすいコンテナに切り替わる

---

8. 変換前後のリファレンス

雰囲気でコーディングされたコンポーネントをリファクタリングする際は、この変換の指針を使用してください。

インターフェース要素	雰囲気でコーディングされた AI の粗雑な実装（変換前）	本番品質の粗雑さを排した実装（変換後）	エンジニアリング上の理由
ページ分析ヘッダー	日付フィルターが4つのカードそれぞれに埋め込まれ、クリック数カウンターが3つ重複しています。	ページヘッダーに全体の日付範囲セレクターを1つ配置し、KPIを集約したバナーを1つ表示します。	不要な要素を減らし、すべてのカードを同期させ、期間の不整合を防ぎます。
SaaS サイドバー	汎用的なアイコンと絵文字、選択中のリンクには紫色に光るグラデーション、重複したリンクがあります。	すっきりとした幅240pxのサイドバーに、1.5pxの線幅で統一された Lucide アイコンと、控えめな1pxの細い選択状態の枠線を使用します。	視覚的な疲労を軽減し、企業としての信頼感を確立するとともに、縦方向のスペースを節約します。
データ比較	地域別の割合がすべてゼロの、巨大で装飾的な3D地球儀／地図ウィジェットがあります。	パーセンテージの増減と桁が揃った数値を含む、コンパクトな横棒グラフの比較リストを使用します。	CPUを浪費する装飾的な無駄ではなく、ビジネスに役立つ実用的な情報を提供します。
アクションボタン	bg-indigo-600 hover:bg-indigo-700 transition-all duration-300 を使用し、フォーカスリングもアクティブ状態もありません。	bg-zinc-900 text-white hover:bg-zinc-800 active:scale-[0.97] focus-visible:ring-2 を使用し、140msの素早いイーズアウトを適用します。	即座に操作への反応を返し、WCAG のアクセシビリティ要件を満たし、人の手で丁寧に作られた感触を生み出します。
設定と請求	5つのカードが互いに重なり合い、請求情報が無関係なユーザープロフィール設定の中に埋もれています。	料金プランの比較、割引額の明示、支払い方法への直接アクセスを備えた専用の請求タブを設けます。	頻繁に行う商取引関連の操作は、直接アクセスでき、埋もれていない必要があります。
ランディングページのヒーロー	140pxの見出しが4行に分かれ、そのうち1語だけが太字かつ斜体で、ボタンが3つあり、動画のプリローダーもあります。	単一の中核的な提案に絞った44pxの明快な見出し、主要CTAを1つ、デモリンクを1つ配置し、初期表示を高速化します。	最初の50msで与える印象を最大化し、読み込みの遅いプリローダーによる直帰を防ぎます。

---

9. 最終確認の指針

コードを納品する前に、次の点を確認してください。

「このインターフェースは、ユーザーの注意と時間を最大限に尊重する、卓越した規律あるデザイン技術者が作り上げたように感じられるでしょうか。それとも、AI がプロンプトから生成したように見えるでしょうか。プロンプト頼みの粗雑さを感じる要素があれば、すぐに取り除いてください。」