typography-scale-builder について
セマンティックなタイポグラフィシステムを監査・構築し、コードベースに適用するためのデザインスキルです。デザイナーや開発者が、スケール、レスポンシブな挙動、トークン、コンポーネントの改修を進められます。
主な機能
- 01既存の文字スタイルを監査
- 02比率とサイズ設計の選択
- 03セマンティックな役割の定義
- 04行間と字間の設定
- 05トークンの出力とコンポーネント改修
活用シーン
- 01不統一な文字スタイルの整理
- 02マーケティングサイトの流体見出し作成
- 03高密度なアプリ画面の文字設計
- 04生のフォントサイズを意味的な役割に置換
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/typography-scale-builderを入力して読み込まれたか確認します。
詳細
タイポグラフィスケールビルダー
タイポグラフィはデザインシステムの骨格です。「何かしっくりこない」と感じる製品の多くは、配色に問題があるより先に、書体の一貫性が崩れています。役割と計算式を定めたシステムとしてスケールを構築し、コードベースで実際に使われるようにします。入力するのは、選択したフォント（または先に font-pairing-suggester を実行してください）、製品の種類（マーケティングサイト、情報量の多いアプリ UI、長文のエディトリアル）、対象デバイスの範囲です。
ワークフロー
- 既存の状態を監査します。 コードベースにあるすべての font-size、line-height、letter-spacing、font-weight を一覧にします。よくある調査結果は、フォントサイズが23種類あり、そのうち9種類が互いに2px以内に収まっているというものです。これはシステムが必要なケースです。それぞれが本当に別の役割を担っているのか、単に積み重なったズレなのかを見極めます。
- スケールの計算式を選びます。 基準サイズ（マーケティング／エディトリアルでは本文を最低16pxにし、情報量の多いアプリ UI では13～14pxも許容）と比率を決めます。UI 中心の製品では控えめな比率（1.125～1.2）にして、使いやすい段階を増やし、誇張を抑えます。マーケティング／エディトリアルでは大きめの比率（1.25～1.333）にして、明確な階層を作ります。マーケティングサイトでは、デフォルトで可変にします。各段階に
clamp()を設定し、ブレークポイントで急に切り替わることなく、ビューポートの範囲に合わせて見出しを拡大縮小します。アプリ UI では固定の段階でも問題ありません。 - 各段階に付随する値を設定します。 単一の数値だけの「スケール」では見落とされる部分です。サイズが大きくなるほど行の高さを詰めます（本文は約1.5～1.6、ディスプレイサイズの見出しは1.1～1.2まで下げます）。ディスプレイサイズでは字間を負の値（-1%～-2.5%）にし、小さな大文字やラベルではわずかに正の値にします。フォントごとにウェイトの役割（本文、強調、見出し、ディスプレイで使うウェイトと、使われていないため削除する読み込み済みウェイト）を決めます。
- 役割を定義します。 サイズ名ではなく、意味を持つトークンを使います。
display、h1～h4、body-lg、body、body-sm、caption、overline、codeなどです。各役割は、サイズ段階＋行の高さ＋字間＋ウェイト＋フォントファミリーをひとつのトークンとして持ちます。コンポーネントは役割を使い、生のサイズ段階を組み合わせることはありません。 - 垂直方向のリズムを整えます。 役割ごとに後続要素との間隔ルールを設定します（見出しのマージンはサイズに比例させ、段落間の間隔は本文の行の高さを基準にします）。見出しには
text-wrap: balanceを設定し、本文の文字数幅を65～75chに制限して、どのビューポートでも読みやすい行の長さを保ちます。 - 書き出して既存のコードに適用します。
typography-tokens.json、Tailwind のfontSize設定（役割ごとにサイズ＋行の高さ＋字間のタプルを指定。v4 では@theme）、役割クラスを定義するtypography.css、TYPOGRAPHY.mdを用意します。その後、手順1の一覧を役割に対応付け、きれいに対応しないものにはケースごとのフラグを付けて置き換えます。対応しないものは、役割が不足しているか、削除すべきズレです。
ルール
- どこでもサイズより役割を優先します。
text-[28px]ではなくtext-h2を使います。役割がない場合、コンポーネントは開発者に数値を尋ねるのではなく、システムに役割を追加するよう求めます。 - 各段階には行の高さと字間も設定します。付随する値のないサイズは、トークンの半分にすぎません。
- スケールの段階は、階層を表すのに必要な最小限にします。ほとんどの製品では7～9個の役割で十分です。12個以上ある場合は、役割が重複しています。
- 本文を基準にします。まず読みやすいサイズに設定し、その周りにスケールを広げます。見出しを大きく見せるために本文を縮小してはいけません。
- 役割で使うウェイトだけを読み込みます。使われていないウェイトは、初回描画時に無駄なバイト数を増やします。
- 可変タイポグラフィでは、最小値と最大値を検証します。
clamp()の最小値は幅320pxのスマートフォンでも読みやすく、最大値はウルトラワイド画面でレイアウトを崩さないようにします。
クイックコマンド
- 「このプロジェクトのタイポグラフィシステムを構築して」――ワークフロー全体
- 「タイポグラフィを監査して」――手順1のみ
- 「見出しを可変にして」――既存のスケールを可変に変換
- 「コンポーネントに適用して」――既存のシステムに対する手順6
コメント
Markdown 対応