メインコンテンツへスキップ
Code & Craft
Web制作 約8分で読めます

View Transitions API 完全ガイド｜SPAライクなページ遷移を実装する【2026年版】

View Transitions APIで実現する滑らかなページ遷移を実例で解説。Multi-Page App（MPA）でもSPAのような体験を作る方法と、Astroでの活用パターンを完全網羅。

Web サイトを SPA（Single Page Application）にする最大の理由の一つは「ページ遷移時の滑らかなアニメーション」でした。しかし View Transitions API の登場により、Multi-Page Application（MPA）でも SPA 並みの滑らかな遷移が実現できるようになりました。しかもフレームワーク不要で、標準 Web API として使えます。

View Transitions API とは

View Transitions API は、DOM の変更前後の状態を自動的にクロスフェードする機能です。

  • 同一ページ内の DOM 変更: Same-Document View Transitions
  • ページ間の遷移: Cross-Document View Transitions（2024年から Chrome でサポート）

JavaScript をほぼ書かず、CSS だけで洗練された遷移アニメーションを実現できます。

ブラウザ対応（2026年4月）

機能ChromeSafariFirefox
Same-Document111+ (2023/3)18+ (2024/9)未対応
Cross-Document126+ (2024/6)未対応未対応

Chrome での対応が先行していますが、Safari も Same-Document の対応は済んでいます。Firefox はまだ実装中ですが、@supports でフォールバックを用意すれば問題ありません。

Same-Document View Transitions

同じページ内で DOM を変更する際の遷移です。

基本的な使い方

function updateContent() {
  if (!document.startViewTransition) {
    // フォールバック: 通常通り DOM を更新
    document.querySelector('.content').innerHTML = newContent;
    return;
  }

  // View Transition でラップ
  document.startViewTransition(() => {
    document.querySelector('.content').innerHTML = newContent;
  });
}

たったこれだけで、DOM 変更前後の状態が自動的にクロスフェードされます。

CSS でアニメーションをカスタマイズ

/* デフォルトのフェード遷移を無効化 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* カスタムアニメーション: スライド */
::view-transition-old(root) {
  animation: slide-out 0.3s ease-in;
}

::view-transition-new(root) {
  animation: slide-in 0.3s ease-out;
}

@keyframes slide-out {
  to { transform: translateX(-100%); }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

特定要素の遷移をカスタマイズ

view-transition-name プロパティで名前を付けると、その要素だけ個別の遷移を定義できます。

.hero-image {
  view-transition-name: hero-image;
}
::view-transition-old(hero-image),
::view-transition-new(hero-image) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

これにより、同じ画像がページ間で滑らかに移動する「Shared Element Transition」が実現できます。

Cross-Document View Transitions

MPA でのページ遷移にも適用できます。

必要な設定

<meta name="view-transition" content="same-origin" />

または CSS で:

@view-transition {
  navigation: auto;
}

これだけで、同一オリジン内のリンク遷移が自動的にクロスフェードされます。JavaScript は不要です。

ナビゲーションイベントでのカスタマイズ

window.addEventListener('pageswap', (event) => {
  if (event.viewTransition) {
    // 特定の要素に名前を付けて遷移
    document.querySelector('.hero').style.viewTransitionName = 'hero';
  }
});

実践パターン

1. 記事一覧 → 記事詳細のヒーロー画像遷移

/* 一覧ページのサムネイル */
.post-card-image {
  view-transition-name: post-image;
}

/* 詳細ページのヒーロー画像 */
.post-hero-image {
  view-transition-name: post-image;
}

同じ view-transition-name を付けることで、ページ間で画像がスムーズに遷移します。

2. ナビゲーションバーの固定

.site-header {
  view-transition-name: site-header;
}

::view-transition-group(site-header) {
  animation-duration: 0s;
}

ヘッダーがページ間で「動かない」ように見せることができます。

3. カスタムアニメーション: スケール + フェード

::view-transition-old(root) {
  animation: fade-scale-out 0.3s ease-out forwards;
}

::view-transition-new(root) {
  animation: fade-scale-in 0.3s ease-out forwards;
}

@keyframes fade-scale-out {
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes fade-scale-in {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
}

Astro での活用

Astro はビルトインで View Transitions をサポートしています。

---
import { ViewTransitions } from 'astro:transitions';
---

<html>
<head>
  <ViewTransitions />
</head>
<body>
  <slot />
</body>
</html>

<ViewTransitions /> を <head> に追加するだけで、全ページ遷移に滑らかなアニメーションが適用されます。

個別要素の遷移指定

<img
  src="/hero.jpg"
  transition:name="hero"
  transition:animate="slide"
/>

transition:name と transition:animate 属性で、要素ごとの遷移を制御できます。

アクセシビリティ対応

prefers-reduced-motion への対応を忘れずに。

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

視差効果を減らしたいユーザーには、アニメーションをスキップする配慮が必要です。

パフォーマンスへの影響

View Transitions はブラウザがスナップショットを撮影するため、以下に注意します。

1. 大きな画像・複雑なレイアウトは重い

遷移対象の要素が多い・大きいと、スナップショット撮影に時間がかかります。主要な要素だけに view-transition-name を付けましょう。

2. アニメーション時間は短く

0.2〜0.3秒程度が体感的に自然で、かつパフォーマンス影響も少ないです。

::view-transition-group(*) {
  animation-duration: 0.25s;
}

3. メインスレッドをブロックしない

コンポジターレイヤーで実行されるため、メインスレッドを使わず60fpsが保証されます。

JavaScript なしでもできること

実は最もシンプルな形では、JavaScript を一行も書かずに済みます。

@view-transition {
  navigation: auto;
}

この一行を CSS に追加するだけで、同一オリジン内の全ページ遷移がフェードアニメーションになります。まさに「最小コスト・最大効果」の代表例です。

まとめ

View Transitions API により、Web における「SPA vs MPA」の議論は大きく変わりました。

MPA で実現できるようになったこと:

  • ページ間の滑らかな遷移
  • Shared Element Transition
  • カスタマイズ可能なアニメーション

従来の SPA と比較したメリット:

  • 初回ロードが速い
  • SEO に強い
  • JavaScript の依存が少ない
  • フレームワーク不要

Astro のような現代的な MPA フレームワークと View Transitions API を組み合わせることで、SPA のような体験 + MPA のメリットを両立できます。

参考リンク

#JavaScript #アニメーション #パフォーマンス #Web API #Astro
シェア:

関連記事

Web制作

Astro Prerenderで動的ルートを完全静的化する方法｜SSG+動的パスでSEO最大化【2026年4月最新】

Web制作

Astro Hybrid Rendering vs SSR どっちを選ぶ【パフォーマンス比較】

Web制作

Next.js 15 Server Actions のエラーハンドリング実装｜フォームバリデーション・非同期処理の正解【2026年最新】

← 記事一覧に戻る