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 .claude/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 .claude/skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

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

デザインシステムを取得した後、ドメイン検索を使用して追加の詳細を取得します:

python3 .claude/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 .claude/skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind

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

---

検索リファレンス

利用可能なドメイン

ドメイン	用途	キーワードの例
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 ユーティリティ、レスポンシブ、a11y（デフォルト）
react	状態、フック、パフォーマンス、パターン
nextjs	SSR、ルーティング、画像、API ルート
vue	Composition API、Pinia、Vue Router
svelte	Runes、ストア、SvelteKit
swiftui	ビュー、状態、ナビゲーション、アニメーション
react-native	コンポーネント、ナビゲーション、リスト
flutter	ウィジェット、状態、レイアウト、テーマ設定
shadcn	shadcn/ui コンポーネント、テーマ設定、フォーム、パターン

---

ワークフローの例

ユーザーのリクエスト: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

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

• 製品タイプ: 美容/スパサービス
• スタイルキーワード: elegant、professional、soft
• 業界: 美容/ウェルネス
• スタック: html-tailwind（デフォルト）

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

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

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

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

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

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

ステップ 4: スタックガイドライン

python3 .claude/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 .claude/skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 .claude/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. stack フラグを使う - 実装技術に特化したベストプラクティスを取得できます
6. 繰り返し調整する - 最初の検索で目的のものが見つからない場合は、別のキーワードで試してください

---

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

以下は、UI を素人っぽく見せてしまう、見落とされがちな問題です。

アイコンと視覚要素

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

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

ルール	推奨	非推奨
カーソルポインター	クリック可能・ホバー可能なカードすべてに 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 に対応している