View Transitions / Showcase

ページ遷移シームレス化（View Transitions API）

ネイティブAPI でページ遷移を滑らかに。SPAのような体感を、静的サイトのまま実現。

LIVE 難易度 ★★ medium 想定工数 6h ¥40,000〜

View Transitions API
Astro

Page 1: Hero

ネイティブ View Transitions API でページ遷移時の白瞬きをゼロに。Astroの組込連携で実装難易度も低い。

概要

ブラウザのネイティブ View Transitions API を使い、ページ遷移時の白い瞬きを排除。
SPAのような体感を、静的サイトのまま実現します。

共通要素（ヘッダー / ロゴ / 画像）が滑らかに次ページへ移動
フェード / スライド / ズームを CSS だけで指定可能
対応外ブラウザは通常遷移にフォールバック（プログレッシブ拡張）

技術要素

View Transitions API（Chrome 111+、Safari 18+）
Astro の transition:name 属性
CSS @view-transition

実装難易度

★★（中級）

想定工数・費用感

工数：1日弱（6時間）
価格目安：¥40,000〜