ui-ux-pro-max

UI/UX Pro Max

概要

ビジュアルデザインの専門知識とエンジニアリングの厳密さを融合した、包括的な UI/UX デザインインテリジェンスシステムです。このスキルは、スタイルの選定、カラーパレット、タイポグラフィ、UX ヒューリスティクス、データビジュアライゼーション、複数スタックでの実装を網羅する、明確な方針に基づいた本番環境向けのガイダンスを提供します。すべての推奨事項には厳格な優先順位が適用され、アクセシビリティとパフォーマンスが美しさのために犠牲になることはありません。

フェーズ 1：要件の把握

1. 製品の種類と対象ユーザーを特定します
2. プラットフォーム（ウェブ、モバイル、デスクトップ）を決定します
3. 既存のブランドガイドラインやデザインシステムを確認します
4. アクセシビリティ要件を定義します
5. パフォーマンス予算を設定します

停止 — デザインの推奨を行う前に、ユーザーと要件を確認してください。

優先順位（変更不可）

この優先順位を飛ばしたり、並べ替えたりしないでください。アクセシビリティが常に最優先です。

1. アクセシビリティ — WCAG 2.1 AA を最低基準とし、AAA が望ましい
   • コントラスト比：通常のテキストは 4.5:1、大きなテキストは 3:1
   • キーボード操作：すべてのインタラクティブ要素にフォーカスでき、フォーカスリングが見えること
   • テキスト以外のすべてのコントロールに ARIA ラベルを設定
   • 動的コンテンツをスクリーンリーダーで通知
   • モーションの軽減：prefers-reduced-motion を尊重
2. タッチターゲット — 最小 44x44px（Apple HIG / WCAG 2.5.5）
   • ターゲット間の間隔：最低 8px
   • パディングを使って、クリック可能な領域を視覚的な範囲より広くすることができます
3. パフォーマンス
   • 画像：WebP と AVIF フォールバックを使用し、ファーストビューより下は遅延読み込み
   • CLS < 0.1、LCP < 2.5s、FID < 100ms
   • フォントの読み込み：font-display: swap を使用し、重要なフォントをプリロード
   • バンドル：ルートをコード分割し、未使用のコンポーネントをツリーシェイク
4. スタイル — 1〜3 を満たした後にのみ適用
5. レイアウト — 構成と余白は最後に適用

フェーズ 2：スタイルの選定

停止 — 実装に進む前に、理由を添えてスタイルの推奨を提示してください。

スタイル選定の判断表

コンテキスト	推奨スタイル	理由
SaaS ダッシュボード	ミニマリズム、スイス、Material 3	すっきりとしてデータ重視、プロフェッショナル
ポートフォリオ	ブルータリズム、マキシマリズム、グラスモーフィズム	表現力があり、記憶に残る
E コマース	クリーン、Material 3、スイス	信頼性、明快さ、コンバージョン
モバイルアプリ	Material 3、ニューモーフィズム、ミニマリズム	ネイティブな感覚、親指で操作しやすい
ランディングページ	グラスモーフィズム、ネオブルータリズム、ジャパンディ	視覚的なインパクト、ヒーローへの注目
エンタープライズ／B2B	スイスデザイン、ミニマリズム	権威性、情報密度
クリエイティブエージェンシー	マキシマリズム、ブルータリズム、サイバーパンク	独自性、ポートフォリオの訴求
ヘルス／ウェルネス	ジャパンディ、ミニマリズム	落ち着き、信頼感
金融	スイス、Material 3	保守的、プロフェッショナル
子ども／ファミリー	クレイモーフィズム、マキシマリズム	遊び心があり、興味を引く

スタイルのリファレンス（主なカテゴリ）

ガラスと透明感：

• グラスモーフィズム：backdrop-filter: blur(10px)、半透明の背景、控えめな境界線
• フロストガラス：より強いぼかし（20px 以上）、低めの不透明度。情報量の多い背景で効果を発揮
• アクリル（Fluent Design）：ノイズテクスチャのオーバーレイ＋ぼかし

ミニマルでクリーン：

• ミニマリズム：最大限の余白、単一のアクセントカラー、要素数を限定
• スイスデザイン：グリッドベース、Helvetica/Grotesk、非対称のバランス
• ジャパンディ：温かみのあるニュートラルカラー、有機的な形状、隠された複雑さ

大胆で表現豊か：

• ブルータリズム：むき出しの構造、システムフォント、強い境界線、角丸なし
• ネオブルータリズム：ブルータリズム＋明るいアクセントカラー＋ドロップシャドウ
• マキシマリズム：レイヤー化されたテクスチャ、異なるフォントの組み合わせ、情報密度の高さ

奥行きと立体感：

• ニューモーフィズム：同色の背景に柔らかな内側／外側のシャドウ
• Material Design 3：エレベーションのトークン、トーンを持つサーフェス、ダイナミックカラー
• クレイモーフィズム：膨らんだ 3D の見た目、パステルカラー、内側のシャドウ

ダークでムーディー：

• ダークモード：OLED に適した（#000 の背景）控えめなプライマリカラー、抑えた明るさ
• サイバーパンク：暗い背景にネオン、グリッチ効果、等幅フォントのアクセント
• ノワール：高コントラスト、単一のアクセントカラーを使ったグレースケール

フェーズ 3：カラーとタイポグラフィ

停止 — コンポーネントを構築する前に、カラーパレットとフォントの組み合わせを提示して承認を得てください。

カラーパレットの選択ルール

パレットのカテゴリ	製品の種類	特徴
SaaS/B2B（24 パレット）	ダッシュボード、管理ツール	プロフェッショナルなブルー、ティール、スレート
E コマース（20 パレット）	ショップ、マーケットプレイス	温かみがあり、信頼感を高めるアンバー、グリーン
ヘルスケア／ウェルネス（18 パレット）	ヘルスケアアプリ、瞑想	落ち着いたグリーン、ソフトブルー、ラベンダー
金融（15 パレット）	銀行、トレーディング	深みのあるブルー、ゴールド、控えめなニュートラルカラー
クリエイティブ（22 パレット）	ポートフォリオ、エージェンシー	大胆で鮮やかな、意外性のある組み合わせ
ソーシャル（16 パレット）	コミュニティ、ソーシャルアプリ	鮮やかでエネルギッシュ、グラデーション向き
教育（14 パレット）	学習、コース	親しみやすく、適度な彩度
エンタープライズ（12 パレット）	企業向けツール	落ち着いた、信頼感のある、高コントラスト
キッズ／ファミリー（10 パレット）	子ども向けアプリ	明るい原色、丸みがあり、遊び心のあるデザイン
ラグジュアリー（10 パレット）	プレミアムブランド	ブラック、ゴールド、ミニマル、広い余白

カラートークンのルール

• プライマリー：ブランドを象徴する色。CTA と主要なアクションに使用します
• セカンダリー：補色。二次アクションやアクセントに使用します
• ニュートラル：テキスト、境界線、背景用のグレースケール（最低 9 段階）
• セマンティック：成功（#22C55E）、警告（#F59E0B）、エラー（#EF4444）、情報（#3B82F6）
• 常にセマンティックトークンとして定義します。--color-blue-500 ではなく、--color-action-primary のようにします

ダークモードのパレットルール

ルール	実装
色を反転しない	ダークモードに適した色に割り当て直します
彩度を 10〜20％下げる	暗い背景での目の疲れを防ぎます
高さはより明るい表面で表現する	ライトモードのようにシャドウを使用しません
テキストの階層	#E2E8F0（プライマリー）、#94A3B8（セカンダリー）、#64748B（ターシャリー）

フォントの組み合わせ（トップ 10）

組み合わせ	最適な用途
Inter + Source Serif 4	SaaS、ダッシュボード
Geist + Geist Mono	開発者向けツール、技術系
DM Sans + DM Serif Display	マーケティング、エディトリアル
Plus Jakarta Sans + Lora	モダンなプロフェッショナル向け
Outfit + Newsreader	クリエイティブエージェンシー
Manrope + Bitter	エンタープライズアプリケーション
Space Grotesk + Space Mono	テック系スタートアップ
Satoshi + Erode	プレミアム／ラグジュアリー
General Sans + Gambetta	エディトリアル／出版
Cabinet Grotesk + Zodiak	大胆なブランディング

タイポグラフィのスケール（デフォルト）

--text-xs: 0.75rem / 1rem
--text-sm: 0.875rem / 1.25rem
--text-base: 1rem / 1.5rem
--text-lg: 1.125rem / 1.75rem
--text-xl: 1.25rem / 1.75rem
--text-2xl: 1.5rem / 2rem
--text-3xl: 1.875rem / 2.25rem
--text-4xl: 2.25rem / 2.5rem

フェーズ 4：UX ガイドラインの適用

ナビゲーションのルール

1. プライマリーナビゲーションの項目は最大 7 個です（ミラーの法則）。
2. 現在の場所を常に示します（パンくずリストまたはアクティブ状態）。
3. 戻るボタンは常に期待どおりに動作する必要があります。
4. コンテンツ量の多いアプリでは、すべてのページで検索を利用できるようにします。

フォームのルール

5. ラベルは入力欄の上に配置し、プレースホルダーだけにしないでください。
6. インライン検証はキー入力時ではなく、フォーカスが外れたときに行います。
7. エラーメッセージは具体的で、対処方法が分かり、フィールドの隣に表示されるようにします。
8. ページの読み込み時に最初のフィールドに自動フォーカスします。
9. フォームが有効になるまで送信ボタンを無効にします（理由も説明します）。
10. 複数ステップのフォームには進行状況インジケーターを表示します。

フィードバックのルール

11. 300 ミリ秒を超えるアクションには、ローディング状態を表示します。
12. コンテンツの読み込みには、スピナーよりスケルトンスクリーンを使用します。
13. トースト通知は、成功時は自動的に閉じ（3 秒）、エラー時は表示し続けます。
14. タップへの応答時間は 80〜150 ミリ秒にします。
15. リスクの低いアクションにはオプティミスティック UI を使用します。

コンテンツレイアウトのルール

16. テキスト量の多いページには F パターンを使用します。
17. ランディングページには Z パターンを使用します。
18. ファーストビューにバリュープロポジションとプライマリー CTA を配置します。
19. 1 つのビューポートにつき、プライマリー CTA は 1 つにします。

モバイルのルール

20. 主要なアクションには、画面下部のナビゲーションを使用します（親指が届く範囲）。
21. フィードコンテンツにはプル・トゥ・リフレッシュを使用します。
22. スワイプジェスチャーには、視覚的な手がかりを用意します。

フェーズ 5：実装

チャートタイプ選択の判断表

データの関係性	チャートの種類
比較	棒、グループ化棒、ロリポップ、ドットプロット
時系列の傾向	折れ線、エリア、スパークライン、ステップ
部分と全体	円（最大5スライス）、ドーナツ、ツリーマップ、積み上げ棒
分布	ヒストグラム、箱ひげ図、バイオリン、密度
相関	散布図、バブル、ヒートマップ
フロー／プロセス	サンキー、ファネル、ウォーターフォール
地理	コロプレス、ドットマップ、カルトグラム
階層	サンバースト、アイシクル

対応スタック

スタック	主なパターン
React	JSX コンポーネント、フック、CSS Modules / Tailwind
Next.js	App Router、Server Components、画像最適化
Vue	Composition API、<script setup>、Pinia
Svelte	リアクティブ宣言、トランジション、SvelteKit
SwiftUI	宣言型ビュー、ViewModifiers、@State/@Binding
React Native	Flexbox、Platform.select、SafeAreaView
Flutter	ウィジェット、Material/Cupertino、MediaQuery
Tailwind CSS	ユーティリティファースト、@applyは必要最小限に、設定によるデザイントークン
shadcn/ui	Radixプリミティブ、Tailwindバリアント、cn()ユーティリティ
HTML/CSS	セマンティックHTML5、CSS Grid/Flexbox、カスタムプロパティ

デザイントークンのアーキテクチャ

master.tokens.json    -> Primitive values (colors, spacing, fonts)
semantic.tokens.json  -> Mapped meanings (action-primary, surface-elevated)
component.tokens.json -> Component-specific (button-padding, card-radius)
overrides/
  brand-a.tokens.json -> Brand-specific overrides
  dark.tokens.json    -> Dark mode overrides

• マスタートークンは読み取り専用のデフォルト値です
• オーバーライドは実行時に浅くマージされます
• コンポーネントトークンはセマンティックトークンのみを参照します
• コンポーネントからプリミティブトークンを参照しないでください

すぐにできる改善のチェックリスト

• アイコンに絵文字を使わない — Lucide ReactまたはHeroiconsを使用する
• タップ時のフィードバック遅延：80～150ms
• セマンティックカラートークン（生の16進数値ではなく）
• 8dpのスペーシングリズム（4、8、12、16、24、32、48、64）
• ダークモードにはprefers-color-schemeメディアクエリを使用する
• アニメーションにはprefers-reduced-motionを使用する
• キーボード操作時のフォーカスには:focusではなく:focus-visibleを使用する
• CLSを防ぐため、画像のアスペクト比を設定する
• ファーストビューのテキスト用にフォントをプリロードする
• ファーストビューより下の画像にはloading="lazy"を設定する

アンチパターン／よくある間違い

アンチパターン	問題点	代わりにすること
無効状態のテキストにopacityを使う	読みやすさが損なわれます	無効状態用の独立したカラートークンを使用する
固定ピクセルのブレークポイントのみを使う	コンポーネントのコンテキストが無視されます	コンポーネントにはコンテナークエリを使用する
デスクトップでハンバーガーメニューを使う	主要なナビゲーションが隠れます	デスクトップではナビゲーションバーを表示する
重要なコンテンツにカルーセルを使う	ほとんどのユーザーには最初のスライドしか表示されません	静的なレイアウトまたはアコーディオンを使用する
URLに状態を保持しない無限スクロール	位置を共有したり、元の位置に戻ったりできません	スクロール位置をURLに保持する
モーダルの上にモーダルを表示する	混乱を招き、アクセシビリティ上の大きな問題になります	ネストしたモーダルが不要になるよう再設計する
メディアを自動再生する	不快で、アクセシビリティに違反します	再生にはユーザーの操作を必須にする
違いを色だけで表現する	色覚特性のあるユーザーが情報を判別できません	形状、パターン、テキストラベルを追加する
プレースホルダーのみのラベル	入力すると消え、アクセシビリティ上の問題になります	入力欄の上に常時表示されるラベルを使用する
コンポーネントに生の16進数値を使う	テーマの変更ができません	セマンティックデザイントークンを使用する

統合ポイント

スキル	統合内容
ui-design-system	トークンアーキテクチャとコンポーネントライブラリ
canvas-design	データビジュアライゼーションとチャート
mobile-design	モバイル固有のデザインパターン
ux-researcher-designer	ユーザー調査に基づくデザイン上の判断
artifacts-builder	スタンドアロンのプロトタイプとデモ
senior-frontend	UIコンポーネントの実装
accessibility	WCAG準拠の検証

スキルタイプ

FLEXIBLE — 優先順位（アクセシビリティ > タッチ操作 > パフォーマンス > スタイル > レイアウト）に従ってください。スタイルの推奨事項は状況に応じて調整します。アクセシビリティとパフォーマンスのルールは強く推奨されており、優先度を下げないでください。