日本語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つ作る。複数の無難な案は並べず、最有力案を正本として実装する。
- カラー: 標準カラー(ブルー基調・ライトのみ)を既定とし、
references/standard-color-system.md を必ず読む。利用者が「Pop」「親しみ」「toC向け」などを明示した場合だけ Mode B(references/mode-b-pop.md)。
- 既存アプリ: 改善・再構築では
references/catalog-default-contract.md「既存アプリの一本化フロー」(verify → 移行plan → safeだけapply → plan/apply → verify → T2記録)に従う。色だけを移行し、画面構成・文言・余白は変えない(INV-15)。
- ロゴ・アイコン素材: 既存のロゴ/アプリアイコンはあるか? あればヘッダー・faviconへ使用する。なければテキストロゴで開始(ロゴの自作はしない)。
- テーマ: ライトのみ。Dark・OS追従・テーマ切替は作らない(INV-15、
references/standard-color-system.md §2-10)。
- catalog-default: 新規の可視UIは確認なしで
apply --app-state=new、既存UIは手順2のフロー。適用判定(REPORT_ONLY / NON_VISUAL)は references/catalog-default-contract.md が正本。
未指定項目は上記既定で進め、判断と却下した主要候補をT2へ残す。ロゴ原本、法的ブランド制約、公開前承認など本人しか決められない境界があっても、テキストロゴやローカルpreviewで成果物を先に作り、差し替え箇所だけを依頼者へ示す。
0. 8秒でわかる原則
- 順序が結果を決める — 表から書き始めない。場面の1文 → ラベル剥がし → 伝わらないものだけ最小限に補う → グループ化 → 優先順位 → 表示用加工 → 表示形式の導出 → 機能と意味づけの装飾。設計とデザインを分けず、この8工程で作る(
references/information-design.md)。装飾を後から足しても画面は良くならない。
- 色は役割で固定する — ブランドの軸(
--p-brand-indigo)=ナビ・見出し・リンク、アクセント(--p-brand-accent)=action-primary-* と focus-ring だけ、意味色(status-*)=状態だけ。部品は --p-* を直接使わず役割トークンを使う。
- 1画面に
action-primary-bg のボタンは1つ — 保存・送信・次へなど主操作だけ。キャンセル・戻る・削除に使わない。濃色のナビ地にアクセント色の小文字やフォーカス線を置かない(focus-ring-inverse を使う)。
- メリハリ: 1画面に視覚的主役を1つ — 全部同じサイズ・太さの画面は視線の行き場がない。「まずここ」を大きく、それ以外は静かに。
- マニュアル不要 — 押せるものは押せる見た目、押せないものに押せる見た目を与えない。初見で最頻タスクが完了できるか。
- 折返しを設計する — 単語・数字・チップの「途中折返し」「1文字/1個だけ折返し」を全ブレークポイントで禁止。
- 数字はExcel基準でシャープに — 単位は列ヘッダー、セルは生数値+カンマ。数字は欧文フォントで描画する。
- 動きは因果の説明だけ — 装飾のためのアニメーションを足さない。
reduced-motion で全部止まる。
- 数字はすべて本物 — 演出のための偽の数字・煽り・偽の緊急性を使わない。
- AIを通常機能として描く — 紫・ネオン・専用グラデーションを割り当てず、他画面と同じ情報階層・ボタン・状態表現を使う。
1. 標準カラーの導入
- 正本CSSの配置先(
src/styles/aidd/)・読み込み順・生成物は references/catalog-default-contract.md に従い、scripts/catalog-default.mjs apply で配置する(手でコピー・値の書き換え・JS定数への複製をしない)。
- 部品は役割トークン(
--app-background --surface --text-primary --action-primary-bg --input-border --status-*-text など)だけを参照する。直書きHEX・Tailwind既定色(bg-slate-* など)は使わない。
- 足りない役割は部品側で色を作らず、CSSの役割トークン層へ追加して
node scripts/check-standard-contrast.mjs と node scripts/export-standard-tokens.mjs を実行する。
- フォント・寸法は色と独立に
: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ゲート |