UI/UX Pro Max - デザインインテリジェンス
Webおよびモバイルアプリケーション向けの包括的なデザインガイド。67スタイル、96カラーパレット、57フォントペアリング、99のUXガイドライン、25のチャートタイプを13のテクノロジースタックにわたって収録。優先順位に基づく推奨機能を備えた検索可能なデータベース。
適用タイミング
以下の場合にこれらのガイドラインを参照してください。
- 新しいUIコンポーネントやページをデザインするとき
- カラーパレットやタイポグラフィを選択するとき
- UXの問題についてコードをレビューするとき
- ランディングページやダッシュボードを構築するとき
- アクセシビリティ要件を実装するとき
優先順位別ルールカテゴリ
| 優先順位 | カテゴリ | 影響 | ドメイン |
|---|---|---|---|
| 1 | アクセシビリティ | クリティカル | ux |
| 2 | タッチ＆インタラクション | クリティカル | ux |
| 3 | パフォーマンス | 高 | ux |
| 4 | レイアウト＆レスポンシブ | 高 | ux |
| 5 | タイポグラフィ＆カラー | 中 | typography, color |
| 6 | アニメーション | 中 | ux |
| 7 | スタイル選択 | 中 | style, product |
| 8 | チャート＆データ | 低 | chart |
クイックリファレンス
1. アクセシビリティ（クリティカル）
color-contrast- 通常のテキストは最低4.5:1の比率focus-states- インタラクティブ要素に可視のフォーカスリングalt-text- 意味のある画像に説明的な代替テキストaria-labels- アイコンのみのボタンにaria-labelkeyboard-nav- Tab順序が視覚的な順序と一致することform-labels- for属性付きのlabelを使用
2. タッチ＆インタラクション（クリティカル）
touch-target-size- タッチターゲットは最低44x44pxhover-vs-tap- プライマリインタラクションにはクリック/タップを使用loading-buttons- 非同期処理中はボタンを無効化error-feedback- 問題の近くに明確なエラーメッセージcursor-pointer- クリック可能な要素にcursor-pointerを追加
3. パフォーマンス（高）
image-optimization- WebP、srcset、遅延ロードを使用reduced-motion- prefers-reduced-motionを確認content-jumping- 非同期コンテンツ用にスペースを確保
4. レイアウト＆レスポンシブ（高）
viewport-meta- width=device-width initial-scale=1readable-font-size- モバイルの本文テキストは最小16pxhorizontal-scroll- コンテンツがビューポート幅に収まることz-index-management- z-indexスケールを定義（10, 20, 30, 50）
5. タイポグラフィ＆カラー（中）
line-height- 本文テキストは1.5〜1.75を使用line-length- 1行あたり65〜75文字に制限font-pairing- 見出し/本文フォントの特性を一致させる
6. アニメーション（中）
duration-timing- マイクロインタラクションには150〜300msを使用transform-performance- width/heightではなくtransform/opacityを使用loading-states- スケルトンスクリーンまたはスピナー
7. スタイル選択（中）
style-match- スタイルを製品タイプに合わせるconsistency- すべてのページで同じスタイルを使用no-emoji-icons- 絵文字ではなくSVGアイコンを使用
8. チャート＆データ（低）
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"]
このコマンドは以下の処理を行います。
- 5つのドメインを並行検索（product、style、color、landing、typography）
ui-reasoning.csvの推論ルールを適用して最適な一致を選択- 完全なデザインシステム（パターン、スタイル、カラー、タイポグラフィ、エフェクト）を返す
- 避けるべきアンチパターンも含む
例：
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— マスターからのページ固有の逸脱
階層的検索の仕組み：
- 特定のページ（例：「Checkout」）を構築する場合、最初に
design-system/pages/checkout.mdを確認する - ページファイルが存在する場合、そのルールがマスターファイルを オーバーライド する
- 存在しない場合は、
design-system/MASTER.mdのみを使用する
ステップ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コマース、ポートフォリオ、ヘルスケア、ビューティー、サービス |
style | UIスタイル、カラー、エフェクト | グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム |
typography | フォントペアリング、Google Fonts | エレガント、遊び心、プロフェッショナル、モダン |
color | 製品タイプ別カラーパレット | saas、ecommerce、healthcare、beauty、fintech、service |
landing | ページ構造、CTA戦略 | ヒーロー、ヒーロー中心、 testimonial、 pricing、ソーシャルプルーフ |
chart | チャートタイプ、ライブラリの推奨 | トレンド、比較、タイムライン、ファネル、円 |
ux | ベストプラクティス、アンチパターン | アニメーション、アクセシビリティ、z-index、ローディング |
react | React/Next.jsのパフォーマンス | ウォーターフォール、バンドル、サスペンス、メモ、再レンダリング、キャッシュ |
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コンポーネント、テーマ設定、フォーム、パターン |
jetpack-compose | コンポーザブル、Modifier、状態ホイスティング、再コンポジション |
ワークフロー例
ユーザーリクエスト： 「プロフェッショナルなスキンケアサービスのランディングページを作成して」
ステップ1：要件の分析
- プロダクトタイプ：ビューティー/スパサービス
- スタイルキーワード：エレガント、プロフェッショナル、ソフト
- 業界：ビューティー/ウェルネス
- スタック：html-tailwind（デフォルト）
ステップ2：デザインシステムの生成（必須）
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"
出力： パターン、スタイル、カラー、タイポグラフィ、エフェクト、アンチパターンを含む完全なデザインシステム。
ステップ3：詳細検索で補完（必要に応じて）
# アニメーションとアクセシビリティに関するUXガイドラインを取得
python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux
# 必要に応じて代替タイポグラフィオプションを取得
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ボックス（デフォルト） - ターミナル表示に最適
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - ドキュメントに最適
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
より良い結果を得るためのヒント
- キーワードを具体的に - 「ヘルスケアSaaSダッシュボード」> 「アプリ」
- 複数回検索する - 異なるキーワードで異なる洞察が得られる
- ドメインを組み合わせる - スタイル＋タイポグラフィ＋カラー＝完全なデザインシステム
- 常にUXをチェック - 一般的な問題については「アニメーション」、「z-index」、「アクセシビリティ」を検索
- スタックフラグを使用 - 実装固有のベストプラクティスを取得
- 反復する - 最初の検索で一致しない場合は、別のキーワードを試す
プロフェッショナル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で確認済み）
- ホバー状態でレイアウトがシフトしない
- テーマカラーを直接使用（bg-primary）し、var()ラッパーを使用しない
インタラクション
- すべてのクリック可能な要素に
cursor-pointerがある - ホバー状態が明確な視覚的フィードバックを提供する
- トランジションがスムーズ（150〜300ms）
- キーボードナビゲーション用にフォーカス状態が可視
ライト/ダークモード
- ライトモードのテキストが十分なコントラスト（最低4.5:1）を持っている
- ガラス/透明要素がライトモードで可視
- ボーダーが両方のモードで可視
- 納品前に両方のモードをテスト
レイアウト
- フローティング要素が端から適切なスペーシングを持っている
- 固定ナビゲーションバーの後ろにコンテンツが隠れていない
- 375px、768px、1024px、1440pxでレスポンシブ
- モバイルで水平スクロールがない
アクセシビリティ
- すべての画像に代替テキストがある
- フォーム入力にラベルがある
- 色だけが唯一のインジケーターではない
-
prefers-reduced-motionが尊重されている