このページは 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 を使用してエクスペリエンスを実装した最初のウェブサイトの一つです。

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 テストを行うことなく、最初から大きな価値を提供できると判断しました。ビュー遷移は、スムーズなナビゲーションでアプリとウェブのギャップを埋めるための一歩です。
Anoop Menon、redBus CTO

サイバーエージェント

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

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

CyberAgent は、以前、CSS アニメーションやフレームワークを使用してアニメーショントランジションを実装し、ユーザーエクスペリエンスを改善することを検討していましたが、DOM のレンダリングのパフォーマンスの低下とコードのメンテナンス性に懸念がありました。Chrome に View の遷移 API のサポートが追加されたときには、この 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 というサービスで、新しい View Transitions API for Multiple Page Apps（MPA）（現在はフラグ 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 を使用している点として、クイックリンクを使用して詳細ページにプリレンダリングルールを簡単に実装している点も興味深い点です。サンプルコードは次のとおりです。

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 は、ブランドをアピールするために指定されたアニメーションデザインを使用しています。ビュー遷移を使用すると、外部ライブラリの維持にかかる費用を増やすことなく、このブランド化されたエクスペリエンスを実装できます。

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

ニカア

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 が新しく強化されたことに非常に満足しており、他のページにもビュー遷移を実装する準備を進めています。デザイン担当のバイスプレジデントからのコメントは次のとおりです。

今後リリースされるすべての機能で、必要に応じてビュー遷移を実装する予定です。すでに特定されている分野には、チームが積極的に投資しています。
Krishna R V、デザイン担当バイスプレジデント

PolicyBazaar

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

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

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

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

PolicyBazaar は、見積もり前の経路でさまざまな要素間でビューを遷移させることで、保険契約の購入に必要な詳細情報を見込み顧客が入力する際にワクワク感を演出しました。

実装の技術的な詳細

同社は、コードベースの大部分を Angular と React が占めるハイブリッドフレームワークアプローチを採用しています。以下は、Aman Soni（PolicyBazaar のフロントエンドリードデベロッパー）が共有している Angular で記述されたコードからの 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');
  }

体験談

ライフビジネスユニットのデザイン担当ヘッドである Rishabh Mehrotra 氏は、ビューの遷移は、ユーザビリティ、エンゲージメント、全体的な満足度を高めることで、ユーザーのウェブサイトエクスペリエンスを向上させるうえで重要な役割を果たしたと述べています。これにより、スムーズなナビゲーション、ガイド付きの操作、認知負荷の軽減、モダンな美しさなどを実現できました。

ウェブエクスペリエンスの向上は、PB にとって最優先事項であり、VT は優れたシームレスでこれを実現するうえで重要なツールであることが証明されています。デベロッパーコミュニティとユーザーベースの両方から広く支持されていることに、チームは大きな喜びを感じています。さまざまな POD にわたる統合を検討するにあたり、満足度と運用の卓越性に大きなプラスの影響を与えると予想しています。
Saurabh Tiwari（PolicyBazaar CTO）

次のステップ

ビュー遷移を試してみたいですか？詳細については、以下のリソースをご覧ください。