DESIGN.md — jp-learning-progress

ステータス: ドラフト（2026-04-15 起案）基礎テンプレート: Education ベース、Corporate 要素を一部取込目的: モック実装・将来の本実装で参照するデザインシステム。Tailwind / shadcn/ui 前提。

1. ブランド原則

信頼できる（データを扱う学習プラットフォーム）
前向き（学習者の努力を肯定する温度感）
整理されている（多ロール対応でも混乱しない）
多言語対応を前提（日本語・ベトナム語で読みやすい書体・余白）

2. カラーシステム

2.1 プライマリパレット

トークン	値	用途
`color.primary.50`	`#EEF4FF`	最淡背景
`color.primary.100`	`#D9E6FF`	ホバー・サブ背景
`color.primary.300`	`#7DA7FF`	チャート補助
`color.primary.500`	`#2D6EF2`	ブランド・CTA
`color.primary.600`	`#1F55CC`	ホバーCTA
`color.primary.700`	`#173F99`	アクティブCTA

2.2 セカンダリ／アクセント

トークン	値	用途
`color.accent.500`	`#F59E0B`	学習者側の温かいアクセント
`color.accent.600`	`#D97706`

2.3 ニュートラル（ベース）

トークン	値	用途
`color.neutral.50`	`#FAFAFA`	ページ背景
`color.neutral.100`	`#F4F4F5`	カード背景
`color.neutral.200`	`#E4E4E7`	区切り線
`color.neutral.400`	`#A1A1AA`	プレースホルダー
`color.neutral.600`	`#52525B`	補足テキスト
`color.neutral.800`	`#27272A`	見出し
`color.neutral.900`	`#18181B`	強調テキスト

2.4 状態色（セマンティック）

トークン	値	意味
`color.success.500`	`#16A34A`	正答・完了
`color.warning.500`	`#F59E0B`	注意・申告乖離
`color.danger.500`	`#DC2626`	エラー
`color.info.500`	`#0284C7`	情報

2.5 チャート色（学習データ向け）

トークン	値	用途
`chart.series.1`	`#2D6EF2`	単語
`chart.series.2`	`#16A34A`	テスト
`chart.series.3`	`#F59E0B`	学習時間
`chart.series.4`	`#9333EA`	一貫性

2.6 アクセシビリティ

テキストと背景のコントラストは WCAG AA（4.5:1）以上
状態色は形状（アイコン）と併用（色のみに依存しない）

2.7 ダークモード

M1 はライト単独。M2 以降で color.*.inverse のトークンを追加し dark mode 対応。

2.8 shadcn/ui セマンティック CSS 変数（ライト）

shadcn/ui 連携のため、上記トークンを以下の CSS 変数としてルートに定義する。HSL 値は Tailwind の hsl(var(--x)) 記法に合わせる。

css

:root {
  --background: 0 0% 100%;              /* neutral.50 相当 (簡易) */
  --foreground: 240 6% 10%;             /* neutral.900 */
  --muted: 240 5% 96%;                  /* neutral.100 */
  --muted-foreground: 240 4% 46%;       /* neutral.600 */
  --card: 0 0% 100%;
  --card-foreground: 240 6% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 6% 10%;
  --border: 240 6% 90%;                 /* neutral.200 */
  --input: 240 6% 90%;
  --primary: 222 86% 56%;               /* primary.500 #2D6EF2 */
  --primary-foreground: 0 0% 100%;
  --secondary: 240 5% 96%;
  --secondary-foreground: 240 6% 10%;
  --accent: 38 92% 50%;                 /* accent.500 #F59E0B */
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 51%;             /* danger.500 #DC2626 */
  --destructive-foreground: 0 0% 100%;
  --success: 142 71% 45%;               /* success.500 */
  --warning: 38 92% 50%;
  --info: 199 96% 40%;
  --ring: 222 86% 56%;
  --radius: 0.5rem;                     /* radius.md */
}

対応 Tailwind 設定例：

// tailwind.config.ts 抜粋
theme: {
  extend: {
    colors: {
      background: "hsl(var(--background))",
      foreground: "hsl(var(--foreground))",
      muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
      card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
      border: "hsl(var(--border))",
      input: "hsl(var(--input))",
      primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
      secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
      accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
      destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
      success: "hsl(var(--success))",
      warning: "hsl(var(--warning))",
      info: "hsl(var(--info))",
      ring: "hsl(var(--ring))",
    },
    borderRadius: {
      lg: "var(--radius)",
      md: "calc(var(--radius) - 2px)",
      sm: "calc(var(--radius) - 4px)",
    },
  },
}

3. タイポグラフィ

3.1 フォントファミリー

日本語："Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif
ベトナム語・ラテン："Inter", "Noto Sans", system-ui, sans-serif
コード："JetBrains Mono", monospace

3.2 スケール（Tailwind text-* 相当）

トークン	サイズ / 行送り	用途
`type.xs`	12 / 16	ラベル補助
`type.sm`	14 / 20	本文（モバイル）
`type.base`	16 / 24	本文
`type.lg`	18 / 28	リード
`type.xl`	20 / 28	小見出し
`type.2xl`	24 / 32	H3
`type.3xl`	30 / 36	H2
`type.4xl`	36 / 40	H1

3.3 行間・字送り

日本語本文：line-height 1.7、letter-spacing 0.02em
英字／ベトナム語本文：line-height 1.5

4. スペーシング・グリッド

ベース：4px（space.1 = 4, space.2 = 8, space.4 = 16, space.6 = 24, space.8 = 32, space.12 = 48, space.16 = 64）
コンテナ最大幅：1200px（管理画面）、640px（学習者モバイル）
グリッド：12 カラム、ガーター space.6

5. 角丸・シャドウ・境界

トークン	値
`radius.sm`	4px
`radius.md`	8px
`radius.lg`	12px
`radius.xl`	16px
`radius.pill`	9999px
`shadow.sm`	`0 1px 2px rgba(0,0,0,0.05)`
`shadow.md`	`0 4px 8px rgba(0,0,0,0.06)`
`shadow.lg`	`0 12px 24px rgba(0,0,0,0.08)`
`border.default`	1px solid `color.neutral.200`

6. コンポーネント仕様（抜粋）

6.1 Button

バリアント：primary / secondary / ghost / danger
サイズ：sm (h-8, px-3) / md (h-10, px-4) / lg (h-12, px-5)
CTA は Primary 500、ホバーで 600、押下で 700
無効時は opacity 50、カーソル not-allowed

6.2 Card

背景：color.neutral.100 / 角丸：radius.lg / 余白：space.6
ヘッダー：type.xl / 本文：type.base
学習者ダッシュボードでは温かいアクセント（accent.500 の 4px サイドバー）を任意で付与

6.3 Input / Form

高さ：md=40px / sm=32px
エラー時：境界線 danger.500、下部にエラーテキスト type.sm
ラベル：必須は * を danger.500 で表示
多言語切替対応：placeholder・エラー文言は i18n キーで管理

6.4 Table（管理画面）

行高：48px / ヘッダー行は sticky top-0
ソート可能カラムはキャレット表示
行クリック：詳細遷移（キーボード操作も有効）

6.5 Chart

線 3px、ポイント半径 3、ツールチップ背景 neutral.900 / 90%
軸ラベル type.sm、グリッド neutral.200
色覚配慮：シリーズにパターン（ダッシュ等）を併用可

6.6 Badge / Pill

高さ 24、radius.pill、type.xs
状態色のサブセット（success/warning/danger/info）

6.7 一貫性スコアバッジ（特殊）

スコア帯：0.0–0.4 danger.500、0.4–0.7 warning.500、0.7–1.0 success.500
常に説明ツールチップを併設（クリックで内訳モーダル）
企業ロールでは要約のみ（単一指標に還元せず、複数指標要約を併記）

6.8 Empty State / Error State

イラストは最小限（線画トーン）、重要なのはテキストと次のアクション
エラーは原因＋対処法＋サポート導線をセットで

7. アイコン

ライブラリ：lucide-react
既定サイズ 20px／標準ストローク 1.75
色はテキストと同色か neutral.600

8. レイアウト・画面骨格

学習者画面：モバイルファースト、固定下部ナビ、コンテンツは 640px 内
管理者画面：サイドナビ固定（幅 240）、メインはコンテナ幅
企業画面：上部タブ、候補者カードリスト→詳細はスライドオーバー or フル遷移
ヘッダー右上：組織切替 + 言語切替 + ユーザーメニュー

9. モーション

基本：200ms ease-out
モーダル：Fade+Scale 150ms
チャートアニメ：無効化可能（reduced-motion 対応）

10. 画像・動画

画像は next/image 相当で最適化
動画プレイヤー：16:9 固定、ローディング時はサムネ＋スピナー
広告・トラッキングスクリプトは混入させない

11. i18n（多言語）

UI 文言はすべて i18n キーで管理（messages/ja.json, messages/vi.json）
日付・数値：Intl.DateTimeFormat / Intl.NumberFormat
ベトナム語の長語対応：ボタン幅は自動伸縮、whitespace-nowrap を避ける

12. 文章トーン

尊重・一方的評価を避ける
数値表示には必ず**文脈（期間・母数）**を添える
一貫性スコアなど機微な指標は根拠と利用制限を画面内で明示

13. 未確定事項

ロゴ・ブランドマーク（営業と連携）
祝祭日・季節装飾の扱い
印刷レイアウト（PDF レポート用）

14. 改訂履歴

2026-04-15: 初版ドラフト作成（Education テンプレートを基礎とした独自化）

DESIGN.md — jp-learning-progress ​

1. ブランド原則 ​

2. カラーシステム ​

2.1 プライマリパレット ​

2.2 セカンダリ／アクセント ​

2.3 ニュートラル（ベース） ​

2.4 状態色（セマンティック） ​

2.5 チャート色（学習データ向け） ​

2.6 アクセシビリティ ​

2.7 ダークモード ​

2.8 shadcn/ui セマンティック CSS 変数（ライト） ​

3. タイポグラフィ ​

3.1 フォントファミリー ​

3.2 スケール（Tailwind text-* 相当） ​

3.3 行間・字送り ​

4. スペーシング・グリッド ​

5. 角丸・シャドウ・境界 ​

6. コンポーネント仕様（抜粋） ​

6.1 Button ​

6.2 Card ​

6.3 Input / Form ​

6.4 Table（管理画面） ​

6.5 Chart ​

6.6 Badge / Pill ​

6.7 一貫性スコア バッジ（特殊） ​

6.8 Empty State / Error State ​

7. アイコン ​

8. レイアウト・画面骨格 ​

9. モーション ​

10. 画像・動画 ​

11. i18n（多言語） ​

12. 文章トーン ​

13. 未確定事項 ​

14. 改訂履歴 ​

DESIGN.md — jp-learning-progress

1. ブランド原則

2. カラーシステム

2.1 プライマリパレット

2.2 セカンダリ／アクセント

2.3 ニュートラル（ベース）

2.4 状態色（セマンティック）

2.5 チャート色（学習データ向け）

2.6 アクセシビリティ

2.7 ダークモード

2.8 shadcn/ui セマンティック CSS 変数（ライト）

3. タイポグラフィ

3.1 フォントファミリー

3.2 スケール（Tailwind text-* 相当）

3.3 行間・字送り

4. スペーシング・グリッド

5. 角丸・シャドウ・境界

6. コンポーネント仕様（抜粋）

6.1 Button

6.2 Card

6.3 Input / Form

6.4 Table（管理画面）

6.5 Chart

6.6 Badge / Pill

6.7 一貫性スコアバッジ（特殊）

6.8 Empty State / Error State

7. アイコン

8. レイアウト・画面骨格

9. モーション

10. 画像・動画

11. i18n（多言語）

12. 文章トーン

13. 未確定事項

14. 改訂履歴