View Transitions APIの使い方完全ガイド｜SPA・MPA実装からブラウザ対応・SEOへの影響まで

ページ遷移のたびに画面が一瞬で切り替わり、「少し味気ない」「UXとしてもう一段階よくしたい」と感じたことはありませんか。一方で、JavaScriptでページ遷移アニメーションを実装しようとすると、コードが複雑になったり、パフォーマンスや保守性が気になったりすることも多いはずです。

そんな悩みを解決する新しい選択肢として注目されているのが View Transitions API です。「view transitions api 使い方」と検索している方の多くは、「実際に何ができるのか」「本番サイトで使って問題ないのか」「どうやって実装すればよいのか」といった実務目線の疑問を持っているのではないでしょうか。

本記事では、View Transitions APIの基本的な考え方から、HTML・CSS・JavaScriptだけで試せる最小実装、MPA（通常のHTMLサイト）でのページ遷移アニメーションの作り方まで、段階的に分かりやすく解説します。さらに、対応ブラウザやCore Web Vitals・SEOへの影響、実務で「使っていいケース／避けるべきケース」まで踏み込み、「結局、今使うべきかどうか」を判断できる内容をまとめました。

「ページ遷移をもっと自然にしたい」「複雑なJSを書かずに今風の演出を入れたい」と考えている方は、ぜひ最後まで読み進めてみてください。

View Transitions APIの基本とできること

View Transitions APIとは?従来のJSアニメーションとの違いとユースケース

View Transitions APIは、Webページ間やDOM要素の状態変化を滑らかなアニメーションで表現するための新しいブラウザ標準APIです。従来、ページ遷移時のアニメーションを実装するには、複雑なJavaScriptコードやCSSトランジションを組み合わせる必要がありましたが、View Transitions APIを使えば、わずか数行のコードで洗練されたトランジションアニメーションを実現できます。

従来のアニメーション手法との違い

従来のJavaScriptアニメーションでは、開発者が手動で以下のような処理を実装する必要がありました。

• DOM要素の現在の状態をキャプチャ
• 新しい状態へのDOM更新
• 古い状態と新しい状態の差分を計算
• CSSトランジションやアニメーションライブラリでの補間

これに対してView Transitions APIは、ブラウザがこれらの処理を自動的に行います。具体的には、変更前の画面を自動でスクリーンショット撮影し、変更後の画面との間でクロスフェードやスライドなどのアニメーションを生成します。開発者はdocument.startViewTransition()を呼び出すだけで、複雑なアニメーションロジックを書く必要がありません。

主なユースケース

View Transitions APIが特に効果を発揮するのは、以下のようなシーンです。

• SPAでの画面遷移:
  Reactや Vue.jsなどのシングルページアプリケーションで、ページ間の切り替え時にネイティブアプリのような滑らかな遷移を実現できます。ルーティングライブラリと組み合わせることで、ユーザー体験を大きく向上させられます。
• MPAでのページ遷移:
  通常のHTMLサイト(マルチページアプリケーション)でも、クロスドキュメントView Transitionsを使えば、ページ読み込み時の白い画面フラッシュを防ぎ、シームレスな遷移を実現できます。
• 画像ギャラリーや詳細表示:
  サムネイル画像をクリックして拡大表示する際、その画像が元の位置からスムーズに拡大していくアニメーションを簡単に実装できます。いわゆる「Shared Element Transition」と呼ばれる効果です。
• リスト項目の並び替え:
  ソート機能やフィルタリング機能で、リスト項目が滑らかに移動するアニメーションを自動生成できます。
• モーダルやサイドバー:
  オーバーレイ要素の表示・非表示時に、フェードインやスライドインのアニメーションを簡単に追加できます。

View Transitions APIで実現できるページ遷移アニメーションの具体例

View Transitions APIを使うと、以下のような多彩なアニメーション表現が可能になります。

クロスフェード(デフォルト動作)

最も基本的なアニメーションで、古いページがフェードアウトしながら、新しいページがフェードインします。特にCSSを指定しなくても、このクロスフェードアニメーションが自動的に適用されます。ブログ記事の遷移やシンプルなページ切り替えに適しています。

スライドアニメーション

左右や上下にページがスライドして切り替わるアニメーションです。カルーセルやステップ形式のフォーム、タブ切り替えなどでよく使われます。CSSのtransformプロパティを::view-transition-oldと::view-transition-new疑似要素に指定することで実現できます。

拡大・縮小アニメーション

特定の要素(カードや画像など)が画面全体に拡大する、またはその逆のアニメーションです。view-transition-nameというCSS プロパティを使うことで、要素間の対応関係を定義し、その要素だけを追跡してアニメーションさせられます。

モーフィングアニメーション

複数の要素が同時に異なる位置・サイズに変化するアニメーションです。例えば、商品一覧ページの商品カードが詳細ページの各セクションに分解されていくような表現が可能です。各要素に固有のview-transition-nameを付与することで実現します。

フリップアニメーション

リスト項目が追加・削除・並び替えられる際に、各項目が滑らかに移動するアニメーションです。FLIP(First, Last, Invert, Play)テクニックを手動で実装する必要がなく、View Transitions APIが自動的に最適なアニメーションパスを計算してくれます。

SPAとMPAで挙動がどう違う?同一ドキュメント遷移とクロスドキュメント遷移の概要

View Transitions APIには、同一ドキュメント遷移(Same-Document Transitions)とクロスドキュメント遷移(Cross-Document Transitions)という2つの動作モードがあります。それぞれSPAとMPAに対応しており、実装方法や制約が異なります。

同一ドキュメント遷移(SPA向け)

同一ドキュメント遷移は、ページ全体をリロードせずにDOM を更新する場合に使用します。つまり、ReactやVueなどのSPAフレームワークでの画面遷移がこれに該当します。

特徴:

• document.startViewTransition()メソッドを明示的に呼び出す必要がある
• DOM更新のタイミングを完全にJavaScriptで制御できる
• ブラウザ対応が比較的早く進んでいる(Chrome 111+で利用可能)
• 複雑なステート管理やルーティングと組み合わせやすい

実装イメージ:

function navigateToPage(newContent) {
  document.startViewTransition(() => {
    document.querySelector('#app').innerHTML = newContent;
  });
}

クロスドキュメント遷移(MPA向け)

クロスドキュメント遷移は、従来のWebサイトのように、リンクをクリックして別のHTMLページに移動する場合に使用します。通常のマルチページアプリケーションでの実装がこれに該当します。

特徴:

• CSSで@view-transitionを宣言するだけで有効化できる(JavaScriptは基本不要)
• ページナビゲーション時に自動的にトランジションが適用される
• ブラウザ対応が限定的(Chrome 126+、2024年中頃に実装)
• 同一オリジン間の遷移のみ対応

実装イメージ:

@view-transition {
  navigation: auto;
}

この1行のCSSを両方のページに記述するだけで、ページ遷移時にView Transitionsが自動的に適用されます。

どちらを選ぶべきか?

選択基準はシンプルです。

• SPAを構築している: 同一ドキュメント遷移を使用
• 通常のHTML サイト(MPA)を構築している: クロスドキュメント遷移を使用
• 両方の機能が必要: ハイブリッドアプローチも可能(一部のページ内遷移は同一ドキュメント、他のページ間遷移はクロスドキュメント)

実務では、既存のプロジェクトの構造に合わせて選択することになります。新規プロジェクトであれば、SPAかMPAかのアーキテクチャ選択と連動して決定します。次のセクションでは、それぞれの具体的な実装方法を詳しく解説していきます。

View Transitions APIの基本的な使い方と最小実装

document.startViewTransition()の使い方と処理の流れ

View Transitions APIの中心となるのがdocument.startViewTransition()メソッドです。このメソッドは、DOM更新をラップしてアニメーション付きの状態遷移を実現します。基本的な使い方は非常にシンプルです。

基本構文

document.startViewTransition(() => {
  // ここでDOMを更新する処理を記述
  element.textContent = '新しいコンテンツ';
});

このメソッドにコールバック関数を渡すと、ブラウザは以下の手順で自動的にトランジションアニメーションを実行します。

内部的な処理の流れ

View Transitions APIがバックグラウンドで実行している処理を理解すると、より効果的に活用できます。

1. 現在の状態をキャプチャ:
   startViewTransition()が呼び出されると、ブラウザはまず現在のページの見た目(レンダリング結果)をスクリーンショットとして保存します。この画像が「old」状態として記録されます。
2. DOM更新の実行:
   次に、コールバック関数内のDOM更新処理が実行されます。innerHTMLの変更、要素の追加・削除、クラス名の変更など、どんなDOM操作でも可能です。
3. 新しい状態をキャプチャ:
   DOM更新が完了すると、ブラウザは更新後のページの見た目を再度スクリーンショットとして保存します。これが「new」状態です。
4. トランジションアニメーションの生成:
   ブラウザはold状態とnew状態の2枚の画像を使って、自動的にクロスフェードアニメーションを生成します。デフォルトでは約200ミリ秒のフェード効果が適用されます。
5. アニメーションの実行と完了:
   アニメーションが再生され、完了するとトランジションは終了します。このプロセス全体は非同期で行われ、Promiseを返すため、完了を待つこともできます。

Promiseを使った高度な制御

startViewTransition()はViewTransitionオブジェクトを返し、複数のPromiseを提供しています。

const transition = document.startViewTransition(() => {
  updateDOM();
});

// DOM更新が完了したタイミング
transition.updateCallbackDone.then(() => {
  console.log('DOM更新完了');
});

// アニメーションが準備できたタイミング
transition.ready.then(() => {
  console.log('アニメーション開始準備完了');
});

// アニメーションが完全に終了したタイミング
transition.finished.then(() => {
  console.log('トランジション完了');
});

これらのPromiseを使うことで、トランジションの各段階で追加の処理を実行できます。例えば、アニメーション完了後にフォーカスを移動させる、アナリティクスイベントを送信する、などの処理が可能です。

あわせて読みたい

もう迷わない！Promise・async/awaitで非同期処理を“同期処理風”に書く方法

JavaScriptの非同期処理を同期的に制御したい方向けに、Promise・async/awaitの使い方や処理順序の管理方法を解説。同期・非同期の違いやイベントループの仕組み、API通信を順に実行するテクニック、React/Next.jsでの実装例まで網羅。非同期処理のつまずきポイントを避けたい方におすすめです。

watashi.xyz

2025.07.17

ブラウザ対応の確認とフォールバック

View Transitions APIは比較的新しい機能のため、古いブラウザでは動作しません。実装時は必ず対応状況を確認する必要があります。

if (document.startViewTransition) {
  // View Transitions APIが利用可能
  document.startViewTransition(() => {
    updateDOM();
  });
} else {
  // フォールバック: 通常のDOM更新
  updateDOM();
}

このようにフィーチャーディテクションを行うことで、対応ブラウザではアニメーション付き、非対応ブラウザでは通常の更新という形でグレースフルデグラデーションを実現できます。

HTML・CSS・JavaScriptだけで動く最小サンプルコード

ここでは、フレームワークを使わずに、純粋なHTML・CSS・JavaScriptだけで動作する最小限のView Transitionsサンプルを紹介します。このコードをコピーしてHTMLファイルに貼り付けるだけで、すぐに動作を確認できます。

最小実装サンプル

<div class="container" id="content">
  <h1>状態 A</h1>
  <p>View Transitions APIのデモ</p>
</div>

<button id="toggleBtn">状態を切り替える</button>

body {
  font-family: system-ui, sans-serif;
  max-width: 600px;
  margin: 50px auto;
  padding: 20px;
}

.container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container.state-b {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

button {
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 16px;
  background: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  color: #667eea;
}

button:hover {
  transform: scale(1.05);
}

h1 {
  margin: 0 0 10px;
  font-size: 2em;
}

p {
  margin: 0;
  opacity: 0.9;
}

const content = document.getElementById("content");
const btn = document.getElementById("toggleBtn");
let isStateA = true;

btn.addEventListener("click", () => {
  // View Transitions APIが利用可能かチェック
  if (!document.startViewTransition) {
    // フォールバック: 通常の更新
    toggleContent();
    return;
  }

  // View Transitionsを使って状態を切り替え
  document.startViewTransition(() => {
    toggleContent();
  });
});

function toggleContent() {
  if (isStateA) {
    content.innerHTML = `
          <h1>状態 B</h1>
          <p>滑らかに切り替わりました!</p>
        `;
    content.classList.add("state-b");
  } else {
    content.innerHTML = `
          <h1>状態 A</h1>
          <p>View Transitions APIのデモ</p>
        `;
    content.classList.remove("state-b");
  }
  isStateA = !isStateA;
}

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

サンプルの動作説明

このサンプルでは、ボタンをクリックするたびに2つの状態が切り替わります。

• 状態A: 紫系のグラデーション背景
• 状態B: ピンク系のグラデーション背景

View Transitions APIが有効な環境では、状態遷移時に滑らかなクロスフェードアニメーションが自動的に適用されます。古いブラウザでは、アニメーションなしで瞬時に切り替わります。

コードのポイント

• フィーチャーディテクション:
  if (!document.startViewTransition)で対応状況を確認し、非対応ブラウザでもエラーが出ないようにしています。
• DOM更新の分離:
  toggleContent()関数として更新ロジックを分離することで、View Transitionsの有無に関わらず同じ更新処理を使えます。
• シンプルな構造:
  フレームワーク不要で、HTML・CSS・JavaScriptの基本だけで動作します。学習やプロトタイピングに最適です。

::view-transition-old / ::view-transition-new の基本CSS指定

View Transitions APIのアニメーションは、特殊な疑似要素を使ってCSSでカスタマイズできます。デフォルトのクロスフェードだけでなく、スライドや回転など、様々なアニメーション効果を追加できます。

基本的な疑似要素の構造

View Transitionsが実行されると、ブラウザは以下のような疑似要素ツリーを自動生成します。

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

それぞれの役割は以下の通りです。

• ::view-transition:
  トランジション全体のルート要素。画面全体を覆うコンテナとして機能します。
• ::view-transition-group:
  アニメーション対象要素のグループ。位置やサイズの変化を管理します。
• ::view-transition-image-pair:
  old状態とnew状態の画像ペアを保持するコンテナ。
• ::view-transition-old:
  遷移前の状態(スクリーンショット)。アニメーション開始時は不透明度100%、終了時は0%になります。
• ::view-transition-new:
  遷移後の状態(スクリーンショット)。アニメーション開始時は不透明度0%、終了時は100%になります。

スライドアニメーションの実装例

デフォルトのクロスフェードではなく、左から右へスライドするアニメーションを追加してみましょう。

/* 古い状態は左へスライドアウト */
::view-transition-old(root) {
  animation: slide-out-left 0.3s ease-in-out;
}

/* 新しい状態は右からスライドイン */
::view-transition-new(root) {
  animation: slide-in-right 0.3s ease-in-out;
}

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

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

このCSSを先ほどの最小サンプルに追加するだけで、クロスフェードからスライドアニメーションに変更できます。

実際の表示

See the Pen view-transitions-api-02 by watashi-xyz (@watashi-xyz) on CodePen.

フェードイン・フェードアウトのカスタマイズ

デフォルトのフェード速度や動きを変更したい場合は、以下のように指定します。

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

/* ゆっくりとしたフェード */
::view-transition-old(root) {
  animation-name: fade-out-slow;
}

::view-transition-new(root) {
  animation-name: fade-in-slow;
}

@keyframes fade-out-slow {
  to {
    opacity: 0;
  }
}

@keyframes fade-in-slow {
  from {
    opacity: 0;
  }
}

実際の表示

See the Pen view-transitions-api-03 by watashi-xyz (@watashi-xyz) on CodePen.

拡大・縮小アニメーション

ページ全体が拡大しながら現れる効果も簡単に実装できます。

::view-transition-old(root) {
  animation: scale-out 0.4s ease-in-out;
}

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

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

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

実際の表示

See the Pen view-transitions-api-04 by watashi-xyz (@watashi-xyz) on CodePen.

アニメーション適用の実践的なヒント

• animation-duration:
  0.2秒〜0.5秒程度が一般的。長すぎるとユーザーを待たせてしまいます。
• animation-timing-function:
  ease-outやcubic-bezierを使うと、より自然な動きになります。
• 組み合わせ:
  transform、opacity、filterを組み合わせることで、複雑なエフェクトも実現できます。
• パフォーマンス:
  transformとopacityのアニメーションはGPU アクセラレーションが効くため、滑らかに動作します。widthやheightの変更は避けましょう。

次のセクションでは、MPA(通常のHTMLサイト)での実装パターンを詳しく解説していきます。

MPA(通常のHTMLサイト)での実装パターン

クロスドキュメントView Transitionsで実現するMPAページ遷移アニメーション

MPA(マルチページアプリケーション)、つまり従来の通常のHTMLサイトでは、クロスドキュメントView Transitionsという機能を使ってページ遷移アニメーションを実現します。これは、別々のHTMLファイル間の遷移時に自動的にアニメーションを適用する画期的な機能です。

クロスドキュメントView Transitionsとは

クロスドキュメントView Transitionsは、ページ全体がリロードされる通常のナビゲーション(aタグのクリック、フォーム送信など)でも、SPAのような滑らかなアニメーションを実現する技術です。

従来のMPAでは、リンクをクリックすると画面が一瞬白くなり(白いフラッシュ)、次のページが表示されるという体験でした。クロスドキュメントView Transitionsを使えば、この白いフラッシュを防ぎ、現在のページから次のページへ滑らかにフェードするアニメーションが自動的に適用されます。

基本的な有効化方法

最もシンプルな実装は、CSSで@view-transitionルールを宣言するだけです。JavaScriptは一切不要です。

@view-transition {
  navigation: auto;
}

この1行のCSSを、サイト内のすべてのページに含めるだけで、ページ遷移時にView Transitionsが自動的に適用されます。具体的には、共通のCSSファイルに記述するか、各HTMLファイルの<style>タグ内に記述します。

実際の動作の仕組み

クロスドキュメントView Transitionsが実行されるプロセスは以下の通りです。

1. リンククリックの検知:
   ユーザーがaタグをクリックすると、ブラウザは通常のページ遷移を一時的に保留します。
2. 現在のページをキャプチャ:
   遷移前のページ全体のスクリーンショットを撮影し、メモリに保存します。
3. 次のページを読み込み:
   バックグラウンドで次のHTMLページを取得し、DOMを構築します。
4. 新しいページをキャプチャ:
   読み込まれた新しいページのスクリーンショットを撮影します。
5. トランジションアニメーションを実行:
   2枚のスクリーンショット(old/new)を使って、クロスフェードアニメーションを再生します。
6. 新しいページを表示:
   アニメーション完了後、正式に新しいページに遷移します。

このプロセスは完全に自動化されており、開発者が意識する必要はありません。

適用される遷移の条件

クロスドキュメントView Transitionsは、すべてのナビゲーションで適用されるわけではありません。以下の条件を満たす必要があります。

• 同一オリジン間の遷移:
  https://example.com/page1.htmlからhttps://example.com/page2.htmlへの遷移はOKですが、https://other-site.comへの遷移には適用されません。
• 通常のナビゲーション:
  ユーザーがaタグをクリック、ブラウザの戻る/進むボタン、window.locationによる遷移などが対象です。
• GETリクエスト:
  POSTリクエストなどの非GETリクエストには適用されません(セキュリティ上の理由)。
• 両方のページで有効化:
  遷移元と遷移先の両方のページで@view-transitionが宣言されている必要があります。
• JavaScriptによる制御:
  必要に応じて、navigation.addEventListener('navigate')を使って、特定の遷移のみView Transitionsを有効化することもできます。

aタグ・フォーム送信・リンククリックをフックした実装ステップ【コピペOK】

ここでは、実際にMPAサイトでクロスドキュメントView Transitionsを実装する具体的な手順を、コピペ可能なコード付きで解説します。

ステップ1: 基本的な2ページ構成のサンプル

まず、2つのHTMLページを用意します。

page1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページ1 - View Transitions Demo</title>
  <style>
    @view-transition {
      navigation: auto;
    }

    body {
      font-family: system-ui, sans-serif;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }

    h1 {
      font-size: 3em;
      margin-bottom: 20px;
    }

    a {
      display: inline-block;
      padding: 15px 30px;
      background: white;
      color: #667eea;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      font-size: 1.1em;
      transition: transform 0.2s;
    }

    a:hover {
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <h1>ページ1</h1>
  <p>クロスドキュメントView Transitionsのデモ</p>
  <a href="page2.html">ページ2へ移動</a>
</body>
</html>

page2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページ2 - View Transitions Demo</title>
  <style>
    @view-transition {
      navigation: auto;
    }

    body {
      font-family: system-ui, sans-serif;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      color: white;
    }

    h1 {
      font-size: 3em;
      margin-bottom: 20px;
    }

    a {
      display: inline-block;
      padding: 15px 30px;
      background: white;
      color: #f5576c;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      font-size: 1.1em;
      transition: transform 0.2s;
    }

    a:hover {
      transform: scale(1.05);
    }
  </style>
</head>
<body>
  <h1>ページ2</h1>
  <p>滑らかに遷移しました!</p>
  <a href="page1.html">ページ1に戻る</a>
</body>
</html>

これら2つのファイルを同じディレクトリに保存し、Chrome 126以降のブラウザで開くと、リンククリック時に滑らかなフェードアニメーションが適用されます。

ステップ2: カスタムアニメーションの追加

デフォルトのクロスフェードだけでなく、スライドアニメーションを追加してみましょう。両方のHTMLファイルの<style>タグ内に以下を追加します。

/* ページ遷移時のスライドアニメーション */
::view-transition-old(root) {
  animation: slide-out-to-left 0.4s ease-in-out;
}

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

@keyframes slide-out-to-left {
  to {
    transform: translateX(-30%);
    opacity: 0;
  }
}

@keyframes slide-in-from-right {
  from {
    transform: translateX(30%);
    opacity: 0;
  }
}

これで、ページ1からページ2への遷移時に、ページ1が左へスライドアウトしながら、ページ2が右からスライドインする動きになります。

ステップ3: 特定の要素を追跡するShared Element Transition

ページ間で共通の要素(ロゴや画像など)を滑らかに変化させたい場合は、view-transition-nameを使います。

例えば、両方のページに共通のヘッダーロゴがあり、それを追跡したい場合:

page1.htmlとpage2.htmlの両方に追加

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

<img src="logo.png" alt="ロゴ" class="logo">

この設定により、ロゴ要素だけが独立してアニメーションし、ページ1のロゴの位置からページ2のロゴの位置へ滑らかに移動します。

ステップ4: JavaScriptによる条件付き有効化(高度)

特定の条件下でのみView Transitionsを有効化したい場合は、JavaScriptで制御できます。

<script>
  // Navigation APIが利用可能かチェック
  if ('navigation' in window) {
    navigation.addEventListener('navigate', (event) => {
      // 外部サイトへの遷移は除外
      if (!event.canIntercept || event.hashChange || event.downloadRequest) {
        return;
      }

      // 特定のリンクのみView Transitionsを適用
      const url = new URL(event.destination.url);

      // 例: /blogページへの遷移のみ有効化
      if (url.pathname.startsWith('/blog')) {
        event.intercept({
          handler: async () => {
            // デフォルトのナビゲーションをView Transitions付きで実行
          }
        });
      }
    });
  }
</script>

ただし、多くの場合は@view-transition { navigation: auto; }の宣言だけで十分です。

ステップ5: 共通CSSファイルでの一元管理

実際のプロジェクトでは、View Transitionsのスタイルを共通CSSファイルにまとめると管理が楽になります。

common.css

/* すべてのページでView Transitionsを有効化 */
@view-transition {
  navigation: auto;
}

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

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

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

/* 共通要素の追跡 */
.header-logo {
  view-transition-name: logo;
}

.main-content {
  view-transition-name: main;
}

各HTMLファイルでは、この共通CSSを読み込むだけです。

<link rel="stylesheet" href="common.css">

MPAでのレイアウト崩れ・チラつきを防ぐためのベストプラクティス

クロスドキュメントView Transitionsを実装する際、いくつかの注意点を守らないと、レイアウト崩れやチラつきが発生することがあります。ここでは、よくある問題とその解決策を紹介します。

問題1: FOUCによるチラつき

FOUC(Flash of Unstyled Content)は、CSSが読み込まれる前に一瞬スタイルなしのコンテンツが表示される現象です。View Transitionsと組み合わせると、このチラつきがより目立ちます。

解決策: CSSのインライン化または事前読み込み

<!-- 方法1: クリティカルCSSのインライン化 -->
<head>
  <style>
    /* 最低限のレイアウトスタイル */
    body { margin: 0; font-family: system-ui; }
    .container { max-width: 1200px; margin: 0 auto; }
  </style>
  <link rel="stylesheet" href="main.css">
</head>

<!-- 方法2: プリロード -->
<head>
  <link rel="preload" href="main.css" as="style">
  <link rel="stylesheet" href="main.css">
</head>

問題2: 画像の遅延読み込みによるレイアウトシフト

画像が読み込まれる際にレイアウトがずれると、View Transitionsのキャプチャが正確でなくなります。

解決策: 画像のアスペクト比を事前に確保

/* アスペクト比を維持するコンテナ */
.image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

または、HTMLで明示的にサイズを指定します。

<img src="photo.jpg" width="800" height="600" alt="写真">

問題3: スクロール位置のリセット

ページ遷移時、新しいページが常に最上部から表示されるため、ユーザーがスクロールした位置が失われます。

解決策: スクロール位置の復元(必要に応じて)

// 遷移前のスクロール位置を保存
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('scrollPos', window.scrollY);
});

// 遷移後に復元
window.addEventListener('DOMContentLoaded', () => {
  const scrollPos = sessionStorage.getItem('scrollPos');
  if (scrollPos) {
    window.scrollTo(0, parseInt(scrollPos));
    sessionStorage.removeItem('scrollPos');
  }
});

ただし、通常のナビゲーションでは最上部に戻るのが自然なため、この実装は慎重に検討してください。

問題4: 異なるレイアウト間の遷移

ページ1が単一カラム、ページ2が2カラムレイアウトの場合、トランジションが不自然に見えることがあります。

解決策: 共通のコンテナ構造を維持

<!-- すべてのページで同じ基本構造を使う -->
<body>
  <header class="site-header">...</header>
  <main class="site-main">
    <!-- ページ固有のコンテンツ -->
  </main>
  <footer class="site-footer">...</footer>
</body>

/* 共通要素に view-transition-name を設定 */
.site-header {
  view-transition-name: header;
}

.site-main {
  view-transition-name: main-content;
}

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

これにより、各セクションが独立してアニメーションし、より自然な遷移になります。

問題5: パフォーマンスの低下

大きなページや複雑なレイアウトでは、スクリーンショットの生成に時間がかかることがあります。

解決策: アニメーション対象を限定

/* ルート全体ではなく、メインコンテンツのみアニメーション */
@view-transition {
  navigation: auto;
}

/* デフォルトのrootアニメーションを無効化 */
::view-transition-group(root) {
  animation-duration: 0s;
}

/* 特定要素のみアニメーション */
.animated-section {
  view-transition-name: section;
}

::view-transition-group(section) {
  animation-duration: 0.3s;
}

チェックリスト: 実装前の確認項目

MPAでView Transitionsを実装する前に、以下の項目を確認しましょう。

• すべてのページで@view-transition { navigation: auto; }が宣言されている
• CSSファイルが確実に読み込まれる(FOUCが発生しない)
• 画像にはwidthとheight属性が指定されている
• ページ間で共通のHTML構造が維持されている
• アニメーション時間は0.5秒以下(ユーザーを待たせない)
• 対応ブラウザでの動作確認が完了している
• 非対応ブラウザでも正常に動作する(フォールバック不要だが確認は必要)

これらのベストプラクティスに従うことで、プロフェッショナルな品質のページ遷移アニメーションを実現できます。

対応ブラウザ・パフォーマンス・SEO・実務での評価

Chrome / Edge / Safariの最新対応状況と「Can I use」での確認方法

View Transitions APIは比較的新しい技術のため、ブラウザごとに対応状況が異なります。実装前に必ず最新の対応状況を確認することが重要です。

主要ブラウザの対応状況(2025年12月時点)

Google Chrome

• 同一ドキュメントView Transitions: Chrome 111以降(2023年3月リリース)で完全対応
• クロスドキュメントView Transitions: Chrome 126以降(2024年6月リリース)で完全対応
• デスクトップ版・Android版ともに対応済み

Microsoft Edge

• Chrome と同じChromiumベースのため、同じバージョンから対応
• Edge 111以降で同一ドキュメント対応
• Edge 126以降でクロスドキュメント対応

Safari(Apple)

• 同一ドキュメントView Transitions: Safari 18.0以降(2024年9月リリース)で対応
• クロスドキュメントView Transitions: 現時点では未対応(開発中)
• iOS Safari、macOS Safariともに同じ対応状況

Firefox(Mozilla)

• 現時点では未対応
• 開発ロードマップには含まれているが、実装時期は未定
• フラグ付きの実験的実装も提供されていない

対応状況の確認方法

最新の対応状況を確認するには、「Can I use」というサイトが便利です。

確認手順:

1. https://caniuse.com/ にアクセス
2. 検索ボックスに「view transitions」と入力
3. 世界中のブラウザシェアと対応状況が視覚的に表示される

Can I useでは以下の情報が確認できます:

• 各ブラウザのバージョン別対応状況(緑=対応、赤=未対応)
• グローバルでの利用可能率(例: 73.2%のユーザーが対応ブラウザを使用)
• 地域別のブラウザシェア
• 既知のバグや制限事項

実務での対応状況の判断基準

2025年12月現在、View Transitions APIの採用を検討する際の判断基準は以下の通りです。

同一ドキュメントView Transitions(SPA向け)

• Chrome/Edgeユーザー: 約65%がカバーされる
• Safariユーザーも最新版なら対応(iOS 18+、macOS Sonoma以降)
• グローバルカバレッジ: 約70-75%

判断: SPAプロジェクトであれば、プログレッシブエンハンスメントとして採用可能。非対応ブラウザではアニメーションなしで動作するため、リスクは低い。

クロスドキュメントView Transitions(MPA向け)

• Chrome/Edgeユーザーのみ対応(約65%)
• Safari、Firefoxは未対応
• グローバルカバレッジ: 約60-65%

判断: 革新的なUXを提供したい場合は採用可能だが、全ユーザーが体験できるわけではない点を理解する。非対応ブラウザでは通常のページ遷移になるため、機能的な問題はない。

コード内での対応確認方法

JavaScriptで実行時にView Transitions APIの対応状況を確認する方法です。

// 同一ドキュメントView Transitionsの対応確認
if ('startViewTransition' in document) {
  console.log('同一ドキュメントView Transitionsに対応');
  // View Transitionsを使った実装
} else {
  console.log('非対応ブラウザ');
  // フォールバック実装
}

// CSSでの対応確認(クロスドキュメント)
if (CSS.supports('view-transition-name', 'test')) {
  console.log('View Transition関連CSSプロパティに対応');
}

アナリティクスでのユーザー環境確認

実際のサイト訪問者がどれくらいView Transitionsを体験できるかは、Google Analyticsなどで確認できます。

// 対応状況をGAに送信する例
if ('startViewTransition' in document) {
  gtag('event', 'browser_capability', {
    'feature': 'view_transitions',
    'supported': true
  });
}

この情報を収集することで、実際のユーザーベースでの対応率を把握し、投資対効果を判断できます。

View Transitions APIはCore Web Vitalsに影響する?LCP・CLS観点での注意点

View Transitions APIを導入する際、SEOに重要なCore Web Vitalsへの影響を理解することは不可欠です。特にLCP(Largest Contentful Paint)とCLS(Cumulative Layout Shift)への影響を検証しましょう。

Core Web Vitalsの基礎知識

Core Web Vitalsは、Googleが重視するユーザー体験の指標です。

• LCP(Largest Contentful Paint):
  ページの主要コンテンツが表示されるまでの時間。2.5秒以内が理想。
• FID(First Input Delay) / INP(Interaction to Next Paint): ユーザーの操作に対する応答速度。INPは200ms以内が理想。
• CLS(Cumulative Layout Shift): レイアウトの予期しないズレの累積。0.1以下が理想。

LCPへの影響と対策

View Transitions APIは、適切に実装すればLCPにほとんど影響を与えません。

MPAでの影響: クロスドキュメントView Transitionsでは、アニメーションの実行中もページの読み込みは並行して行われるため、LCPへの悪影響は限定的です。ただし、以下の点に注意が必要です。

/* 悪い例: アニメーションが長すぎる */
::view-transition-old(root) {
  animation-duration: 2s; /* 長すぎる! */
}

/* 良い例: 300ms以下に抑える */
::view-transition-old(root) {
  animation-duration: 0.3s; /* 適切な長さ */
}

対策1: アニメーション時間を最適化

アニメーション時間は200ms〜400msに抑えましょう。500msを超えるとユーザーが「遅い」と感じ始めます。

対策2: 重要なコンテンツの優先表示

/* 主要コンテンツはアニメーション対象から除外 */
.hero-image {
  view-transition-name: none; /* アニメーションしない */
}

対策3: プリロードの活用

<link rel="preload" as="image" href="hero.jpg">

CLSへの影響と対策

View Transitions API自体はCLSを引き起こしません。むしろ、適切に使えばCLSを改善できます。

CLSを引き起こす典型的なミス:

<!-- 悪い例: サイズ未指定の画像 -->
<img src="photo.jpg" alt="写真">

これがView Transitionsと組み合わさると、以下の問題が発生します:

1. 遷移前のページをキャプチャ(画像未読み込み)
2. 遷移後に画像が読み込まれる
3. レイアウトがずれる(CLS発生)
4. キャプチャと実際の表示が異なる(不自然なアニメーション)

正しい実装:

<!-- 良い例: サイズを明示 -->
<img src="photo.jpg" width="800" height="600" alt="写真">

または、CSSでアスペクト比を確保:

.image-wrapper {
  aspect-ratio: 16 / 9;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

INP(旧FID)への影響

View Transitions APIは、ユーザーの操作に対する応答性にも影響する可能性があります。

問題: アニメーション中の操作ブロック

デフォルトでは、View Transitionsの実行中は新しいナビゲーションが開始できません。

対策: タイムアウトの設定

const transition = document.startViewTransition(() => {
  updateDOM();
});

// 500ms以内に完了しなければキャンセル
setTimeout(() => {
  if (transition) {
    transition.skipTransition();
  }
}, 500);

Real User Monitoring(RUM)での検証

実際のユーザー環境でのCore Web Vitalsへの影響を測定することが重要です。

// Web Vitals ライブラリを使った測定
import {onLCP, onCLS, onINP} from 'web-vitals';

onLCP((metric) => {
  console.log('LCP:', metric.value);
  // アナリティクスに送信
});

onCLS((metric) => {
  console.log('CLS:', metric.value);
});

onINP((metric) => {
  console.log('INP:', metric.value);
});

Lighthouseスコアとパフォーマンスを落とさないための実装チェックリスト

Google Lighthouseは、Webサイトのパフォーマンスを評価する重要なツールです。View Transitions APIを導入してもLighthouseスコアを維持するためのチェックリストを紹介します。

Lighthouseでの評価ポイント

Lighthouseは以下の項目でサイトを評価します(各100点満点):

• Performance: 読み込み速度とレスポンス性
• Accessibility: アクセシビリティ
• Best Practices: ベストプラクティスの遵守
• SEO: 検索エンジン最適化

View Transitions APIは主にPerformanceとBest Practicesに影響します。

パフォーマンススコアを維持するチェックリスト

1. アニメーション時間の最適化

• すべてのトランジションが500ms以下
• 重要なコンテンツは300ms以下
• 不要なアニメーションは削除

/* 推奨: 短く簡潔なアニメーション */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.25s;
}

2. GPU アクセラレーションの活用

• transformとopacityのみを使用
• width、height、top、leftなどは避ける

/* 良い例: GPUで処理される */
::view-transition-new(root) {
  animation: slide-in 0.3s;
}

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

/* 悪い例: CPUで処理され重い */
@keyframes slide-in-bad {
  from {
    left: 100%;
  }
}

3. 画像の最適化

• すべての画像にwidthとheightを指定
• WebPやAVIFなどの次世代フォーマットを使用
• 適切なサイズにリサイズ

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" width="800" height="600" alt="説明">
</picture>

4. JavaScriptの最適化

• 不要なライブラリを削除
• コードを最小化(minify)
• 非同期読み込みを活用

<!-- 良い例: 非同期読み込み -->
<script src="app.js" defer></script>

5. CSSの最適化

• 未使用のCSSを削除
• クリティカルCSSをインライン化
• CSS ファイルを最小化

6. リソースヒントの活用

• 重要なリソースをpreload
• 次のページをprefetch(必要に応じて)

<link rel="preload" as="style" href="critical.css">
<link rel="preload" as="image" href="hero.jpg">

Lighthouse監査の実行方法

Chrome DevToolsでの実行:

1. Chrome DevTools を開く(F12)
2. 「Lighthouse」タブを選択
3. 「Performance」にチェック
4. 「Analyze page load」をクリック

コマンドラインでの実行:

# Lighthouse CLIのインストール
npm install -g lighthouse

# 監査の実行
lighthouse <https://example.com> --output html --output-path ./report.html

View Transitions実装前後の比較

実装前後でLighthouseスコアを比較することが重要です。

測定のポイント:

• 同じ環境(ネットワーク速度、デバイス)で測定
• 5回測定して平均値を取る
• モバイル/デスクトップ両方で測定

許容可能なスコア変化:

• Performance: -5点以内の減少なら許容範囲
• それ以上減少する場合は、実装を見直す

// パフォーマンス測定のサンプル
performance.mark('transition-start');

document.startViewTransition(() => {
  updateDOM();
}).finished.then(() => {
  performance.mark('transition-end');
  performance.measure('view-transition', 'transition-start', 'transition-end');

  const measure = performance.getEntriesByName('view-transition')[0];
  console.log(`トランジション時間: ${measure.duration}ms`);
});

実装チェックリスト総まとめ

View Transitions APIを導入する際の最終チェックリストです:

基本実装

• フィーチャーディテクションを実装
• 非対応ブラウザでも動作確認
• アニメーション時間を最適化(500ms以下)

パフォーマンス

• Lighthouseスコアが許容範囲内
• Core Web Vitalsの悪化なし
• GPU アクセラレーションを活用

アクセシビリティ

• prefers-reduced-motionを尊重
• キーボード操作に影響なし
• スクリーンリーダーで問題なし

SEO

• メタタグが正しく設定
• 構造化データに問題なし
• クローラーがコンテンツにアクセス可能

実務で「使っていいケース/避けるべきケース」と導入メリット・デメリット整理

View Transitions APIは強力な機能ですが、すべてのプロジェクトに適しているわけではありません。実務での採用判断基準を整理します。

使っていいケース

1. モダンブラウザがメインターゲットのSPA

• React、Vue、Svelteなどのフレームワークを使用
• ユーザーの大半がChrome/Edge/Safari最新版
• ネイティブアプリのようなUXを目指す

具体例: SaaSダッシュボード、社内管理ツール、モバイルファーストのWebアプリ

2. ブランディング重視のコーポレートサイト(MPA)

• 視覚的な印象を重視
• ターゲットが技術に詳しい層
• 予算と時間に余裕がある

具体例: テック企業のコーポレートサイト、デザインスタジオのポートフォリオ

3. ギャラリーや画像中心のコンテンツ

• 画像の拡大・縮小が頻繁
• Shared Element Transitionが効果的
• ユーザー体験の向上が明確

具体例: 写真ギャラリー、ECサイトの商品詳細、不動産サイトの物件詳細

4. プログレッシブエンハンスメントとして

• コア機能は通常のDOM更新で実装済み
• View Transitionsは付加価値
• 非対応ブラウザでも問題なし

具体例: 既存サイトへの段階的な改善、実験的な機能追加

避けるべきケース

1. 幅広いブラウザ対応が必須のサイト

• 高齢者や企業ユーザーが多い
• IE11対応が必要(もはや稀だが)
• ブラウザシェアが多様

具体例: 政府機関サイト、金融機関の公式サイト、医療機関のポータル

2. パフォーマンスがクリティカルなサイト

• ECサイトのチェックアウトフロー
• ニュースサイトのトップページ
• ページ速度が直接コンバージョンに影響

理由: アニメーション実行のオーバーヘッドが、わずかでもパフォーマンスに影響する可能性

3. アクセシビリティが最優先のサイト

• 公共サービスのサイト
• 教育機関のポータル
• 医療情報サイト

理由: アニメーションがユーザーの障壁になる可能性。ただし、prefers-reduced-motionを適切に実装すれば対応可能。

4. 開発リソースが限られているプロジェクト

• 小規模チームでの開発
• 短納期のプロジェクト
• 保守体制が不十分

理由: ブラウザ対応の確認、テスト、トラブルシューティングに時間がかかる

導入メリットの整理

UX面のメリット:

• ネイティブアプリのような滑らかな遷移
• ページ間の白いフラッシュの解消
• ユーザーの空間的理解を助ける(どこから来てどこへ行くかが明確)
• 高級感・洗練された印象を与える

開発面のメリット:

• 複雑なアニメーションロジックが不要
• CSS だけで多彩な表現が可能
• フレームワークに依存しない標準API
• 段階的な導入が可能(プログレッシブエンハンスメント)

ビジネス面のメリット:

• ブランドイメージの向上
• 競合との差別化
• ユーザーエンゲージメントの向上(滞在時間の増加)
• 最先端技術の採用によるPR効果

導入デメリットの整理

技術面のデメリット:

• ブラウザ対応が限定的(特にFirefox未対応)
• デバッグが難しい(アニメーション中の状態確認)
• パフォーマンスへの影響(わずかだが存在)
• 学習コストがかかる

UX面のデメリット:

• 誤用すると「重い」印象を与える
• アニメーションに酔うユーザーがいる
• 操作を遅く感じさせる可能性

コスト面のデメリット:

• 実装・テスト工数の増加
• ブラウザ対応テストの複雑化
• 保守コストの上昇

意思決定フローチャート

View Transitions APIを採用すべきか判断するためのフローです。

1. プロジェクトはSPAか?
   YES → 2へ
   NO → 3へ

2. ターゲットユーザーの70%以上がChrome/Edge/Safari最新版を使用?
   YES → 採用を推奨
   NO → 慎重に検討

3. MPAでクロスドキュメントView Transitionsを使用したいか?
   YES → 4へ
   NO → 採用不要

4. ブランディングやUX向上が明確な目標か?
   YES → 5へ
   NO → 優先度を下げる

5. 開発・テストリソースに余裕があるか?
   YES → 採用を推奨
   NO → 他の優先事項を先に対応

実務での導入パターン

パターン1: 段階的導入

1. まず1つのページ遷移で試験導入
2. ユーザーフィードバックとアナリティクスで効果測定
3. 問題なければ段階的に拡大

パターン2: A/Bテストでの検証

// ユーザーを2グループに分けてテスト
const useViewTransitions = Math.random() < 0.5;

if (useViewTransitions && document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
} else {
  updateDOM();
}

// どちらのグループがコンバージョン率が高いか測定

パターン3: プレミアム機能として提供

有料プランのユーザーや、設定で有効化したユーザーのみView Transitionsを体験できるようにする。

最終的な推奨事項

View Transitions APIは、以下の条件を満たすプロジェクトで特に効果的です:

• モダンブラウザがメインターゲット
• UXの向上が明確な目標
• 開発・テストリソースに余裕がある
• プログレッシブエンハンスメントとして実装できる

逆に、以下のような場合は慎重な検討が必要です:

• 幅広いブラウザ対応が必須
• パフォーマンスが最優先
• 短納期・少人数での開発

最終的には、プロジェクトの目標、ターゲットユーザー、リソースを総合的に判断して決定してください。

よくある質問（FAQ）

まとめ

これまでのWeb制作では、ページ遷移のアニメーションを実現するために、複雑なJavaScriptライブラリを駆使したり、SPA（Single Page Application）構成を強制されたりすることが多々ありました。しかし、View Transitions APIの登場によって、「ブラウザ標準の機能だけで、滑らかで心地よいUI」がついに手に入ります。

特にMPA（通常のHTMLサイト）においても、CSS一行でリッチな体験を提供できるようになった点は、SEOとユーザー体験を両立させたいWeb制作者にとって大きな武器になります。

ここで、特に意識しておきたい重要ポイントを振り返っておきましょう。

「難しそう」と後回しにするのはもったいないほど、このAPIは直感的です。まずはポートフォリオや小さなプロジェクトの1ページから、document.startViewTransition() を試してみてください。その一歩が、ユーザーに「このサイト、なんか使いやすい！」と感じさせる大きな差を生みます。

Webの可能性を広げるこの技術を、ぜひ今日からあなたのツールボックスに加えてみてください！

あわせて読みたい

Intersection Observerの使い方を徹底解説！遅延読み込み・無限スクロールからエラー解決まで

IntersectionObserverの使い方を基本から応用までやさしく解説。仕組みやscrollイベントとの違い、おすすめ設定パターン、画像の遅延読み込みやアニメーション表示、無限スクロール実装もサンプル付きでご紹介。発火しない原因や複数要素監視、スクロール方向検知など現場で役立つノウハウも網羅しています。

watashi.xyz

2025.05.24