CSS-Tricks で @function・offset-path・@custom-media といった モダンCSSネイティブ機能の解説が相次いで公開されました。これまで JavaScript やプリプロセッサ（Sass）に頼っていた 値の計算・パスに沿ったアニメーション・メディアクエリの共通化が、いまや CSS の標準機能だけで完結します。
一方で受託Web制作の現場では、「ちょっとした動きや条件分岐のために JavaScript を盛り込み、結果として重くて壊れやすいサイトを納品してしまう」という問題が後を絶ちません。受託でWeb制作を支える立場では、これは 「派手に作れるか」ではなく、「引き渡したあと、顧客や次の制作会社が壊さず維持できるか」を設計に組み込む課題だと捉えています。これまで Core Web Vitals 改善ガイド（GH Media） で扱った 表示速度、Astro 6.4 によるコーポレートサイト刷新受託（GH Media） で扱った モダンな制作基盤、クロスドキュメント View Transitions の受託活用（GH Media） で扱った ネイティブな画面遷移と接続して、本記事では 「モダンCSSネイティブ化」を 受託パッケージとして整理します。
なぜ「いま」モダンCSSなのか
| 観点 | JS / Sass 依存（従来） | CSS ネイティブ（2026） |
|---|---|---|
| 値の再利用 | Sass 変数・mixin | @function / カスタムプロパティ |
| 条件分岐 | JavaScript で制御 | @function / if() 的記述 |
| パスアニメ | JS ライブラリ | offset-path |
| メディアクエリ | Sass mixin で共通化 | @custom-media |
| ビルド依存 | プリプロセッサ必須 | ブラウザが直接解釈 |
| 保守性 | ビルド環境込みで引き継ぎ | CSS だけで完結 |
つまり ブラウザ自身が高度なCSSを解釈できるようになったことで、受託でも 「JS とビルドツールに頼らず、CSS だけで表現と保守性を両立する」選択肢が現実的になりました。これにより 「軽くて壊れにくいサイト」を成果物として保証できます。
受託案件で活きる 3 つの構造変化
構造 1: 「JS で動かす」から「CSS で動かす」へ
スクロール連動やパス沿いの動きのために重い JS を入れると、表示が遅くなり SEO にも響きます。受託では offset-path などで CSS にアニメーションを寄せ、JS バンドルを削って表示を軽くします。
構造 2: 「Sass 前提」から「CSS だけで完結」へ
Sass の mixin や変数に依存すると、引き継ぎ先にビルド環境ごと渡す必要があります。受託では @function / @custom-media でロジックを CSS に内製化し、ビルド知識がなくても保守できる状態で引き渡します。
構造 3: 「属人的なCSS」から「設計されたCSS」へ
場当たり的なCSSは肥大化します。受託では カスタムプロパティと @function で値・ブレークポイントを一元管理し、変更に強い設計を提供します。
受託で提供する「モダンCSSネイティブ化」5 フェーズ
フェーズ 1: 現状診断（1 週間）
- 既存サイトの JS / CSS 依存の棚卸し
- パフォーマンス計測（Core Web Vitals）
- ブラウザ対応要件（IE 不要 / モダンのみ）の確認
- 置き換え候補（アニメ / 条件分岐 / ブレークポイント）の特定
フェーズ 2: 設計・トークン整理（1 週間）
- カスタムプロパティでデザイントークンを定義
@custom-mediaでブレークポイントを共通化@functionで計算ロジックを CSS に集約- フォールバック方針（古いブラウザ）の決定
フェーズ 3: 実装・置き換え（2〜3 週間）
- JS アニメーションを
offset-pathなどへ移行 - Sass mixin / 変数を CSS ネイティブへ置き換え
- 不要になった JS バンドルの削除
- 段階的な置き換えと回帰確認
フェーズ 4: 検証・最適化（1 週間）
- Core Web Vitals の再計測（改善の定量化）
- 主要ブラウザ / デバイスでの表示確認
- フォールバックの動作検証
フェーズ 5: 引き渡し・保守（継続）
- CSS 設計ドキュメント（トークン / 命名規則）の整備
- 保守 Runbook と更新手順の提供
- 定期的なブラウザ対応レビュー
受託向け技術スタック標準セット
| レイヤ | 推奨技術 | 代替 |
|---|---|---|
| 設計トークン | カスタムプロパティ | Sass 変数（移行元） |
| 計算・条件 | @function | calc() / JS |
| ブレークポイント | @custom-media | Sass mixin |
| アニメーション | offset-path / CSS animation | JS ライブラリ |
| ビルド | Lightning CSS / 最小構成 | PostCSS |
| 計測 | Lighthouse / Core Web Vitals | WebPageTest |
どの案件に必要か / 不要か
| 必要な案件 | 優先度が低い案件 |
|---|---|
| 表示速度が成果に直結（EC / LP） | 社内限定の管理画面 |
| 顧客や別会社が後で更新する | 自社で全面的に保守し続ける |
| JS が肥大化して重い | 既に十分軽量 |
| 長期運用するコーポレートサイト | 短命なキャンペーンページ |
| モダンブラウザ前提で良い | 古いブラウザ対応が必須 |
受託契約に書く 6 つの条項
| 条項 | 内容 | 顧客が確認すべきこと |
|---|---|---|
| 対応ブラウザ | サポート範囲とフォールバック | 古環境の切り捨て可否 |
| 性能目標 | Core Web Vitals 目標値 | 計測条件の合意 |
| JS 削減範囲 | 置き換え対象の明確化 | 機能維持の確認 |
| 設計資産 | トークン / 命名規則の納品 | 自社更新の前提 |
| 引き渡し | ドキュメント / Runbook | 保守体制 |
| 継続保守 | ブラウザ対応レビュー | 運用費用 |
顧客側 ROI 試算（コーポレートサイト / 表示速度改善想定）
| 項目 | 既存（JS 過多） | モダンCSSネイティブ化 | 差分 |
|---|---|---|---|
| 表示速度 | 遅く離脱多い | 軽量で高速 | 直帰率の改善 |
| 保守容易性 | ビルド環境依存 | CSS だけで更新 | 引き継ぎ工数減 |
| SEO 評価 | Core Web Vitals 不利 | 指標改善 | 検索流入の底上げ |
| 改修コスト | 属人的で高い | 設計済みで低い | 年間の運用費減 |
| 年間効果 | — | — | 離脱率改善による機会獲得 + 保守費の継続的削減 |
相応の初期投資でも、表示速度改善による離脱率の数ポイント低下で十分に正当化できます。
ハマりやすい 5 つの落とし穴
落とし穴 1: フォールバックを用意しない
最新機能は古い環境で無視されます。@supports などで段階的に適用します。
落とし穴 2: 何でも CSS に寄せようとする
複雑なインタラクションは JS が適切な場合もあります。役割で使い分けます。
落とし穴 3: トークン設計を後回しにする
場当たりの値は再び肥大化します。先にトークンを定義します。
落とし穴 4: 計測せずに「軽くなった」と言う
体感は当てになりません。Core Web Vitals で定量評価します。
落とし穴 5: ドキュメントを残さない
設計意図が伝わらないと壊されます。命名規則と更新手順を残すことが必須です。
90 日アクションプラン
| 週 | アクション |
|---|---|
| Week 1 | CSS / JS 依存の棚卸し + 計測 |
| Week 2 | トークン設計 + ブレークポイント共通化 |
| Week 3〜5 | JS → CSS 置き換え + バンドル削減 |
| Week 6〜7 | 再計測 + ブラウザ検証 |
| Week 8〜13 | ドキュメント整備 + 保守運用開始 |
まとめ — 「JS で盛る」から「CSS で軽く引き渡す」へ
@function・offset-path・@custom-media のようなモダンCSSネイティブ機能の普及で、表現とロジックを CSS だけで完結できるようになりました。受託でWeb制作を支える立場では、JS 依存を減らし、トークンで設計し、ネイティブ機能で動かし、ビルド知識なしで保守できる状態で引き渡す 「モダンCSSネイティブ化」が、軽くて壊れにくいサイトを成果物として届ける新しい主力サービスです。
「重い JS でサイトが遅い」「引き継いだサイトが壊れやすい」「Core Web Vitals を改善したい」というご相談は お問い合わせフォーム からお気軽にどうぞ。
