ux-mcp-server

UX MCP Server

UX エコシステム全体を網羅する包括的な UX のベストプラクティスを提供する Model Context Protocol（MCP）サーバーです。アクセシビリティガイドライン（WCAG）、ユーザビリティヒューリスティック（Nielsen）、UI パターン、デザインシステム、パフォーマンス最適化、SEO、国際化、アニメーション、フレームワークパターン（React/Vue/Angular）、E コマース、テスト、PWA、倫理的なデザイン、SaaS、アナリティクス、音声 UI、AR/VR、AI/ML パターン、ヘルスケア、金融、ニューロダイバーシティ、Web コンポーネントを扱います。

Claude Desktop、Cursor IDE、Continue.dev、Cline、カスタムアプリケーションなど、あらゆる MCP 互換クライアントで利用できます。

インストール

npm（推奨）

npm install -g @elsahafy/ux-mcp-server

npx（インストール不要）

npx @elsahafy/ux-mcp-server

ソースから

git clone https://github.com/elsahafy/ux-mcp-server.git
cd ux-mcp-server
npm install
npm run build

機能

📚 リソース（28 のナレッジベース）

カテゴリ別に整理された、包括的な UX ナレッジベースにアクセスできます。

基礎とコア（12 リソース）

• ux://accessibility/wcag - コードチェック付きの WCAG 2.1 AA ガイドライン
• ux://usability/nielsen-heuristics - Nielsen のユーザビリティに関する 10 のヒューリスティック
• ux://patterns/ui-patterns - 一般的な UI パターンライブラリ
• ux://design-systems/principles - デザインシステムの原則とプリミティブ
• ux://responsive/design - レスポンシブデザインとモバイルファーストの原則
• ux://themes/dark-mode - ダークモードの実装ガイド
• ux://content/error-messages - ユーザーフレンドリーなエラーメッセージのライブラリ
• ux://performance/optimization - Core Web Vitals とパフォーマンス最適化のベストプラクティス
• ux://seo/guidelines - SEO のベストプラクティス、メタタグ、構造化データ
• ux://i18n/patterns - 国際化とローカライズのパターン
• ux://animation/motion - モーションデザインの原則とアクセシビリティ
• ux://react/patterns - 高度な React パターンと状態管理

重要な機能（8 リソース）

• ux://forms/patterns - 包括的なフォーム設計、バリデーション、アクセシビリティ
• ux://microcopy/guidelines - UX ライティング、ボタンラベル、エラーメッセージ、トーン
• ux://typography/systems - 文字サイズのスケール、フォントの組み合わせ、読みやすさ、レスポンシブなタイポグラフィ
• ux://color/theory - 色彩調和、WCAG のコントラスト、セマンティックカラー、カラーパレット
• ux://mobile/patterns - タッチターゲット、ジェスチャー、親指が届く範囲、モバイルファーストのデザイン
• ux://vue/patterns - Vue 3 Composition API、コンポーザブル、Pinia、ベストプラクティス
• ux://angular/patterns - Angular のスタンドアロンコンポーネント、シグナル、RxJS、DI
• ux://data/visualization - チャートの選定、アクセシビリティ、D3.js、ダッシュボード設計

高度な機能（8 リソース）

• ux://ecommerce/patterns - 商品ページ、チェックアウト、コンバージョン、信頼性の最適化
• ux://information-architecture/patterns - IA システム、ナビゲーション、カードソーティング、ツリーテスト
• ux://testing/validation - ユーザビリティテスト、A/B テスト、アンケート、分析
• ux://pwa/patterns - サービスワーカー、オフラインファースト、アプリマニフェスト、プログレッシブエンハンスメント
• ux://ethical-design/patterns - ダークパターン、プライバシー、GDPR/CCPA、倫理的な代替案
• ux://design-systems/advanced - セマンティックトークン、テーマ設定、バージョニング、ガバナンス
• ux://saas/patterns - オンボーディング、価格設定の UX、アクティベーション指標、リテンション
• ux://analytics/metrics - UX 指標（HEART、AARRR）、SUS、NPS、統計分析

新興技術（8 リソース）

• ux://voice/interface - 音声 UI 設計、会話パターン、VUI の原則
• ux://ar-vr/interfaces - 空間 UI、快適性、プレゼンス、6DOF、AR アンカリング
• ux://ai-ml/patterns - AI の透明性、信頼度インジケーター、レコメンデーション、倫理
• ux://haptic/feedback - 触覚フィードバックの種類、タイミングパターン、プラットフォーム API
• ux://healthcare/ux - HIPAA 準拠、患者の安全性、医療 UI、遠隔医療
• ux://finance/ux - PCI-DSS、2FA、トランザクションフロー、フィンテックのパターン
• ux://neurodiversity/design - ADHD、自閉症、ディスレクシアへの配慮、認知アクセシビリティ
• ux://web-components/patterns - カスタム要素、Shadow DOM、Lit、Stencil、カプセル化

🛠️ ツール（23 種類の動的な操作）

UX 分析と生成のための強力なツールです。

コア分析（11 ツール）

1. analyze_accessibility - コードに WCAG 違反がないか確認します
2. review_usability - Nielsen のヒューリスティックに照らして評価します
3. suggest_pattern - ユースケースに適した UI パターンを見つけます
4. generate_component_example - アクセシブルな HTML/CSS の例を作成します
5. audit_design_system - デザイントークンの構成をレビューします
6. check_contrast - WCAG の色のコントラスト比を確認します
7. check_responsive - モバイルファースト設計とレスポンシブデザインを分析します
8. suggest_error_message - ユーザーにわかりやすいエラーメッセージを提案します
9. analyze_performance - コードのパフォーマンス上の問題と Core Web Vitals を確認します
10. check_seo - HTML が SEO のベストプラクティスに準拠しているか分析します
11. suggest_animation - UI インタラクションに適したアニメーションを提案します

デザインとコンテンツ（5 ツール） 12. generate_color_palette - ベースカラーからアクセシブルなカラーパレットを作成します 13. generate_typography_scale - モジュラースケール比を用いて文字サイズのスケールを生成します 14. suggest_microcopy - UI 要素に関する UX ライティングの推奨事項を提示します 15. recommend_form_pattern - 最適なフォームレイアウトとバリデーションパターンを見つけます 16. suggest_data_visualization - データの種類に適したグラフを選びます

テストと検証（5 ツール） 17. generate_accessibility_report - 包括的な WCAG 監査レポートを作成します 18. suggest_ab_variant - A/B テストのバリアント案を生成します 19. analyze_information_architecture - ナビゲーションと IA の構成を評価します 20. detect_dark_patterns - 欺瞞的な UI 手法を特定します 21. calculate_ux_metrics - SUS、NPS、CSAT、タスク成功率を計算します

UI 生成（2 ツール） 22. generate_wireframe - ページやコンポーネントの ASCII ワイヤーフレームを作成します 23. suggest_microinteraction - タイミングやイージングを含むマイクロインタラクションを提案します

💬 プロンプト（設定済みワークフロー 4 種類）

包括的なレビューのワークフローです。

1. accessibility_review - WCAG アクセシビリティの包括的な監査
2. usability_audit - Nielsen のヒューリスティックに基づく完全な評価
3. design_system_setup - デザインシステム作成のガイド
4. complete_ux_audit - 多角的な UX の包括的監査（アクセシビリティ、ユーザビリティ、パフォーマンス、レスポンシブデザイン、タイポグラフィ、色、フォーム、SEO）

互換性

この MCP サーバーは、Model Context Protocol をサポートするあらゆるクライアントで動作します。

クライアント	状態	設定
Claude Desktop	✅ 完全対応	以下を参照
Claude Code (CLI)	✅ 完全対応	以下を参照
Cursor IDE	✅ 完全対応	以下を参照
Continue.dev	✅ 完全対応	以下を参照
Cline (VS Code)	✅ 完全対応	以下を参照
Zed Editor	✅ 完全対応	以下を参照
Custom MCP Clients	✅ 完全対応	以下を参照

クライアントの設定

Claude Desktop

設定ファイルの場所：

• macOS：~/Library/Application Support/Claude/claude_desktop_config.json
• Windows：%APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server"
    }
  }
}

ソースから：

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "node",
      "args": ["/absolute/path/to/ux-mcp-server/dist/index.js"]
    }
  }
}

設定後、Claude Desktop を再起動してください。

Claude Code (CLI)

CLI から追加します（推奨）：

claude mcp add ux -- npx -y @elsahafy/ux-mcp-server

または、~/.claude/settings.json に手動で追加します：

{
  "mcpServers": {
    "ux": {
      "command": "npx",
      "args": ["-y", "@elsahafy/ux-mcp-server"]
    }
  }
}

Cursor IDE

Cursor の MCP 設定（~/.cursor/mcp.json）に追加します。

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server"
    }
  }
}

または、Cursor Settings → MCP Servers → Add Server から設定します。

Continue.dev

Continue の設定（~/.continue/config.json）に追加します。

{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "ux-mcp-server"
        }
      }
    ]
  }
}

Cline (VS Code)

Cline 拡張機能をインストールした VS Code で、MCP の設定に追加します。

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server",
      "args": []
    }
  }
}

Zed Editor

Zed の設定（~/.config/zed/settings.json）に追加します。

{
  "context_servers": {
    "ux-best-practices": {
      "command": {
        "path": "ux-mcp-server"
      }
    }
  }
}

Custom MCP Clients

MCP SDK を使用するカスタムアプリケーションの場合：

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

const transport = new StdioClientTransport({
  command: "ux-mcp-server",
  args: []
});

const client = new Client({
  name: "my-app",
  version: "1.0.0"
}, {
  capabilities: {}
});

await client.connect(transport);

// List available resources
const resources = await client.listResources();

// Read a resource
const wcag = await client.readResource({ uri: "ux://accessibility/wcag" });

// Call a tool
const result = await client.callTool({
  name: "check_contrast",
  arguments: { foreground: "#333333", background: "#ffffff" }
});

Windows に関する注意事項

Windows では、バックスラッシュをエスケープした絶対パスを使用してください。

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "node",
      "args": ["C:\\Users\\YourName\\ux-mcp-server\\dist\\index.js"]
    }
  }
}

使用例

設定が完了したら、AI アシスタントにこれらの UX ツールとリソースを使うよう依頼できます。プロンプトの例をいくつか紹介します。

アクセシビリティ分析

"Analyze this button for accessibility issues"
→ Uses: analyze_accessibility tool

"Check if #3b82f6 on #ffffff meets WCAG AA contrast requirements"
→ Uses: check_contrast tool

"Generate an accessibility audit report for my login page"
→ Uses: generate_accessibility_report tool

UI パターンとデザイン

"I need to display a list of items with filtering - what UI pattern should I use?"
→ Uses: suggest_pattern tool

"Generate an accessible modal dialog example"
→ Uses: generate_component_example tool

"Create a color palette based on #3b82f6"
→ Uses: generate_color_palette tool

"Generate a wireframe for a dashboard page"
→ Uses: generate_wireframe tool

パフォーマンスと SEO

"Analyze this React component for performance issues"
→ Uses: analyze_performance tool (checks Core Web Vitals, bundle size, loading patterns)

"Review this HTML page for SEO best practices"
→ Uses: check_seo tool (validates meta tags, Open Graph, structured data)

UX ライティングとフォーム

"Suggest better microcopy for this error message"
→ Uses: suggest_microcopy tool

"What form pattern should I use for a multi-step checkout?"
→ Uses: recommend_form_pattern tool

アニメーションとインタラクション

"What animation should I use for a button click?"
→ Uses: suggest_animation tool

"Suggest microinteractions for a toggle switch"
→ Uses: suggest_microinteraction tool

テストと指標

"Calculate the SUS score from these survey responses"
→ Uses: calculate_ux_metrics tool

"Suggest A/B test variants for my pricing page"
→ Uses: suggest_ab_variant tool

"Check this page for dark patterns"
→ Uses: detect_dark_patterns tool

ナレッジリソースへのアクセス

"What are Nielsen's usability heuristics?"
→ Reads: ux://usability/nielsen-heuristics

"Show me WCAG accessibility guidelines"
→ Reads: ux://accessibility/wcag

"What are best practices for e-commerce checkout?"
→ Reads: ux://ecommerce/patterns

"How do I design for neurodiversity?"
→ Reads: ux://neurodiversity/design

ナレッジベースの内容

WCAG ガイドライン

• 知覚可能（代替テキスト、コントラスト、セマンティック HTML）
• 操作可能（キーボード操作、フォーカス管理）
• 理解可能（エラー処理、明確なラベル）
• 堅牢（ARIA、支援技術への対応）

Nielsen のヒューリスティック

1. システム状態の可視性
2. システムと実世界の一致
3. ユーザーの制御と自由
4. 一貫性と標準
5. エラーの防止
6. 想起よりも認識
7. 柔軟性と効率性
8. 美的でミニマルなデザイン
9. ユーザーがエラーを認識、診断し、回復できるよう支援する
10. ヘルプとドキュメント

UI パターン

• ナビゲーション：ヘッダー、パンくずリスト、タブ
• フォーム：単一カラム、複数ステップのウィザード、バリデーション
• フィードバック：トースト、モーダル、読み込み状態
• データ表示：テーブル、カード、空の状態
• 入力コンポーネント：検索、日付ピッカー、ファイルアップロード

デザインシステムの原則

• アトミックデザイン手法
• デザイントークンの構造（プリミティブ → セマンティック → コンポーネント）
• タイポグラフィのスケール
• 余白のシステム
• 色彩理論
• コンポーネント API の設計

パフォーマンス最適化

• Core Web Vitals（LCP、INP、CLS）
• 画像最適化の戦略
• CSS のパフォーマンス
• JavaScript バンドルの最適化
• 遅延読み込みとコード分割
• キャッシュ戦略
• パフォーマンス予算

SEO のベストプラクティス

• メタタグ（タイトル、説明、キーワード）
• Open Graph プロトコル
• Twitter Cards
• 構造化データ（JSON-LD、Schema.org）
• テクニカル SEO（robots.txt、sitemap、canonical）
• ローカル SEO とリッチスニペット

国際化（i18n）

• テキストの方向（LTR/RTL 対応）
• ロケールに応じた書式設定（日付、数値、通貨）
• 翻訳パターン
• 文化的な考慮事項
• フォントと文字セットの処理
• 多言語サイトの URL 構造

アニメーションとモーションデザイン

• Disney のアニメーション 12 原則
• タイミングとイージング関数
• モーションデザインの原則
• パフォーマンス（GPU アクセラレーション）
• アクセシビリティ（prefers-reduced-motion）
• 一般的な UI アニメーションパターン

React パターン

• 複合コンポーネント
• カスタムフック
• 状態管理の戦略
• パフォーマンス最適化（メモ化、コード分割）
• エラーバウンダリ
• React のアクセシビリティパターン
• テストのベストプラクティス

フォームとマイクロコピー

• フォームのレイアウト（単一カラム、複数ステップのウィザード）
• バリデーションパターン（インライン、送信時、ハイブリッド）
• アクセシブルなフォームフィールドとエラー処理
• UX ライティングの原則（明確さ、トーン、語り口）
• ボタンラベルと CTA
• ユーザーにわかりやすいエラーメッセージ

タイポグラフィとカラーシステム

• モジュラースケール比（1.2、1.333、1.618）を使用したタイプスケール
• フォントの組み合わせの戦略
• 読みやすさの最適化（行の長さ、間隔）
• 色彩調和（補色、三色配色、類似色）
• WCAG コントラスト基準への準拠（4.5:1、3:1、7:1）
• セマンティックカラーのトークン

モバイルとフレームワークのパターン

• タッチターゲット（最小 44x44px）
• ジェスチャーと親指の可動範囲
• ボトムナビゲーションのパターン
• Vue 3 Composition API とコンポーザブル
• Angular シグナルとスタンドアロンコンポーネント
• フレームワークに依存しないベストプラクティス

E コマースとコンバージョン

• 商品の発見（メガメニュー、ファセットフィルター）
• 商品詳細ページとバリエーションの選択
• ショッピングカートのパターン（ドロワーとページ）
• チェックアウトの最適化（進捗状況を示す複数ステップ形式）
• 信頼性を示す要素とカート放棄からの回復

テストと分析

• ユーザビリティテスト（モデレーターあり／なし／ゲリラ）
• A/B テストの手法と統計的有意性
• UX 指標（SUS、NPS、CSAT、CES）
• HEART フレームワークと AARRR 海賊指標
• アクセシビリティテスト（自動および手動）

PWA と倫理的なデザイン

• サービスワーカーとキャッシュ戦略
• オフラインファーストのパターン
• Web アプリマニフェストとホーム画面への追加
• ダークパターンの検出と倫理的な代替案
• GDPR／CCPA への準拠
• プライバシー優先のデザイン

SaaS と高度なデザインシステム

• オンボーディングフローとアクティベーション指標
• 料金設定の UX（フリーミアム、トライアル、従量課金）
• セマンティックデザイントークン（3 層アーキテクチャ）
• マルチブランドのテーマ設定
• コンポーネントのバージョン管理とガバナンス

新興テクノロジー

• 音声 UI の会話設計と VUI の原則
• AR／VR の空間インターフェースと快適性の最適化
• AI／ML の透明性と信頼度インジケーター
• ハプティックフィードバックのタイミングとプラットフォーム API
• ヘルスケア UX（HIPAA、患者の安全）
• 金融 UX（PCI-DSS、2FA、取引フロー）
• ニューロダイバーシティを尊重したデザイン（ADHD、自閉症、ディスレクシア）
• Web Components（Custom Elements、Shadow DOM、Lit）

開発

# Watch mode during development
npm run watch

# Build for production
npm run build

# Test the server
npm run dev

フレームワークに依存しない設計

すべてのサンプルとガイドラインは特定のフレームワークに依存せず、以下に重点を置いています。

• セマンティック HTML
• CSS のベストプラクティス
• ARIA 属性
• アクセシビリティ標準
• 普遍的な UX 原則

React、Vue、Svelte、Angular、またはバニラ JavaScript で利用できます。

v5.0.0 の新機能

セキュリティの強化

• AgentSeal のセキュリティに関するすべての指摘（コマンドインジェクション、SSRF、認証情報の漏えい）を解消
• マークアップを受け付けるパラメーターに maxLength 制約を追加
• MCP 機能を明示的に宣言

バグ修正

• Windows で MCP クライアントの接続を妨げていた、起動時の console.error メッセージを修正

CI/CD

• GitHub Actions パイプライン：ビルドマトリックス（Node 18/20/22）、TypeScript の厳格な型チェック、セキュリティ監査
• 必須のステータスチェックを伴うブランチ保護

破壊的変更

セキュリティ要件への準拠のため、パラメーター名を変更しました。完全な移行ガイドについては、CHANGELOG.md をご覧ください。

ツール	旧パラメーター	新しいパラメーター
analyze_accessibility	code	content
review_usability	code	content
check_responsive	code	content
analyze_performance	code	content
check_seo	url	page_url
generate_accessibility_report	url	page_identifier
detect_dark_patterns	screenshot_url	screenshot_reference

以前のバージョンについては、変更履歴 全体をご覧ください。

貢献

皆さまからの貢献を歓迎します！詳細については、以下の項目を説明した貢献ガイドをご覧ください。

• 開発環境のセットアップ
• 新しいリソース、ツール、またはプロンプトの追加
• コーディング規約
• プルリクエストの手順

クイックスタート：

1. リポジトリをフォークします
2. 機能ブランチを作成します
3. 変更を加えます
4. プルリクエストを送信します

セキュリティ

セキュリティ上の脆弱性については、セキュリティポリシーをご覧ください。

変更履歴

変更の詳細な履歴については、CHANGELOG.mdをご覧ください。

ライセンス

このプロジェクトは MIT License の下でライセンスされています。詳細については、LICENSE ファイルをご覧ください。

このプロジェクトを支援する

このプロジェクトがより優れたユーザー体験の構築に役立った場合は、開発へのご支援をご検討ください。

ご支援は、以下の活動に役立てられます。

• UX ナレッジベースの保守と更新
• 新しいツールやリソースの追加
• ドキュメントの最新状態の維持
• 問題や機能リクエストへの対応

エンタープライズユーザーの方へ：優先サポート、カスタム連携、またはコンサルティングについては、お問い合わせください。

クレジット

• W3C の WCAG 2.1 ガイドライン
• Jakob Nielsen による Nielsen のユーザビリティヒューリスティクス
• 確立されたデザインシステムとベストプラクティスに基づく UI パターン
• デザインシステムコミュニティのデザイントークンの概念
• Google Web.dev の Core Web Vitals
• Google Search Central の SEO ベストプラクティス
• Disney と Material Design のアニメーション原則
• フレームワークコミュニティの React、Vue、Angular のパターン
• Unicode CLDR と W3C の i18n 規格
• Baymard Institute の調査に基づく E コマースのパターン
• Rosenfeld と Morville による情報アーキテクチャ
• W3C と Google の PWA 規格
• darkpatterns.org の倫理的なデザイン原則
• HEART Framework（Google）と業界標準に基づく UX 指標
• Amazon Alexa と Google Assistant のガイドラインに基づく音声 UI のデザイン
• Oculus、Meta、Apple Vision Pro の AR/VR ベストプラクティス
• Partnership on AI と業界の取り組みに基づく AI/ML 倫理
• HHS.gov の HIPAA 準拠
• PCI Security Standards Council の PCI-DSS 規格
• ADHD Foundation、National Autistic Society、British Dyslexia Association のニューロダイバーシティガイドライン
• W3C と web.dev の Web Components 規格

リンク

• npm パッケージ: https://www.npmjs.com/package/@elsahafy/ux-mcp-server
• GitHub リポジトリ: https://github.com/elsahafy/ux-mcp-server
• 課題とフィードバック: https://github.com/elsahafy/ux-mcp-server/issues
• 変更履歴: CHANGELOG.md
• コントリビューション: CONTRIBUTING.md
• セキュリティポリシー: SECURITY.md

---

アクセシビリティ、ユーザビリティ、パフォーマンス、SEO、デザインシステム、E コマース、テスト、倫理的なデザイン、新興技術（音声/AR/VR/AI）、ヘルスケア、金融、ニューロダイバーシティなど、UX エコシステム全体を網羅し、すべてを中核的な要素として扱う、AI 支援開発向けに構築されています。