View Transitions Cross-Documentとは？（ビュートランジションズクロスドキュメント）意味・特徴をわかりやすく解説

Q: View Transitions Cross-Documentとは？

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 CSS rule: @view-transition { navigation: auto; } 1行で有効化
MPA間ページ遷移: SSRサイト(Astro/Next.js MPA Mode)でも滑らかな遷移
Same-Document API互換: 既存のView Transitions APIと完全互換、JavaScriptコード共通
view-transition-name: 遷移時の対応要素を識別、view-transition-name: hero で要素紐付け
CSS Animation連携: ::view-transition-old(name)/::view-transition-new(name) で詳細制御
JavaScript opt-in/out: pageswap/pagereveal Eventで動的制御、特定遷移のみ無効化可能
type 属性: <meta name="view-transition" content="same-origin"> でscope制御
navigation: auto: 同一originのリンク・履歴Back/Forward全自動対応
CSS Custom Properties: --vt-name で動的に view-transition-name 切替
Lighthouse対応: トランジション中もLargest Contentful Paint(LCP)正常測定
Browser Support: Chrome 126+(stable)、Edge 126+、Safari TP・Firefox 実装中

スペック比較表

項目	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;
}

Chrome 126+ stable: 2024年6月リリース、フル機能Cross-Document対応
Astro 5.0: 2024年12月公開、<ClientRouter /> componentで簡単統合
Next.js 15: App Router でCross-Document対応、Server Components連携
Nuxt 3.10+: Nitro 2.x基盤、useViewTransition composable提供
競合機種: Astro Transitions(Astro 4.0以前のCustom実装)、Barba.js(JavaScript Library)、Turbo Drive(Hotwire)

自作PCでの選び方・注意点

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改善効果を確認推奨。

よくある質問（FAQ）

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未満維持可能。

まとめ

View Transitions Cross-Document = 2024年6月Chrome 126+対応新Web API
@view-transition CSS rule で MPA間遷移を1行有効化
Astro 5.0/Next.js 15/Nuxt 3.10+公式サポート
Same-Document API互換、JavaScript非依存も可能
SPA回避+SEO重視+UX向上の次世代Webサイト構築基盤

View Transitions Cross-Document（ビュートランジションズクロスドキュメント）

概要