ui-ux-pro-max

UI/UX Pro Max - デザインインテリジェンス

Web アプリケーションおよびモバイルアプリケーション向けの総合的なデザインガイドです。9 つの技術スタックにわたる 50 以上のスタイル、97 のカラーパレット、57 のフォントペアリング、99 の UX ガイドライン、25 種類のチャートタイプを収録しています。優先度に基づく推奨機能を備えた検索可能なデータベースです。

適用するタイミング

次の場合にこれらのガイドラインを参照してください:

• 新しい UI コンポーネントやページをデザインするとき
• カラーパレットとタイポグラフィを選ぶとき
• UX の問題がないかコードをレビューするとき
• ランディングページやダッシュボードを構築するとき
• アクセシビリティ要件を実装するとき

優先度別のルールカテゴリ

優先度	カテゴリ	影響度	ドメイン
1	アクセシビリティ	CRITICAL	ux
2	タッチとインタラクション	CRITICAL	ux
3	パフォーマンス	HIGH	ux
4	レイアウトとレスポンシブ	HIGH	ux
5	タイポグラフィと色	MEDIUM	typography, color
6	アニメーション	MEDIUM	ux
7	スタイル選択	MEDIUM	style, product
8	チャートとデータ	LOW	chart

クイックリファレンス

1. アクセシビリティ (CRITICAL)

• color-contrast - 通常のテキストに対して最低 4.5:1 のコントラスト比
• focus-states - インタラクティブな要素に見えるフォーカスリングを表示する
• alt-text - 意味のある画像には説明的な alt テキストを付ける
• aria-labels - アイコンのみのボタンには aria-label を付ける
• keyboard-nav - Tab の順序を視覚的な順序と一致させる
• form-labels - for 属性を持つ label を使用する

2. タッチとインタラクション (CRITICAL)

• touch-target-size - タッチターゲットは最低 44x44px にする
• hover-vs-tap - 主要な操作にはクリック/タップを使用する
• loading-buttons - 非同期処理の実行中はボタンを無効化する
• error-feedback - 問題のある箇所の近くに明確なエラーメッセージを表示する
• cursor-pointer - クリック可能な要素に cursor-pointer を追加する

3. パフォーマンス (HIGH)

• image-optimization - WebP、srcset、遅延読み込みを使用する
• reduced-motion - prefers-reduced-motion を確認する
• content-jumping - 非同期コンテンツ用のスペースを確保しておく

4. レイアウトとレスポンシブ (HIGH)

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - モバイルでは本文の文字サイズを最低 16px にする
• horizontal-scroll - コンテンツがビューポートの幅に収まるようにする
• z-index-management - z-index のスケール (10, 20, 30, 50) を定義する

5. タイポグラフィと色 (MEDIUM)

• line-height - 本文には 1.5〜1.75 の行の高さを使用する
• line-length - 1 行あたり 65〜75 文字に制限する
• font-pairing - 見出しフォントと本文フォントの雰囲気を合わせる

6. アニメーション (MEDIUM)

• duration-timing - マイクロインタラクションには 150〜300ms を使用する
• transform-performance - width/height ではなく transform/opacity を使用する
• loading-states - スケルトンスクリーンまたはスピナーを使用する

7. スタイル選択 (MEDIUM)

• style-match - プロダクトの種類に合ったスタイルを選ぶ
• consistency - すべてのページで同じスタイルを使用する
• no-emoji-icons - 絵文字ではなく SVG アイコンを使用する

8. チャートとデータ (LOW)

• chart-type - データの種類に合ったチャートタイプを選ぶ
• color-guidance - アクセシブルなカラーパレットを使用する
• data-table - アクセシビリティのため、表による代替表示を用意する

使い方

以下の CLI ツールを使って、特定のドメインを検索してください。

---

前提条件

Python がインストールされているか確認します:

python3 --version || python --version

Python がインストールされていない場合は、ユーザーの OS に応じてインストールしてください:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

---

このスキルの使い方

ユーザーが UI/UX に関する作業 (デザイン、構築、作成、実装、レビュー、修正、改善) を依頼した場合は、次のワークフローに従ってください。

ステップ 1: ユーザー要件を分析する

ユーザーのリクエストから重要な情報を抽出します:

• プロダクトの種類: SaaS、e コマース、ポートフォリオ、ダッシュボード、ランディングページなど
• スタイルのキーワード: ミニマル、遊び心のある、プロフェッショナル、エレガント、ダークモードなど
• 業界: ヘルスケア、フィンテック、ゲーム、教育など
• スタック: React、Vue、Next.js、または既定値の html-tailwind

ステップ 2：デザインシステムを生成する（必須）

包括的な推奨事項とその根拠を得るため、必ず --design-system から始めてください。

python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

このコマンドでは、次の処理が行われます。

1. 5 つのドメイン（product、style、color、landing、typography）を並行して検索します
2. ui-reasoning.csv の推論ルールを適用し、最適な候補を選択します
3. パターン、スタイル、色、タイポグラフィ、エフェクトを含む完全なデザインシステムを返します
4. 避けるべきアンチパターンも含まれます

例：

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

ステップ 2b：デザインシステムを保存する（マスター＋オーバーライド方式）

セッションをまたいで階層的に取得できるようにデザインシステムを保存するには、--persist を追加します。

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"

これにより、次のファイルが作成されます。

• design-system/MASTER.md — すべてのデザインルールを含む、グローバルな信頼できる唯一の情報源
• design-system/pages/ — ページ固有のオーバーライド用フォルダー

ページ固有のオーバーライドを使う場合：

python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

これにより、次のファイルも作成されます。

• design-system/pages/dashboard.md — マスターからのページ固有の差分

階層的な取得の仕組み：

1. 特定のページ（例：「Checkout」）を作成する際は、まず design-system/pages/checkout.md を確認します
2. ページファイルが存在する場合、そのルールがマスターファイルを上書きします
3. 存在しない場合は、design-system/MASTER.md のみを使用します

コンテキストを考慮した取得プロンプト：

I am building the [Page Name] page. Please read design-system/MASTER.md.
Also check if design-system/pages/[page-name].md exists.
If the page file exists, prioritize its rules.
If not, use the Master rules exclusively.
Now, generate the code...

ステップ 3：詳細検索で補足する（必要に応じて）

デザインシステムを取得した後、ドメイン検索を使って詳細情報を補足します。

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

詳細検索を使う場面：

必要な情報	ドメイン	例
スタイルの選択肢を増やす	style	--domain style "glassmorphism dark"
チャートの推奨事項	chart	--domain chart "real-time dashboard"
UX のベストプラクティス	ux	--domain ux "animation accessibility"
代替フォント	typography	--domain typography "elegant luxury"
ランディングページの構成	landing	--domain landing "hero social-proof"

ステップ 4：スタックのガイドライン（デフォルト：html-tailwind）

実装に特化したベストプラクティスを取得します。ユーザーがスタックを指定しない場合、デフォルトで html-tailwind を使用します。

python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

利用可能なスタック：html-tailwind、react、nextjs、vue、svelte、swiftui、react-native、flutter、shadcn、jetpack-compose

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
product	プロダクトタイプの推奨事項	SaaS、e-commerce、portfolio、healthcare、beauty、service
style	UI スタイル、色、エフェクト	glassmorphism、minimalism、dark mode、brutalism
typography	フォントの組み合わせ、Google Fonts	elegant、playful、professional、modern
color	プロダクトタイプ別のカラーパレット	saas、ecommerce、healthcare、beauty、fintech、service
landing	ページ構成、CTA 戦略	hero、hero-centric、testimonial、pricing、social-proof
chart	チャートの種類、ライブラリの推奨事項	trend、comparison、timeline、funnel、pie
ux	ベストプラクティス、アンチパターン	animation、accessibility、z-index、loading
react	React/Next.js のパフォーマンス	waterfall、bundle、suspense、memo、rerender、cache
web	Web インターフェースのガイドライン	aria、focus、keyboard、semantic、virtualize
prompt	AI プロンプト、CSS キーワード	（スタイル名）

利用可能なスタック

スタック	対象
html-tailwind	Tailwind ユーティリティ、レスポンシブ対応、アクセシビリティ（デフォルト）
react	State、フック、パフォーマンス、パターン
nextjs	SSR、ルーティング、画像、API ルート
vue	Composition API、Pinia、Vue Router
svelte	Runes、ストア、SvelteKit
swiftui	ビュー、State、ナビゲーション、アニメーション
react-native	コンポーネント、ナビゲーション、リスト
flutter	ウィジェット、State、レイアウト、テーマ設定
shadcn	shadcn/ui コンポーネント、テーマ設定、フォーム、パターン
jetpack-compose	Composable、Modifier、State Hoisting、Recomposition

---

ワークフローの例

ユーザーのリクエスト：「プロ向けスキンケアサービスのランディングページを作成してください」

Step 1: 要件を分析する

• 製品タイプ：美容・スパサービス
• スタイルのキーワード：エレガント、プロフェッショナル、柔らかい
• 業界：美容・ウェルネス
• スタック：html-tailwind（デフォルト）

Step 2: デザインシステムを生成する（必須）

python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

出力： パターン、スタイル、カラー、タイポグラフィ、エフェクト、アンチパターンを含む完全なデザインシステム。

Step 3: 必要に応じて詳細を検索する

# Get UX guidelines for animation and accessibility
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux

# Get alternative typography options if needed
python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography

Step 4: スタックのガイドライン

python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind

次に： デザインシステムと詳細検索の結果を統合し、デザインを実装します。

---

出力形式

--design-system フラグでは、次の2つの出力形式をサポートしています。

# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown

---

より良い結果を得るためのヒント

1. キーワードを具体的にする — 「ヘルスケアSaaSのダッシュボード」＞「アプリ」
2. 複数回検索する — キーワードを変えると、さまざまな知見が得られます
3. ドメインを組み合わせる — スタイル＋タイポグラフィ＋カラー＝完全なデザインシステム
4. UXを必ず確認する — よくある問題を把握するため、「animation」「z-index」「accessibility」で検索します
5. スタックフラグを使う — 実装に特化したベストプラクティスを得られます
6. 繰り返し改善する — 最初の検索結果が合わない場合は、キーワードを変えてみます

---

プロフェッショナルなUIの共通ルール

UIをプロフェッショナルに見せるうえで、見落とされがちな問題を紹介します。

アイコンと視覚要素

ルール	すべきこと	避けること
絵文字アイコンを使わない	SVGアイコン（Heroicons、Lucide、Simple Icons）を使う	🎨 🚀 ⚙️ などの絵文字をUIアイコンとして使う
ホバー状態を安定させる	ホバー時に色や不透明度を変化させる	レイアウトがずれるスケール変換を使う
正しいブランドロゴを使う	Simple Iconsで公式SVGを調べる	ロゴのパスを推測したり、誤ったものを使ったりする
アイコンのサイズを統一する	w-6 h-6 と固定のviewBox（24x24）を使う	異なるサイズのアイコンを無作為に混在させる

インタラクションとカーソル

ルール	すべきこと	避けること
カーソルポインター	クリック可能／ホバー可能なカードすべてに cursor-pointer を追加する	インタラクティブな要素にデフォルトのカーソルを使う
ホバー時のフィードバック	視覚的なフィードバック（色、シャドウ、枠線）を用意する	要素がインタラクティブであることを示さない
滑らかなトランジション	transition-colors duration-200 を使う	状態を即座に変化させたり、遅くしすぎたりする（>500ms）

ライト／ダークモードのコントラスト

ルール	すべきこと	避けること
ライトモードのガラスカード	bg-white/80 またはそれ以上の不透明度を使う	bg-white/10 を使う（透明度が高すぎる）
ライトモードのテキストコントラスト	テキストには #0F172A（slate-900）を使う	本文テキストに #94A3B8（slate-400）を使う
ライトモードの控えめなテキスト	最低でも #475569（slate-600）を使う	gray-400またはそれより明るい色を使う
枠線の視認性	ライトモードでは border-gray-200 を使う	border-white/10 を使う（見えない）

レイアウトと間隔

ルール	すべきこと	避けること
フローティングナビゲーションバー	top-4 left-4 right-4 の間隔を設ける	ナビゲーションバーを top-0 left-0 right-0 に密着させる
コンテンツのパディング	固定ナビゲーションバーの高さを考慮する	コンテンツを固定要素の背後に隠す
最大幅を統一する	同じ max-w-6xl または max-w-7xl を使う	異なるコンテナー幅を混在させる

---

提出前チェックリスト

UIコードを提出する前に、次の項目を確認してください。

ビジュアル品質

• アイコンとして絵文字を使っていない（代わりにSVGを使う）
• すべてのアイコンが一貫したアイコンセット（Heroicons／Lucide）を使用している
• ブランドロゴが正しい（Simple Iconsで確認済み）
• ホバー状態によってレイアウトがずれない
• var()でラップせず、テーマカラーを直接使う（bg-primary）

インタラクション

• クリック可能なすべての要素に cursor-pointer がある
• ホバー状態で明確な視覚的フィードバックがある
• トランジションが滑らか（150～300ms）
• キーボード操作時にフォーカス状態が見える

ライト／ダークモード

• ライトモードのテキストに十分なコントラストがある（最低4.5:1）
• ガラス／透明な要素がライトモードでも見える
• どちらのモードでも枠線が見える
• 提出前に両方のモードでテストする

レイアウト

• フローティング要素と画面端の間に適切な間隔がある
• コンテンツが固定ナビゲーションバーの背後に隠れていない
• 375px、768px、1024px、1440pxでレスポンシブに表示される
• モバイルで横スクロールが発生しない

アクセシビリティ

• すべての画像に代替テキストが設定されています
• フォームの入力欄にラベルが設定されています
• 色だけを唯一の識別手段にしていません
• prefers-reduced-motion に準拠しています