typography-audit

タイポグラフィ監査

Web タイポグラフィに関する、10 カテゴリー、78 件のルールです。各指摘にはファイル、ルール、修正方法を記載します。

• 対象： タイポグラフィのみ：フォントの読み込み、サイズ、句読点、間隔、階層、テキストレイアウト、OpenType 機能、書体の組み合わせ、ブランド書体、ディスプレイ書体。
• 対象外： 広範な UI レビュー（アクセシビリティ、フォーム、ナビゲーション：ui-design の Audit モードを使用）や、再デザイン（新しい書体やスケール：ui-design の Direction モードを使用）。

監査ワークフロー

次のチェックリストに沿って進めます。

Audit progress:
- [ ] Step 1: Scope. List changed files (or full sweep), map signals to categories
- [ ] Step 2: Run CRITICAL rules in scope (font-, size-, punct-)
- [ ] Step 3: Run HIGH rules in scope (spacing-)
- [ ] Step 4: Run remaining in-scope categories by descending priority
- [ ] Step 5: Report per the contract; every finding has file:line, rule ID, fix

1. 全体のチェックを依頼されていない限り、変更されたファイルに対象を絞ります。PR の場合は、実際のベースコミットとの merge-base を基準に差分を取り、コミット済みの変更も含めて、.css、.scss、.html、.tsx／.jsx、テンプレートファイルに絞り込みます。
2. シグナル表を使ってコードをカテゴリーに分類し、シグナルのないカテゴリーは対象外にします。
3. シグナルによって選ばれたカテゴリーのみ、プレフィックスに基づいてルールファイル（rules/font-*.md など）を読み込みます。
4. 監査を途中で打ち切っても CRITICAL の指摘が表面化するよう、優先順位に沿ってカテゴリーを確認します。
5. 修正後は、指摘があったルールのみ再確認してから、レポートを完成させます。

スコープ判定シグナル → カテゴリー

コード内のシグナル	読み込むカテゴリー
@font-face、font-family、フォントファイル、可変フォント、font-stretch、テキストに対する transform: scaleX	font-
font-size、clamp()、メディアクエリーによる文字サイズの変更、テキストに対する max-width、<em>／<strong>、text-decoration	size-
HTML／JSX 内のコピー（見出し、段落、ラベル）	punct-
line-height、letter-spacing、word-spacing、テキストに対する margin、text-transform: uppercase	spacing-
見出し要素、文字サイズのスケール用トークン、--text-* プロパティ	hierarchy-
text-align、リスト、引用、複数段組みのテキスト	layout-
font-feature-settings、font-variant-*、コピー内の数字や分数	opentype-
ロゴ／ワードマークのスタイル、ブランドトークン、テキストカラーのトークン、ライセンスコメント	brand-
2 種類以上の異なる font-family 値	pairing-
ヒーロー／ディスプレイ用のサイズ、ドロップキャップ、initial-letter	display-

優先順位別ルールカテゴリー

優先順位	カテゴリー	影響度	プレフィックス	ルール数
1	フォントの選択とウェイト	CRITICAL	font-	11
2	サイズと行長	CRITICAL	size-	6
3	句読点と特殊文字	CRITICAL	punct-	12
4	間隔とリズム	HIGH	spacing-	8
5	階層とスケール	MEDIUM-HIGH	hierarchy-	8
6	配置とレイアウト	MEDIUM	layout-	6
7	OpenType 機能	MEDIUM	opentype-	7
8	ブランドとアイデンティティ	MEDIUM	brand-	8
9	書体の組み合わせ	MEDIUM	pairing-	5
10	ディスプレイと見出し	LOW-MEDIUM	display-	7

カテゴリーの対応表と影響度の根拠は rules/_sections.md を参照してください。各ルールファイルには、そのルールが重要な理由と、不適切な例および適切な例が記載されています。カテゴリーの影響度は、そのカテゴリーに含まれるルールの最悪ケースを反映しています。指摘の報告には、各ルールの frontmatter にある impact を使用してください。これはカテゴリーの影響度と異なる場合がよくあります（例：MEDIUM の brand- カテゴリーに含まれる brand-color は、WCAG のコントラストの最低基準を担うため HIGH です）。

レビュー出力の仕様

指摘は次の形式で報告します。

## Typography Audit Findings

### path/to/file.css
- [CRITICAL] `punct-smart-quotes` (file.css:42): Straight quotes in heading copy.
  - Fix: Replace `"` with `“`/`”` (or UTF-8 curly quotes).
- [CRITICAL] `size-line-height` (file.css:18): `line-height: 20px`, a fixed value the 48px `h1` inherits, so its lines overlap.
  - Fix: Use unitless `line-height: 1.5`.

### path/to/clean-file.css
- ✓ pass

• ファイルごとにまとめ、ファイル内では影響度順に並べます。
• 各指摘には、影響度タグ、ルール ID、file:line、1 行の問題説明、修正方法を含めます。
• カバレッジが分かるよう、問題のないファイルも ✓ pass として含めます。
• 最後に影響度ごとの件数をまとめます。

注意点

• すべてのルールファイルを事前に読み込まないでください。シグナルテーブルで選択されたプレフィックスだけを読み込みます。すべて読み込むと、対象範囲にシグナルがないカテゴリに予算を費やしてしまいます。
• 報告するのはカテゴリの impact ではなく、ルールの frontmatter にある impact です。特に誤って報告されやすいルールが2つあります。brand-color は HIGH です（ブランド上の些細な問題ではなく、アクセシビリティの最低基準です）。punct-daggers は LOW-MEDIUM です（CRITICAL カテゴリに属していますが、装飾上の問題です）。
• 句読点のルールが適用されるのは、レンダリング後のコピーだけです。<code>、<pre>、JS/TS の文字列リテラル内にある直線型の引用符や -- を指摘するのは誤検出です。それらを「修正」すると、コードが壊れます。
• 指摘がレンダリングされたフォントや計算済みスタイルに依存する場合は、ui-verification で確認してください。CSS 宣言だけでは、どのフォントフェイスが読み込まれたかは証明できません。
• 読み込まれたフォントに OpenType 機能が含まれていることを確認せずに、その機能がないと指摘しないでください。ブラウザーは未対応の font-feature-settings タグを黙って無視するため、修正しても効果がありません。
• すべての指摘に file:line と具体的な修正方法が必要です。対応できない指摘がある場合は、やり直しになります。
• 監査は再設計ではありません。新しいフォントの組み合わせや尺度を提案すると、10分のレビューがデザインプロジェクトになってしまいます。問題を指摘し、再設計の依頼は ui-design に回してください。
• 優先度を同列に扱わないでください。CRITICAL の疑似太字の問題よりも LOW-MEDIUM の display- の細かな指摘が目立つと、実際に見た目が壊れている箇所が埋もれてしまいます。

関連スキル

• ui-design の監査モード：フロントエンド全般の品質（アクセシビリティ、フォーム、ナビゲーション、モーション）を扱います。タイポグラフィのカバー範囲はより浅めです。
• ui-design の方向性モード：フォント、尺度、ビジュアルの方向性をゼロから選びます。指摘が再設計の依頼に発展した場合に実行してください。
• ghostwriter：見出しとラベルの文言を扱います。このスキルが定めるのは、そのコピーの大文字・小文字の使い方（punct-case-rules）だけです。

メンテナンスのみ：evals/evals.json には、このスキルの変更に対する回帰テストのシナリオが含まれています。ユーザータスク中には読み込まれません。