ui-ux-pro-max

name	ui-ux-pro-max
description	UI/UX design intelligence. Plan, build, design, implement, review, improve UI/UX code. Styles: image-first, editorial design, 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どちらでも、お好みで）
• 過剰な装飾（意味のないグラデーション、アニメーション）

「いい感じですね」禁止

• 完成後も「改善の余地があるとすれば〜」を添えよ
• 決断を求められたら決断せよ（根拠を添えて一つを推奨）

---

プレミアムデザインの公式

Premium = (画像の質 × サイズ) + (余白) - (装飾)

3つの柱:

1. 大きな画像 - カードの70-85%を画像が占める
2. 大胆な余白 - セクション間112px以上
3. 抑制 - すべての効果に理由が必要

参照ブランド: Spitfire Audio, Native Instruments, iZotope

---

画像ガイドライン

コンテキスト	画像サイズ	アスペクト比
製品カード	カード面積の70-85%	16:9 or 4:3
ヒーローセクション	フルビューポート幅	可変
ギャラリーグリッド	高さ統一、幅可変	混合

画像の扱い:

• 画像がコンテンツの主役
• テキストは最小限（名前 + 1行説明）
• 画像上に機能リストを重ねない
• 高品質なスクリーンショット/レンダリングを使用

---

余白トークン

トークン	値	用途
--space-section	112px	セクション間
--space-group	64px	関連コンテンツ間
--space-element	24px	要素間

セクションパディング:

/* プレミアムセクション */
padding-top: 112px;    /* py-28 */
padding-bottom: 112px;

/* コンパクトセクション */
padding-top: 64px;     /* py-16 */
padding-bottom: 64px;

Tailwind対応:

// プレミアムセクション
<section className="py-28">...</section>

// コンパクトセクション
<section className="py-16">...</section>

---

グリッドシステム

列数	用途	ギャップ
4列	製品ショーケース	24px (gap-6)
3列	機能カード、価格	32px (gap-8)
2列	ヒーロー、比較	48px (gap-12)

---

視覚階層チェックリスト

作業開始前

• 「このセクションの主役は何か」を言語化したか
• 「削除できる要素はないか」を検討したか
• 「なぜこの色か」を説明できるか

作業中

• 全要素が同じ存在感になっていないか
• 視線の流れは意図通りか
• 背景がコンテンツの邪魔をしていないか

作業完了前

• スマホで見て3秒以内に「何をすればいいか」分かるか
• 「AI生成感」の原因がないか
• 「ここは削れたのでは」と思う要素がないか

---

CRITICAL: アクセシビリティ優先

このセクションは最優先事項。デザインの美しさよりもアクセシビリティを優先する。

WCAG 2.1 コントラスト要件

テキストサイズ	最小コントラスト比
通常テキスト (< 18px)	4.5:1
大きいテキスト (≥ 18px bold / ≥ 24px)	3:1
UI コンポーネント・アイコン	3:1

必須: プロジェクトの globals.css を使用

Tailwind のデフォルト色を直接使わない。 プロジェクトの globals.css で定義されたトークンを優先する。

// NG: Tailwind デフォルトをそのまま使用
<p className="text-slate-400">...</p>
<p className="text-slate-500">...</p>

// OK: プロジェクトトークンを使用
<p className="text-muted">...</p>
<p className="text-subtle">...</p>

実装前に必ず app/globals.css を確認し、定義済みトークンを把握すること。

バッジ・タグのコントラスト

同系色の組み合わせは危険:

// NG: 同系色でコントラスト不足
<span className="bg-indigo-600/20 text-indigo-400">Badge</span>
<span className="bg-amber-500/20 text-amber-400">開発中</span>

// OK: 十分なコントラストを確保
<span className="bg-indigo-600/30 text-indigo-300">Badge</span>
<span className="bg-amber-600/30 text-amber-200">開発中</span>

無効状態のテキスト

// NG: 薄すぎてコントラスト不足
<button className="text-white/50" disabled>...</button>

// OK: 無効でも読める濃さ
<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

使用方法

// NG: Tailwind直接指定（言語による調整なし）
<h1 className="text-5xl md:text-8xl font-bold">...</h1>

// OK: トークン使用（自動で言語対応）
<h1 className="text-hero text-white">...</h1>

レスポンシブ対応

トークンにはモバイル・タブレット・デスクトップのレスポンシブサイズが含まれる。追加のブレークポイント指定は不要。

// NG: 冗長なブレークポイント指定
<h1 className="text-hero sm:text-hero md:text-hero">...</h1>

// OK: トークンのみ
<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	ピル型ボタン、アバター

// NG: Tailwind直接指定
<button className="rounded-lg">...</button>
<div className="rounded-xl">...</div>

// OK: トークン使用
<button className="rounded-[var(--radius-md)]">...</button>
<div className="rounded-[var(--radius-lg)]">...</div>

色

// NG: Tailwind色を直接使用
<p className="text-slate-400">...</p>
<div className="bg-gray-900">...</div>

// OK: プロジェクトトークン使用
<p className="text-muted">...</p>
<div className="bg-mued-bg">...</div>

トークン違反チェック

実装後は以下で違反を確認:

# 角丸のTailwind直接指定を検索
grep -r "rounded-sm\|rounded-md\|rounded-lg\|rounded-xl\|rounded-2xl" components/

# 色のTailwind直接指定を検索
grep -r "bg-slate-\|bg-gray-\|text-slate-\|text-gray-" components/

検出されたものは順次トークンに置換する。

---

ボタンスタイル

Primary CTA（デフォルト: 白ベース）

<button className="bg-white text-black px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/90 transition-colors cursor-pointer">
  Download Now
</button>

Secondary（枠線のみ）

<button className="border-2 border-white text-white px-8 py-4 text-lg font-medium rounded-[var(--radius-md)] hover:bg-white/10 transition-colors cursor-pointer">
  Learn More
</button>

ブランド固有（限定的に使用）

色付きボタンの使用条件:

• ブランド固有セクション（MUEDear amber等）のみ
• 1ページに1-2箇所まで
• デフォルトにはしない

// MUEDear用: amber
<button className="border-2 border-amber-500 text-amber-400 hover:bg-amber-500 hover:text-white ...">
  Download App
</button>

Disabled

<button className="bg-white/5 text-white/70 cursor-not-allowed" disabled>
  Disabled
</button>

---

背景スタイル

使用する背景

// プレミアム: 単色のみ
<section className="bg-black">...</section>
<section className="bg-[#0f0f0f]">...</section>
<section className="bg-white">...</section>

避ける装飾

パターン	問題	代替案
フローティンググローオーブ	気が散る	削除
bg-gradient-to-b from-violet-900/20	装飾的ノイズ	単色
グレインテクスチャ	不要な複雑さ	削除
アニメーション背景	パフォーマンス悪化	静的

---

カードスタイル

画像中心カード（デフォルト）

<div className="bg-[#0f0f0f] rounded-[var(--radius-lg)] overflow-hidden">
  {/* 画像: カードの70-85% */}
  <div className="aspect-video">
    <Image src="..." alt="..." fill className="object-cover" />
  </div>
  {/* テキスト: 最小限 */}
  <div className="p-6">
    <h3 className="text-white text-lg font-medium">製品名</h3>
    <p className="text-white/60 text-sm">一行の説明</p>
  </div>
</div>

Glass Card（限定的に使用）

注意: Glassmorphism は特定のコンテキスト（価格表、機能比較など）でのみ使用。デフォルトにしない。

<div className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-[var(--radius-lg)] p-6">
  <h3 className="text-white font-semibold">Title</h3>
  <p className="text-white/80">Description</p>
</div>

Glass Card 使用時の注意:

• テキストは text-white または text-white/80 以上
• text-slate-* や text-gray-* は使用しない
• 背景が半透明なためコントラスト計算が複雑

---

指示エスカレーションプロトコル

ユーザーの表現に応じて対応レベルを変える:

ユーザーの表現	解釈	必要な対応
「Spitfireレベル」「Native Instrumentsレベル」	全面的な視覚改修	微調整ではなく完全リデザイン
「もっとプレミアムに」	実質的な変更	効果を削除、余白を増加
「クリーンに」	中程度のクリーンアップ	装飾要素の30%削除
「調整」「微調整」	小さな修正	CSS変更のみ

重要ルール: 参照ブランドが名指しされたら、提案前に現在の実装をそのブランドと比較すること。

---

実装チェックリスト

実装前チェック

• 高品質な製品スクリーンショットはあるか？
• テキストを50%削減できるか？
• 参照したい美的水準を確認したか？
• その抑制レベルに合わせているか？

実装中チェック

質問	「No」の場合のアクション
セクションパディング >= 100px？	py-28以上に増加
画像がカード面積の60%以上？	画像を拡大
ボタンは白または枠線のみ？	色付きから変更
背景は単色（グラデーションなし）？	装飾要素を削除

実装後チェック

1. スキントテスト: 目を細めて見る。製品を識別できるか？効果が支配的なら削減。
2. 「1つ削除」テスト: 各セクションから1要素削除。まだ機能するか？機能するなら不要だった。
3. Spitfire比較: スクリーンショットをSpitfire.comと並べる。視覚的「重さ」は似ているか？

---

避けるべきパターン（明示的禁止リスト）

"Claude defaults to safe choices" - 明示的に禁止しないと汎用的な選択に収束する

背景・装飾

禁止パターン	問題	代替案
bg-white/5 backdrop-blur-xl 多用	「2023テンプレート」感	bg-black or bg-[#0f0f0f]
bg-gradient-to-b from-violet-900/20	装飾的ノイズ	削除
bg-gradient-to-br from-indigo-500/10	同上	削除
アニメーションブロブ背景	気が散る、パフォーマンス悪化	静的、単色
グレインテクスチャ (noise.svg)	不要な複雑さ	削除
フローティンググローオーブ	2020年代前半のトレンド	削除

影・グロー

禁止パターン	問題	代替案
shadow-lg shadow-indigo-500/20	人工的な「ポップ」	影なし or shadow-sm shadow-black/20
shadow-xl shadow-violet-500/30	同上	同上
shadow-2xl shadow-amber-500/25	同上	同上
hover:shadow-*-500/40	ホバー時のグロー強調	hover:bg-white/10 など控えめに
drop-shadow-[0_0_*px_rgba()]	カスタムグロー	削除

レイアウト

禁止パターン	問題	代替案
アイコン付き3列機能グリッド	汎用SaaSデザイン	大きな画像 + 最小テキスト
均等な3列カード（同サイズ）	「全部同じ存在感」	1つを大きく、残りを小さく
py-12 以下のセクション間隔	窮屈	py-28 (112px) 以上
中央寄せのすべて	安全すぎる	左寄せ or 非対称を検討

コンポーネント

禁止パターン	問題	代替案
hover:scale-105 + hover:shadow-*	過剰なホバーエフェクト	hover:bg-white/10 のみ
transition-all duration-300	重い、予測不能	transition-colors duration-200
group-hover:translate-x-2 矢印	よく見るパターン	削除 or translate-x-1
色付きCTAボタン（デフォルト使用）	AI safe choice	白背景 or 白枠線

アニメーション

禁止パターン	問題	代替案
散らばったマイクロインタラクション	統一感なし	1つのページロード演出に集中
animate-pulse 多用	気が散る	削除 or 1箇所のみ
animate-bounce 常時	同上	ユーザーアクション時のみ
複数要素の同時アニメーション	カオス	staggered delays で順次

色（AI Safe Choices）

禁止パターン	問題	代替案
紫グラデーション on 白背景	最も汎用的なAI選択	単色ダーク
from-violet-600 to-indigo-600	同上	削除
text-indigo-400 をデフォルトに	ブランド色の乱用	text-white or text-white/80
同系色バッジ（indigo on indigo）	コントラスト不足	白背景 + 黒テキスト

---

アイコン

• 使用ライブラリ: Lucide Icons
• 禁止: 絵文字をアイコンとして使用しない

import { Music, Brain, Sparkles, Check, X } from 'lucide-react';

---

レスポンシブブレークポイント

/* Mobile first */
/* sm: 640px */
/* md: 768px */
/* lg: 1024px */
/* xl: 1280px */
/* 2xl: 1536px */

検証すべき画面幅:

• 320px (最小モバイル)
• 768px (タブレット)
• 1024px (デスクトップ)
• 1440px (大画面)

---

Pre-Delivery Checklist

• Lighthouse アクセシビリティ 100%（最重要）
• プロジェクトの globals.css トークンを使用
• 画像が主役になっているか
• セクション間余白 >= 112px (py-28)
• ボタンは白/枠線ベースか
• 背景は単色か
• 絵文字アイコン不使用（Lucide使用）
• ダークモード対応
• cursor-pointer on clickables
• レスポンシブ対応
• パフォーマンス最適化（画像、アニメーション）

---

コントラスト確認方法

実装後は必ず 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%