Awesome Design MD JP — 日本語UIデザインシステムリファレンス

Source: kzhrknt/awesome-design-md-jp (MIT License) 日本語UIをAIエージェントに正しくつくらせるための、23社の実在日本企業サイトから抽出されたDESIGN.md集。

概要

英語版 awesome-design-md の日本語特化版。最大の違いは Typography セクションが8サブセクションに拡張 されている点:

9セクション構成（セクション3が核心）

1. Visual Theme & Atmosphere — ムード・密度・デザイン方針
2. Color Palette & Roles — Primary / Semantic / Neutral のhexテーブル
3. Typography Rules — ★ 日本語特化8サブセクション:
   • 3.1 和文フォント（ゴシック体 / 明朝体）
   • 3.2 欧文フォント（サンセリフ / セリフ / 等幅）
   • 3.3 font-family指定（CSSコードブロック + フォールバックチェーン設計思想）
   • 3.4 文字サイズ・ウェイト階層（テーブル形式）
   • 3.5 行間・字間（line-height / letter-spacing の具体値 + 日本語ガイドライン）
   • 3.6 禁則処理・改行ルール（word-break / line-break のCSS + 禁則対象文字列）
   • 3.7 OpenType機能（palt / kern の使用/不使用判断）
   • 3.8 縦書き（writing-mode: vertical-rl 対応の有無）
4. Component Stylings — ボタン / 入力欄 / カード・テーブル
5. Layout Principles — スペーシングスケール / Container / Grid
6. Depth & Elevation — Shadow レベルテーブル
7. Do's and Don'ts — デザインガードレール（日本語記述）
8. Responsive Behavior — Breakpoints / タッチターゲット
9. Agent Prompt Guide — クイックリファレンス + プロンプト例

利用可能な企業カタログ（23社）

英語版 awesome-design-md との使い分け

併用ルール:

• 日本語UIを作る場合 → こちら（JP版）を優先
• グローバル企業風（Stripe, Vercel等）→ 英語版を使用
• 日本語UI + グローバル企業風 → 英語版のカラー/レイアウト + JP版の Typography セクション3 を必ず適用

ワークフロー

Step 1: 企業名を特定

ユーザーの要望から参照すべき企業を特定する。

• 「SmartHR風の管理画面」→ smarthr
• 「食べログっぽいレビューUI」→ tabelog
• 「Zennみたいな記事ページ」→ zenn
• 「無印良品のような落ち着いたデザイン」→ muji
• 「日本語でモダンなSaaS管理画面」→ smarthr, freee, moneyforward 等を提案

Step 2: DESIGN.mdを読み込む

~/.claude/skills/awesome-design-md-jp/repo/design-md/{company}/DESIGN.md

企業名→ディレクトリ名マッピング:

• 食べログ → tabelog
• クックパッド → cookpad
• マネーフォワード → moneyforward
• サイボウズ → cybozu
• 無印良品 / MUJI → muji
• トヨタ → toyota
• その他 → 小文字変換（SmartHR → smarthr）

Step 3: Typography Rules を企業別に適用

DESIGN.mdのセクション3をそのまま読み取り、企業ごとの値を正確に適用する。 一般論で上書きしない -- 楽天(lh:1.1)やSansan(lh:1.0)のように意図的に標準から外れた設計もある。

1. 3.3 font-family: CSSコードブロックをそのままコピー（フォールバックチェーン順序を変えない）
2. 3.5 line-height / letter-spacing: role別テーブルの具体値をそのまま適用
3. 3.6 禁則処理・改行: word-break / line-break / overflow-wrap のCSS組み合わせを確認
4. 3.7 OpenType機能: palt / kern / YakuHan / font-kerning の使用/不使用を確認
5. 和欧混植: 本文・コード・数値・ラベルを分けてフォント指定が必要か確認
6. 環境固有対策: SmartHR系のAdjustedYuGothic等、企業固有のworkaroundがあれば適用

注意: フォントが利用不可な場合（Webフォント未導入、ライセンス制約等）は、DESIGN.md内のフォールバックチェーンに従って次候補を使用する。system-uiやsans-serifへのdegradationは許容される。

Step 4: デザイントークンを抽出・適用

DESIGN.mdから以下を抽出してコードに反映:

1. カラー変数: CSS custom properties or Tailwind config
2. タイポグラフィ: font-family（和文+欧文）, font-weight, line-height, letter-spacing
3. スペーシング: base unit, spacing scale（CSS Custom Properties形式が多い）
4. シャドウ: box-shadow値
5. border-radius: コンポーネント別の角丸値
6. ブレークポイント: レスポンシブ設定

Step 5: コンポーネント実装

DESIGN.mdのComponent Stylingセクションに従い:

• ボタン（Primary / Secondary / Ghost）
• カード（背景色、ボーダー、影）
• 入力欄（ボーダー、フォーカスリング）
• テーブル（日本語情報密度に配慮）

各企業の特徴的なデザイン知識（全23社）

既存スキルとの連携

ガイドライン

• 忠実度: DESIGN.mdの色コード・フォントサイズ・font-family・禁則CSS はそのまま使用する（独自解釈しない）
• 日本語タイポグラフィ最優先: 日本語UIでは Typography セクション3 のサブセクションを必ずすべて確認・適用する
• フォールバックチェーン尊重: font-family の和文/欧文フォールバック順序は原則変更しない。ただしWebフォント未導入やライセンス制約がある場合は、チェーン内の次候補フォントへ graceful degradation する
• 不足時: DESIGN.mdにない要素は、同じデザイン言語の延長で補完する
• ミックス: 複数企業のDESIGN.mdを組み合わせる場合、カラーは1社に統一、タイポグラフィは1社に統一するのが安全
• 更新: git -C ~/.claude/skills/awesome-design-md-jp/repo pull で最新版を取得可能

使用例

ユーザー: 「SmartHR風のHR管理ダッシュボードを作って」
→ smarthr/DESIGN.md を読み込み
→ AdjustedYuGothic + Stone系ウォームグレー + Product Main #0077c7 を適用
→ 禁則処理CSS + palt設定を確認・反映
→ コンポーネントをSmartHR仕様で実装

ユーザー: 「Zennみたいなブログ記事ページがほしい」
→ zenn/DESIGN.md を読み込み
→ lh:1.8 + rgba色 + タイポグラフィ階層を適用
→ 記事本文の可読性重視レイアウトを構成

ユーザー: 「Vercelっぽいデザインだけど日本語が綺麗に表示されるLP」
→ 英語版 vercel/DESIGN.md（カラー・レイアウト・影）
→ JP版から日本語タイポグラフィルール（例: smarthr or muji のセクション3）を組み合わせ

改訂履歴