「この CSS、まだ IE で対応必要ですか？」という問い合わせは 2026 年には減りましたが、代わりに 「Safari と Chrome のどっちが対応してる？」「モバイルで動かなかったら契約違反？」という論点が増えています。
web.dev が 2026 年 4 月に公開した March 2026 Baseline monthly digestは、こうした「どの機能がいつから安全に使えるか」の公式基準を更新するシリーズの最新版です。Baseline の仕様を正しく使えば、受託見積もりの互換性リスクも、顧客との認識齟齬も大幅に減らせます。
本記事では、Baseline の仕組みのおさらいから、コーポレートサイト受託における活用、そして契約書に落とし込む勘所までを整理します。
Baseline とは何か（2026 年版おさらい）
2 つの Baseline ステージ
- Baseline: Newly available — 主要ブラウザすべてが最新版で対応済み
- Baseline: Widely available — 最新対応から 30 ヶ月経過し、十分に普及したと判定される
Widely available は、コーポレートサイトや BtoB LP の安全圏として扱えます。Newly available は 2〜3 年後の普及を見込んで、実験枠として採用する判断が現実的です。
どこで確認できるか
- web.dev/baseline ― 機能別の対応状況と Baseline ステータス
- caniuse.com ― Baseline バッジが統合され、UI 上で見やすい
- MDN の各機能ページにも Baseline 表示が標準化
2026 年 3 月時点で “Widely available” に昇格した主要機能（抜粋）
| 機能 | 受託での使い所 |
|---|---|
CSS :has() | 親要素の条件分岐、ナビの状態表現 |
| CSS Nesting | スタイル保守性の改善 |
View Transitions API （同一ドキュメント） | ページ内遷移の洗練 |
subgrid | 複雑なコーポレートレイアウト |
fetchpriority | LCP 改善 |
dialog 要素 | モーダル・同意ダイアログの標準化 |
このセットはコーポレートサイト / LP 案件では全面採用可と判断できる水準になっています。
Baseline を軸に受託見積もりを組む 4 つの効果
効果 1：ブラウザサポート範囲を “定数” にできる
「IE は対応外、各主要ブラウザの最新 2 世代と Widely available 機能まで」のように、契約書の互換性条項をBaseline 参照に寄せることで、毎回議論する手間が消えます。
効果 2：モダンな表現の提案ハードルが下がる
View Transitions や Scroll-driven Animation のような動きのある表現も、「Widely available になったので採用可」と説明すれば、PM / ディレクター / 顧客の合意が取りやすくなります。View Transitions でコーポレートサイト の設計判断が、契約上もクリアに通せるようになります。
効果 3：ポリフィル戦略のコストが読める
Newly available 段階の機能は、Progressive Enhancement（段階的機能拡張）を前提に採用。ポリフィルを入れるか、機能をフォールバックさせるかをBaseline ステータスベースで機械的に判断できます。
効果 4：顧客との認識齟齬を減らせる
「Safari では動きが違う」「Firefox の挙動が…」という指摘を、Baseline の対応状況スクリーンショットで即座に回答できるため、レビューの往復回数が減ります。
コーポレートサイト構築での Baseline 実践パターン
パターン A：Baseline Widely only 構成（最も安全）
- CSS は
Widely available機能のみ - JavaScript の新 API も
Widely availableに限定 - ブラウザ要件：各主要ブラウザの最新 2〜3 世代
- 想定案件：BtoB コーポレートサイト / 上場企業 IR サイト
パターン B：Baseline + Progressive Enhancement（推奨）
- ベースは
Widely availableで構築 Newly availableは装飾的機能として Progressive に追加- View Transitions や高度なアニメーションはここに配置
- 想定案件：モダンブランドサイト / スタートアップ LP / メディアサイト
パターン C：最先端採用（実験枠）
- 採用済み技術：CSS 2026 春の新機能 で触れたような新機能をフルに使う
- Baseline 未達でもコンセプト重視で採用
- 想定案件：キャンペーンサイト / 期間限定 LP / プロモーション
3 パターンを案件特性で使い分けることが、品質と表現力のバランスを取る最短経路です。
Astro で組むときの Baseline ベース設定テンプレ
ブラウザターゲット
// astro.config.mjs
export default defineConfig({
vite: {
build: {
target: 'baseline-widely-available', // or ['chrome120', 'safari17', 'firefox120']
},
},
});CSS の扱い
- PostCSS の
postcss-preset-envで Baseline ステージを指定 :has()・:is()・CSS Nesting は素の CSS でそのまま採用subgridは Widely available 昇格済みなので主要レイアウトにも採用可
フォント・画像最適化
fetchpriority="high"は LCP 要素に対して標準採用- AVIF / WebP の分岐は
<picture>でシンプルに loading="lazy"は最初のビューポート外の画像に自動付与
この構成をプラットフォームチームの Golden Path（プラットフォームエンジニアリング 4 ステップ 参照）に組み込むと、複数案件での品質が揃います。
Baseline を契約書に組み込む実例
対応ブラウザ条項の書き方（例）
第 X 条（対応ブラウザ） 納品物が動作保証するブラウザは、次のいずれかを満たすものとする。
- Chrome / Safari / Edge / Firefox の最新 2 世代
- Web Platform Baseline: Widely available 機能で実装された範囲 装飾的な演出機能（アニメーション等）は、Baseline: Newly available 機能による Progressive Enhancement として提供し、未対応ブラウザでも主要機能の動作を阻害しない設計とする。
この書き方で、レガシーブラウザ対応の責任範囲が明確になります。
追加対応のスコープ管理
- IE や Legacy Edge 対応 → 別見積 + 別期間
- 特定業界固有のブラウザ（業務端末等） → 事前確認の上で個別見積
- Baseline 未達機能の追加 → 実験枠として合意
受託で “Baseline 監査” をサービス化する
サービス化の切り口
既存サイトに対して、Baseline 監査レポートをパッケージ商品にできます。
| 項目 | 内容 |
|---|---|
| 利用 API の棚卸し | CSS / JS の採用機能を全列挙 |
| Baseline ステータス判定 | 各機能の Widely / Newly / Limited を可視化 |
| リスク評価 | Limited 機能の影響範囲と代替案 |
| 改善ロードマップ | 3 ヶ月 / 6 ヶ月スパンでの近代化計画 |
コアウェブバイタルガイド や SEO 初心者ガイド と組み合わせて、サイト近代化パッケージとして売り込めます。
顧客説明テンプレート（経営層向け）
| 技術用語 | 経営層向け表現 |
|---|---|
| Web Platform Baseline | 「主要ブラウザで安全に使える機能の公式リスト」 |
| Widely available | 「十分に普及して安心して採用できる機能」 |
| Newly available | 「最新ブラウザに揃ったばかりで様子見枠の機能」 |
| Progressive Enhancement | 「対応ブラウザから順に体験を強化する作り方」 |
「ブラウザ対応範囲を業界標準に揃える」と言うと、顧客の意思決定が早まります。
まとめ ― “互換性の議論” を定数化するための Baseline
Web Platform Baseline は、コーポレートサイト受託における互換性の不確実性を可視化する公式基準です。現場で押さえるべきは次の 3 点：
- 契約書のブラウザ対応条項を Baseline 参照で定数化する
- Widely + Progressive Enhancement を標準構成として持つ
- 既存サイトには Baseline 監査を切り口にした近代化提案を行う
弊社 GleamHub では、Astro によるコーポレートサイト構築、Baseline Widely 準拠のモダンサイト設計、既存サイトの Baseline 監査とリニューアル提案、View Transitions を含むモダンな表現を安全に採用する実装支援まで、「互換性の議論」を定数化した受託制作を提供しています。ブラウザ対応の齟齬でプロジェクトが停滞している企業様、サイトの近代化を検討しつつ何から着手すべきか迷っている企業様は、1〜2 週間の Baseline 監査からお気軽にご相談ください。表現と互換性を両立した、次の 5 年を戦えるコーポレートサイト設計をご提案します。
