CSSドリフトとは？

CSSドリフトとは、デザインされたUIと実装されたUIの間に徐々に意図せず生じる乖離です。一つのコミットずつ少しずつ進行し、ある日誰かがアプリを開いて「これは全然デザインと違う」と言うまで気づかれません。

ページが壊れるような致命的なCSSバグとは異なり、ドリフトは微妙です。12pxであるべきマージンが16pxになっている。フォントウェイトが600でなく500。ボーダー半径が8pxでなく4px。個々の違いは些細ですが、数ヶ月にわたって蓄積されると、プロダクトの品質と一貫性を損ないます。

ドリフトが発生する原因

開発者がリリース前にアライメントの問題を修正する必要がある。デザイントークンを更新する代わりに、ローカルのオーバーライドを追加する。問題はとりあえず解決しますが、コンポーネントはシステムから逸脱します。

デザインがデスクトップ幅でのコンポーネントを指定しているが、モバイルでは指定していない。開発者はレスポンシブ動作を推測しますが、デザイナーの意図と一致しない可能性があります。

デザイントークンは採用率次第です。開発者がトークン（padding: var(--space-4)）ではなく生の値（padding: 16px）を使うと、デザインの意図と実装の接続が失われます。

Tailwindやコンポーネントライブラリのアップデートがデフォルト値を微妙に変更する。rounded-lgが以前は8pxだったのに今は12pxに。鋭い目を持つデザイナーが数ヶ月後に本番サイトをレビューするまで誰も気づきません。

測定できないものは修正できません。CSSドリフトを定量化するアプローチを紹介します：

Figmaデザインを画像としてエクスポートし、実装されたUIのスクリーンショットと比較します。ピクセルの差異が具体的なドリフトメトリクスとなります。

デザイントークンであるべき生のCSS値についてコードベースを監査します。生の値とトークン使用率の割合がドリフトリスクの指標になります。

# CSS/Tailwindでドリフトの可能性がある生のピクセル値を検索
grep -rn 'p-\[.*px\]\|m-\[.*px\]\|gap-\[.*px\]' src/

デザインシステムのすべてのコンポーネントのビジュアルベースラインを維持します。すべてのPRでビジュアルテストを実行し、リリース前にドリフトをキャッチします。

ビジュアルテストをCIの必須チェックにします。コンポーネントの見た目が変わった場合、マージ前にエンジニアリングとデザインの両方の承認を要求します。

トークンが存在する場所で生のCSS値を防ぐリンティングルールを使用します。Stylelintのようなツールで違反をフラグできます：

{
  "rules": {
    "declaration-property-value-disallowed-list": {
      "/^(margin|padding|gap)/": ["/\\d+px/"]
    }
  }
}