BetterLink Logo 比隣
言語を切り替える
中文 English 日本語
テーマを切り替える

Astro View Transitions：2行のコードでWebサイトにアプリのような滑らかな遷移を

はじめに

苦労してAstroでブログを作ったのに、リンクをクリックすると画面が一瞬真っ白になって切り替わる…。この「Webっぽい」ガクッとした遷移、気になりませんか？
iPhoneアプリのように、画像がスゥーッと拡大して詳細画面になったり、スライドして画面が切り替わったりする体験をWebでも実現したい。

これまではReactなどでSPA（シングルページアプリケーション）を作る必要がありました。しかし、View Transitions API とAstroの組み合わせなら、JSフレームワーク不要、複雑なルーター設定も不要で、たった2行のコードでリッチなアニメーションを実現できます。

この記事では、ブラウザのサポート率85%を超え、フロントエンド界の標準になりつつあるView Transitions APIの使い方を、基礎から応用まで解説します。

View Transitions APIとは？

ブラウザ標準の「魔法」

これはブラウザ自体が提供する機能です。ブラウザに「コンテンツが変わるよ」と伝えると、変更前（旧ページ）と変更後（新ページ）のスナップショットを撮り、その間を自動的にクロスフェードなどで補完してくれます。

例えば、記事一覧から詳細ページに飛ぶとき、ブラウザは「お、このサムネイル画像と、詳細ページのメイン画像は同じ要素だな」と認識し、位置やサイズを滑らかにアニメーションさせてくれます（Morphアニメーション）。
これを自力でJSとCSSで書こうとすると大変ですが、APIなら自動です。

SPAなしでSPAの体験を

従来のMPA（マルチページアプリケーション）の良さである「SEOに強い」「初期ロードが速い」を維持しつつ、SPAのような「滑らかな遷移」を手に入れられます。

85%+
ブラウザ対応
2025年現在、主要ブラウザで利用可能
50KB
バンドルサイズ
React SPA (300KB+) との比較。超軽量
2行
設定コード
Layoutコンポーネントに追加するだけ

Astroでの導入：3つの方法

方法1：サイト全体で有効化（推奨）

これが一番簡単です。src/layouts/Layout.astro などの共通レイアウトファイルの <head> に以下を追加するだけです。

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

<html>
  <head>
    <title>My Astro Site</title>
    <ViewTransitions />
  </head>
  <body>
    <slot />
  </body>
</html>

たったこれだけで、サイト内のすべてのリンク遷移がフェードアニメーションになります。開発サーバーを立ち上げて試してみてください。あまりの簡単さに感動するはずです。

方法2：特定ページのみ有効化

特定ページだけで使いたい場合は、そのページの <head> に記述します。
（注：Astroのバージョンによっては ClientRouter という名前になっている場合もありますが、機能は同じです）

方法3：デモで体験

コードを書く前にどんなものか見たい方は、Astro公式の View Transitions Demo を触ってみてください。

アニメーションのカスタマイズ

デフォルトのフェードだけでは物足りない？ Astroには4種類の組み込みアニメーションがあります。

1. アニメーション種類の変更

transition:animate 属性を使います。

<main transition:animate="slide">
  <!-- コンテンツが横からスライドインします -->
  <h1>記事タイトル</h1>
</main>
  • fade（デフォルト）：クロスフェード
  • slide：横からのスライド
  • initial：ブラウザ標準の動作
  • none：アニメーションなし

2. 要素のモーフィング（変形）

これぞView Transitionsの真骨頂です。一覧ページの小さな画像 が、詳細ページの大きな画像 に滑らかに変形して移動するエフェクトです。

仕組みは簡単。2つのページで対応する要素に同じ transition:name を付ける だけです。

一覧ページ (list.astro)

<img
  src="/image-1.jpg"
  transition:name="hero-image-1"
  class="w-20 h-20"
/>

詳細ページ (detail.astro)

<img
  src="/image-1.jpg"
  transition:name="hero-image-1"
  class="w-full h-auto"
/>

これだけで、ブラウザが勝手に「この2つは同じものだ」と認識して、位置とサイズのアニメーションを生成してくれます。複数の記事がある場合は、slugなどを使って一意な名前を生成しましょう。

transition:name={`image-${post.slug}`}

3. 接待の維持（Persist）

ページ遷移してもリロードさせたくない要素（音楽プレーヤー、地図、動画など）には transition:persist を付けます。

<audio src="bgm.mp3" controls transition:persist />

これでページを移動しても音楽は途切れません。

実践：ブログに適用してみる

ブログの「カード型リスト」から「詳細記事」への遷移を作ってみましょう。

ステップ1：Layoutに <ViewTransitions /> を追加

ステップ2：リストページの画像とタイトルに名前を付ける

<!-- src/pages/index.astro -->
{posts.map(post => (
  <a href={post.url}>
    <img
      src={post.frontmatter.cover}
      transition:name={`cover-${post.slug}`}
    />
    <h2 transition:name={`title-${post.slug}`}>
      {post.frontmatter.title}
    </h2>
  </a>
))}

ステップ3：詳細ページでも同じ名前を付ける

<!-- src/layouts/BlogPost.astro -->
<article>
  <img
    src={content.cover}
    transition:name={`cover-${content.slug}`}
  />
  <h1 transition:name={`title-${content.slug}`}>
    {content.title}
  </h1>
  <div transition:animate="slide">
    <slot /> <!-- 本文はスライドイン -->
  </div>
</article>

これで、クリックするとカバー画像が拡大し、タイトルが所定の位置に移動し、本文がスライドインしてくる、リッチな体験が完成します。

注意点とTips

サードパーティスクリプトの再読み込み

View Transitionsを使うと、ページ遷移が「擬似的なSPA」になります。つまり、ページ全体のリロードが発生しません。
そのため、load イベントで発火するGoogle Analyticsなどのスクリプトが、ページ遷移時に動かなくなることがあります。

Astroのライフサイクルイベントを使って再実行させる必要があります：

document.addEventListener('astro:page-load', () => {
  // ここにページ遷移ごとに実行したい処理を書く
  console.log('ページ読み込み完了');
  gtag('config', 'GA_MEASUREMENT_ID', {...});
});

ユーザー設定の尊重

「視差効果で酔う」などの理由でアニメーションをオフにしているユーザー（prefers-reduced-motion）には、アニメーションを見せない配慮も自動で行われますが、CSSで明示的に制御することも可能です。

まとめ

AstroとView Transitionsの組み合わせは、「手軽さ」と「リッチな体験」のバランスが最強 です。

  1. Layoutに追加：とにかくいったん <ViewTransitions /> を入れてみる。
  2. モーフィング：画像やタイトルに transition:name を付けてみる。
  3. 微調整：astro:page-load でスクリプトの動作を確認する。

これだけで、あなたのWebサイトは「ただのWebページ」から「アプリのような体験」へと進化します。ぜひ試してみてください！

Astro View Transitions導入フロー

2行のコードでWebサイトにアプリのような滑らかな遷移を追加する手順

⏱️ Estimated time: 15 min

  1. 1

    Step1: 基本設定

    共通レイアウト（Layout.astroなど）のheadタグ内に、import { ViewTransitions } from 'astro:transitions'; と <ViewTransitions /> を記述します。
  2. 2

    Step2: 要素のモーフィング設定

    一覧ページのサムネイル画像と、詳細ページのメイン画像に、同じ `transition:name`属性（例: transition:name={`img-${slug}`}）を付与します。
  3. 3

    Step3: スクリプトの調整

    ページ遷移ごとに実行が必要なJavaScript（Analyticsなど）を、document.addEventListener('astro:page-load', ...) の中に移動します。

FAQ

View Transitions APIはどのブラウザで使えますか？
2025年現在、Chrome、Edge、Safari、Firefoxの最新版を含む主要ブラウザの85%以上でサポートされています。未対応のブラウザでは自動的に通常ページ遷移にフォールバックされるため、壊れる心配はありません。
ReactやVueを使わずにSPAのような動きになるのですか？
はい。Astroは静的なマルチページアプリ（MPA）ですが、このAPIを使うことで、ルーターライブラリなしでSPAのような滑らかな画面遷移を実現できます。
ページ遷移時にAnalyticsが動かなくなりました
View Transitions有効時はページ全体のリロードが起きないため、通常のonloadイベントは発火しません。代わりに `astro:page-load` イベントを使用してください。

3 min read · 公開日: 2025年12月2日 · 更新日: 2026年1月22日

Easton Easton
技術開発

コメント

GitHubアカウントでログインしてコメントできます

関連記事

N
2026年1月7日 技術開発

Next.js ファイルアップロード完全ガイド：S3/Qiniu Cloud 署名付き URL 直接アップロード実践

Next.js ファイルアップロード S3 Qiniu Cloud 署名付き URL 直接アップロードアーキテクチャ図
2026年1月7日 技術開発

Next.js ファイルアップロード完全ガイド：S3/Qiniu Cloud 署名付き URL 直接アップロード実践

N
2026年1月7日 技術開発

Next.js Eコマース実践：カートと Stripe 決済の完全実装ガイド

Next.js Eコマースカートと Stripe 決済統合の概念図
2026年1月7日 技術開発

Next.js Eコマース実践：カートと Stripe 決済の完全実装ガイド
N
2026年1月7日 技術開発

Next.js ユニットテスト実践：Jest + React Testing Library 完全設定ガイド

Next.js Jest テスト設定の概念図。設定ファイル、テストコード、ターミナル出力を示す
2026年1月7日 技術開発

Next.js ユニットテスト実践：Jest + React Testing Library 完全設定ガイド

広告Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応