このページは Cloud Translation API によって翻訳されました。

ビュー遷移でシームレスなナビゲーションを実現

Yuriko Hirota

Saurabh Rajpal

遷移は、コンテキストにとらわれないまま、レイテンシの認識を減らすなど、ユーザーにとって多くのメリットがあります。デベロッパーは、ページ間をシームレスに移動して、サイトでのユーザーエンゲージメントを高める機能を求めています。

しかし、デベロッパーが 2 つの異なる要素の状態を管理する必要があるため、状態遷移を有効にすることは非常に困難でした。単純なクロスフェードのようにも、両方の状態が同時に存在する必要があります。送信要素で追加のインタラクションを処理するなど、ユーザビリティの面で課題が生じます。支援デバイスのユーザーの場合、変更前と変更後の両方の状態が DOM に同時に存在する期間があります。また、アイテムがツリーの周りに適切に動き、読みやすい位置やフォーカスが失われることもあります。

Chrome 111 で導入された View Transitions API を使用すると、ページ間のスムーズでシンプルな遷移を作成できます。これを使用すると、状態間で重複することなく DOM を変更し、スナップショットされたビューを使用して状態間の遷移アニメーションを付けることができます。

どれほど簡単に実装できるのか、疑問に思われるかもしれません。どのようなユースケースがあるか他のデベロッパーはビュー遷移をどのように使用していますか？

この記事では、RedBus（旅行）、CyberAgent（ニュース/ブログパブリッシャー）、Nykaa（e コマース）、PolicyBazaar（保険）の 4 つのウェブサイトでのビュー遷移の実装と、View Transitions API を使用することでウェブサイトがどのようなメリットを得られるかを説明します。

redBus

MakeMyTrip グループの redBus は、インドのバンガロールに本社を置くバスの予約および乗車券販売のウェブサイトで、世界中のさまざまな地域で事業を展開しています。View Transitions API を使用してエクスペリエンスを実装した最初のウェブサイトの 1 つです。

Redbus がビュー遷移を実装したのはなぜですか？

redBus のチームは、ネイティブアプリにできるだけ近い統一されたウェブエクスペリエンスを提供することを固く信じています。実際、何年にもわたり、カスタマイズした複数のソリューションを導入してきました。たとえば、View Transitions API が開発される前から、ページ遷移用にカスタマイズされた JavaScript と CSS ベースのアニメーションをロールアウトしました。しかし、ネットワークやデバイスの下位セグメントでパフォーマンス管理に対処する必要があり、アダプティブローディング戦略を導入するとエクスペリエンスに差が生じることがありました。

redBus は、複数のユーザージャーニーにビュー遷移を使用しました。たとえば、モバイルアプリ内のセルフヘルプセクションで Chrome のカスタムタブでウェブページを開いたり、バス乗車券予約の目標到達プロセスで在庫一覧ページから支払いページに移動したりできます。後者の場合は、ビューが遷移することでページ間のナビゲーションがよりスムーズになり、コンバージョン率が上昇しました。これは、ユーザーエクスペリエンスが向上し、手間のかかる操作（利用可能な最新の在庫の取得など）を実行する際に認識されるパフォーマンスも向上しました。

実装の技術的な詳細

redBus は、フロントエンドの技術スタックとして React と EJS を使用し、さまざまな工程で SPA と MPA を組み合わせています。ビュー遷移の使用方法を次のコードの抜粋に示します。

/* Forward Transition */
export const goToURL = ( url: string , reactHistory: any ): void => {
  if(document.startViewTransition) {
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.push(url) : (window.location.href = url);
    })
  } else {
    reactHistory ? reactHistory.push(url) : (window.location.href = url);
  }
};

/* Back Transition */
export const goBack = ( reactHistory: any ): void => {
  if(document.startViewTransition) {
    document.documentElement.classList.add('back-transition');
    let viewTransition = document.startViewTransition();
    viewTransition.ready.finally(() => {
      reactHistory ? reactHistory.goBack() : history.back();
    })
    viewTransition.finished.finally(() => {
      document.documentElement.classList.remove('back-transition');
    })
  } else {
    reactHistory ? reactHistory.goBack() : history.back();
  }
};

次の CSS で、slide-to-right、slide-to-left、slide-from-right、slide-from-left が CSS アニメーションキーフレームです。

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
.back-transition::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
  300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}
.back-transition::view-transition-new(root) {
  animation: 700ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
  700ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-left;
}

ビジネスへの影響

redBus は、サイト全体で INP の改善に取り組むとともに、ビューの移行を実装した結果、売上が 7% 増加しました。redBus のシニアエンジニアリングマネージャーである Amit Kumar 氏は、ビュー遷移は、ユーザーエクスペリエンスを向上させ、メンテナンスのオーバーヘッドを削減したいと考えている人にとって本当に素晴らしいものであると述べています。

多様なユーザーから得た貴重なインサイトを取り入れた、包括的なユーザーフィードバックセッションを実施しました。当社のユーザーベース（バスと鉄道）とそのニーズを深く理解しており、当社の専門知識と併せて、この機能が A/B テストを必要とせずに最初から大きな価値をもたらすと確信しています。ビュー遷移は、スムーズなナビゲーションでアプリとウェブの間のギャップを埋めるための一歩です。
redBus、CTO、Anoop Menon 氏

CyberAgent

サイバーエージェントは日本を拠点とする IT 企業で、ブログやニュースの発行など、多くのオンラインサービスを提供しています。

CyberAgent がビュー遷移を実装したのはなぜですか？

CyberAgent は、ユーザーエクスペリエンスを向上させるために、CSS アニメーションの使用やアニメーション遷移の実装を検討したことがありましたが、DOM のレンダリングパフォーマンスの低下やコードの保守性に懸念がありました。Chrome に View 遷移 API のサポートが追加されたとき、同社はこれを使用して魅力的なページ遷移を作成することで、こうした課題を克服したいと考えました。

CyberAgent は、ブログリストとブログページ間のビュー遷移を実装しました。ここでは、ヒーロー画像に要素遷移をどのように追加したかに注目してください。こちらのサイトにアクセスして、ぜひ実際にお試しください。

また、メディアクエリを使用して、デバイスごとに異なるアニメーションエクスペリエンスを設計しました。モバイルページでは要素の遷移を組み込んでいましたが、パソコンではこの効果が大きく動きすぎました。

@media screen and (min-width: 769px) {
  .main-visual {
    view-transition-name: none !important;
  }
}

実装の技術的な詳細

CyberAgent は Next.js を使用して SPA を構築します。次のコードサンプルは、View Transition API の使用方法を示しています。

export const usePageTransition = () => {
  const router = useRouter();
  const defferedRef = useRef<Deferred | null>(null);

  useEffect(() => {
    const handleRouteChangeComplete = () => {
      defferedRef.current?.resolve();
    };

    const handleRouteChangeStart = (url: string) => {
      if (!("startViewTransition" in document)) return;
      if (router.asPath === url) return;

      const deffered = new Deferred();
      defferedRef.current = deffered;
      (document as Document).startViewTransition(async () => {
        await deffered.promise;
      });
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeComplete);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeComplete);
    };
  }, [router.asPath]);
};

その他の Next.js コードのサンプルを見る。

事前レンダリング技術を使用して MPA の遷移を表示する

CyberAgent は、ニュースポータルサイトである Ameba News というサービスで、新しい複数ページアプリ用の View Transitions API（MPA）（現在はフラグ chrome://flags/#view-transition-on-navigation）も試しました。

ビュー遷移は 2 つの場所で使用されていました。1 つ目は、次の動画に示すように、ニュースのカテゴリを変更するときです。

2 つ目は、コンテンツの抜粋が表示されるニュースハイライトページで、ユーザーが [詳細を表示] をクリックすると、記事の残りの部分がフェードインする間です。

興味深い点は、ボタンがクリックされた後に変化する部分にのみアニメーションを追加している点です。このようにアニメーションデザインを少し調整することで、ユーザーの視点から見ると MPA ページが SPA のように見え、新しいコンテンツのみがアニメーション化されます。

次のように、ページの各部分に異なる view-transition-name を割り当てました。たとえば、記事の上部と下部に別の view-transition-name を割り当て、上部にはアニメーションを追加しませんでした。

::view-transition-old(root) {
  animation:
    var(--animation-disappear-duration) var(--animation-disappear-easing) both fade-out;
  }

::view-transition-new(root) {
  animation:
    var(--animation-appear-in-duration) var(--animation-appear-in-easing) both fade-in;
}

CyberAgent によるビュー遷移 API の使用に関するもう一つの興味深い点は、クイックリンクを使用して詳細ページに事前レンダリングルールを簡単に実装できることです。サンプルコードは次のとおりです。

import { prerender } from ‘https://.../quicklink.mjs’;

window.addEventListener('load', () => {
  const match = location.pathname.match(/\\/(.+)\\/hl\\/([0-9a-z-_]+)/);
  if (!match) return;
    const [_, dirname, entryId] = match;
    prerender(`/${dirname}/${entryId}/`);
  });

クイックリンクの実装について詳しくは、こちらの記事をご覧ください。

体験談

CyberAgent の Ameba サービスのテクニカルリーダーである原一成氏は、ビューの移行がビジネスに大きな影響を与える可能性があると述べています。その理由は 2 つあります。

まず、ページ上でユーザーをガイドします。ビュー遷移を使用すると、ユーザーを最も重要なメッセージに集中させ、ウェブページを最大限に活用できます。また、アニメーションでブランドを際立たせ、強調します。CyberAgent は、ブランドを伝える指定のアニメーションデザインを使用しています。ビュー遷移を使用すると、外部ライブラリのメンテナンス費用を増やすことなく、このブランドエクスペリエンスを実装できます。

ビュー遷移は、私のお気に入りの API の一つです。アニメーションを標準のブラウザ機能として追加できるため、ライブラリに依存する他のソリューションと比較して、ビュー遷移の実装と保守が容易になります。Google のブランドを伝えるために、ビューの移行をより多くのサービスに実装していきたいと考えています。
Ameba 社 CTO、原一成氏

ニカー語

Nykaa は、インド最大のファッションおよび美容 e コマースプラットフォームです。同社は、モバイルウェブのエクスペリエンスをネイティブアプリのエクスペリエンスにできる限り近づけることを目指しています。遷移アニメーションを実装する際、以前は複雑なカスタム JavaScript を記述するのに苦労していました。これは、ウェブサイトのパフォーマンスにもわずかな影響を及ぼしました。

Nykaa がビュー遷移を実装したのはなぜですか？

ビュー遷移の登場により、Nykaa のチームはこれらの遷移がネイティブで利用可能になることで、パフォーマンスを損なうことなくページ遷移の UX を大幅に改善できる機会を見いだしました。Nykaa は、商品の詳細ページから商品リスティングページへの移行にビュー遷移を多用しています。

実装の技術的な詳細

Nykaa は React と Emotion を使用して SPA を構築しました。React でビュー遷移を使用する方法に関するその他のサンプルコードについては、こちらをご覧ください。

if (document.startViewTransition) {
      document.startViewTransition(() => {
        history.push(productUrl);
      });
    } else {
      history.push(productUrl);
   }

const fadeIn = keyframes`
  from { opacity: 0; }
`;

const fadeOut = keyframes`
  to { opacity: 0; }
`;

const slideFromRight = keyframes`
  from { transform: translateX(300px); }
`;

const slideToLeft = keyframes`
  to { transform: translateX(-300px); }
`;

const slideToRight = keyframes`
  to { transform: translateX(300px); }
`;

const slideFromLeft = keyframes`
  from { transform: translateX(-300px); }
`

サイドドロワーアニメーション用の CSS:

::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 1, 1) both ${fadeOut},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideToLeft};
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0, 0, 0.2, 1) 300ms both ${fadeIn},
  1000ms cubic-bezier(0.4, 0, 0.2, 1) both ${slideFromRight};
}

.back-transition {
  display: inherit;
}

.back-transition::view-transition-old(root) {
  animation-name: fade-out, ${slideToRight};
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, ${slideFromLeft};
}

体験談

Nykaa のアプリ責任者である Sunit Jindal 氏は、ビュー遷移の最大のメリットは「速度の認識」であると述べています。Nykaa はシマー効果を使用して、バックエンドからコンテンツが読み込まれるのを待っていますが、シマー効果を表示しても、ユーザーがコンテンツの読み込みを待つ時間を確保できないことがわかりました。ビュー遷移を使用すると、遷移自体によって「何かがもうすぐ起こる」という感覚をユーザーに与えることができるため、待ち時間が短縮されました。

Nykaa は、ビュー遷移によってウェブページの UX が新しく強化されたことに大きな期待を寄せ、他のページにもビュー遷移を実装する準備が整いました。同社の設計担当バイスプレジデントは、次のように述べています。

Google は、今後リリースされるすべての機能において、妥当な場合にビュー遷移を実装することを約束しています。一部の領域はすでに特定されており、チームはそれらに積極的に投資しています。
デザイン担当バイスプレジデント Krishna R V 氏

PolicyBazaar

グルガオンに本社を置く PolicyBazaar は、インド最大の保険情報集約サイトであり、多国籍な金融テクノロジー企業です。

PolicyBazaar がビュー遷移を実装したのはなぜですか？

ウェブファーストの企業である PolicyBazaar のチームは、クリティカルユーザージャーニー全体で可能な限り最良のユーザーエクスペリエンスを提供することを常に目指してきました。View Transitions API のリリース前から、JavaScript と CSS を使用してカスタム遷移を実装することが一般的でした。これらの実装は、ユーザーエクスペリエンスの向上、シームレスなナビゲーションフローの作成、ウェブサイトの全体的な視覚的な魅力の向上でした。

しかし、こうしたカスタム実装には、時折、パフォーマンス上の遅延、コードメンテナンスの複雑さ、使用されるフレームワークとの互換性が最適ではないという代償が伴いました。View Transitions API は、ネイティブに利用できるパフォーマンス上のメリットを備えた使いやすいインターフェースを提供することで、これらの課題のほとんどを克服することができました。

PolicyBazaar は、潜在的な購入者が保険契約の購入に必要な詳細情報を提供できるように、見積もり前のジャーニーのさまざまな要素にわたるビュートランジションを使用しました。

実装の技術的な詳細

同社はハイブリッドフレームワークアプローチを採用しており、Angular と React がコードベースの大部分を占めています。Angular で記述され、Aman Soni（PolicyBazaar のリードフロントエンドデベロッパー）によって共有されている VT のコードからの抜粋を以下に示します。

toggleWidgetAnimation() {
    let doc:any = document;

    if (!doc.startViewTransition) {
      this.toggleWidget();
      return;
    }

    doc.startViewTransition(() => this.toggleWidget());
  }

  toggleWidget() {
    let badgeEle = document.querySelector('.animate_init_state_one');
    let textEle = document.querySelector('.animate_init_state_two');

    badgeEle.classList.toggle('hide');
    textEle.classList.toggle('hide');
  }

体験談

デザイン責任者（Life BU）の Rishabh Mehrotra 氏は、ビューの移行が、ユーザビリティ、エンゲージメント、全体的な満足度の向上、ユーザーのウェブサイトエクスペリエンスの向上に大きな役割を果たしたと述べています。これにより、スムーズなナビゲーション、ガイド付きインタラクション、認知負荷の軽減、最新のデザインなどを実現できました。

ウェブエクスペリエンスの向上は PB の最優先事項であり、VT は驚異的なシームレス性でこれを実現するための重要なツールであることが証明されています。デベロッパーコミュニティとユーザーベースの両方にその幅広い魅力が広がっているため、当チームの熱意が高まっています。当社は、多様な POD の統合を検討することで、満足度とオペレーショナルエクセレンスに広範囲にプラスの影響がもたらされると予想しています。
Saurabh Tiwari 氏（PolicyBazaar CTO）

次のステップ

ビュー遷移を試してみませんか？詳細については、以下のリソースをご参照ください。