ux-typography

タイポグラフィスキル

このスキルの動作（最初にお読みください）

これは生成型のスキルです。タイポグラフィには2つの典型的な失敗パターンがあります。無難（安全なフォントを1つ選び、実際のスケールや階層がない）と、過剰表現（複数のディスプレイ書体、多数のウェイト・色・大文字小文字を重ねて、雑然として読みにくい）です。そのため、このスキルでは次のゲートを設けます。

1. ブランドのパーソナリティ、コンテンツの種類、媒体を確立する — これらが、取り組む価値のある表現上の選択を導きます。
2. 常に当てはまるコアを適用する — 可読性、明確なスケールと階層、抑制は、どのプロダクトにも当てはまります。
3. 書体・ペアリング・スケールの選択を意図的に行う — デフォルトではなく、ブランドに紐づいたゲート付きの判断として明示します。

その後、監査に引き継ぎます。accessibility（サイズ、コントラスト、余白）、aesthetics（階層、バランス）。

---

ステップ0 — 書体を選ぶ前にコンテキストを確立する

• ブランドのパーソナリティと期待される美的感覚 — どのような印象を与えるべきか、そしてオーディエンスは何を期待するか（子ども向けアプリと銀行アプリでは正反対のトーンが求められます）。
• コンテンツの種類 — どのようなテキストが存在するか（ディスプレイ、見出し、本文、キャプション、ラベル）。これが階層の規模を決めます。
• 媒体 — 長文の読書か、密度の高い UI か、マーケティングか — 可読性と表現性のバランスが変わります。
• 言語の方向 — LTR か RTL か（デフォルトの配置を決めます）。

回答なしで進める場合は、前提を明示してください。

---

常に適用するコア（あらゆるタイポグラフィに当てはまる）

読みやすさと可読性（本文テキスト）

• 本文は16px以上。 スケールは本文サイズから始め（最も多くのスペースを占めるため）、そこから大きくしたり小さくしたりします。
• 行長は50〜75文字。 それより長いと追いにくく、短すぎると目が細かく動いてぎくしゃくします。
• 行の高さは本文でフォントサイズの約150%。 サイズや幅が大きいほど、より多く必要です。
• 段落の間隔は行間の1.5倍以上（WCAG）。アイデアを分けて消化しやすいブロックにします。
• LTR では本文を左揃え（RTL では右揃え）にします。中央揃えは短い要素（見出し、引用、CTA）に限定してください — 読む速度を落とし、認知・視覚に障害のあるユーザーに悪影響を与えます。
• スキャンしやすさを意識して設計します — ユーザーの約79%はスキャンし、約3%だけが一語ずつ読みます。階層と余白がスキャンを機能させます。

階層と抑制

• 書体は最大3つまで — 多くの場合、ウェイトやスタイルのバリエーションが豊富なスーパーファミリー1つで十分です。
• タイプスケールを構築し（サイズ、ウェイト、スタイル）、コンテンツの種類を網羅します。各レベルは明確に区別してください。
• 階層の手段は1レベルにつき最大3つ（サイズ、ウェイト、スタイル、色、大文字小文字）とし、見出しレベルは2〜3つにします。すべてを重ねると雑然とします（巨大で、太字で、色付きで、すべて大文字の見出しは叫んでいるように見えます）。
• 強調は控えめで単一に — イタリック（最も控えめ）か太字、複数を同時に使わないこと。文字色は控えめに。
• 余白と近接性でグループ化する — 関連するテキストは近くに、無関係なものは離して配置します。

---

文脈に依存する判断（表面化させ、自動適用しない）

それぞれについてトレードオフと、ステップ 0 に紐づいた推奨を提示します。ディスプレイ用書体、ウェイト、装飾を積み重ねることが失敗パターンです。

判断	適用する場面	避ける / 適応させる場面	既定の推奨
書体の個性 / 雰囲気	ディスプレイ用 / キャラクター書体がブランドに合い、見出しにのみ現れる	本文に表現力豊かな書体を使う（可読性を損なう）	ディスプレイには個性、本文には高い可読性
1 書体か 2 書体か	見出し / 本文のペアリングが有用なコントラストを生む	3 つ目の書体、または明確なコントラストを欠くペアリング	既定では 1 つのスーパーファミリー。明確なコントラスト + 役割がある場合のみ 2 つ目を追加
ウェイトの数	階層を築くための少数のウェイト	思いつきごとに 1 ウェイト	スケールを読み取り可能にする最小限
タイプスケールの比率	マーケティング / エディトリアルでインパクトを出す劇的な比率	密度の高い UI での劇的な比率（スペースの浪費）	プロダクト UI には控えめな比率、マーケティングにはより大胆に
セリフ vs. サンセリフ	媒体 / ブランドに合わせる（セリフは長文 / エディトリアルでの信頼感、サンセリフは UI の明瞭さ）	媒体に反して好みで選ぶ	媒体と読者の期待に合わせる
装飾的な要素（ドロップキャップ、プル / ブロッククォート）	エディトリアル / 長文レイアウト	プロダクト UI、フォーム、密度の高い画面	エディトリアルのみ

常に避ける（文脈にかかわらず）：タイポグラフィのクリシェ（「古代」を表す Papyrus、「楽しさ」を表す Comic Sans）、時代錯誤（時代の合わない書体）、適切さの失敗（銀行アプリにカジュアルなスクリプト体）。明白なものを超えて探求し、新しさよりも適合を優先してください。

---

結果を検証する（オーケストレーション）

ハンドオフでは各レンズを、インストール可能なスキルの name で指定します。インストールされている場合にのみ呼び出してください。インストールされていない場合、このスキル自体のコアにすでにこれらのルールが含まれています — ブロックするのではなく、それなしで進めてください。

タイプを選択または改訂した後、完了と宣言するのではなく、結果を監査レンズに引き渡してください。これらは候補レンズです — 姿勢は docs/orchestration-policy.md で設定されるか、全体を ux-design-review 経由でルーティングします。ここでは、microcopy は Tier A（自動実行）、accessibility と aesthetics は Tier B（オファー） です — 既存のデザインシステムがある場合、aesthetics は抑制され、accessibility は使用法に絞られます。ユーザーが特定の 1 つの目的でこのスキルを呼び出した場合は、そのスコープを尊重してください。

• ux-accessibility-audit (Tier B — オファー、デザインシステムがある場合は絞る) — 本文 ≥16px、背景に対するテキストのコントラスト、行長 / 行高と段落間隔、配置、そして階層が色だけに依存していないこと。
• ux-aesthetics-audit (Tier B — オファー、デザインシステムがある場合は抑制) — タイポグラフィ階層の効果、バランス、余白、そしてタイプの扱いが雑然とした状態（3 つを超える要素、多すぎる書体）に陥っていないか。
• ux-microcopy-audit (Tier A) — 言葉そのもの（このスキルはテキストがどのように見えるかを設定し、何を言うかではありません）。

アクセシビリティが可読性を指摘したり、美的性が雑然さを指摘した場合は、コアに戻ってください：より少ない書体、より少ない要素、よりクリーンなスケール。

---

よくある do/don't パターン

❌ しない	✅ する
安全なフォント 1 つ、スケールも階層もなし	2〜3 の明確なレベルを持つ意図的なタイプスケール
3 つ以上の書体 / 本文にディスプレイ書体	≤3 書体、多くの場合 1 つのスーパーファミリー、ディスプレイは見出しのみ
大きく + 太字 + 着色 + ALL-CAPS の見出し	レベルごとに ≤3 の階層要素
本文テキスト < 16px	本文 ≥16px、そこからスケールを積み上げる
全幅のテキスト行	1 行あたり 50〜75 文字
詰まった窮屈な行間	行高 ~150%、段落間隔 ≥1.5×
中央揃えの本文段落	本文は左揃え（LTR）、中央揃えは短い要素のみ
Papyrus / Comic Sans のクリシェ、時代錯誤な書体	適切で思慮深い書体を、明白なものを超えて探求する
確認せずに出荷する	アクセシビリティ + 美的性に引き渡す

---

Source lessons (Uxcel)

• Selecting Typefaces
• Typographic Principles
• Paragraphs in Typography
• Typographic Hierarchy