2024年Chrome 126+対応の新Web API。SPA→MPA Cross-Document Transition+@view-transition rule+page navigation animations+Multi-Page App移行支援搭載。
View Transitions Cross-Documentは2024年6月にChrome 126で正式採用された新Web APIで、従来 Same-document(SPA内ページ遷移)のみ対応していたView Transitions APIを、Cross-document(MPA・通常Webサイトのページ間遷移)にも拡張した仕様。サーバーサイドレンダリング(SSR)で構築されたMulti-Page Applicationでも、SPAのようなネイティブアプリ風の滑らかなトランジション(フェード・スライド・モーフィング)を実現できる。@view-transition CSS rule・JavaScript Navigation API連携・MutationObserver不要のシンプル設計が特徴。Astro 5.0(2024年12月)・Next.js 15・Nuxt 3.10+等の主要Meta-frameworkが公式サポートを開始し、SPA回避+SEO重視+UX向上を両立する次世代Webサイト構築の基盤技術として急速に普及している。
@view-transition { navigation: auto; } 1行で有効化view-transition-name: hero で要素紐付け::view-transition-old(name)/::view-transition-new(name) で詳細制御pageswap/pagereveal Eventで動的制御、特定遷移のみ無効化可能<meta name="view-transition" content="same-origin"> でscope制御--vt-name で動的に view-transition-name 切替| 項目 | VT Cross-Document | VT Same-Document (SPA) | Browser Default | View Transitions Polyfill |
|---|---|---|---|---|
| 対象 | MPA間ページ遷移 | SPA内コンポーネント遷移 | 何もなし | SPA内コンポーネント遷移 |
| Browser Support | Chrome 126+ | Chrome 111+ | 全ブラウザ | 全ブラウザ |
| JavaScript必須 | × (CSS only可) | △ (document.startViewTransition()) | - | ○ |
| 設定 | @view-transition rule | document.startViewTransition() | - | npm install |
| Bundle Size | 0KB | 0KB (Native) | - | ~5KB |
| カスタマイズ | ::view-transition pseudo | ::view-transition pseudo | - | API限定 |
| パフォーマンス | Native(GPU加速) | Native(GPU加速) | - | JavaScript |
| SEO | 完全対応 | 完全対応 | - | 完全対応 |
/* 基本的なCross-Document Transition */
@view-transition {
navigation: auto;
}
/* Hero画像の滑らかなモーフィング */
.hero-image {
view-transition-name: hero-image;
}
/* カスタムアニメーション */
::view-transition-old(hero-image) {
animation: fade-out 300ms ease-out;
}
::view-transition-new(hero-image) {
animation: fade-in 300ms ease-out;
}
<ClientRouter /> componentで簡単統合useViewTransition composable提供View Transitions Cross-DocumentはWeb開発者向けの新Web APIで、自作PCの選択とは直接関係しないが、jisaku.com開発者として深く理解すべき重要技術。jisaku.com Web Frontend(Next.js 16+SSR)では、Cross-Document View Transitionsを採用することで、ページ遷移のUX大幅改善+SEO最適化(MPA構造維持)を両立できる。実装は@view-transition { navigation: auto; } を1行追加するだけで基本動作が有効化される。詳細なカスタマイズは view-transition-name を主要要素(ヘッダー・サイドバー・記事カード等)に付与し、::view-transition-old/new pseudo-elementsでアニメーション定義。jisaku.com の記事カード→記事詳細ページ遷移で、サムネイル画像をモーフィングさせる効果はSEO+UX両面で価値が高い。Chrome 126+のみで動作するため、Safari・Firefox向けには段階的劣化(Graceful Degradation)で通常遷移にフォールバック。Astro 5.0採用時は <ClientRouter /> componentで自動統合可能。Lighthouseスコアへの影響は軽微で、LCP/CLS/INP全指標で正常測定される。Vercel Analytics上で View Transitions有効ユーザー比率を計測しUX改善効果を確認推奨。
View Transitions Same-Document(SPA)との違い: Same-DocumentはSPA内のコンポーネント切替、Cross-DocumentはMPA間ページ遷移。前者は2023年Chrome 111+で先行実装、後者は2024年Chrome 126+で拡張。CSS構文は共通だが、JavaScript連携が異なる(opt-in/out方法等)。 Astro Transitions(独自実装)との違い: Astro 4.0以前はAstro独自JavaScript実装、Astro 5.0以降はView Transitions Cross-Document Native API採用。Bundle Size削減+ブラウザネイティブ性能で優位、Polyfillで他ブラウザフォールバック。
Q1: SPA(Next.js App Router)でCross-Documentは必要？ A: 必要なし。SPAは Same-Document View Transitionsで十分(Same-Documentもネイティブ対応)。Cross-Documentは「Server Componentsを多用するMPA寄りNext.js構成」または「Astro/通常HTML多ページサイト」で価値を発揮する。
Q2: SafariはまだView Transitions Cross-Document非対応だが？
A: 段階的劣化でOK。@view-transition { navigation: auto; } は対応ブラウザのみ反応、非対応ブラウザは通常のページ遷移。SafariユーザーはViewer体験で違いを認知できないため、Chrome優先実装で問題なし。Safari TPで実装進行中(2025年Q2 GA予想)。
Q3: Lighthouse/INP scoreへの影響は？ A: 通常はNeutral〜Positive。View Transitionsはネイティブ実装でGPU加速・低オーバーヘッド、INPメトリックでJavaScript-based トランジションより明らかに優位。アニメーション期間 300ms-500ms以下なら INP score 200ms未満維持可能。