ユーザージャーニーを映像で再現：Grafana Cloud Frontend ObservabilityのSession Replayを紹介

Lukasz Gut

•

2026-10-14•2 min

注記：本記事は2026年8月に公開され、Session Replayのパブリックプレビューを誰もが利用できるようになったことを反映して、2026年10月に更新されました。

Grafana Cloud Frontend Observabilityは、クライアントサイドのウェブアプリケーションのメトリクス、ログ、トレース、ユーザーセッションのコンテキストを収集・活用することで、エンジニアリングチームがエンドユーザーの体験を定量化できるようにします。チームは、アプリケーションの健全性とパフォーマンスを長期的に監視し、エラーを切り分け、フロントエンドのシグナルをバックエンドのテレメトリーと関連付けて、スタック全体にわたる問題を調査することも可能です。

それでも、フロントエンドの問題の中には、原因の特定が難しいものが残っています。サポートチケットに、チェックアウトボタンが反応しなかった、フォームが突然リセットされた、特定のブラウザや特定のデバイスでのみワークフローが動かなかった、といった報告が寄せられることもあるでしょう。メトリクスはパフォーマンスの低下を示し、ログはエラーを記録し、トレースは遅いリクエストを明らかにしますが、ユーザーの画面が実際にどう見えていたかを、1つのシグナルだけで示すことはできません。

そこで、GrafanaはSession Replayを開発しました。Frontend Observabilityのアドオン機能であるSession Replayは、Grafana Cloudがすでに収集しているテレメトリーと結び付けて、ユーザージャーニーを映像として再構築します。報告された問題から、何が起きたかの確認、そして次に調べるべき箇所の特定までを、エンジニアリングチームが一気に進められるようにするのが狙いです。

Grafana Cloud Frontend ObservabilityのSession Replayとは？

Session Replayは現在パブリックプレビューで、Frontend Observabilityに映像での再生機能を追加します。ユーザーがウェブアプリケーションを操作して画面遷移するなかで、アプリケーションがどのように表示され、どう変化したかを再構築する機能です。個々のテレメトリーイベントから推測するのではなく、ユーザージャーニーの流れをそのまま確認できます。

Frontend Observabilityは、ユーザーセッション内のイベントを時系列で並べたタイムラインをすでに提供しています。このタイムラインでは、何がいつ起きたかがわかります。Session Replayは、そこに足りなかった視覚的な情報を補うものです。イベントの前後で画面がどうなっていたか、そしてある操作が次の操作にどうつながったかがわかるのです。両方のビューが同じセッションに属しているため、調査の流れを見失わずに、ユーザー体験と関連する技術的なシグナルを行き来できます。

Session Replayは、Frontend Observabilityをすでに支えているGrafana Faro Web SDKをベースにしています。そのため、別のエージェントを必要とせず、同じ計装モデルに組み込まれます。有効化に必要なものについては、以下の「Session Replayを始める」セクションを参照してください。

最初から組み込まれたプライバシー保護

Session Replayは、ユーザーとアプリケーションとのやり取りを記録し、ユーザーが見た内容を再構築します。このような詳細な情報はトラブルシューティングに役立つ一方で、だからこそ、この機能の開発当初からプライバシーへの配慮が重視されてきました。プライバシー保護は、リプレイデータがGrafana Cloudに届く前に、ブラウザ内から始まります。Session Replayは、デフォルトですべてのテキストと入力値をマスクし、最初から厳格なプライバシーの基準を確保する仕組みです。アプリケーションごとに要件は異なるため、Session Replayでは設定の自由度が高く、保護の内容をアプリケーションや企業のプライバシー要件に合わせて調整できます。利用できる制御と設定オプションの詳細は、Session Replayのプライバシーに関するドキュメントを参照してください。

保護はデータの収集後も続きます。専用のロールベースアクセス制御（RBAC）ロールにより、録画を閲覧できるユーザーを制限できるのも特長です。Session Replayは、ほかのFrontend Observabilityのデータと同じ30日間の保持ポリシーに従います。

セッションの録画についてエンドユーザーに通知し、適用される法律で必要な同意を取得する責任は、利用する企業にあります。本番環境でSession Replayを有効にする前に、設定内容を確認し、自社のプライバシー要件に照らしてテストすることをおすすめします。詳細は、データプライバシーのドキュメントを参照してください。

An architectural diagram depicting privacy controls for Session Replay.

リプレイから根本原因解明へ：Session Replayでフロントエンドの問題を調査する

Session Replayが実際にどのように使えるかを見るために、Faro Web SDKで計装したデモ用の銀行アプリケーション「Grafana Bank」での調査を見ていきましょう。

調査は、顧客からの簡単なサポートチケットから始まります。例えば、「今日、送金しようとしたのですが、何度やっても失敗します。助けてもらえますか？」などです。

再現が難しいフロントエンドの問題をトラブルシューティングする

問題を再現しようとする代わりに、実際にその問題を経験したユーザーを起点に調査を始めましょう。Frontend ObservabilityのSessionsタブには、アプリケーションのすべてのセッションが一覧表示されます。Grafana Bankは、決済フローをFaro User Actionsで計装し、Faro Metasでユーザー名を紐づけているため、フィルターを適用して検索対象を絞れます。これにより、アプリケーション内のすべてのセッションから、実際に調査すべき少数のセッションへと対象を絞り込めます。

Filtering Grafana Bank sessions in Frontend Observability by user action and username.

該当するセッションを選択して、リプレイしてみましょう。プレーヤーが開くとすぐに、タイムラインに役立つ情報が表示されます。オレンジ色の警告マーカーがいくつか目立つので、録画の中の注目すべき箇所に直接ジャンプすることも可能です。顧客が12,000ドルの送金額を入力してSend paymentをクリックすると、"unable to complete the banking request"（銀行リクエストを完了できません）という一般的なメッセージの小さなエラーバナーが表示されます。顧客は数回ボタンを押し直しますが、同じエラーが返り、そのまま離脱します。このように、リプレイにより、失敗の様子を映像として明確に再構築できます。

A GIF showing a user journey playback: the user tries to enter a $12,000 payment and clicks Send payment, and then gets an error that says, "unable to complete the banking request". They try the button a few more times, get the same error, and leave.

リプレイをオブザーバビリティ（可観測性）データと関連付ける

何が起きたかはわかりましたが、なぜ起きたのかはまだわかりません。ここで、リプレイをほかのオブザーバビリティデータと関連付けていきましょう。オレンジ色のマーカーにカーソルを合わせると、警告の原因が、HTTP 422ステータスコードを返したHTTP POSTリクエストだとわかります。プレーヤー右側のUser JourneyパネルでNetworkタブを開き、イベントの詳細を展開してください。下にスクロールすると、Grafana Cloud内蔵のTrace Viewに直接リンクするトレースIDが表示されます。ここで根本原因を特定できます。顧客の残高が不足しており、送金を完了できなかったのです。

ユーザーの行動をコンテキストの中で理解する

リプレイでは、失敗が顧客にとってどう感じられたかもわかります。これは、カウンターやログの1行では捉えられないものです。顧客が同じボタンを何度もクリックし、わかりにくいエラーメッセージを受け取り、最終的に諦めてサポートに問い合わせる様子を確認できます。この使いづらさそのものが、重要な発見です。送金が失敗した理由は妥当だったかもしれませんが、エラーメッセージでその理由が説明されなかったため、顧客は混乱しました。Session Replayは、この気づきを特定のセッションに結び付け、ユーザー体験についての直感を、調査や今後のUX改善の指針となる根拠に変えます。

Session Replayを始める

Grafana Labs社内での数か月にわたる利用と、プライベートプレビューのお客様との協力を経て、Session Replayはパブリックプレビューとして利用できるようになりました。

Session Replayは、Grafana Faro Web SDK（バージョン2.8.2以降）で計装したウェブアプリケーションが対象です。アプリケーションをまだ計装していない場合は、Get started with Frontend Observability の手順書で、JavaScript、React、Next.jsアプリケーションの手順を順に説明しているので確認してください。また、How to get started with frontend observability: A quick Grafana Faro exampleのブログでは、Grafana Cloudスタックの作成から最初のリアルユーザーモニタリングデータの確認まで、一連の流れを説明しています。

アプリケーションがFrontend Observabilityにデータを送信したら、Session Replayの有効化に必要なのは、2つのステップだけです。

1. リプレイ計装を追加する：アプリケーションにリプレイ計装を追加します。

npm install @grafana/faro-instrumentation-replay

import { getWebInstrumentations, initializeFaro } from '@grafana/faro-web-sdk';
import { ReplayInstrumentation } from '@grafana/faro-instrumentation-replay';

initializeFaro({
  instrumentations: [
      ...getWebInstrumentations(),
      new ReplayInstrumentation() // Add Session Replay instrumentation
  ],
});

2. デプロイして再生する：Grafana CloudでFrontend Observabilityを開き、アプリケーションを選択して、Sessionsタブに移動します。録画のあるセッションでは、セッションの詳細ページに、そのセッションのイベントのタイムラインと並んでリプレイが表示されます。

サンプリングの制御や上記のプライバシー設定など、Session Replayの詳細は、こちらのドキュメントを参照してください。

Session ReplayはGrafana Cloudの無料アカウントを作成することで、今すぐ使えます。無料アカウントを作成して、Frontend Observabilityを設定し、Session Replayを試してみてください。

今後の開発に向けて、フィードバックをお寄せください

Session Replayは、Grafana CloudのDigital Experience Monitoring（DEM）機能を拡充していく、長期的な取り組みの一部です。詳細は、技術ドキュメントと、ObservabilityCON 2026のDEMセッションを参照してください。

Session Replayと関連機能の今後の方向性について、アイデアはたくさんありますが、皆さんからのフィードバックがその方向性を形づくります。次に何を優先して開発するかは、皆さんが実際の調査でリプレイをどう活用しているかによって決まる、というのが私たちの開発思想です。

Session Replayを使った感想は、Grafana Community Slackの#faroチャンネルで共有するか、GitHubのFaro Web SDKリポジトリでイシューを作成してください。また、リプレイを見ているときは、プレーヤーのフィードバックボタンから、Grafana開発チームに直接意見を送れます。良かった点、わかりにくかった点、こうなってほしい点など、すべてが次の優先事項を決める助けになるので、皆さんのフィードバックをお待ちしています。

Grafana Cloudは、メトリクス、ログ、トレース、ダッシュボードなどを始める最も簡単な方法です。私たちは、充実した永久無料枠と、あらゆるユースケース向けのプランを用意しています。今すぐ無料でアカウントを作成しましょう！