使い方ガイドへスキップ
Typography Scale作者 Owl-Listener

Typography Scale スキル。

文書化された少数のテキストスタイルから、読みやすい階層を作ります。

  • UIデザイン
  • タイポグラフィ
ソースレビュー · Typography ScaleSKILL.md
タスク UIデザイン 成果物 • サイズ、ウェイト、行間、トラッキングを備えた、名前付きテキストスタイルのスケール。 • 本文、見出し、技術的テキストのフォントの役割の割り当て。 • レスポンシブ時の使用ルールと実コンテンツでの確認。 始める前に 意味のある視覚的検証を行うには、実際のフォントファイル、または利用可能なプラットフォームフォントが必要です。
編集部による要約 · ソース確認日 2026-10-07 · 生成された例ではありません

01 機能概要

一貫したタイポグラフィシステムを作る

モジュラーサイズ、ウェイト、行送り、トラッキング、フォントの役割、レスポンシブ対応を扱うタイポグラフィシステムのリファレンスです。

ソースに基づくワークフロー実行ベンチマークではありません

作業の進め方

Typography Scaleは、サイズの関係をウェイト、行間、字間と組み合わせます。タイポグラフィシステムを単なるフォントサイズの並びとは捉えず、キャプション、本文、見出し、ディスプレイ行にはそれぞれ異なる役割と使用条件が必要だと考えます。

ソースには、モジュラー比とフォントの役割の例に加え、見出しや行長に関するモバイル向けの指針が含まれます。これらは実際のコンテンツで検証するための出発点となるルールです。数学的な比率だけで、あらゆるフォントや文字体系で読みやすい組版が保証されるとは主張していません。

期待される成果物

  • サイズ、ウェイト、行間、トラッキングを備えた、名前付きテキストスタイルのスケール。
  • 本文、見出し、技術的テキストのフォントの役割の割り当て。
  • レスポンシブ時の使用ルールと実コンテンツでの確認。
サンプル依頼を見る

依頼からレビューまで

  1. 01
    基本となる関係を選ぶ

    コンテンツと既存のブランドに合った本文の基準サイズと比率を選びます。

  2. 02
    完全なスタイルを定義する

    各サイズに、ウェイト、行送り、トラッキング、明確な用途を組み合わせます。

  3. 03
    実際のテキストで試す

    長い見出し、本文の段落、モバイル幅を確認します。個別のケースを直すために不要なサイズを増やさないようにします。

02 利用場面

使う場面

意味のある視覚的検証を行うには、実際のフォントファイル、または利用可能なプラットフォームフォントが必要です。

適したケース

  • テキストスタイルが不統一製品内に、ほぼ重複した見出しやラベルが蓄積している場合に役立ちます。
  • 新しいUIの基盤づくり各画面が独自のスケールを作り始める前に、文字の役割を確立します。

確認すべき制限

  • 行長だけの話ではありません行長は重要ですが、このスキルはより広いタイポグラフィシステムを扱います。
  • 書体ライセンスではありませんフォントの選定と使用には、引き続き適切なライセンスとプラットフォームでの利用可否が必要です。

用意する情報

  • フォントとブランド承認済みのファミリー、利用可能なウェイト、既存の制約を提供してください。
  • コンテンツサンプル実際に使われるラベル、見出し、段落、コード、数値表示を含めてください。
  • 画面の文脈モバイル、高密度UI、長文読書に関する要件を説明してください。

03 重要な判断

重要な判断

  1. スタイルに役割を持たせる

    文書化された用途があれば、隣り合うサイズの間で恣意的な判断をする場面が減ります。

  2. すべてを縮小せずにモバイル対応する

    ソースは、見出しの縮小と、読みやすい本文の基準サイズの維持を区別しています。

04 依頼例

焦点を絞った依頼を試す

以下のサンプル依頼は未検証です。使用前にスキルのセットアップを確認してください。

セットアップを確認する

リポジトリに記載されたインストール手順を使い、参照されている付属ファイルも保持してください。この項目は、実行可能なアプリケーションではなく、焦点を絞ったデザイン手法を説明するものです。

上流のソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md

意味のある視覚的検証を行うには、実際のフォントファイル、または利用可能なプラットフォームフォントが必要です。

まず1つの成果物から始める

スキルを実行する前に、この依頼の範囲、元資料、制約を調整してください。

サンプル依頼
記事本文、メモ、ナビゲーションラベル、コード抜粋を含むリサーチ閲覧アプリにtypography-scaleを使います。控えめなモジュラースケールを、完全なスタイル値とモバイル時の見出しの挙動とともに定義してください。プレースホルダーではなく、提供された長いタイトルと段落で検証してください。

結果を確認する

実際の出力を、次の観察可能な基準で確認してください。

  • すべてのスタイルにフォントサイズ以外の値も含まれている。
  • 頻出するテキストの役割に、限られた数のスタイルが使われている。
  • 長い見出しと本文が、狭い幅でも読みやすいままである。

OpenDesignは、コーディングエージェント向けのローカルなデザインワークスペースを提供します。この掲載は、スキルが同梱されていることや、外部ツール、認証情報、ソフトウェア依存関係が含まれていることを意味しません。

05 ソースとライセンス

ソースとライセンス

このページは、下記にリンクされた固定のソースリビジョンについて説明しています。上流の挙動や要件は変更される可能性があります。

ソースの所有者
Owl-Listener
ライセンス
MIT
確認済みスナップショット
2026-10-07 · 9a6930cf84a8
編集部によるソース要約
モジュラーサイズ、ウェイト、行送り、トラッキング、フォントの役割、レスポンシブ対応を扱うタイポグラフィシステムのリファレンスです。

リンク先のソースに基づく、OpenDesignによる独自の要約です。リポジトリのスター数は日付付きの人気の目安であり、スキルの利用数や品質スコアではありません。

06 開始前の質問

始める前の質問

モジュラースケールでフォントも決まりますか?

いいえ。比率はサイズを整理するものです。フォントの選定と実際のレンダリングには、引き続き判断が必要です。

デスクトップのサイズはモバイルですべて縮小すべきですか?

ソースでは、読みやすい本文サイズを保ちつつ見出しを小さくし、行長を調整することを提案しています。

日常的に使うスタイルはいくつにすべきですか?

ソースは、日常的な使用を少数のセットに限定しつつ、キャプションやディスプレイテキストなどの追加の役割は文書化することを推奨しています。

OpenDesign

次のデザイン反復に余白を作りましょう。

依頼内容、元資料、デザイン作業をローカルのワークスペースにまとめて管理できます。ワークフローに追加する前に、スキル自体のセットアップを確認してください。

上流のソースファイル
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/typography-scale/SKILL.md