2026年5月Web新機能3選｜スクロールアニメーション・ariaNotify・Baseline解説
ブラウザ実装の「待ち」が常識だった時代の終わり
2026年5月、Webプラットフォームに3つの大きな変化が同時に訪れた。Scroll-Triggered Animationsの標準化、ariaNotify()の実用段階、そしてBaseline指標の再定義。それぞれが別々の領域の話に見えるが、これらに共通するのは「開発者が機能を採用するまでの待ち時間」を大幅に短縮する点だ。
CSS Scroll-Triggered AnimationsがChrome 133で安定したことで、スクロール連動アニメーションの実装にJavaScriptライブラリ（ScrollTriggerなど）が不要になった。ariaNotify()は、アクセシビリティツリーに直接通知を送る唯一のAPIとして、ライブラリに依存しないアクセシビリティ実装を可能にした。Baselineは「全ブラウザサポート」の定義を年単位の待機から月単位へと引き上げた。
開発者にとって重要なのは、これらの変化が「使っても大丈夫」の閾値を劇的に下げたことだ。かつては「IEが死ぬまで待て」と言われた時代がある。今や、ある機能がBaselineに到達すれば、それは事実上「全ブラウザで即日使える」を意味する。この転換はワークフロー全体を書き換える。
CSS Scroll-Triggered Animations: JavaScriptを介さないダイレクトなUI
6月のCSS-Tricks記事で詳細が解説されたScroll-Triggered Animationsは、CSSアニメーションの進化の最終形に近い。scroll()、view()、scroll-timelineなどのプロパティにより、スクロール位置や要素のビュー内出現をトリガーにしたアニメーションを、CSSだけで完結できる。
従来のScrollTriggerライブラリと比較した際の最大の差は「読み込み順序」だ。JavaScriptライブラリはDOMの構築後、初期化のタイミングで監視を始める。これに対しCSS Scroll-Triggered Animationsはブラウザのレンダリングパイプラインに組み込まれており、初回ペイントと同時にアニメーションが機能する。FlashやLCPへの影響が理論上ゼロに近い。
ただし、落とし穴もある。現時点ではChrome 133以降のみフルサポート。Firefoxはフラグ付き、Safariは実験的実装段階。2026年6月時点ではBaselineに未到達だが、ベンダー間の実装速度は速い。スクロール駆動アニメーションはデザインのアクセントとして使う分には問題ないが、コア機能（ナビゲーションの表示/非表示など）に使う場合、@supports (animation-timeline: scroll())でフォールバックを用意すべきだ。
ariaNotify(): アクセシビリティの「プッシュ通知」がついに実用化
CSS-Tricksが「Siren Song（誘惑の歌）」と評したariaNotify()は、開発者にとっては美味しい誘惑だが、同時に危うさもはらむ。このAPIは、element.ariaNotify('メッセージ', 'alert');というシンプルな呼び出しで、スクリーンリーダーに即座に通知を送る。従来のライブリージョン（aria-live）がDOMの変化を監視するパッシブな手法だったのに対し、ariaNotify()はアクティブなプッシュ通知に近い。
筆者が注目するのは、ariaNotify()が「アクセシビリティのための専用API」として初めて設計された点だ。これまではDOM操作やCSSの副作用としてアクセシビリティを実現していた。ariaNotify()は「今、この情報を伝えたい」という開発者の意図を直接アクセシビリティツリーに伝える。実装上は、トースト通知やチャットメッセージの到着、フォーム送信の成功/失敗など、時間的即時性が求められる場面で威力を発揮する。
注意すべきは過剰使用だ。CSS-Tricks記事のタイトル通り、このAPIは「使いすぎるとユーザーを混乱させる」という点でSiren Song（人魚の歌）に例えられる。すべてのUI変更にariaNotify()を仕込むと、スクリーンリーダー利用者が情報過多で操作不能に陥る。通知は「ユーザーの現在の操作文脈に関連する情報」に限定する。例えばページ読み込み完了時の「ページが読み込まれました」は不要だが、フォーム送信後の「保存しました」は必要だ。
Baseline再定義: 「全ブラウザサポート」の意味が変わった
4月のBaseline Monthly Digest（baseline-digest-apr-2026）で、Baselineの定義が「2つの主要ブラウザエンジンで安定してから1年」から「2つの主要エンジンで安定した時点」に変更された。これは劇的な短縮だ。これまで開発者は「Safariが実装してから1年待つ」のが常識だった。今やChromeとFirefoxが実装すれば、Safari未サポートでもBaselineとして扱われる。
実務への影響は計り知れない。例えばCSS Scroll-Triggered AnimationsはChromeとFirefox（実験的）が先行している。従来であれば「Safariが実装してから1年後」、つまり2027年以降にしか使えなかった。新しい定義では、Safari未サポートでもChromeとFirefox両方が安定すればBaseline入りする。つまり2026年内にこの機能が「使ってよい」リストに加わる可能性が高い。
この変更の背景には、Appleの実装ペースの遅さに対する業界の苛立ちがある。SafariはWeb ComponentsやCSS Nestingなどの重要な機能を1年以上遅れて実装してきた。Baselineを「待つ側」の指標から「先行する側」の指標に変えることで、Appleに実装圧力をかける狙いも透ける。開発者としては、Baselineが「全ブラウザサポートの完了」ではなく「事実上の標準として安全に使える」という意味に変わったことを認識し、プロジェクトのブラウザサポートポリシーを見直す時期に来ている。
次に来るもの: 3つの機能が交差する2026年後半
これら3つの変化は独立しているが、実際の開発現場では交差する。Scroll-Triggered AnimationsとariaNotify()を組み合わせれば、スクロール位置に応じた通知が可能になる。例えば「お知らせセクションが表示されました」という通知を、スクロールトリガーで発火させる。さらにBaseline再定義により、これらの新機能をプロダクションで使う判断が従来より早く下せる。
2026年後半に注目すべきは、CSS View Transitions APIとの連携だ。Scroll-Triggered Animationsでスクロール位置を管理し、View Transitionsでページ間遷移をアニメートする。ariaNotify()でアクセシビリティを担保する。この3層構造が、JavaScriptライブラリなしで実現できる時代が目前に迫っている。
開発者に求められるのは、新機能を「使いたいから使う」のではなく、「ユーザー体験を何段階引き上げられるか」で判断する姿勢だ。Scroll-Triggered Animationsはパフォーマンスの壁を越えた。ariaNotify()はアクセシビリティの壁を越えた。Baselineは採用判断の壁を越えた。あとは開発者がそれをどう料理するかだけだ。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！