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

ビューの遷移によるシームレスなナビゲーション

Yuriko Hirota

Saurabh Rajpal

トランジションには、ユーザーがコンテキストを維持し、レイテンシの認識を軽減するなど、多くのメリットがあります。デベロッパーは、ページ間のシームレスな切り替えを作成して、サイトへのユーザーエンゲージメントを高めたいと考えています。

ただし、状態遷移を有効にするのは非常に困難でした。デベロッパーは 2 つの異なる要素の状態を管理する必要があったためです。単純なクロスフェードでも、両方の状態が同時に存在します。これにより、送信要素での追加のインタラクションの処理など、ユーザビリティに関する課題が生じます。支援デバイスのユーザーの場合、前後の状態が同時に DOM に存在する期間があります。また、ツリー内の要素が視覚的には問題ない形で移動しても、読み取り位置やフォーカスが簡単に失われる可能性があります。

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

実装は簡単なのでしょうか？どのようなユースケースがありますか？他のデベロッパーはビューの切り替えをどのように使用していますか？

この記事では、RedBus（旅行）、CyberAgent（ニュース/ブログパブリッシャー）、Nykaa（e コマース）、PolicyBazaar（保険）の 4 つのウェブサイトでビュー遷移を実装する方法と、ビュー遷移 API を使用することでウェブサイトがさまざまな形でメリットを得た方法について説明します。

redBus

MakeMyTrip グループの一員である redBus は、インドのバンガロールに本社を置き、世界各地で事業を展開しているバスの予約とチケット販売のウェブサイトです。View Transitions API を使用したエクスペリエンスを実装した最初のウェブサイトの一つです。

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 氏は、ビュー遷移は、ユーザーエクスペリエンスの向上とメンテナンスオーバーヘッドの削減を真に望む人にとって非常に優れた機能であると述べています。

Google は、さまざまなユーザーから貴重なインサイトを得るために、包括的なユーザーフィードバックセッションを実施しました。Google は、バスや鉄道のユーザーベースとそのニーズを深く理解しており、その専門知識を活かして、この機能は A/B テストを実施しなくても最初から大きな価値を提供できると確信しています。ビューの切り替えは、スムーズなナビゲーションエクスペリエンスでアプリとウェブのギャップを埋めるためのステップです。
redBus CTO、Anoop Menon 氏

サイバーエージェント

サイバーエージェントは、ブログやニュースのパブリッシングなど、多くのオンラインサービスを提供する日本の IT 企業です。

サイバーエージェントがビュー遷移を実装した理由

CyberAgent は、過去に CSS アニメーションやフレームワークを使用してアニメーション付きのトランジションを実装し、ユーザーエクスペリエンスを向上させることを検討していましたが、DOM のレンダリングのパフォーマンスの低下とコードの保守性について懸念していました。Chrome で View Transitions API のサポートが追加されたとき、Chrome チームは、この 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 のビュー遷移

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

ビューの切り替えは 2 か所で使用されています。1 つ目は、次の動画で示されているニュースのカテゴリを変更するときです。

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

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

この方法では、ページのさまざまな部分に異なる view-transition-name を割り当てます。たとえば、記事の上部に 1 つの 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 による View Transitions API の使用についてもう 1 つ興味深い点は、quicklink を使用して詳細ページにプリレンダリングルールを簡単に実装したことです。以下に、サンプルコードを示します。

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}/`);
  });

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

体験談

サイバーエージェントの Ameba サービスの Tech Lead である原一成氏は、ビューの切り替えがビジネスに大きな影響を与える可能性がある理由を 2 つ挙げています。

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

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

Nykaa

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 の大幅な改善に非常に満足しており、他のページにもビュー遷移を実装する準備を進めています。デザイン担当副社長は次のように述べています。

今後リリースされる機能のうち、ビューの切り替えが適切なものについては、すべて実装する予定です。一部の分野はすでに特定されており、チームはそれらに積極的に投資しています。
デザイン担当 VP、Krishna R V

PolicyBazaar

グルガオンに本社を置く PolicyBazaar は、インド最大の保険アグリゲーターであり、多国籍の金融テクノロジー企業です。

PolicyBazaar がビューの切り替えを実装した理由

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

ただし、これらのカスタム実装には、パフォーマンスベースの遅延、コードのメンテナンスの複雑さ、使用されるフレームワークとの互換性の最適化が不十分になるというコストがかかります。View Transitions API は、使いやすいインターフェースとネイティブで利用可能なパフォーマンス上のメリットを提供することで、これらの課題のほとんどを克服するのに役立ちました。

PolicyBazaar は、見積もり前のユーザージャーニーのさまざまな要素でビューの切り替えを使用し、保険契約の購入に必要な詳細情報を入力するよう見込み顧客に働きかけました。

実装の技術的な詳細

ハイブリッドフレームワークアプローチを採用しており、コードベースの大部分は Angular と React で構成されています。Angular で記述されたコードから VT を抜粋したものを、Aman Soni 氏（PolicyBazaar のリードフロントエンドデベロッパー）が共有しています。

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）

次のステップ

ビューの切り替えを試してみませんか？詳細については、以下のリソースをご覧ください。

ビューの遷移によるシームレスなナビゲーション コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

redBus

Redbus がビュー遷移を実装した理由

実装の技術的な詳細

ビジネスへの影響

サイバーエージェント

サイバーエージェントがビュー遷移を実装した理由

実装の技術的な詳細

プリレンダリング技術を使用した MPA のビュー遷移

体験談

Nykaa

Nykaa がビュー遷移を実装した理由

実装の技術的な詳細

体験談

PolicyBazaar

PolicyBazaar がビューの切り替えを実装した理由

実装の技術的な詳細

体験談

次のステップ

ビューの遷移によるシームレスなナビゲーション