ui-ux-pro-max

UI/UX Pro Max - Design Intelligence

Web アプリケーションとモバイルアプリケーション向けの包括的なデザインガイドです。13 の技術スタックにわたる 67 種類のスタイル、96 種類のカラーパレット、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 スクリプトの使用方法については python-setup.md を参照してください。

---

ワークフローの例

ユーザーのリクエスト： 「プロフェッショナルなスキンケアサービスのランディングページを作成してください」

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

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

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

python3 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 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

ステップ 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. 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 に対応している