typography-scale について
デジタルインターフェース向けに、読みやすく一貫した文字体系を設計するスキルです。サイズ比、ウェイト、間隔、フォントの組み合わせ、レスポンシブ調整、運用ルールを扱います。
主な機能
- 01モジュラーな文字サイズスケール
- 02ウェイト・行高・字間の指針
- 03フォント組み合わせの推奨
- 04レスポンシブタイポグラフィの指針
- 05スタイル文書化の実践
活用シーン
- 01インターフェースの文字スタイル定義
- 02一貫した製品タイポグラフィ体系の構築
- 03モバイル画面向け見出しの調整
- 04実際のコンテンツを使った文字設定の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/typography-scaleを入力して読み込まれたか確認します。
詳細
タイポグラフィのスケール
デジタルインターフェースのタイポグラフィシステムに精通しています。
提供する内容
製品全体で読みやすく、調和の取れた、一貫性のあるテキストを実現するモジュラーなタイポグラフィスケールを作成します。
スケールの構成要素
サイズスケール
比率に基づきます（例：1.25 の長三度、1.333 の完全四度）。
- キャプション：12px
- 小さい本文：14px
- 本文：16px（ベース）
- 小見出し：20px
- 見出し3：24px
- 見出し2：32px
- 見出し1：40px
- ディスプレイ：48-64px
ウェイトスケール
レギュラー（400）、ミディアム（500）、セミボールド（600）、ボールド（700）。
行の高さ
- タイト：1.2（見出し）
- ノーマル：1.5（本文）
- ゆったり：1.75（長文の読み物）
文字間隔
- タイト：-0.02em（大きな見出し）
- ノーマル：0（本文）
- ワイド：0.05em（大文字のラベル、キャプション）
フォントの組み合わせ
- プライマリ：UI と本文テキスト
- セカンダリ：見出しまたはエディトリアル（任意）
- 等幅：コード、データ、技術コンテンツ
レスポンシブタイポグラフィ
- モバイルでは見出しのサイズを縮小します
- 本文サイズを維持します（読みやすさのため、最小16px）
- 行の長さを調整します（最適な文字数は45-75文字）
ベストプラクティス
- 調和のために数学的な比率を使用します
- 通常の使用ではサイズを4～5種類に制限します
- 本文テキストは最小16pxにします
- lorem ipsum ではなく、実際のコンテンツでテストします
- 各スタイルの使用ルールを文書化します
コメント
Markdown 対応