ui-ux-pro-max

UI/UX Pro Max Skill

概要

このスキルでは、ネイティブの Mastra ツールを通じて、包括的なデザインデータベースを利用できます。 デザインに関する推奨事項は、必ずツールへの問い合わせから得てください。LLM の記憶を使ってはいけません。

利用可能なツール

getStyleRecommendations

製品タイプ、業界、キーワードから、67 種類以上の UI スタイルを検索します。

クエリの例：

• "fintech dashboard minimal"
• "healthcare monitoring dark"
• "startup saas bold"
• "enterprise corporate professional"
• "voice ai cyber glass"

返される内容： スタイルカテゴリ、色（16 進数）、効果、複雑さの評価、実装チェックリスト。

getTypographyRecommendations

スタイル、雰囲気、用途から、57 種類以上のフォントの組み合わせを検索します。

クエリの例：

• "professional corporate"
• "modern tech startup"
• "friendly approachable"
• "premium luxury"

返される内容： フォントの組み合わせ（見出し＋本文）、ウェイト、行の高さ、用途。

getChartRecommendations

データパターンと可視化の目的から、25 種類以上のチャートタイプを検索します。

クエリの例：

• "time series trend"
• "comparison categories"
• "part-to-whole percentage"
• "geographic distribution"

返される内容： チャートタイプ、代替案、色のガイダンス、アクセシビリティに関する注記、ライブラリの推奨事項。

getProductRecommendations

業界固有のデザインパターンを検索します。

クエリの例：

• "crm dashboard"
• "voice ai analytics"
• "workflow automation"
• "healthcare monitoring"

返される内容： 推奨される基本スタイル、ランディングページのパターン、ダッシュボードのスタイル、重要な考慮事項。

getUXGuidelines

カテゴリとプラットフォームから、98 件以上の UX ベストプラクティスを検索します。

クエリの例：

• "mobile navigation"
• "form validation"
• "accessibility wcag"
• "dashboard layout"

返される内容： ガイドライン、推奨例と非推奨例、コードサンプル、重大度の評価。

使用ルール

1. デザインに関するアドバイスをする前に、必ずツールを呼び出してください
2. デザインの値を決して創作せず、ツールが返した内容のみを使用してください
3. 結果に含まれる具体的な値（16 進数コード、フォント名、スタイル名）を示してください
4. ツールの結果が空の場合は、クエリの範囲を広げるよう提案してください
5. 包括的な推奨事項を提示するため、複数のツールの結果を組み合わせてください

データソース

• styles.csv: 色、効果、複雑さを含む 67 種類の UI スタイル
• typography.csv: ウェイトと用途を含む 57 種類のフォントの組み合わせ
• charts.csv: アクセシビリティに関する注記を含む 25 種類のチャートタイプ
• products.csv: 業界固有のデザインパターン
• ux-guidelines.csv: 98 件の UX ベストプラクティス

---

デザインシステムのワークフロー

デザインシステム全体を生成する

個別の領域を検索する前に、必ずデザインシステム全体の生成から始めてください。

クエリパターン：

getProductRecommendations("<product_type> <industry>")
+ getStyleRecommendations("<product_type> <style_keywords>")
+ getTypographyRecommendations("<style_keywords>")
+ getChartRecommendations("<data_type>") [if dashboard]
+ getUXGuidelines("<platform> <category>")

例：

User: "Create a fintech dashboard with dark mode"

1. getProductRecommendations("fintech dashboard")
   → Returns: Industry-specific design direction

2. getStyleRecommendations("fintech dark minimal professional")
   → Returns: Style category, hex colors, effects, complexity

3. getTypographyRecommendations("professional modern corporate")
   → Returns: Font pairings, weights, line heights

4. getChartRecommendations("time series trend comparison")
   → Returns: Chart types, color palettes, libraries

5. getUXGuidelines("dashboard layout dark mode accessibility")
   → Returns: Best practices, anti-patterns, code samples

デザインシステムの出力構成

デザインシステム全体には、以下が含まれます。

1. パターン - ランディングページの構成（ヒーロー中心、推薦文中心など）
2. スタイル - 16 進数カラーを含むビジュアルの方向性（グラスモーフィズム、ミニマリズムなど）
3. 色 - プライマリ、セカンダリ、アクセント、背景、テキストの色
4. タイポグラフィ - ウェイトと行の高さを含む、見出し用フォントと本文用フォント
5. 効果 - 影、境界線、アニメーション、グラスモーフィズムの値
6. アンチパターン - この製品タイプで避けるべきもの

デザインシステムの永続化（マスター＋オーバーライドのパターン）

複数ページのプロジェクトでは、一貫性を保つためにデザインシステムを永続化します。

コンセプト：

• design-system/MASTER.md → グローバルな信頼できる唯一の情報源（すべてのデザインルール）
• design-system/pages/ → ページ固有のオーバーライド（マスターからの逸脱）

階層的な取得ロジック：

1. 特定のページ（例：「ダッシュボード」）を作成する際は、まず design-system/pages/dashboard.md を確認します
2. ページファイルが存在する場合、そのルールがマスターファイルをオーバーライドします
3. ページファイルが存在しない場合は、design-system/MASTER.md のみを使用します

マスターを作成するタイミング：

• ユーザーがプロジェクト全体のデザインシステムを確認したとき
• 複数のページで同じデザイン言語を共有するとき

ページのオーバーライドを作成するタイミング：

• ユーザーがページ固有のスタイルをリクエストしたとき（例：「チェックアウトページをよりシンプルにする」）
• ページに異なる密度や余白の要件があるとき
• ページで異なる色の強調が必要なとき（例：確認画面で成功を示す緑）

コンテンツ構成：

MASTER.md：

# [Project Name] Design System

## Style
- Category: Glassmorphism
- Primary: #667eea
- Effects: backdrop-blur-md, bg-white/10
- Dark mode primary: #818cf8

## Typography
- Heading: Inter Bold (700, 800)
- Body: Inter Regular (400, 500)
- Line height: 1.5

## Spacing
- Density: Comfortable
- Card padding: p-6
- Section gaps: space-y-8

## Components
- Border radius: rounded-xl
- Shadow: shadow-lg
- Hover: scale-105, transition-300ms

pages/dashboard.md：

# Dashboard Page Overrides

## Spacing (OVERRIDE)
- Density: Compact (data-heavy)
- Card padding: p-4
- Section gaps: space-y-4

## Components (OVERRIDE)
- Border radius: rounded-lg (sharper for data tables)
- Charts: Use consistent color palette from MASTER

ドメイン検索で補完する

デザインシステムを確立した後、特定のニーズに合わせてドメイン検索を利用します。

追加のドメインを検索するタイミング：

ニーズ	ドメイン	検索クエリの例
代替スタイル	style	"brutalism bold high-contrast"
追加のフォント候補	typography	"elegant luxury serif"
チャートのバリエーション	chart	"funnel conversion visualization"
UX の検証	ux	"mobile touch targets animation"
業界のパターン	product	"healthcare HIPAA compliance"

---

優先度別クイックリファレンス

UI のデザインやレビューを行う際は、次のガイドラインを優先度の高い順に適用します。

優先度	カテゴリ	影響度	主なルール
1	アクセシビリティ	重大	コントラスト比 4.5:1、フォーカス状態、代替テキスト、aria-label、キーボード操作
2	タッチとインタラクション	重大	44x44px のタッチターゲット、cursor-pointer、ホバー時のフィードバック、読み込み状態
3	パフォーマンス	高	WebP 画像、遅延読み込み、動きを抑える設定、コンテンツのガタつき防止
4	レイアウトとレスポンシブ対応	高	モバイルファースト、最小フォントサイズ 16px、横スクロールなし、z-index のスケール
5	タイポグラフィと色	中	行の高さ 1.5～1.75、1 行あたり 65～75 文字、フォントの組み合わせ
6	アニメーション	中	再生時間 150～300ms、transform／opacity のみ、スケルトン画面

重大なルール（必ず確認）

アクセシビリティ：

• color-contrast：通常のテキストでは最小コントラスト比 4.5:1
• focus-states：すべての操作可能な要素で、フォーカスリングを見えるようにする
• alt-text：意味のある画像には内容を説明する代替テキストを設定する
• aria-labels：アイコンのみのボタンに必須
• keyboard-nav：Tab キーによる移動順序を視覚的な順序に合わせる
• form-labels：for 属性を指定して label を使用する

タッチとインタラクション：

• touch-target-size：タッチターゲットの最小サイズは 44x44px
• cursor-pointer：クリックまたはホバーできるすべての要素に追加する
• hover-feedback：色、影、境界線による明確な視覚的フィードバック
• loading-buttons：非同期処理中は無効にする
• error-feedback：問題箇所の近くにわかりやすいエラーメッセージを表示する

パフォーマンス：

• image-optimization：WebP、srcset、遅延読み込みを使用する
• reduced-motion：prefers-reduced-motion メディアクエリを確認する
• content-jumping：非同期コンテンツ用のスペースを確保する

ドメイン検索ガイド

具体的なデザインの推奨事項を得るには、以下のドメインを使用します。

ドメイン	用途	キーワードの例	ツール
product	製品タイプに関する推奨事項	SaaS、eコマース、ポートフォリオ、ヘルスケア、美容	getProductRecommendations
style	UI のスタイル、色、エフェクト	グラスモーフィズム、ミニマリズム、ダークモード、ブルータリズム	getStyleRecommendations
typography	フォントの組み合わせ、Google Fonts	エレガント、遊び心のある、プロフェッショナル、モダン	getTypographyRecommendations
color	製品タイプ別のカラーパレット	SaaS、eコマース、ヘルスケア、美容、フィンテック	getStyleRecommendations
chart	チャートの種類、ライブラリの推奨事項	トレンド、比較、タイムライン、ファネル、円グラフ	getChartRecommendations
ux	ベストプラクティス、アンチパターン	アニメーション、アクセシビリティ、z-index、読み込み	getUXGuidelines

各ドメインの使い方

まず product を使用します： 業界に特化したデザインの方向性を確認します

getProductRecommendations("voice ai analytics dashboard")
Returns: Primary style, landing pattern, dashboard style, key considerations

次に style を使用します： ビジュアルの方向性を詳しく確認します

getStyleRecommendations("fintech minimal professional")
Returns: Style category, hex colors, effects, complexity rating, checklist

typography を追加します： フォントの組み合わせを確認します

getTypographyRecommendations("professional corporate modern")
Returns: Heading + body fonts, weights, line heights, use cases

chart を含めます： データの可視化に使用します

getChartRecommendations("time series trend comparison")
Returns: Chart types, secondary options, color guidance, libraries

ux を確認します： ベストプラクティスを確認します

getUXGuidelines("mobile navigation accessibility")
Returns: Guidelines, do/don't examples, code samples, severity rating

---

よくあるアンチパターン（絶対に避けてください）

プロフェッショナルな 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）から選ばれている
• ブランドロゴが正しい（Simple Icons で確認済み）
• ホバー状態によってレイアウトがずれない（スケール変換なし）
• var() のラッパーではなく、テーマカラーを直接使用している（bg-primary）

操作

• クリック可能な要素すべてに cursor-pointer が設定されている
• ホバー状態で明確な視覚的フィードバックが得られる
• 遷移がスムーズである（150～300ms）
• キーボード操作用のフォーカス状態が見える
• 非同期処理中は読み込み状態によってボタンが無効化される

ライトモード／ダークモード

• ライトモードのテキストに十分なコントラストがある（最小 4.5:1）
• ガラス調／透明な要素がライトモードで視認できる（bg-white/80+）
• どちらのモードでも枠線が視認できる
• 提出前に両方のモードをテストする

レイアウト

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

アクセシビリティ

• すべての画像に内容を説明する alt テキストがある
• フォーム入力に対応するラベルがある
• 状態を示す方法が色だけではない
• アニメーションでは prefers-reduced-motion を尊重する
• モバイルでタップ対象が最小 44x44px ある

パフォーマンス

• 画像が最適化されている（WebP、遅延読み込み、srcset）
• コンテンツのレイアウトシフト（CLS）が発生しない
• アニメーションには transform/opacity を使用する（width/height は使用しない）