coastdigitalgroup/coastai-skills

Fluid Spacing System（流体的スペーシングシステム）

目的

Fluid Spacing Systemスキルは、ユーザーのビューポートに応じてスムーズに適応する余白（マージン、パディング、ギャップ）のレスポンシブスケールを作成するための方法論を提供します。CSSのclamp()関数を使用することで、スペーシングは定義された最小値と最大値の間で線形にスケーリングし、過剰なメディアクエリを必要とせずに視覚的な調和と一貫した比率を維持します。

ユースケース

• 新しいデザインシステムの基礎となるスペーシングスケールの確立
• モバイル、タブレット、デスクトップ間での視覚的一貫性を向上させるためのWebサイトのモダナイゼーション
• 大きな画面では余白が呼吸し、小さな画面ではコンパクトに保つ必要がある高品質なレイアウトの設計
• 固定ピクセルベースのスペーシングから、より柔軟で実装を意識したシステムへの置き換え

使用すべきでないケース

• シンプルで非レスポンシブなページ： レイアウトが極めて基本的であるか、レスポンシブ対応の要件がない場合。
• 厳密に固定されたレイアウト： デザイン仕様が全ての解像度で正確で変更不可なピクセル値を要求する場合。
• レガシーブラウザのサポート： ターゲットユーザーが主にCSS clamp() をサポートしていないブラウザ（例：Internet Explorer）を使用している場合。

入力

流体的スペーシングシステムを生成するには、以下が必要です：

1. ビューポート範囲：
   • min-width: スケーリングが開始される画面幅（例：320px）。
   • max-width: スケーリングが停止する画面幅（例：1280px）。
2. ベーススペーシング単位：
   • min-size: min-width でのベース単位（例：16px）。
   • max-size: max-width でのベース単位（例：20px）。
3. スケール比率：
   • スケールのステップを決定する乗数（例：1.25の長三度スケール、または線形の2x/3x/4x進行など）。

出力

1. Fluid Spacing Scale（流体的スペーシングスケール）： clamp() を使用して「極小」から「極大」までの値を定義するCSS変数のセット。
2. セマンティックマッピング： これらのトークンを適用する方法に関するガイドライン（例：--space-m をコンポーネントのパディングに、--space-xl をセクションのマージンに）。
3. 使用ドキュメント： 垂直リズムと水平方向の整列を維持するために単位を組み合わせるためのルール。

ワークフロー

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

プロジェクトのターゲットデバイスに基づいて、流体システムの境界を設定します。 例： 320px（モバイル）から1440px（デスクトップ）まで、ベース単位は16pxから24pxにスケーリング。

2. スペーシング比率の選択

スペーシングステップがどのように増加するかを決定します。

• 線形／乗算： ステップはベース単位の倍数（例：0.5x、1x、1.5x、2x、4x、8x）。予測可能な整列に最適。
• 幾何級数スケール： 各ステップは前のステップに比率（例：1.25）を掛けた値。コントラストの高いアーティスティックなレイアウトに最適。

3. スケールステップの計算

サイズの範囲を作成します。典型的なスケールは以下を含みます：

• 3XS～XS： 細かい詳細、タイトなリスト、内部ボタンのパディング用。
• S～M： 標準的なコンポーネントのスペーシングとガター用。
• L～3XL： セクションのマージン、ヒーロースペーシング、主要なレイアウトギャップ用。

4. CSS clamp() 式の生成

ピクセル値を流体式に変換します。 clamp(min_rem, intercept_rem + slope_vw, max_rem)

傾きの計算： (max_px - min_px) / (max_viewport - min_viewport) * 100

5. セマンティックロールの割り当て

抽象的なスケールを機能的なロールにマッピングし、チーム全体での一貫性を確保します。

• space-component（コンポーネントスペース）：--space-s
• space-layout-gutter（レイアウトガター）：--space-m
• space-section（セクションスペース）：--space-xl

判断ルール

• 8ptグリッドの原則： 可能な限り、最小値と最大値が4または8の倍数になるようにして、標準的なUIパターンと整合させます。
• 近接の原則： 関連する要素間のスペースは、関連しない要素間よりも小さくする必要があります。
• モバイル圧縮： 小さなスペーシング単位（3XS～S）は比較的安定させ、大きな単位（L～3XL）だけを積極的にスケーリングして、モバイルレイアウトが「爆発した」ように感じられるのを防ぎます。
• アクセシビリティ： 最小スケールでも、インタラクティブ要素が十分なヒット領域（WCAG 2.2 SC 2.5.8に従い、パディングを含めて最低24x24px、プライマリアクションには44x44px推奨）を維持するようにします。
• コンテナ相対スペーシング： ビューポートではなくコンポーネントのコンテナに応答するスペーシング（例：狭いサイドバーまたは広いメインカラムに配置できるカード）の場合は、clamp() 式内で vw の代わりにコンテナクエリ長さ単位（cqi/cqw）を使用します。

制約条件

• レスポンシブ性： スペーシングによって水平方向のオーバーフローが発生してはなりません。
• 一貫性： スケールが定義されたら、「一回限りの」ピクセル値を使用しないでください。
• 階層構造： 大きなスペーシングは常に大きなコンテンツブロック（例：セクション）を区切るために使用し、小さなスペーシングは内部コンポーネントの詳細に使用します。
• 範囲： このスキルはスペーシング値のみをカバーします。レイアウトグリッドの作成（responsive-grid-system を使用）、タイポグラフィサイズの定義（fluid-typography-system を使用）、またはz-index/レイヤリングの管理は行いません。

よくある失敗パターン

• すべてを均等にスケーリングする： 小さなパディング（例：4px）を大きくスケーリングしすぎると、デスクトップでコンポーネントが歪んで見える可能性があります。
• レイアウトガターを無視する： コンポーネントのスペーシングは流動的であるのにグリッドガターは固定されており、位置揃えに「ずれ」が生じる。
• 過剰なスケール： 20以上の異なるスペーシングステップがあると、システムの使用と保守が困難になります。7～9ステップを目指してください。
• 論理的なステップがない： 一貫したスケールや比率の代わりに任意の数値を使用する。

検証基準

• ビューポートをリサイズしたときにスペーシングがスムーズにスケーリングする。
• すべての主要ブレークポイントで垂直リズムが維持されている。
• 実装において「一回限りの」ピクセル値が使用されておらず、すべてのスペーシングが定義された変数を使用している。
• システムは clamp() 関数の最小値と最大値の境界に rem 単位を使用している。
• 近接性と階層構造がスペーシングの選択によって強化されている。
• インタラクティブ要素が、最小のビューポートも含め、流体スケール上のすべてのポイントで少なくとも24x24pxのヒット領域（WCAG 2.2 SC 2.5.8）を維持している。