Astro のビュートランジション機能を使用し、SPAライクなサイトを実現する

こんにちは。デザイン事業部の長谷です。
本記事では、Astro のビュートランジションを用いて SPA ライクなページ遷移を実現する方法について、基本概念から実装方法について整理します。

本記事のゴール

この記事では、Astro の View Transitions API を使った SPA ライクなページ遷移について、基本的な実装方法を理解することを目標とします。

ビュートランジションの基本概念と仕組みを理解する
スムーズなページ遷移の実装方法を習得する
基本的なカスタムアニメーションの作成方法を学ぶ
実践でありそうなパターンを実装してみる

ビュートランジションとは

Astro のビュートランジション機能は、ページ間を移動する際にスムーズなアニメーション効果を提供し、SPA のようなユーザー体験を実現します。ブラウザネイティブの View Transitions API を活用し、MPA でありながら SPA のような滑らかな遷移を可能にします。

ビュートランジションの仕組み

基本的な仕組み
View Transitions は、ブラウザネイティブの API を使って、ページ遷移時に旧ページと新ページのスナップショットを取得し、その間をスムーズにアニメーションします。

Astro での活用方法

リンククリックを捕捉し、次ページの HTML を取得
transition:name 属性で要素を特定し、ページ間で連続したアニメーションを実現
transition:persist で要素の状態を保持

メリット
ネイティブ実装で軽量・高速であり、プログレッシブエンハンスメントが容易です。CSS ベースで細かい制御が可能で、フレームワーク非依存に近い設計であることも特徴です。また、共有要素の視覚的連続性により体感性能が向上します。

SPA との違い
View Transitions は MPA（Multi-Page Application）のまま SPA ライクな体験を提供します。そのため、以下のメリットがあります。

初期読み込みが高速：静的 HTML のまま
SEO 完全対応：追加設定不要
スムーズな体験： SPA と同等の操作感

主要な特徴

ゼロ設定: 基本的な遷移は 1 行の設定で有効化
プログレッシブエンハンスメント: サポートしないブラウザでは通常のページ遷移
カスタマイズ可能: CSS Animations でアニメーションをカスタマイズ
パフォーマンス重視: GPU アクセラレーションによる滑らかなアニメーション
ゼロ JavaScript 選択肢: 2025 年現在、ネイティブ API で JavaScript なしでも実現可能

基本的な使い方

全体像を理解していただくために、簡単なデモを作成しました。
詳細は以下のサンドボックスをご覧ください。

※サイトの使用上Codepenを介してサンドボックスを読み込んでおります。コンテンツの高さが低く見づらい可能性があるため、Codepenのロゴから別ウィンドウに遷移し、閲覧いただくか、後述するサンドボックスやリポジトリのリンクをご覧いただければと思います。

コードサンドボックスのリンクはこちら
リポジトリのリンクはこちら

必要な記述

基本的にビュートランジション機能を使用するために必要な記述は僅か数行になります。
コンポーネントを共通レイアウト内でimport +内に配置するだけで、サイト全体で View Transitions が有効になります。

以下は、サイト全体でビュートランジションを有効化する最も基本的な実装例です。

---
// 必要な記述：以下のClinentRouterをimportする
import { ClientRouter } from "astro:transitions";
---
<html lang="en">
  <head>
    <title>Astro View transitions Demo</title>
    <link rel="stylesheet" href="/src/styles/global.css" />
    <!-- 必要な記述：importしたClientRouterをhead内に配置する -->
    <ClientRouter />
  </head>
  <body>
    <slot name="header" />
    <slot name="main" />
    <slot name="footer" />
  </body>
</html>

おまけ：ビュートランジションのカスタマイズ
今回は、詳細には言及しませんが、View Transitions 機能は特定の属性とCSSを組み合わせて柔軟にカスタマイズできます。

詳しくは公式ドキュメントをご覧ください。

ブラウザ対応と注意点

2025年10月現在のブラウザ対応状況は以下になります。
前述しておりますが、基本的にFirefox以外の主要ブラウザではSPAライクな動きが機能すると思います。

ブラウザ	サポート状況	バージョン
Chrome	フルサポート	111+
Edge	フルサポート	111+
Safari	フルサポート	18.0+
Firefox	フルサポート	144+

現状での制限(2025 年更新)
Firefox はネイティブサポートが開発中で、フォールバックで通常遷移になります。グローバルサポート率は 75%以上と実用的ですが、大きなビットマップや動画のスナップショット取得はコスト高になり、クロスオリジンやフォーム送信などは通常遷移にフォールバックします。

Firefoxさんについては以下を参照してください。
144+バージョンから部分導入されるようです。（現状Macの最新は142+）

＜1次情報＞
Bugzilla

＜2次情報＞

基本的な注意点

フォールバックへの対応
View Transitions をサポートしないブラウザでは、自動的に通常のページ遷移にフォールバックします。このため、特別な対応なしに安全に使用できます。

アクセシビリティへの基本配慮
モーションを好まないユーザーのために、以下の CSS を追加することを推奨します。

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

まとめ

Astro の View Transitions は、MPA のメリットを保持しながら SPA のような滑らかなユーザー体験を提供する機能です。

主な利点

簡単な実装: “ を置くだけで基本機能が使用可能
高いパフォーマンス: ブラウザネイティブ API で軽量・高速
SEO フレンドリー: 静的 HTML のままで追加設定不要
プログレッシブエンハンスメント: サポートしないブラウザでは通常遷移として動作
カスタマイズ性: CSS で柔軟なアニメーションを作成可能

基本的な実装であれば簡単に始められ、ユーザー体験の大幅な向上が期待できます。
すでにフォールバックがある為、プログレッシブエンハンスメント的にも導入可能です。
この機会にぜひ試してみてください。本記事を読んでいただきありがとうございました。

参考記事

Astro Docs: View Transitions Guide リンクはこちら
MDN Web Docs: View Transitions API リンクはこちら
Chrome Developers: View Transitions リンクはこちら
Can I use: View Transitions リンクはこちら

Astro のビュートランジション機能を使用し、SPAライクなサイトを実現する

目次

本記事のゴール