日本語Web UI デザインシステム

実プロジェクトの反復フィードバックから確立した規範。装飾を足して良く見せるのではなく、余白・面・文字の階層で秩序を作る。色は「意味」にしか使わない。

• 配色の既定は暫定標準カラー(版は正本CSSの見出し)。値の正本は assets/standard/standard-color-system.css の1つだけで、使い方の正本は references/standard-color-system.md。公式CI指定値ではない暫定案なので、正式値が来たら基本色 --p-* だけを差し替え、役割トークン名と役割の割り当ては変えない。差し替えに伴う生成物の再生成・コントラスト検査・テスト・下流への配布・記述の追随は references/standard-color-system.md §0「色の値・版を変えるときの手順」が正本(手順を記憶で省略しない)。
• 指定なしの可視Web UIは assets/reference/catalog.html を既定にする。生成アプリへ適用する唯一の契約は references/catalog-default-contract.md、機械可読な正本は assets/reference/catalog-default-profile.json。build / improve とも、詳細を記憶で再実装せず scripts/catalog-default.mjs の plan → apply → verify を通す。
• 迷ったら「色を足す」ではなく「余白と階層で解く」。
• 本書は素材集。業務構造の診断・体験の規律(デフォルト・一括操作・エラー回復)・検収の判断は Skill ux-design が正本で、本書では再説明しない。設計の入口から順に読んで本書へ辿り着く前提で、逆方向には参照しない。
• 本書は中核ルールだけを載せる。詳細は §6 のリファレンス索引から必要なファイルを読む(作業前に該当ファイルを必ず開く)。

起動プロトコル — 質問より先に代表画面を作る

UIの新規設計・リニューアルでは、依頼文・既存画面・業務フロー・ブランド資産を調べ、次を内部で確定する。質問より先に、最頻業務を表す完成度の高い代表画面を1つ作る。複数の無難な案は並べず、最有力案を正本として実装する。

1. カラー: 標準カラー(ブルー基調・ライトのみ)を既定とし、references/standard-color-system.md を必ず読む。利用者が「Pop」「親しみ」「toC向け」などを明示した場合だけ Mode B(references/mode-b-pop.md)。
2. 既存アプリ: 改善・再構築では references/catalog-default-contract.md「既存アプリの一本化フロー」(verify → 移行plan → safeだけapply → plan/apply → verify → T2記録)に従う。色だけを移行し、画面構成・文言・余白は変えない(INV-15)。
3. ロゴ・アイコン素材: 既存のロゴ/アプリアイコンはあるか? あればヘッダー・faviconへ使用する。なければテキストロゴで開始(ロゴの自作はしない)。
4. テーマ: ライトのみ。Dark・OS追従・テーマ切替は作らない(INV-15、references/standard-color-system.md §2-10)。
5. catalog-default: 新規の可視UIは確認なしで apply --app-state=new、既存UIは手順2のフロー。適用判定(REPORT_ONLY / NON_VISUAL)は references/catalog-default-contract.md が正本。

未指定項目は上記既定で進め、判断と却下した主要候補をT2へ残す。ロゴ原本、法的ブランド制約、公開前承認など本人しか決められない境界があっても、テキストロゴやローカルpreviewで成果物を先に作り、差し替え箇所だけを依頼者へ示す。

0. 8秒でわかる原則

0. 順序が結果を決める — 表から書き始めない。場面の1文 → ラベル剥がし → 伝わらないものだけ最小限に補う → グループ化 → 優先順位 → 表示用加工 → 表示形式の導出 → 機能と意味づけの装飾。設計とデザインを分けず、この8工程で作る(references/information-design.md)。装飾を後から足しても画面は良くならない。
1. 色は役割で固定する — ブランドの軸(--p-brand-indigo)=ナビ・見出し・リンク、アクセント(--p-brand-accent)=action-primary-* と focus-ring だけ、意味色(status-*)=状態だけ。部品は --p-* を直接使わず役割トークンを使う。
2. 1画面に action-primary-bg のボタンは1つ — 保存・送信・次へなど主操作だけ。キャンセル・戻る・削除に使わない。濃色のナビ地にアクセント色の小文字やフォーカス線を置かない(focus-ring-inverse を使う)。
3. メリハリ: 1画面に視覚的主役を1つ — 全部同じサイズ・太さの画面は視線の行き場がない。「まずここ」を大きく、それ以外は静かに。
4. マニュアル不要 — 押せるものは押せる見た目、押せないものに押せる見た目を与えない。初見で最頻タスクが完了できるか。
5. 折返しを設計する — 単語・数字・チップの「途中折返し」「1文字/1個だけ折返し」を全ブレークポイントで禁止。
6. 数字はExcel基準でシャープに — 単位は列ヘッダー、セルは生数値+カンマ。数字は欧文フォントで描画する。
7. 動きは因果の説明だけ — 装飾のためのアニメーションを足さない。reduced-motion で全部止まる。
8. 数字はすべて本物 — 演出のための偽の数字・煽り・偽の緊急性を使わない。
9. AIを通常機能として描く — 紫・ネオン・専用グラデーションを割り当てず、他画面と同じ情報階層・ボタン・状態表現を使う。

1. 標準カラーの導入

1. 正本CSSの配置先(src/styles/aidd/)・読み込み順・生成物は references/catalog-default-contract.md に従い、scripts/catalog-default.mjs apply で配置する(手でコピー・値の書き換え・JS定数への複製をしない)。
2. 部品は役割トークン(--app-background --surface --text-primary --action-primary-bg --input-border --status-*-text など)だけを参照する。直書きHEX・Tailwind既定色(bg-slate-* など)は使わない。
3. 足りない役割は部品側で色を作らず、CSSの役割トークン層へ追加して node scripts/check-standard-contrast.mjs と node scripts/export-standard-tokens.mjs を実行する。
4. フォント・寸法は色と独立に :root へ置く:

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-num: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-size-body: 16px;
  --font-size-control: 16px;
  --font-size-label: 16px;
  --font-size-section: 18px;
  --font-size-page: clamp(22px, 2vw, 24px);
  --font-size-app: 20px;
  --font-size-display: clamp(40px, 7vw, 56px);
  --tap: 44px;
}
body { background: var(--app-background); color: var(--text-primary); font-family: var(--font-ui); }

Tailwind v4 の読み込み順は contract、@theme inline の役割トークン橋渡しは references/standard-color-system.md §3。[hidden] { display: none !important; } を必ず入れる(display: flex/grid のユーティリティが hidden 属性を上書きする事故を防ぐ)。

2. カラー規律 — 標準カラー(最重要)

層	役割	使うトークン
地と面	背景・カード	app-background / surface / surface-alt
骨格	文字・罫線・ナビ	text-primary / text-secondary / border-subtle / nav-background
操作と状態	操作と状態だけ	action-primary-*(主操作だけ) + status-*(状態だけ)

面積の出発点(3層の比率)は本書に数値を持たず references/standard-color-system.md §1 が正本。

• アクセント(--p-brand-accent)の用途は action-primary-*・focus-ring(3px)・選択線・必須表示・進捗の強調に限る(§0-2)。リンクは色と下線を併用する。
• 意味色(status-*)はアクセントと別の色。成功・注意・エラー・情報は文言と記号を必ず併用し、ブランド色(--p-brand-*)を流用しない。
• 入力欄の枠は --input-border(3:1以上)。装飾罫線 --border-subtle を入力の境界に使わない。
• 無効状態は --action-disabled-* を使い、opacityで薄くしない。
• 表はヘッダー面(--table-head-bg)と交互行(--table-stripe-bg)を使ってよい。選択行は色+左線+aria-selected。
• カード左端の色帯(カテゴリ/ステータスのアクセントボーダー)は禁止(発注者フィードバックに基づく恒久ルール、2026-07)。分類・状態の色はチップ/ドット/進捗バーで示す。
• 注目させたい面だけ --surface-accent(アクセントの淡い面)を1画面1〜2か所使ってよい。
• 原色・蛍光色・専用グラデーションを追加しない。画面の地は白で、灰色や色付きの地を全面に敷かない。

12ルール・役割トークン表・73要素の適用表・部品の色契約は references/standard-color-system.md。ペアごとのコントラスト比は node scripts/check-standard-contrast.mjs の出力が正。ナビ骨格は references/layout-responsive.md。

3. 中核の寸法表(毎回参照する3つ)

3-1. タイポグラフィ階層(主役:本文 = 2.5倍以上)

用途	サイズ	太さ
ページ主数字(結果)= 主役	--font-size-display(40〜56px)	bold・--text-primary・--font-num
ページタイトル	22〜24px	bold
セクション見出し	18px	太字だが静かに
本文・操作	16px	normal
ラベル	15〜16px	normal

見出しを「大きく・色付き」で目立たせない。主役は中身(数字・事実)。主役の作り方・説明文を視覚要素に置き換える手順は references/typography-numerals.md。

3-2. レスポンシブ4段(この4幅で実測してから完成とする)

呼称	幅	コンテナ	検証幅
SP	〜639px	全幅・padding 16〜20px	375px
タブレット	640〜1023px	全幅・padding 24px	768px
PC	1024〜1439px	max-w-5xl(1024px)中央	1280px
ワイド	1440px〜	max-w-6xl(1152px)中央・それ以上広げない	1600px

• ブレークポイントはTailwind既定(sm:640 / md:768 / lg:1024 / xl:1280)に合わせ、独自の中途半端な値を作らない。
• 部品の折返し・列切替・カード化は @container(コンテナクエリ)で書き、メディアクエリはページ骨格だけに使う。
• SPは「小さくする」のではなく「減らす」(テーブル→カード化・折りたたみ・上位N件)。詳細は references/layout-responsive.md。

3-3. 数値のCSS(数字は必ず欧文フォントで描く)

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; }
.num-display { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; font-weight: 700; }
.num-sep  { font-size: 0.8em; font-weight: 400; }                                        /* 大型数字のカンマは脇役に */
.currency { font-size: 62%; font-weight: 600; margin-right: 0.15em; letter-spacing: 0; } /* 通貨記号は単位扱い */

表記規則(Excel基準・単位は列ヘッダー・KPIは正確な値)と「濃く太い数字=変わる値」の文法は references/typography-numerals.md。

4. 絶対ルール要約(モード共通・違反したら作り直す)

• 表から書き始めない。情報設計の工程(references/information-design.md §2)を通してからマークアップに入る。表示形式は6つの判断軸から導出する(同 §5)。結果として表を選ぶのは可だが、選定理由と却下候補を1行で言えること。
• 文章量と操作フローは references/information-design.md §3-1 を正本とする。文字を削るだけでなく、判断・遷移・例外分岐を減らし、次の操作を業務語で明示する。
• 前例のない要件を「対応不可」にしない。同 §9 の手順(原理に還元 → 軸で測る → 慣習を探す → 実データで検証 → 判断を記録)で導く。通常の表示形式・ラベル・加工・画像の判断は標準の docs/product/T2-experience-spec.md(プロジェクトに同等責務の既存正本がある場合はその正本)に残し、前例のない例外だけ docs/product/design-decisions.md に分離する。
• DBの生値(ISO日時・コード値・真偽値・内部ID)を画面にそのまま出さない(突合・出力・入力欄は例外で生値が正)。
• 画像は役割を判定してから置く。識別・証拠・説明の画像は目的に応じて強調し、装飾だけなら原則削除する。採用時は alt・キャプション・トリミング・4幅(375/768/1280/1600px)を設計と検収の対象にする(references/information-design.md §4-1)。
• 群の境界は余白で作る。罫線・背景色・囲みを足す前に余白を倍にする。分類ごとの色分けは使わない(表のヘッダー面と交互行は標準カラーのトークンで可)。
• 色は §0-1・§0-2・§2 と起動プロトコル4に従う。直書きHEX・Tailwind既定色・旧トークン(--primary --accent --ink など)を残さない。
• 1画面に視覚的主役を1つ。主役:本文のサイズ比2.5倍以上。同格要素のサイズは揃える。
• 常設の補足説明は作らない。可視DOMは見出し・ラベル・値・状態・エラーと次の操作・不可逆警告に限り、開発者注記と参照実装のサンプル文言は references/information-design.md §3-1 に従って非表示にする。
• 数字は --font-num(欧文)+ tabular-nums。テーブルは生数値+カンマ、単位は列ヘッダー、1列1単位。
• 「濃く太い数字=変わる値」の文法を全画面で統一する(値=太く濃い / ラベル・単位=小さくmuted)。
• 「1文字だけ改行」「1個だけ折返し」「途中折返し」を 375/768/1280/1600px の4幅すべてで出さない。ページ全体の横スクロール禁止。
• 語の途中で折り返さないことが既定。word-break: break-all をはみ出し対策として全体に当てない(はみ出す長い連続文字だけ overflow-wrap: anywhere)。短いラベル・ボタン文言・表ヘッダーは折り返さず、収まらないなら文言を短くするか省略表示にする。単位・記号を行頭行末に孤立させない。
• 頭文字アイコン(丸や四角に漢字1字)・多色アイコン・絵文字・自作SVGアイコンは禁止。迷ったらアイコンなし。
• 押せないものに押せる見た目(hover効果・cursor: pointer)を与えない。アイコン単独ボタンを作らない。
• すべてのアニメーションは prefers-reduced-motion: reduce で止まる。バウンス・オーバーシュートは使わない。
• フォーカスは必ず可視化(:focus-visible に --focus-ring の3pxアウトライン+白の隙間。紺地では --focus-ring-inverse)。タップ領域44px。状態を色だけで伝えない。
• 表示する数字はすべて本物の計算結果。偽の緊急性・煽り・confirmshaming 禁止。

5. リファレンス実装(assets/reference/ — 構造・UX規律は検収済み / 標準配色は暫定・未検収)

本スキルの全規律を実装した「動く正解」がコードで保存されている。指定なしの可視UIは references/catalog-default-contract.md を入口に機械適用し、画面固有の構造・操作を実装するときだけ該当部品を開いて流用する(記憶で似せて書かない)。

• assets/reference/README.md — ファイルマップとReact/TypeScriptへの移植ルール(クラス→コンポーネント対応表つき)。まずこれを読む。
• catalog-default-profile.json = 生成アプリ向け既定profile / styles.css = 全部品のCSS(部品CSSの正本。色の値は持たず標準カラーCSSを import)/ term-ui.js = 用語の段階開示UIの正本 / reference-interactions.js = catalog・Pop共通の操作helper / index.html + app.js = 標準カラーの画面構造とvanillaロジック / pop.html = モードBの全ディテール / catalog.html = 部品カタログ(本文は編集原本、CSS/JSの埋め込み範囲だけ生成物) / assets/standard/ = 標準カラーCSS(色の値の正本)・生成JSON・配色プレビュー
• マスコット: assets/pop-mascot-editable.svg(原本)+ reference/mascot-bordered.svg / mascot-borderless.svg(再着色例)
• スクリプト(Node 18+、終了コード 0=成功 / 1=要対応 / 2=入力エラー):
  • node scripts/check-standard-contrast.mjs — 主要50ペア(本文4.5:1・非テキスト3:1)と避けるペアを検査。axe等の画面全体検査は置き換えない。
  • node scripts/export-standard-tokens.mjs [--check] — CSSの機械可読メタデータとトークンからJSON・standalone previewを一括生成。生成物は手書きしない。
  • node scripts/inline-catalog-css.mjs [--check] — styles.css・標準カラーCSS・term-ui.js・reference-interactions.js を catalog.html へ埋め込み、HTML 1ファイルで共有できるようにする。いずれかを変えたら再実行する。
  • node scripts/migrate-legacy-colors.mjs <dir> [--plan|--apply] [--json] — dry-run→計画→safeだけ適用。schema v1.0の報告へreview-only・対象外・未対応構文も残す。
  • node scripts/catalog-default.mjs <plan|apply|verify> <app-root> ... — 新規/既存の適用資格を判定し(既存は --eligibility 未指定時に移行スクリプトと同じ共有判定で自動算出)、正本CSS・provenance・v0/v1 conformance reportを生成する。参照画面の説明文やサンプルデータはコピーしない。
  • node scripts/catalog-runtime-audit.mjs <app-root> [--base-url=<url>] — 生成アプリをChromeの4幅と実pointer/keyboardで操作し、v1証拠を生成する。catalog-default.mjs verify --stage=v1 からも必ず再実行される。
  • scripts/lib/ — 上記スクリプトの共有lib(内部用。直接実行しない)。tests/ — 参照実装とスクリプトの回帰テスト。
• どのフレームワークでも: 指定なしは references/catalog-default-contract.md、明示指定時だけ references/mode-b-pop.md または外部ブランド。正式版前は4幅実測+動的パス操作のv1検収を必ず通す。

6. リファレンス索引(references/ — 作業内容に応じて読む)

ファイル	読むタイミング	内容
references/information-design.md	画面を設計する前(必読)・既存画面の改善指示を受けたとき・「見づらい/ダサい」の指摘時・本書に前例がない要件のとき	情報設計の工程8ステップ、「設計→装飾」の順で作った画面の6症状、ラベル剥がしの原則、表示用データ加工の原則、表示形式の導出(6判断軸→導出ルール→合成/分割/新規採用→検証)、配置の4原則、既存画面のリライト手順、前例がない要件への適用手順(自己拡張)
references/standard-color-system.md	UIを作る・直す・配色をレビューするとき(必読)・既存アプリの移行	標準カラーの色の役割と12ルール、役割トークン表とTailwind橋渡し、73要素の適用表、コントラストの検査方針、部品の色契約、a11y、トークン保守、旧配色移行の安全規則
references/typography-numerals.md	文字・数字を扱う全作業	system-first書体、メリハリ(主役の作り方・サイズ表)、常設補足0件、Excel基準の数値表記CSS、値/ラベルの描き分け、アフォーダンス、折返しプロパティの使い分け表と禁則、UXライティング
references/layout-responsive.md	画面骨格・レスポンシブ対応	アプリシェル、余白・角丸、4段ブレークポイント表、モバイル情報削減、コンテナクエリ第一、結果/レポート画面の情報階層、固定ヘッダー・固定フッター
references/components.md	部品を作る・レビューする	ボタン/フォーム/バッジ/テーブル/選択バー/モーダル/トースト/空状態のHTML、アイコン方針、スライダー座標系、バーチャートの3条件、専門用語の段階開示
references/motion-a11y.md	アニメーション・hover・展開・a11y実装	hover/pressed/入場/モーダル/展開/処理中/状態更新の時間表とCSS、操作感、reduced-motion、フォーカス・コントラスト・タップ領域
references/mode-b-pop.md	利用者がPopを明示指定したとき(必読)	パステル変換表、Pop用トークン、迷いゼロの構造、かわいらしさの作法、マスコット使用ルール
references/acceptance-checklist.md	実装完了前の検収	v0/v1適合、4幅実測、動的パス操作を含む検収チェックリスト
references/catalog-default-contract.md	build / improve で可視UIを作る・変えるとき(必読)	catalogを指定なし既定として生成アプリへ適用するplan/apply/verify、既存アプリの一本化フロー、CSSの配置先と読み込み順、provenance、v0/v1ゲート