| name | ui-ux-pro-max |
| description | UI/UX design intelligence. Plan, build, design, implement, review, improve UI/UX code. Styles: glassmorphism, minimalism, dark mode, responsive. Projects: landing page, dashboard, SaaS, mobile app. |
UI/UX Pro Max
UI/UXデザインおよび実装の専門スキル。
核心: 「全部ちゃんとやる」がAI生成感の正体。「何を捨てるか」がデザイン。
対応領域
- ランディングページ設計
- ダッシュボードUI
- SaaSプロダクト
- モバイルアプリ（レスポンシブ）
行動原則（5つの鉄則）
1. 作る前に疑え
- 全要素に「本当に要る？」を問え
- 答えが曖昧なら、まず無しで作れ
2. 主役を1つ決めろ
- 各セクションで「一番見せたいもの」を1つだけ決めろ
- 決まるまでコードを書くな
3. 70点を並べるな
- 全要素が同じ存在感 = 失敗
- 1つを120点、残りを60点にしろ
4. 「できます」より「やめましょう」
5. 批判してから作れ
- 現状の問題点を3つ以上挙げてから改善案を出せ
- 「いい感じですね」は禁止
AI生成感を避ける
やってはいけないこと
- 全要素が同じ存在感（均一な余白、安全な色）
- 決断の不在（AとBどちらでも、お好みで）
- 過剰な装飾（意味のないグラデーション、アニメーション）
「いい感じですね」禁止
- 完成後も「改善の余地があるとすれば〜」を添えよ
- 決断を求められたら決断せよ（根拠を添えて一つを推奨）
視覚階層チェックリスト
作業開始前
作業中
作業完了前
CRITICAL: アクセシビリティ優先
このセクションは最優先事項。デザインの美しさよりもアクセシビリティを優先する。
WCAG 2.1 コントラスト要件
| テキストサイズ | 最小コントラスト比 |
|---|
| 通常テキスト (< 18px) | 4.5:1 |
| 大きいテキスト (≥ 18px bold / ≥ 24px) | 3:1 |
| UI コンポーネント・アイコン | 3:1 |
必須: プロジェクトの globals.css を使用
Tailwind のデフォルト色を直接使わない。 プロジェクトの globals.css で定義されたトークンを優先する。
<p className="text-slate-400">...</p>
<p className="text-slate-500">...</p>
<p className="text-muted">...</p>
<p className="text-subtle">...</p>
実装前に必ず app/globals.css を確認し、定義済みトークンを把握すること。
Glassmorphism とアクセシビリティの両立
警告: 半透明背景はコントラスト計算を複雑にする
| 背景タイプ | 問題 | 対策 |
|---|
bg-white/5 | 実効背景色が不確定 | テキストは text-white or 十分明るい色を使用 |
bg-black/45 オーバーレイ | 下層と混ざる | 重要テキストは text-white を使用 |
| 半透明セクション | 背景画像と混ざる | muted text は避け、白系を使用 |
安全な組み合わせ:
<div className="bg-white/5 backdrop-blur-xl ...">
<h3 className="text-white">タイトル</h3> {}
<p className="text-white/80">説明文</p> {/* OK: 80%白は十分 */}
</div>
<div className="bg-white/5 ...">
<p className="text-slate-400">説明文</p> {/* NG: コントラスト不足の可能性 */}
</div>
バッジ・タグのコントラスト
同系色の組み合わせは危険:
<span className="bg-indigo-600/20 text-indigo-400">Badge</span>
<span className="bg-amber-500/20 text-amber-400">開発中</span>
<span className="bg-indigo-600/30 text-indigo-300">Badge</span>
<span className="bg-amber-600/30 text-amber-200">開発中</span>
無効状態のテキスト
<button className="text-white/50" disabled>...</button>
<button className="text-white/70" disabled>...</button>
多言語タイポグラフィ
なぜ必要か: 日本語は同じフォントサイズでも英語より視覚的に重く見える（画数が多いため）。同じサイズだと日本語が窮屈・重く見えるため、1段階小さくして視覚的バランスを取る。
タイポグラフィトークン（globals.css で定義済み）
| トークン | 用途 | 英語 (デスクトップ) | 日本語 (デスクトップ) |
|---|
.text-hero | ランディングページのメインタイトル | 96px | 80px |
.text-section | セクション見出し（h2） | 48px | 40px |
.text-headline | 機能タイトル、製品見出し | 30px | 24px |
.text-subhead | タグライン、リード文 | 24px | 20px |
使用方法
<h1 className="text-5xl md:text-8xl font-bold">...</h1>
<h1 className="text-hero text-white">...</h1>
レスポンシブ対応
トークンにはモバイル・タブレット・デスクトップのレスポンシブサイズが含まれる。追加のブレークポイント指定は不要。
<h1 className="text-hero sm:text-hero md:text-hero">...</h1>
<h1 className="text-hero">...</h1>
適用対象
- ランディングページの見出し（h1, h2）
- セクションタイトル
- 製品名、機能名
- タグライン、リード文
注意: 本文テキスト（p要素の長文）には適用しない。本文は text-white/80 等の通常スタイルを使用。
デザイントークン遵守ルール
原則: Tailwindのデフォルト値を直接使用せず、globals.css で定義されたデザイントークンを使用する。
角丸（Border Radius）
| トークン | 値 | 用途 |
|---|
--radius-sm | 8px | 小さいバッジ、タグ |
--radius-md | 12px | ボタン、入力フィールド |
--radius-lg | 16px | カード、モーダル |
--radius-full | 999px | ピル型ボタン、アバター |
<button className="rounded-lg">...</button>
<div className="rounded-xl">...</div>
<button className="rounded-[var(--radius-md)]">...</button>
<div className="rounded-[var(--radius-lg)]">...</div>
色
<p className="text-slate-400">...</p>
<div className="bg-gray-900">...</div>
<p className="text-muted">...</p>
<div className="bg-mued-bg">...</div>
トークン違反チェック
実装後は以下で違反を確認:
grep -r "rounded-sm\|rounded-md\|rounded-lg\|rounded-xl\|rounded-2xl" components/
grep -r "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" components/
検出されたものは順次トークンに置換する。
デザインスタイル
グラスモーフィズム
.glass-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
注意: Glass card 内のテキストは text-white または text-white/80 以上を使用。
ダークモード優先
:root {
--bg-primary: #0F0F1A;
--bg-secondary: #1A1A2E;
--text-primary: #FFFFFF;
--text-muted: #CBD5E1;
--text-subtle: #9CA3AF;
--accent: #4F46E5;
}
ミニマリズム
- 余白を恐れない
- 1画面1アクション
- 視覚的ノイズを減らす
コンポーネント規約
ボタン
<button className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg transition-colors cursor-pointer">
CTA
</button>
<button className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg transition-colors cursor-pointer">
Secondary
</button>
<button className="bg-white/5 text-white/70 cursor-not-allowed" disabled>
Disabled
</button>
カード
<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6">
<h3 className="text-white font-semibold">Title</h3>
<p className="text-white/80">Description with sufficient contrast</p>
</div>
テキスト階層
<h1 className="text-4xl font-bold text-white">見出し</h1>
<h2 className="text-2xl font-semibold text-white">サブ見出し</h2>
<p className="text-lg text-muted">本文（プロジェクトトークン使用）</p>
<span className="text-sm text-subtle">補足</span>
<h3 className="text-white">タイトル</h3>
<p className="text-white/80">説明文</p>
アイコン
- 使用ライブラリ: Lucide Icons
- 禁止: 絵文字をアイコンとして使用しない
import { Music, Brain, Sparkles, Check, X } from 'lucide-react';
レスポンシブブレークポイント
検証すべき画面幅:
- 320px (最小モバイル)
- 768px (タブレット)
- 1024px (デスクトップ)
- 1440px (大画面)
Pre-Delivery Checklist
コントラスト確認方法
実装後は必ず Lighthouse でアクセシビリティを確認:
npm run dev
lighthouse http://localhost:3000 --only-categories=accessibility --view
lighthouse http://localhost:3000 --only-categories=accessibility --output=json | jq '.audits["color-contrast"]'
目標: Lighthouse Accessibility Score 100%
