Looker Studio で CrUX ダッシュボードを作成する方法

公開日: 2020 年 6 月 12 日、最終更新日: 2025 年 9 月 9 日

Looker Studio(旧称: データポータル)は、Chrome UX レポート(CrUX)などのビッグデータ ソースに基づいてダッシュボードを作成できる、強力なデータ可視化ツールです。このガイドでは、独自のカスタム CrUX ダッシュボードを作成して、オリジンのユーザー エクスペリエンスの傾向を追跡する方法について説明します。

さまざまな月の変化を示すさまざまな積み上げ棒グラフが表示されている CrUX ダッシュボード。
CrUX ダッシュボード

CrUX ダッシュボードは、コミュニティ コネクタと呼ばれる Looker Studio の機能を使用して構築されています。このコネクタは、BigQuery の未加工の CrUX データと Looker Studio の可視化の間に事前に確立されたリンクです。これにより、ダッシュボードのユーザーがクエリを作成したり、グラフを生成したりする必要がなくなります。すべてが自動的に構築されるため、オリジンを指定するだけで、カスタム ダッシュボードが生成されます。

デフォルトの CrUX ダッシュボード

CrUX には、CrUX チームが管理するデフォルト ダッシュボードがあります。新しい指標(INP など)はチームによって追加され、ダッシュボードが次回読み込まれるときに利用可能になります。

カスタム ダッシュボードを作成する

ダッシュボードをカスタマイズしたい場合は、デフォルトのダッシュボードのコピーを作成して、必要に応じて変更できます。

カスタム ダッシュボードを作成するには、g.co/chromeuxdash にアクセスします。CrUX コミュニティ コネクタのページが表示されます。ここで、ダッシュボードを生成するオリジンを指定できます。初回ユーザーは、権限またはマーケティング設定のプロンプトを完了する必要がある場合があります。

CrUX ダッシュボード コネクタの設定画面。オリジン URL を入力するフィールドと、レポートでそのフィールドを変更できるようにするチェックボックスが表示されています。
CrUX ダッシュボード コネクタ

テキスト入力フィールドには、完全な URL ではなくオリジンのみを入力できます。例:

オリジン(サポート対象)
https://developer.chrome.com
URL(サポート対象外)
https://developer.chrome.com/docs/crux/guides/looker-studio-dashboard

プロトコルを省略すると、HTTPS が想定されます。サブドメインは重要です。たとえば、https://developers.google.comhttps://www.google.com は異なるオリジンと見なされます。

オリジンに関する一般的な問題としては、誤ったプロトコル(https:// ではなく http:// など)の指定や、必要なサブドメインの省略などがあります。一部のウェブサイトにはリダイレクトが含まれています。http://example.comhttps://www.example.com にリダイレクトされる場合は、後者(オリジンの正規版)を使用する必要があります。原則として、ユーザーがアドレスバーで確認できるオリジンを使用します。

チェックボックスをオンにすると、オリジンがダッシュボードの URL に含まれます。これにより、今後この URL パラメータを変更することで、同じダッシュボードを異なるオリジンで使用できるようになるため、オンにすることをおすすめします。

[接続] ボタンをクリックします。チェックボックスをオンにした場合は、確認を求められます。

オリジンが CrUX データセットに含まれていない場合は、次の図に示すようなエラー メッセージが表示されることがあります。データセットには 1, 500 万を超えるオリジンがありますが、含めるのに十分なデータがないオリジンもあります。

「このデータセットには 1,500 万を超えるオリジンがありますが、https://doesnotexist.origin はその 1 つではありません」などのエラー メッセージが表示されるポップアップ エラー メッセージ
オリジンが存在しない場合の CrUX コミュニティ コネクタのエラー メッセージ

オリジンが存在する場合は、ダッシュボードのスキーマ ページに移動します。ここには、含まれているすべてのフィールドが表示されます。各有効接続タイプ、各フォーム ファクタ、データセットのリリース月、各指標のパフォーマンスの分布、そしてもちろんオリジンの名前も表示されます。このページで変更や操作を行う必要はありません。[レポートを作成] をクリックして続行します。

さまざまなフィールド、型、集計、説明を含む CrUX ダッシュボードのスキーマ エディタ。これらを変更したり、新しいフィールドを追加したりできます。
CrUX ダッシュボードのスキーマ

ダッシュボードを使用する

各ダッシュボードには、次の 3 種類のページがあります。

  1. Core Web Vitals の概要
  2. 指標のパフォーマンス
  3. ユーザー層

各ページには、利用可能な毎月のリリースごとに、時間の経過に伴う分布を示すグラフが表示されます。新しいデータセットがリリースされたら、ダッシュボードを更新して最新のデータを取得できます。

月次データセットは、毎月第 2 火曜日にリリースされます。たとえば、5 月のユーザー エクスペリエンス データで構成されるデータセットは、6 月の第 2 火曜日にリリースされます。

Core Web Vitals の概要

最初のページには、オリジンの月ごとのウェブに関する主な指標のパフォーマンスの概要が表示されます。これらは、Google が重視することを推奨している最も重要な UX 指標です。

CrUX ダッシュボードのウェブに関する主な指標の概要。LCP、INP、CLS の指標情報が表示されています。
CrUX ダッシュボードのウェブに関する主な指標の概要

ウェブに関する主な指標のページでは、パソコン ユーザーとスマートフォン ユーザーがオリジンをどのように利用しているかを確認できます。デフォルトでは、ダッシュボードを作成した時点の最新月が選択されています。古い月次リリースと新しい月次リリースを切り替えるには、ページ上部の [] フィルタを使用します。

これらのグラフでは、デフォルトでタブレットが除外されていますが、必要に応じて、棒グラフの構成で [タブレットなし] フィルタを削除できます。

Looker Studio でフィルタ オプションを編集する。
Core Web Vitals ページにタブレットを表示するように CrUX ダッシュボードを編集する

指標のパフォーマンス

ウェブに関する主な指標のページの後に、CrUX データセット内のすべての指標のスタンドアロン ページが表示されます。

CrUX ダッシュボードの LCP ページに、さまざまな月の変化を示すさまざまな積み上げ棒グラフが表示されている。
CrUX ダッシュボードの LCP ページ

各ページの上部には [デバイス] フィルタがあり、エクスペリエンス データに含まれるフォーム ファクタを制限できます。たとえば、スマートフォンでのエクスペリエンスに絞ってドリルダウンできます。この設定はページ間で保持されます。

これらのページの主な可視化は、「良好」、「改善が必要」、「低速」に分類されたエクスペリエンスの月ごとの分布です。グラフの下にある色分けされた凡例は、カテゴリに含まれるエクスペリエンスの範囲を示しています。たとえば、上のスクリーンショットでは、良好な Largest Contentful Paint(LCP)エクスペリエンスの割合が変動し、ここ数か月でわずかに悪化していることがわかります。

グラフの上には、直近の月の「良好」と「不良」の割合と、前月との差の割合を示すインジケーターが表示されます。このオリジンでは、LCP の「良好」なエクスペリエンスが前月比で 3.2% 減少し、56.04% になりました。

また、LCP やその他のウェブに関する主な指標など、パーセンタイルの推奨値が明示的に提供されている指標については、「良好」と「不良」の割合の間に「P75」指標が表示されます。この値は、オリジンのユーザー エクスペリエンスの 75 パーセンタイルに対応します。つまり、75% のエクスペリエンスがこの値よりも優れているということです。注意点として、これはオリジン上のすべてのデバイスにわたる全体的な分布に適用されます。[デバイス] フィルタで特定のデバイスを切り替えても、パーセンタイルは再計算されません。

パーセンタイルに関する技術的な注意点

パーセンタイル指標は BigQuery のヒストグラム データに基づいているため、粒度は LCP で 100 ミリ秒、INP で 25 ミリ秒、CLS で 0.05 と粗くなります。つまり、P75 LCP が 3,800 ミリ秒の場合、実際の 75 パーセンタイルは 3,800 ミリ秒から 3,900 ミリ秒の間に収まります。

また、BigQuery データセットでは「ビン拡散」という手法が使用されています。この手法では、ユーザー エクスペリエンスの密度が、粒度が低下する非常に粗いビンに本質的にグループ化されます。これにより、精度を 4 桁を超えずに、分布の末尾に分単位の密度を含めることができます。たとえば、LCP 値が 3 秒未満の場合は、幅 200 ミリ秒のビンにグループ化されます。3 ~ 10 秒の範囲では、ビンは 500 ミリ秒幅です。10 秒を超えると、ビンは 5, 000 ミリ秒幅になります。ビン幅を変化させるのではなく、ビンを広げることで、すべてのビンが一定の 100 ミリ秒幅(最大公約数)になり、分布が各ビンにわたって線形に補間されます。

PageSpeed Insights などのツールで表示される P75 の値は、一般公開の BigQuery データセットに基づくものではなく、ミリ秒単位の精度で値を提供できます。

ユーザー層

ユーザー属性ページには、デバイスと有効な接続タイプ(ECT)の 2 つのディメンションが含まれています。これらのページには、各ユーザー層のユーザーのオリジン全体のページビューの分布が示されます。

デバイス分布ページには、スマートフォン、パソコン、タブレットのユーザー数の推移が表示されます。多くのオリジンではタブレットのデータがほとんどないため、グラフの端に「0%」が表示されることがよくあります。

CrUX ダッシュボードのデバイスページ。デバイスの内訳が月ごとにどのように変化しているかを示しています。
CrUX ダッシュボードのデバイスページ

同様に、ECT 分布ページには、4G、3G、2G、低速 2G、オフラインのエクスペリエンスの内訳が表示されます。

これらのディメンションの分布は、ファースト コンテンツフル ペイント(FCP)のヒストグラム データのセグメントを使用して計算されます。

よくある質問

Looker Studio で CrUX ダッシュボードを構築する際のよくある質問を以下に示します。

他のツールではなく CrUX ダッシュボードを使用するタイミングはいつですか?

CrUX ダッシュボードは、BigQuery で利用可能な同じ基盤となるデータに基づいていますが、データを抽出するために SQL を 1 行も記述する必要がなく、無料枠を超える心配もありません。ダッシュボードの設定は、基盤となるデータのクエリを実行するよりも迅速かつ簡単です。すべての可視化が自動的に生成され、必要なユーザーと共有できます。

CrUX ダッシュボードの使用に制限はありますか?

BigQuery に基づいているため、CrUX ダッシュボードもすべての制限を継承します。月単位のオリジンレベルのデータに制限されます。

CrUX ダッシュボードでは、BigQuery の生データの汎用性を簡素さと利便性と引き換えています。たとえば、指標の分布は、完全なヒストグラムではなく、「良好」、「改善が必要」、「不良」としてのみ示されます。CrUX ダッシュボードではグローバル レベルのデータも提供されますが、BigQuery データセットでは特定の国にズームインできます。

Looker Studio の詳細を確認するにはどうすればよいですか?

詳しくは、Looker Studio の機能ページをご覧ください。