Skip to main content
Glama

japan-ux-mcp

MCPサーバーとしての日本のUX慣習。Claude Code、Cursor、Windsurf、VS Code (Copilot)、Claude Desktop、Cline、Zed、その他MCP互換クライアントで動作します。

AIが欧米デフォルトのフォームを生成するのをやめ、正しい日本のUI(適切な名前の順序、ふりがな、3分割の電話番号、郵便番号自動入力、適切な丁寧さの敬語)を生成するようにします。

6つのツール · 6つのプロンプト · 4つのリソース · APIキー不要


なぜこれが必要なのか

AIはデフォルトで欧米のUXを生成します。日本向けに開発している場合、以下のようなことが起こるのをご存知でしょう:

  • ふりがな付きの「姓 / 名」ではなく First Name / Last Name

  • 標準的な3分割ではなく、1つの電話番号入力欄

  • 年月日(元号対応)ではなく MM/DD/YYYY

  • 郵便番号の連動ではなく、フラットな住所フィールド

  • 敬語が求められる場面でのぶっきらぼうなエラーメッセージ

  • プレースホルダーテキストとしての「John Smith」

毎回修正するか、これを一度インストールするかです。


Related MCP server: xendit-mcp

インストール

ワンライナーインストール

claude mcp add japan-ux -- npx -y japan-ux-mcp

これを実行した後、Claude Codeを再起動してください。

JSON設定

クライアントを選択してください。サーバー設定はどこでも同じです。

{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}
{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}
{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}
{
  "servers": {
    "japan-ux": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}

また、すべてのプロジェクトで利用できるように、ユーザー設定 (settings.json) の mcp.servers に追加することもできます。

ClineのMCP設定パネルを開き、以下を追加してください:

{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}
{
  "mcpServers": {
    "japan-ux": {
      "command": "npx",
      "args": ["-y", "japan-ux-mcp"]
    }
  }
}

設定ファイルの場所:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

  • Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "context_servers": {
    "japan-ux": {
      "command": {
        "path": "npx",
        "args": ["-y", "japan-ux-mcp"]
      }
    }
  }
}

ソースからインストール

git clone https://github.com/mrslbt/japan-ux-mcp.git
cd japan-ux-mcp
npm install && npm run build

次に、クライアント設定でビルドされたファイルを指定します:

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

ツール

これらは、AIが日本のUXコンテキストを認識したときに自動的に呼び出されます。名前で参照する必要はありません。

ツール

機能

generate_jp_form

日本のフォームマークアップを出力:姓/名順、ふりがな、〒郵便番号自動入力、3分割電話番号、年月日

validate_jp_form

日本の慣習に基づいて既存のフォームをチェック。問題点、重大度、コード修正を含む0-100のスコアを返す

generate_jp_placeholder

テストデータを作成:漢字/カタカナ/ローマ字の名前、実際の郵便番号、フォーマットされた電話番号、元号日付

suggest_keigo_level

英語のUIテキストを受け取り、ビジネスコンテキストに適した丁寧さの日本語を返す

score_japan_readiness

5つのカテゴリ(フォーム、コピー、信頼性シグナル、タイポグラフィ、文化的適合性)でページを評価

transform_for_japan

欧米のマークアップを日本向けに書き換え。修正前後のスコアを表示し、各変更を説明


プロンプト

サポートしているMCPクライアントから呼び出せるプロンプトテンプレート。

プロンプト

機能

japan_form

日本のフォーム構築をガイド

japan_audit

日本のUX問題について貼り付けられたマークアップを監査

japan_transform

修正前後のスコア付きで欧米のマークアップを変換

japan_testdata

プロトタイプ用の日本のテストデータを生成

japan_keigo

UIテキストに適した丁寧さを取得

japan_score

ページの説明を日本向け適合度でスコアリング


リソース

セッション中にAIがアクセスできる参照データ。

リソース

内容

keigo-guide

8つのビジネスコンテキストにおける4段階の丁寧さ、30以上のUIコピーパターン

form-checklist

出荷前レビュー用の日本のフォーム慣習チェックリスト

phone-formats

フィールド分割ルールを含む携帯、固定、フリーダイヤル、IP電話のパターン

era-calendar

令和から明治までの日付範囲と変換式


修正前 / 修正後

このMCPなし:

You: "Build a registration form"
AI:  <input name="firstName" placeholder="First Name" />
     <input name="phone" />
     <button>Submit</button>
You: "No, Japanese style..." → 30 min of back and forth

このMCPあり:

You: "Build a registration form for a Japanese ecommerce site"
AI:  [calls generate_jp_form]
     姓/名 + furigana, 〒 postal, 3-field phone,
     年月日 dates, "ご購入手続きへ" button

プロンプト例

これらはどのMCPクライアントでも動作します。コピー&ペーストして使用してください。

フォームの構築

Build a registration form for a Japanese B2B SaaS product.
Include name, email, phone, company, and address. Use TSX with Tailwind.

既存フォームの監査

Audit this form for Japanese conventions:
<form>
  <input name="firstName" placeholder="First Name" />
  <input name="lastName" placeholder="Last Name" />
  <input name="email" />
  <input name="phone" />
  <button>Submit</button>
</form>

欧米から日本への変換

Transform this form for the Japanese market (fintech context):
<form>
  <label>First Name <input name="firstName" /></label>
  <label>Last Name <input name="lastName" /></label>
  <label>Phone <input name="phone" /></label>
  <label>Address <input name="address" /></label>
  <button type="submit">Submit</button>
</form>

UIコピーの敬語

I need Japanese UI copy for a banking app:
- Error: "Invalid email address"
- Error: "Session expired"
- Button: "Submit application"
- Empty state: "No transactions yet"
- Confirmation: "Are you sure you want to delete?"

テストデータの生成

Generate 10 Japanese user profiles for a prototype.
Mixed gender, ages 25-45. Include full address and company.

ページのスコアリング

Score this checkout page for Japan-readiness:
Single name field, email, one phone field, US-style address,
"Buy Now" button, no company info in footer, no privacy policy.

デザインの方向性を取得

I'm designing a luxury ryokan booking site for Japanese domestic travelers.
What design direction should I take? Keigo level, colors, typography, trust signals.

バンドルされているもの

すべてローカルで実行されます。外部API、キー、ネットワーク呼び出しは一切ありません。

データ

詳細

都道府県

47

コード、名前、かな、ローマ字、地域

名前

100

漢字/かな/ローマ字の姓50 + 名50

住所

12

主要都市の実際の郵便番号

電話形式

6

携帯、固定、フリーダイヤル、IP、ナビダイヤル

元号

5

令和から明治までの開始/終了日

敬語パターン

30

9つの要素タイプにおける4段階の丁寧さのUI文字列

幅ルール

6

フィールドタイプごとの全角/半角バリデーション

変換ユーティリティ

4

012→012、@→@、西暦→元号、元号→西暦


カバーされている日本の慣習

慣習

実際の内容

名前の順序

姓(Family name)が先、名(Given name)が後

ふりがな

各名前入力欄の下にカタカナ読み取りフィールド(セイ/メイ)

電話番号

3つの独立したフィールド。パターン:XXX-XXXX-XXXX

住所

〒郵便番号が都道府県+市区町村を自動入力。大きい順から小さい順へ

日付

年/月/日の個別入力欄、オプションで元号表示(令和6年 = 2024)

敬語

8つのビジネスコンテキストにマッピングされた4段階の丁寧さ

文字幅

入力時に全角数字や記号を自動的に半角に変換

信頼性シグナル

特定商取引法に基づく表記ページ、会社情報、ヘッダーの電話番号

フィールドラベル

必須(赤バッジ)と任意

確認

最終送信前の確認画面


利用者

日本向け製品を開発しており、すべてのフォーム、ラベル、エラーメッセージを手動で修正することに疲れている日本国外の開発者。

製品が完全に日本語であるにもかかわらず、AIツールが欧米のパターンをデフォルトにしてしまう日本企業。

ローカライズチーム。翻訳だけでは30%程度しかカバーできません。残りの70%は構造的な問題(フィールド順序、電話番号分割、郵便番号の連動、敬語レベル)です。これがそれをカバーします。

AIを使って構築し、セッションごとに説明することなく、最初から日本のパターンを利用したいデザイナー。


対応クライアント

クライアント

サポート

Claude Code

フル(ツール、プロンプト、リソース)

Cursor

フル

Windsurf

フル

VS Code (GitHub Copilot)

フル

Cline

フル

Claude Desktop

フル

Zed

ツールとリソース

標準stdio MCPクライアント

フル


ロードマップ

  • [x] 6つのコアツール:フォーム、バリデーション、プレースホルダー、敬語、スコアリング、変換

  • [x] MCPプロンプトとリソース

  • [ ] 季節のコンテキストと文化的監査

  • [ ] 日英混在テキストのタイポグラフィチェッカー

  • [ ] ビジネス業種別の参照サイトデータベース

  • [ ] デザイン方向性マトリックス

  • [ ] 郵便番号API付き住所フォーマッター

  • [ ] JIS X 8341アクセシビリティチェック

  • [ ] コミュニティ提供のパターン


ドキュメント

ファイル

内容

TOOLS.md

すべてのツールの例を含む入出力仕様

PROMPTS.md

10のワークフローテンプレートとインタビューデモスクリプト

DATA.md

バンドルされているすべてのデータ:都道府県、名前、電話番号、元号、敬語

COMPETITORS.md

競合状況と本ツールの位置付け

PRD.md

製品要件と設計上の決定事項

ROADMAP.md

段階的な構築計画


ライセンス

MIT


東京にて Marsel Bait が作成

Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - A tier

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/mrslbt/japan-ux-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server