2026 年、静的マルチページサイトと Safari サインオフのための View Transitions API

静的サイトのチームは、MPA にも SPA に近い遷移の滑らかさが欲しい一方で、クライアントルーターへの全面書き換えは避けたい——というジレンマを抱えがちです。View Transitions API、特に 2026 年現在議論の中心にあるクロスドキュメント対応は、通常のリンクとサーバレンダリングの HTML のまま、同一オリジン内のページ遷移にアニメーションを載せられます。誰が今採用すべきか、Safari/WebKit をマトリクスにどう置くか、そしてメイン開発機が Linux や Windows のとき最終確認に Apple Silicon Mac mini を借りる意味を整理します。QA の計画には 静的コンポーネントのコンテナクエリ と STP と安定版 Safari の比較 もあわせて読むとスムーズです。

クロスドキュメントのビュー遷移は、ブラウザがドキュメントを入れ替えるフルナビゲーションで発火します。全ページで共有するスタイルシートに @view-transition { navigation: auto; } を書けばオプトイン完了。エンジンは旧ツリーと新ツリーのスナップショットを取り、共通の view-transition-name を持つ要素を補間します。未対応環境では従来どおり瞬間遷移のみ——これがプログレッシブエンハンスメントであり、「動かない」のではなく「演出がない」にとどまります。

2026 年の典型的な構成は、(1) 静的ホストから配るグローバル CSS、(2) フレームワークが吐くメタ相当のヒント、(3) デザイナーとエンジニアが共有する命名規約——の三段です。ランディングで八十を超える固有の遷移名を量産しないようガードレールを決めておくと、後からの保守が楽です。Astro や Eleventy、Hugo なら共通パーシャルで各ルートに同じ opt-in を注入でき、クライアントバンドルは不要です。

静的 MPA で使えるようになったこと

クロスドキュメントの遷移は同一オリジンのフルページナビに紐づきます。スナップショット取得後、名前を共有する要素は morph、それ以外はクロスフェードなどで処理されます。ビルドパイプラインではベーススタイルに一度だけ @view-transition を書き、全テンプレートが同じハッシュ付き CSS を参照する形が安全です。

静的ジェネレータは横断的関心事に強く、デプロイ時に CSS と HTML の参照を同期しやすいです。機能フラグでブロックを囲めば、特定ルートだけ一時的にオフにもできます。

2026 年ブラウザマトリクス

デザインレビューで下表を共有してください。「プレビュー」チャネルは、法務が明記しない限り契約上の最終承認には使いません。

エンジン	クロスドキュメント VT	静的 MPA のメモ
Chromium 125+	安定	DevTools オーバーレイが充実。モバイル Chrome では GPU メモリに注意。
Safari 18+ / WebKit	対応（マイナーごとに再確認）	物理 macOS 必須。iOS Safari はタッチスクロールまわりに癖あり。
Firefox	フラグ / 段階的ロールアウト	フォールバック前提。エンジン待ちでローンチを止めない。
埋め込み WebView	バラつき	アプリ内ブラウザはアニメを削ることがある。同一ドキュメントは document.startViewTransition を別途検出。

長大なカタログで同時に名前付き遷移が十個を超えると、チームによっては GPU 使用量が12～18% ほど増えるとの報告があります。Web フォントと同様、少数の高インパクト箇所に絞るのが健全です。

本番で生き残る MPA パターン

共有クローム：ナビ、フッター、告知バーは最初の候補です。レイアウトパーシャルで安定した view-transition-name を定義し、全静的ページが継承します。

サムネから詳細へ：グリッドのタイルと PDP のヒーローを SKU 由来の論理名で結べます。サーバ側で整合を検証し、誤ったページ同士が名前を共有しないようにします。

ドキュメントサイト：本文だけクロスフェードしサイドバーは静止——読者には連続性が伝わりつつ MPA のままです。コンテナクエリ駆動のサイドバー と相性が良いです。

アンチパターンは、転送4 MB を超える重い LP で全画面 opacity を振ること、非同期で再描画される広告スロットと遷移を結びつけることです。ネットワーク再ペイントが途中に入るとカクつきます。

性能上のガードレール

1. ルートあたりの同時命名要素は、プロファイルなしなら10～12個程度を上限目安に。
2. アニメするカードには contain: paint でレイヤーを隔離しつつ、Safari で overflow クリップを確認。
3. 出発・到着テンプレート双方のクリティカル CSS を先読みし、スロットリングした 4G でもナビ後100 ms 前後で新文書がペイントされるよう調整。
4. prefers-reduced-motion: reduce では装飾遷移を無効化——アクセシビリティ重視チームでは必須扱いです。

Web Vitals と併用し、遷移オン後に LCP 中央値が200 ms 以上悪化したら、不要なアニメを遅延するかスナップショット面積を縮めます。

Safari / WebKit ワークフロー

Linux の CI だけではブレンドや角の微妙な滲みを保証できません。週45 分ほど実機枠を確保し、顧客向けは安定版 Safari、先行修正の確認は Safari Technology Preview に限定するのが無難です。デザイン QA 用に画面録画を残し、Web Inspector のレイヤーパネルで想定外のプロモーションを追います。

社内に Apple ハードが無い場合、クラウド Mac mini の短期レンタルが調達待ちを消します。実験フラグを触る前にスナップショットを取り、誤った defaults write で WebKit を壊しても戻せます。SSH/VNC は OS を問いません。日単位の短時間利用は$16.9/日 前後が目安で、スプリント二本のためにノートを送るより安く済むケースもあります。

ハイブリッド構成での同一ドキュメントとクロスドキュメント

静的 MPA に小さなクライアント島を載せるマーケチームは、document.startViewTransition が in-place 更新用で、クロスドキュメント API がフルナビ用だと整理しておくと混乱が減ります。PCI の都合で静的オリジンが二つに分かれるチェックアウトでは境界をまたげないため、モーフではなくローディングスケルトンを設計します。

国際化では RTL がアニメの向きに影響します。アラビア語・ヘブライ語テンプレは WebKit の安定版と STP の両方で試し、混合ヘッダーを動かすとマイナー版間で backdrop-filter の2px 級の差が出ることがあります。

キャッシュ戦略も重要です。opt-in CSS が CDN で Cache-Control: immutable なら、全 HTML が同じハッシュ資産を指すようデプロイを同期しないと、半分だけ古い CSS という「ランダムな Safari 不具合」に見える状態になります。

pageswap や pagereveal で「遷移が主観的に完了した」タイミングを計測し、5% サンプリングなら多くの場合24 時間以内に劣化を検知できます。

セキュリティレビューではスナップショットが機微情報を含まないか聞かれます。CSS で隠す前に一瞬フラッシュする PII 画面を共有の遷移名に載せないでください。サーバリダイレクトやルート分割で公開クロームと機密状態を分離します。

印刷スタイルでは遷移の価値はほぼ無いので、装飾は @media screen に閉じ、PDF 用途のレイアウトを安定させます。

よくある質問

ビュー遷移は SPA ルーターを置き換えますか？

いいえ。コンテンツ中心サイトのクライアントルーター依存は下げられますが、コード分割済みのデータダッシュボードは React Router 等を継続して問題ありません。製品ごとに選びます。

サブドメイン間は？

現状は同一オリジンが前提です。将来仕様に期待せず、クロスサブドメインは「不可」で設計してください。

アクセシビリティで問題になりやすい点は？

動きを減らす設定の無視、フォーカス可能要素のアニメとフォーカス順の不一致、スクリーンリーダーへのロード状態の非通知などです。フォーカスリングを残し、必要ならライブリージョンで主要ルート変更を知らせます。

Apple Silicon 上の Mac mini は、ネイティブな色管理と静かな動作で長時間の Safari 検証に向きます。MacHTML は SSH/VNC 付きのベアメタル Mac mini を提供し、静的チームがスプリント単位で View Transitions のエビデンスを取ってから解放する弾力容量を確保できます。