japan-ux-mcp
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.jsonWindows:
%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コンテキストを認識したときに自動的に呼び出されます。名前で参照する必要はありません。
ツール | 機能 |
| 日本のフォームマークアップを出力:姓/名順、ふりがな、〒郵便番号自動入力、3分割電話番号、年月日 |
| 日本の慣習に基づいて既存のフォームをチェック。問題点、重大度、コード修正を含む0-100のスコアを返す |
| テストデータを作成:漢字/カタカナ/ローマ字の名前、実際の郵便番号、フォーマットされた電話番号、元号日付 |
| 英語のUIテキストを受け取り、ビジネスコンテキストに適した丁寧さの日本語を返す |
| 5つのカテゴリ(フォーム、コピー、信頼性シグナル、タイポグラフィ、文化的適合性)でページを評価 |
| 欧米のマークアップを日本向けに書き換え。修正前後のスコアを表示し、各変更を説明 |
プロンプト
サポートしているMCPクライアントから呼び出せるプロンプトテンプレート。
プロンプト | 機能 |
| 日本のフォーム構築をガイド |
| 日本のUX問題について貼り付けられたマークアップを監査 |
| 修正前後のスコア付きで欧米のマークアップを変換 |
| プロトタイプ用の日本のテストデータを生成 |
| UIテキストに適した丁寧さを取得 |
| ページの説明を日本向け適合度でスコアリング |
リソース
セッション中にAIがアクセスできる参照データ。
リソース | 内容 |
| 8つのビジネスコンテキストにおける4段階の丁寧さ、30以上のUIコピーパターン |
| 出荷前レビュー用の日本のフォーム慣習チェックリスト |
| フィールド分割ルールを含む携帯、固定、フリーダイヤル、IP電話のパターン |
| 令和から明治までの日付範囲と変換式 |
修正前 / 修正後
この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アクセシビリティチェック
[ ] コミュニティ提供のパターン
ドキュメント
ファイル | 内容 |
すべてのツールの例を含む入出力仕様 | |
10のワークフローテンプレートとインタビューデモスクリプト | |
バンドルされているすべてのデータ:都道府県、名前、電話番号、元号、敬語 | |
競合状況と本ツールの位置付け | |
製品要件と設計上の決定事項 | |
段階的な構築計画 |
ライセンス
東京にて Marsel Bait が作成
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