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

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 のチームは、ネイティブ アプリに可能な限り近い、統合されたアプリのようなウェブ エクスペリエンスを提供するという強い信念を持っています。実際、同社は長年にわたって複数のカスタマイズされたソリューションを実装してきました。たとえば、ページ遷移用のカスタマイズされた JavaScript および CSS ベースのアニメーションを、View Transitions API の開発前からロールアウトしました。しかし、そのためにはネットワークとデバイスの下位セグメントでのパフォーマンス管理が必要となり、適応型読み込み戦略を導入することでエクスペリエンスに違いが生じることがありました。

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% 増加しました。Amit Kumar 氏（redBus のシニア エンジニアリング マネージャー）によると、ビューの移行は、ユーザー エクスペリエンスの向上とメンテナンスのオーバーヘッドの削減を心から望んでいるユーザーにとって、非常に素晴らしいことです。

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

redBus CTO、Anoop Menon 氏

サイバーエージェント

サイバーエージェントは日本に拠点を置く 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 を割り当てました。たとえば、記事の上部に view-transition-name を割り当て、下部に 1 つ割り当て、上部にはアニメーションは追加しませんでした。

::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 を使用しているもう一つの興味深い点は、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}/`);
  });

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

体験談

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

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

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

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 が新しく強化されたことにとても期待を寄せ、他のページにもビュー遷移を実装する準備が整いました。同社のデザイン担当バイス プレジデントは、次のように述べています。

Google は、今後導入されるすべての機能で妥当な場合にビュー遷移を実装できるよう、全力で取り組んでまいります。すでに特定されている領域については、担当チームが積極的に投資を行っています。

デザイン担当バイス プレジデント、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');
  }

体験談

同社のデザイン部門（Life BU）の責任者である Rishabh Mehrotra 氏は、ビューの遷移が、ユーザビリティ、エンゲージメント、全体的な満足度を向上させ、ウェブサイトのユーザー エクスペリエンスを向上させるうえで重要な役割を果たしたと述べています。この API は、スムーズなナビゲーション、ガイド付きのインタラクション、認知負荷の軽減、最新のデザインなどを提供するのに役立ちました。

ウェブ エクスペリエンスの向上は、PB にとって最優先事項であり、VT は優れたシームレスでこれを実現するための手段であることが実証されています。デベロッパー コミュニティとユーザーベースの両方に広くアピールできたことで、当社のチームも熱意をさらけ出しています。多様な POD への統合を検討することで、満足度と業務の卓越性に広範囲にわたってプラスの影響がもたらされることが予想されます。

Saurabh Tiwari（PolicyBazaar、CTO）

次のステップ

ビュー遷移の試用に関心をお持ちですか？詳細については、以下のリソースをご覧ください。

• ビュー遷移に関する developer.chrome.com のドキュメント
• MPA のビュー遷移の説明
• ブラウザ間で表示を遷移できるようにする相互運用の提案