「ページ遷移を滑らかに見せたい」「詳細画面に要素がふわっと拡大してほしい」――この種の UI 体験は、これまで JavaScript フレームワーク固有のライブラリ（Framer Motion、GSAP、Barba.js など）を使わないと実現できませんでした。それが、View Transitions API の登場と Chrome 148 の公開、そして Safari の Scrollend イベント対応によって、CSS だけで 書ける時代に入りました。
2026 年春時点で、主要ブラウザの Baseline Coverage に View Transitions API が加わり、中小企業のコーポレートサイトでも実用的に採用できるフェーズに到達しています。本記事では、2026 年春の CSS 新機能まとめ では触れきれなかった View Transitions API の実装レシピを 7 つに絞り、コーポレートサイトのリニューアル時にどこで使うべきかを具体的に解説します。
View Transitions API とは ― 何ができて、何が変わるのか
View Transitions API は、DOM の変化を滑らかなアニメーションに変換する ブラウザ標準 API です。「前の状態」と「後の状態」のスナップショットを自動で撮り、その間を補間するアニメーションを CSS で制御できます。
2 つのモード
API には 2 つのモードがあります。
| モード | 対象 | 代表的な用途 |
|---|---|---|
| Same-Document Transitions | 同じページ内の DOM 変化 | タブ切替、フィルタリング、モーダル |
| Cross-Document Transitions | ページ間遷移（MPA） | 一覧 → 詳細、セクション移動 |
SPA では Same-Document、SSG / MPA では Cross-Document を使います。Astro や Next.js の MPA モード でも、追加 JS ゼロで実装できるのが革新的です。
Baseline Coverage 到達で何が変わったか
これまで Chrome / Edge でしか動かず、Safari / Firefox はフォールバック必須でした。2026 年春の Safari アップデートで主要ブラウザの Baseline Coverage に到達し、多くのユースケースでフォールバックなしで採用可能 になりました。
企業サイトの訪問者ブラウザ構成は、概ね Chrome 60%・Safari 25%・Edge 10%・Firefox 5% 程度（日本）。Safari 対応によって 訪問者の 9 割以上が標準で恩恵を受けられる状態 が成立しました。これが “実用化元年” と呼べる所以です。
実装レシピ 7 選 ― コーポレートサイトで採用したいパターン
ここから先は、コーポレートサイトや採用サイトの刷新時に採用しやすいレシピを 7 つ紹介します。どれも数行〜数十行の CSS / JS で実装でき、非対応ブラウザでもレイアウトは壊れません。自社のサイト構造に近いものから試すのがおすすめです。
レシピ 1：ページ間のヒーロー画像クロスフェード
コーポレートサイトのトップページから事例詳細・サービス紹介へ遷移する際、ヒーロー画像を滑らかにクロスフェードさせる最も基本的なレシピです。
@view-transition {
navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.35s;
}HTML 側に @view-transition ディレクティブを置くだけで、ページ間の遷移がデフォルトで滑らかになります。実装コストは10 行以下。
レシピ 2：「ふわっと拡大」する事例サムネイル → 詳細画面
一覧画面で小さく表示されていた事例サムネイルが、詳細画面では大きく展開される――これは以前なら SPA + 専用ライブラリでしか実現できなかった演出です。
<!-- 一覧ページ -->
<img src="/works/case-a.jpg" style="view-transition-name: case-a;">
<!-- 詳細ページ -->
<img src="/works/case-a.jpg" style="view-transition-name: case-a;">同じ view-transition-name を付けた要素同士が、自動で「同じ要素の移動・拡大」として補間されます。
実装ポイント：
- 一覧ページと詳細ページで同じ命名規則を守る
contain: layoutを画像コンテナに入れておくと、レイアウトシフトが防げる
レシピ 3：ヘッダーナビの滑らかなハイライト移動
グローバルナビで現在地を示す下線が、遷移時に左右にスライドして移動するレシピ。コーポレートサイトの “上品な洗練感” を出すのに絶大な効果があります。
.nav-underline {
view-transition-name: nav-indicator;
}
::view-transition-group(nav-indicator) {
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}ナビゲーション要素の下線だけに view-transition-name を付け、イージングを指定するだけで実装完了。
レシピ 4：セクション切替のスライドイン
サービス紹介ページなどで、タブ切替時にコンテンツが左右からスライドインするレシピ。
::view-transition-old(tab-content) {
animation: slide-out-left 0.3s forwards;
}
::view-transition-new(tab-content) {
animation: slide-in-right 0.3s forwards;
}
@keyframes slide-out-left {
to { transform: translateX(-20px); opacity: 0; }
}
@keyframes slide-in-right {
from { transform: translateX(20px); opacity: 0; }
}SPA ライクな体験を、MPA のまま実現できます。
レシピ 5：スクロール連動のセクション遷移
Safari の Scrollend イベント対応が Baseline に入ったことで、スクロールの”終わり”を確実に検知して セクション遷移のアニメーションを発動できるようになりました。これまで Safari ではスクロール終了タイミングの判定が曖昧で、Intersection Observer で代替するしかありませんでしたが、標準 API で揃いました。
window.addEventListener('scrollend', () => {
const currentSection = getVisibleSection();
highlightSection(currentSection);
});セクションのページネーションドットや、サイドナビの現在地ハイライトに最適です。
レシピ 6：モバイルメニューのふわっと展開
モバイルのハンバーガーメニューを開閉する際の演出に View Transitions を使うと、DOM の追加 / 削除がそのまま滑らかなアニメーションになります。
async function toggleMenu() {
if (!document.startViewTransition) {
updateMenu();
return;
}
document.startViewTransition(() => updateMenu());
}重要なのは最初の if 文で、API 非対応ブラウザでは即座にフォールバック する防御的な書き方。これで古い環境でも UI が壊れません。
レシピ 7：ダークモード切替の滑らかなクロスフェード
ダークモード切替ボタンをクリックしたとき、画面全体が滑らかにフェードする レシピ。コーポレートサイトでも採用するケースが増えています。
function toggleDarkMode() {
if (!document.startViewTransition) {
document.documentElement.classList.toggle('dark');
return;
}
document.startViewTransition(() => {
document.documentElement.classList.toggle('dark');
});
}CSS 変数ベースのテーマ設計であれば、class を 1 つトグルするだけで全色が滑らかに切り替わります。
フォールバック戦略 ― “動かなくても壊れない” 設計
View Transitions API の最大の美徳は、非対応ブラウザではアニメーションが消えるだけでコンテンツは完全に表示される 点です。これを前提にしたフォールバック設計のポイントを押さえておきます。
ポイント 1：Progressive Enhancement として扱う
アニメーションがないと成立しない UI（例：要素が別の場所から飛んでくる前提のレイアウト）は避け、アニメーションは “お化粧” として位置づけます。
ポイント 2：@supports での条件分岐
どうしても分岐が必要な場合は、CSS の @supports で判定できます。
@supports (view-transition-name: none) {
/* API 対応時のスタイル */
}ポイント 3：prefers-reduced-motion の尊重
アニメーションが疲れる・気持ち悪いユーザーのために、必ず以下を入れておきます。
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*) {
animation-duration: 0.01ms !important;
}
}これは Web アクセシビリティ対応ガイド で触れた WCAG 2.3.3（アニメーション制御）にも整合する配慮です。
コーポレートサイト刷新で採用する費用感
実装コスト自体は、既存サイトに対して1〜3 人日 で 3〜4 レシピを導入できるレベルに下がりました。以下は弊社の受託案件での目安です。
| 対象 | 工数目安 | 効果 |
|---|---|---|
| トップ → 事例詳細のヒーロー遷移 | 0.5 人日 | 印象の洗練度が一気に向上 |
| ナビゲーションのハイライト移動 | 0.3 人日 | 細部の作り込み感を演出 |
| タブ / フィルタ切替アニメーション | 1 人日 | SPA ライクな滑らかさ |
| ダークモード切替 | 0.5 人日 | モダンな印象 |
| モバイルメニュー展開 | 0.5 人日 | モバイル UX の体感向上 |
合計 3〜4 人日、新規制作なら追加 15〜30 万円程度 の差分でコーポレートサイトの印象を大きく変えられます。リニューアル時に一緒に組み込むのがコスト効率としては最適です。
リニューアルの進め方全体は、コーポレートサイトリニューアルの進め方と失敗しない発注のコツ を併せてご参照ください。また、表示速度の観点では Core Web Vitals 対策の実践ガイド と組み合わせると、速くて美しい サイトに仕上がります。
まとめ ― “滑らか” は差別化の新しい基準
View Transitions API の Baseline Coverage 到達により、「ページ遷移が滑らか」「セクション切替が気持ちいい」という体験は、もはや大企業だけの特権ではなくなりました。
採用を検討する 3 つの理由：
- 標準 API なのでライブラリ依存なし ― 将来のメンテナンスコストが極小
- プログレッシブエンハンスメント ― 非対応ブラウザでも壊れない
- 実装コストが数人日 ― リニューアル時の追加で十分賄える
弊社 GleamHub では、コーポレートサイトの刷新 × 最新 Web 標準活用 を組み合わせた提案を得意としています。「競合と差別化したい」「古臭く見えるサイトをモダンに刷新したい」というご相談から、具体的なレシピの実装・パフォーマンス計測・A/B テストまで、一気通貫でサポートします。まずは現状のサイト診断から、お気軽にご相談ください。
