coastdigitalgroup/coastai-skills

流体タイポグラフィシステム

目的

Fluid Typography Systemスキルは、ユーザーのビューポートサイズに応じて滑らかに適応するタイポグラフィスケールの作成を可能にします。特定のブレークポイントで固定サイズに切り替わる代わりに、CSSのclamp()関数を使用して、定義された最小値と最大値の間でタイポグラフィが線形にスケーリングします。これにより、視覚的な調和と可読性が向上し、多数のメディアクエリを管理するメンテナンス負荷が軽減されます。

使用例

• ゼロからレスポンシブデザインシステムを構築する場合。
• 既存のウェブサイトのタイポグラフィを最新化し、クロスデバイスの一貫性を高める場合。
• テキストがあらゆる画面サイズで利用可能なスペースを完全に埋める必要があるレイアウトを作成する場合。
• 複数の@mediaルールを単一の流体変数セットに置き換えてCSSを簡素化する場合。

使用すべきでない場合

• レガシーブラウザのサポート: プロジェクトがclamp()を理解しないブラウザ（例：Internet Explorer）をサポートする必要がある場合。
• 固定幅デザイン: レイアウトが厳密に固定されており、レスポンシブに対応しようとしない場合。
• 極端な精度: 特定のブランドガイドラインが、線形スケールと一致しないすべての解像度で正確なピクセルサイズを義務付けている場合。

入力

流体タイポグラフィシステムを生成するには、以下が必要です：

1. ビューポート範囲:
   • min-width: スケーリングが開始する画面幅（例：320px）。
   • max-width: スケーリングが停止する画面幅（例：1200px）。
2. ベースフォントサイズ:
   • min-size: min-widthにおける本文フォントサイズ（例：16px）。
   • max-size: max-widthにおける本文フォントサイズ（例：20px）。
3. スケール比率:
   • 見出しのサイズを決定する乗数（例：1.250（メジャーサード）、1.333（パーフェクトフォース））。

出力

1. CSSカスタムプロパティ: 流体スケールを定義するCSS変数のブロック。
2. タイポグラフィユーティリティクラス: （オプション）スケールを簡単に適用するためのCSSクラス。
3. 階層構造ドキュメント: 本文からH1までのサイズの明確なマッピング。

ワークフロー

1. スケールパラメータの定義

最小／最大ビューポートとベースサイズを決定します。 例: 320px～1280px、ベース16px～18px。

2. タイポグラフィスケールの選択

ブランドのトーンに合った比率を選択します。

• 1.067（マイナーセカンド）: 微妙な差、データ密度の高い箇所に適しています。
• 1.200（マイナーサード）: 標準的、バランスが取れています。
• 1.414（オーグメンテッドフォース）: コントラストが高く、大胆な見出しに適しています。

3. 階層レベルの計算

各レベル（H6～H1）のベースサイズに比率を乗算します。 計算式: Size_level = Base * (Ratio ^ Level)

4. 流体計算式の生成

計算された最小／最大ピクセル値をclamp()関数に変換します。 clamp(min, preferred, max)

推奨値の計算： slope = (max_size - min_size) / (max_viewport - min_viewport) y_intercept = min_size - slope * min_viewport preferred = (y_intercept) + (slope * 100vw)

5. 実装

生成されたCSS変数をデザインに適用します。

決定ルール

• アクセシビリティ優先: 本文テキストのmin-sizeは、1rem（16px）を下回るべきではありません。
• ユーザー設定の尊重: 最終出力には必ずrem単位を使用し、ユーザーのブラウザフォントサイズ設定が尊重されるようにします。remベースの最小／最大クランプなしでvwのみのサイジングを使用しないでください。純粋なビューポート単位はユーザーのブラウザズームやフォントサイズ設定を無視し、WCAG 1.4.4（テキストのサイズ変更）に失敗する可能性があります。
• スケールの強度: モバイル中心のサイトでは小さな比率を使用し、小さな画面で見出しが大きくなりすぎないようにします。

制約

• レスポンシブ性: タイポグラフィはコンテナの境界内に収まり、オーバーフローを引き起こさないようにする必要があります。
• 可読性: 行の長さ（メジャー）は、理想的には45～75文字の間に保つ必要があります。テキストのスケールに応じて、コンテナの幅を適宜調整します。
• 階層構造: H1は常にH2よりも視覚的に明確で大きく、H2はH3よりも大きく、というようにする必要があります。

よくある失敗パターン

• 計算ミス: 画面が大きくなるとテキストが小さくなる結果になる。
• 単位の不一致: pxとremが混在し、ブラウザのズーム機能を壊す。
• オーバースケーリング: 4Kモニターで見出しが大きくなりすぎて、ビューポート全体を支配してしまう。
• アクセシビリティの問題: ユーザーがズームインしたり、OS/ブラウザのベースフォントサイズを大きくしたときの流体スケールの動作をテストし忘れる（WCAG 1.4.4 テキストのサイズ変更、WCAG 1.4.10 リフロー）。

検証基準

• ブラウザウィンドウのサイズを変更すると、タイポグラフィが滑らかにスケーリングする。
• 「ジャンプ」や突然のサイズ変化が見られない。
• すべてのテキストが320px幅で読みやすい。
• 見出しが本文テキストに対して明確な階層を維持している。
• システムがベースにrem単位、流体動作にclamp()を使用している。
• ブラウザズーム400%で、テキストがコンテンツや機能を失うことなくリフローする（WCAG 1.4.10 リフロー）、かつユーザーのフォントサイズ設定を尊重している（WCAG 1.4.4）。