「この見出し、もう少し大きくしますか？」——この会話が発生するたびに、時間が溶けていきます。文字サイズと余白は、選択肢を数種類に限定してしまうのが最も効率的な解決策です。
フォントの選定
日本語の業務システムでは、フォント指定に固有の落とし穴があります。
--font-base:
-apple-system, BlinkMacSystemFont, "Segoe UI",
"Hiragino Kaku Gothic ProN", "Hiragino Sans",
"Noto Sans JP", "BIZ UDPGothic", Meiryo, sans-serif;
--font-num: "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* 数値用 */
--font-mono: "SFMono-Regular", Consolas, "Roboto Mono", monospace; /* コード・ID用 */- Webフォントの読み込みは、社内ネットワークの制約下で失敗することがある。システムフォント優先が安全
- 数字が多い画面では、等幅数字（tabular-nums）を指定して桁を揃える
- 「BIZ UDPGothic」などのUDフォントは、可読性要件が厳しい現場で有効な選択肢
金額や数量を扱う一覧では、次の指定を入れておくと桁がずれません。
.num-cell { font-variant-numeric: tabular-nums; text-align: right; }文字サイズのスケール
種類を増やさないことが最重要です。6段階あれば業務システムは十分に組めます。
| トークン | サイズ | 行間 | 用途 |
|---|---|---|---|
--fs-xs | 11px | 1.5 | バッジ、注釈、単位 |
--fs-sm | 12px | 1.6 | 補足テキスト、テーブルの補助情報 |
--fs-md | 14px | 1.7 | 本文・入力欄・一覧セル（標準） |
--fs-lg | 16px | 1.6 | 強調したい本文、セクション見出し |
--fs-xl | 20px | 1.5 | 画面タイトル |
--fs-2xl | 24px | 1.4 | ダッシュボードの数値、モーダルタイトル |
日本語は漢字の情報量が多く、12px以下は業務利用に耐えません。一覧の密度を上げたい場合でも、本文は13〜14pxを下限にしてください。密度は行の高さ（padding）で調整するほうが安全です。
行間（line-height）の考え方
- 本文・説明文：1.7〜1.9（日本語は欧文より広めが読みやすい）
- 一覧のセル：1.4〜1.6（詰めて情報量を確保）
- 見出し：1.3〜1.5（大きい文字ほど狭く）
- ボタンラベル：1.0〜1.2（垂直中央揃えで調整）
長文の説明が入る画面（規程・注意事項）では、1行の長さも制御します。日本語では 1行 35〜45文字 が読みやすい範囲です。max-width: 40em 程度を目安にしてください。
余白スケール
4pxを基準単位とし、名前を付けて固定します。
--space-1: 4px; /* 密接：ラベルと入力欄、アイコンと文字 */
--space-2: 8px; /* 近接：関連要素 */
--space-3: 12px; /* 小 */
--space-4: 16px; /* 標準：フォーム項目間 */
--space-5: 24px; /* 中：ブロック間 */
--space-6: 32px; /* 大：セクション間 */
--space-8: 48px; /* 特大：画面上の大区切り */関係が近いものほど余白を狭く、遠いものほど広く。ラベルと入力欄の間（4px）より、項目と項目の間（16px）が広いという関係が守られていれば、罫線を引かなくてもグループは伝わります。
ラベルと入力欄の間が16px、項目同士の間も16px。どこまでが1項目か判別できない。
ラベル〜入力欄が4px、項目間が16px、グループ間が32px。見た瞬間にまとまりが分かる。
角丸・影・境界線
| トークン | 値 | 用途 |
|---|---|---|
--radius-sm | 4px | 入力欄、バッジ、小さなボタン |
--radius-md | 8px | カード、パネル、モーダル |
--radius-full | 999px | ピル型ボタン、ステータスバッジ |
--shadow-sm | 0 1px 3px rgba(0,0,0,.08) | カードの浮き |
--shadow-md | 0 4px 12px rgba(0,0,0,.10) | ドロップダウン、ポップオーバー |
--shadow-lg | 0 12px 32px rgba(0,0,0,.16) | モーダル |
種類はそれぞれ3つまで。角丸が画面ごとに 4px / 6px / 8px / 10px と混在しているシステムは、統一するだけで見違えます。
影を多用すると、情報密度の高い一覧画面がノイズだらけになります。影は「浮いているもの」（モーダル、ドロップダウン、固定ヘッダー）にだけ使い、通常のカードは境界線で区切るほうが読みやすいことが多いです。
トークン定義のサンプル
そのままコピーして調整できる最小構成です。
:root {
/* Typography */
--font-base: -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
--fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px;
--fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;
--lh-tight: 1.4; --lh-base: 1.7; --lh-loose: 1.9;
/* Space */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-8: 48px;
/* Shape */
--radius-sm: 4px; --radius-md: 8px; --radius-full: 999px;
/* Component */
--control-h: 36px; /* 入力欄・ボタンの高さ */
--row-h: 40px; /* 一覧の行高 */
--sidebar-w: 240px;
}トークンはデザインツールとコードの両方で同じ名前を使ってください。Figmaのスタイル名とCSS変数名が一致していれば、レビュー時の会話が「この余白は space-4 ですか？」と具体的になります。
チェックポイント
- 文字サイズが6段階以内に収まっている
- 本文が13px以上（日本語なら14px推奨）
- 余白がすべて4px刻みのトークンで表現されている
- ラベルと入力欄の距離が、項目間の距離より狭い
- 角丸・影の種類が3つ以内
- 数値列に tabular-nums が指定されている