CSS-Tricks が Almanac に @function（2026-06-03 に RSS 掲載）を追加し、CSS の @function 規則が解説の対象になりました。@function --name(--arg) { result: ...; } という構文で、「引数を取り、内部にロジックを含み、値を返す」再利用可能なカスタム関数を、Sass などのビルド時プリプロセッサや JS に頼らず、ネイティブ CSS だけで定義できるようになったことが要点です。@property で型付きのカスタムプロパティをトークンとして定義し、clamp() や if() と組み合わせれば、デザイントークンの計算・テーマ切替・レスポンシブな値の決定を、ブラウザのカスケードの中で宣言的に完結させられます。
受託 Web 制作の現場では、「デザインシステムのトークンや色・余白の計算ロジックを Sass の関数や JS のテーマランタイムに閉じ込め、ビルドパイプラインと密結合させた結果、トークンを1つ変えるたびに再ビルドと依存追従が必要になり、保守が重くなる」という事故が繰り返されてきました。受託で Web 制作を支える立場では、これは 「Sass を捨てられるか」ではなく、「どのトークンをネイティブ CSS に寄せ、どの計算を Sass に残し、未対応ブラウザのフォールバックまで含めて宣言的に引き渡せるか」を設計に組み込む課題だと捉えています。これまで AIレディなデザインシステムを受託で整える（GH Media） で扱った トークン設計の考え方、モダンCSSのネイティブ機能を受託で使う（GH Media） で扱った ネイティブ CSS の取り込み方針と接続して、本記事では 「デザインシステムのCSSネイティブ化支援」を 受託パッケージとして整理します。
なぜ「いま」デザインシステムをCSSネイティブに寄せるのか
| 観点 | Sass / JS でのトークン管理（従来） | ネイティブ CSS @function / @property（2026） |
|---|---|---|
| 実行タイミング | ビルド時に値が固定 | ランタイムにカスケードで決定 |
| 依存 | プリプロセッサ / テーマ JS が必要 | 追加ツール不要 |
| テーマ切替 | クラス差し替え + 再計算 | カスタムプロパティの上書きで即時 |
| 計算ロジック | Sass 関数 / JS に閉じる | @function で CSS に宣言 |
| 型の保証 | 規約頼みで型は不明 | @property で syntax を型付け |
| 保守 | パイプラインと密結合 | ブラウザ標準で陳腐化しにくい |
つまり 「Sass や JS でトークンを計算する」ことと「保守しやすく依存の少ないデザインシステムを届ける」ことは別物であり、受託でも 「計算を CSS に寄せ、トークンを型付けし、フォールバックを設計して引き渡す」ことが品質の前提になりつつあります。これにより 「ビルド依存を減らした構成」を成果物として保証できます。ただし後述の通り、Sass を全部捨てるのではなく、残すべき箇所は残す切り分けが肝心です。
@function でできること
① 引数を取る関数を定義する
@function --name(--arg) { result: ...; } の形で、引数を受け取って計算結果を返すカスタム関数を定義できます。result 記述子に返したい値を書き、呼び出し側では通常の関数のように --name(値) と書きます。Sass の @function に相当する役割を、ビルドを介さずネイティブ CSS で担えるのがポイントです。
② @property による型付きトークン
@property でカスタムプロパティに syntax（型）・inherits・initial-value を宣言すると、トークンが「ただの文字列」ではなく型を持った値になります。<color> や <length> として宣言しておけば、不正な値が混ざってもプロパティ全体を巻き込んで壊さず、アニメーションや補間も型に沿って安定します。トークン基盤の土台として有効です。
③ clamp / if との組合せ
@function の result の中で clamp() を使えばレスポンシブな値を、if() を使えば条件分岐したトークンを返せます。下の例は、引数で受け取った最小・最大から流体的なサイズを返す関数と、テーマ用の型付きトークン定義です。
/* 型付きトークン（@property） */
@property --brand-accent {
syntax: '<color>';
inherits: true;
initial-value: #1a73e8;
}
/* 引数を取り、clamp で流体サイズを返す関数 */
@function --fluid(--min, --max) {
result: clamp(var(--min), 4vw, var(--max));
}
.card-title {
/* 関数を呼び出してフォントサイズを決定 */
font-size: --fluid(1rem, 2rem);
color: var(--brand-accent);
}受託で提供する「デザインシステムのCSSネイティブ化支援」5フェーズ
フェーズ 1: 棚卸し・診断（1 週間）
- 既存のデザイントークン（色・余白・タイポ・角丸など）の洗い出し
- Sass 関数 / JS テーマランタイムの依存と計算ロジックの把握
- 対応ブラウザ要件・テーマ切替要件の確認
- 成果物: トークン棚卸し表 + ネイティブ化可否レポート
フェーズ 2: 設計（1 週間）
@function/@propertyに寄せるトークンと Sass に残す計算の切り分け- フォールバック方針（未対応ブラウザの挙動）の決定
- トークン命名規約とテーマ切替方式の設計
- 成果物: 実装方針書 + フォールバック設計書
フェーズ 3: 実装（1〜3 週間）
- 型付きトークン（
@property）とカスタム関数（@function）の実装 - テーマ切替・レスポンシブ値・条件分岐トークンの実装
- 未対応ブラウザ向けフォールバックの実装
- 成果物: 実装済みトークン基盤 + 実装標準ドキュメント
フェーズ 4: 検証・引き渡し（1 週間）
- 主要ブラウザ・未対応ブラウザでの表示・テーマ切替検証
- トークン変更時の影響範囲とリグレッションの確認
- 成果物: 検証レポート + 保守手順書
フェーズ 5: 継続保守（継続）
- ブラウザ対応状況の定点観測
- フォールバックの段階的撤去判断
- 新規トークン・新規テーマの追加実装
受託向け実装標準セット
| 用途 | 推奨 | 避ける |
|---|---|---|
| トークン定義 | @property で型付き | 型なしの素のカスタムプロパティ乱用 |
| 計算ロジック | @function + clamp() / if() | JS ランタイムでの再計算 |
| テーマ切替 | カスタムプロパティの上書き | クラス全差し替え + 再ビルド |
| 残す Sass | ループ / mixin / 大量生成 | 無理にネイティブへ移植 |
| フォールバック | 機能検出 + 静的な代替値 | 未対応ブラウザ放置 |
| 命名 | 規約に沿ったトークン名 | 場当たり的な命名 |
どの案件に必要か / 不要か
| 必要な案件 | 優先度が低い案件 |
|---|---|
| 複数テーマ / ダークモードを持つ長期運用サイト | テーマが単一の静的サイト |
| トークン変更が頻繁なプロダクト | デザインがほぼ固定 |
| ビルド依存を減らしたい | パイプラインに不満がない |
| デザインシステムを横展開したい | 小規模で再利用が少ない |
| Sass の肥大化に疲れている | 既存構成で問題が出ていない |
受託契約に書く6つの条項
| 条項 | 内容 | 顧客が確認すべきこと |
|---|---|---|
| 対象範囲 | ネイティブ化するトークンの種類 | 色/余白/タイポの境界 |
| 対応ブラウザ | 保証する範囲 | フォールバックの程度 |
| フォールバック | 未対応時の挙動 | 劣化の許容度 |
| Sass の扱い | 残す箇所と移行する箇所 | ビルド構成の変更 |
| 引き渡し | トークン標準 / 保守手順 | 保守体制 |
| 継続保守 | 対応状況の監視 | 運用費用 |
価格モデル — デザインシステムCSSネイティブ化パッケージ
| プラン | 金額 | 対象 | 内容 |
|---|---|---|---|
| 診断 | 25 万円〜 | 1 サイト | 棚卸し + ネイティブ化可否レポート |
| 標準実装 | 90 万円〜 | 中規模 | 主要トークンの型付け + 関数化 + フォールバック |
| 本格対応 | 180 万円〜 | 大規模 | + 全テーマの再設計 + リグレッション検証 |
| Lite 保守 | 3 万円〜 / 月 | 小規模 | 対応状況監視 + 軽微修正 |
| Standard 保守 | 12 万円〜 / 月 | 中規模 | + フォールバック撤去判断 + 新規トークン実装 |
顧客側 ROI 試算（複数テーマを持つサイト想定）
| 項目 | Sass / JS でのトークン管理 | CSS ネイティブで実装 | 差分 |
|---|---|---|---|
| テーマ切替 | 再ビルド / 再計算が必要 | プロパティ上書きで即時 | 反映の高速化 |
| トークン変更 | 影響範囲が読みにくい | 型と関数で局所化 | 変更コストの削減 |
| ビルド依存 | プリプロセッサに密結合 | 依存を縮小 | パイプラインの簡素化 |
| 保守工数 | 継続的に発生 | 大幅圧縮 | 運用コストの低減 |
| 年間効果 | — | — | 依存削減 + 保守工数圧縮 |
診断（25 万円〜）だけでも、「いまのデザインシステムが、どこまでネイティブ CSS に寄せられて、どこは Sass に残すべきか」を可視化できること自体に価値があります。ビルドと密結合したトークン基盤の保守コストは、たいてい数年かけてじわじわ効いてきます。
ハマりやすい5つの落とし穴
落とし穴 1: ブラウザ未対応のフォールバックを設計しない
@function 未対応ブラウザでトークンが解決されず、レイアウトが崩れます。機能検出と静的な代替値を先に用意します。
落とし穴 2: Sass を残すべき箇所まで剥がす
ループや mixin での大量生成まで無理にネイティブへ移すと、かえって冗長になります。得意分野で住み分け、残す Sass は残す判断をします。
落とし穴 3: トークンの命名規約が不在
@property と @function を増やしても、命名がバラつくと再利用されません。命名規約を先に定義してから実装します。
落とし穴 4: @property の構文ミスで無効化
syntax の指定や initial-value の型不一致があると、宣言ごと無視されて初期値に戻ります。syntax の文字列と初期値の型を必ず突き合わせます。
落とし穴 5: 過度な抽象化で可読性が低下する
関数を関数で包む多段の抽象化は、読み手が追えなくなります。抽象は一段に抑え、命名で意図を表すことを優先します。
90日アクションプラン
| 週 | アクション |
|---|---|
| Week 1 | トークンの棚卸し + Sass / JS 依存の把握 |
| Week 2 | ネイティブ化可否の判定 + 命名規約・フォールバック方針決定 |
| Week 3〜5 | 型付きトークン・関数・テーマ切替の実装 |
| Week 6 | 主要 / 未対応ブラウザでの検証 + 手順整備 |
| Week 7〜13 | 対応状況ウォッチ + フォールバックの段階撤去 |
まとめ — 「ビルドで計算する」から「CSSに寄せて引き渡す」へ
@function が実用域に入ったことは、デザインシステムのトークン設計を「Sass や JS でビルド時に計算する」から「ネイティブ CSS で宣言的に組む」へと押し進めます。受託で Web 制作を支える立場では、計算を CSS に寄せ、トークンを @property で型付けし、フォールバックを設計して引き渡す 「デザインシステムのCSSネイティブ化支援」が、ビルド依存と保守コストを減らした成果物を届ける主力サービスです。色の決定をアクセシブルに保つ観点まで含めて見直すなら CSSのcontrast-colorでアクセシブルな配色（GH Media） を併読してください。
弊社では診断 / 標準実装 / 本格対応 / Lite / Standard の各段階で本パッケージを提供しています。「Sass の肥大化を整理したい」「テーマ切替を軽くしたい」「トークンをネイティブ CSS に寄せて保守を楽にしたい」というご相談は お問い合わせフォーム からお気軽にどうぞ。
