HTML ファーストで始める View Transitions API 入門

View Transitions API とは

View Transitions API は、ページ遷移や画面切り替えの際に、前後の画面をつなぐようなアニメーションを付与できる Web 標準の API です。従来であれば JavaScript やフレームワークに依存しがちだった画面遷移の演出を、ブラウザが主導して処理 してくれる点が特徴です。

重要なのは、この API が 見た目の体験を改善するためのもの であり、通信の高速化やデータ取得方法を変えるものではない、という点です。

https://kazumich.com/demo/view-transition/2_view-transition/index.html

https://github.com/kazumich/view-transition

いま、制作現場で使える理由

以前は View Transitions API を使うには、対応ブラウザやフラグの存在を強く意識する必要がありました。しかし現在では状況が変わっています。

• Chrome / Edge では安定して利用可能
• Safari も正式対応が進み、実用上の問題はほぼ解消
• Firefox も対応が進み、非対応環境でも自然にフォールバックする

このため、Progressive Enhancement を前提とすれば、通常の Web サイト制作の現場でも無理なく導入できる段階 に入っています。

最低限の記述で何が起きるのか

View Transitions API を使うために、特別な meta タグや JavaScript を用意する必要はありません。まず必要なのは、次の CSS だけです。

@view-transition {
  navigation: auto;
}

これを追加するだけで、

• 通常の <a> リンクによるページ遷移
• リロードを伴うページ遷移（cross-document）

に対して、ブラウザ標準の View Transition が自動的に適用されます。対応ブラウザではフェードを中心とした滑らかな遷移が行われ、非対応ブラウザでは従来どおり即時に画面が切り替わるだけです。

HTML ファーストで考える View Transitions

View Transitions API は、特定のフレームワークを前提とした技術ではありません。既存の HTML 構造とナビゲーションを、そのまま活かせます。

• <a> タグのリンクはそのまま
• JavaScript によるルーティングは不要
• SEO やアクセシビリティへの影響も最小限

「このフレームワークを使えばできる」と思われがちですが、実際には ごく簡単な記述を追加するだけ で成立します。

一覧ページ → 詳細ページで体験する View Transitions

一覧ページと詳細ページの両方で、対応する要素に view-transition-name を指定することで、一覧から詳細へ遷移する際に、要素同士がつながって見える View Transition を実現できます。

<img src="..." style="view-transition-name: photo-1;">

view-transition-name の指定は、CSS ファイルに記述することも可能ですが、対象となる要素を明示しやすいという点から style 属性での指定がおすすめ です。特に一覧ページと詳細ページで 1 対 1 の対応関係 を持たせる場合、HTML 上で対応関係が一目で分かるため、実装・保守の両面で扱いやすくなります。

一覧ページと詳細ページで同じ名前を指定するだけで、ブラウザはそれらを 同一要素 として扱い、位置やサイズの違いを自動的に補間しながら、画像が移動・変形するような遷移を生成します。

HTML 側で行うのは、「どの要素とどの要素を対応させたいか」を明示することだけ です。アニメーションの実装や補間処理は、すべてブラウザに委ねられます。

同一ページ内での view-transition-name の扱い

view-transition-name は、同一ページ内では一意である必要があります。同じページ内に同じ名前を持つ要素が複数存在すると、ブラウザが対応関係を判断できず、View Transition は正しく動作しません。

そのため、

• 一覧ページでは、記事ごとに異なる名前を付ける（例：photo-1, photo-2, photo-3）
• 詳細ページでは、対応する 1 要素のみに同じ名前を付ける

という 1 対 1 の関係 を保つことが重要です。

画像以外の要素にも利用できる

view-transition-name を指定できるのは、画像だけではありません。見出しや div 要素など、任意の HTML 要素 に指定できます。

<h2 style="view-transition-name: title-1;">記事タイトル</h2>
<div style="view-transition-name: card-1;">...</div>

一覧ページと詳細ページで同じ名前を指定すれば、見出しやコンテンツブロックであっても、shared element transition が成立します。

実務での考え方

shared element transition は、意味的に同じ役割を持つ要素を対応付ける ことで、最も効果を発揮します。

• 一覧のアイキャッチ画像 → 詳細のメイン画像
• 一覧のタイトル → 詳細ページの見出し
• カード全体 → 詳細コンテンツのラッパー

HTML の構造を大きく変えることなく、見た目の体験だけを自然に向上させられる 点が、View Transitions API の強みです。

アクセシビリティへの最低限の配慮

画面全体が動く View Transitions では、ユーザーの設定を尊重することも重要です。

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

prefers-reduced-motion は、「画面の動きを減らしたい」というユーザーの OS 設定を検知するための Media Query です。

この指定を入れておくことで、

• 通常のユーザー：アニメーションあり
• 動きを控えたいユーザー：即時遷移

という、無理のない出し分けが可能になります。

まとめ：まずは HTML + CSS で十分

View Transitions API は、

• フレームワーク前提ではない
• 最低限の記述から始められる
• HTML ファーストな設計と相性が良い

という特徴を持っています。

最後に、もう一度だけ書いておきますが、必要なのは次の記述だけです。

@view-transition {
  navigation: auto;
}

<img src="..." style="view-transition-name: photo-1;">

これだけで、通常のページ遷移に View Transition が適用され、一覧ページと詳細ページをつなぐ体験を実現できます。まずは HTML + CSS だけ で体験し、必要になった段階でアニメーション調整や拡張を検討すれば十分です。

この次は、HTML ファーストで始める View Transitions API（htmx 編） で、same-document の View Transitions や、htmx と組み合わせた実装について紹介します。