Terra は、デバイスでダークモードを好むユーザーに対してダークモードを表示することで、直帰率を 60% 削減し、セッションあたりの閲覧ページ数を 170% 増加させました。
1 か月のユーザー数が 7,500 万人のブラジル最大級のメディア企業である Terra は、カスタム ダークモードを提供することで、ダークモードを好むユーザーを対象に、直帰率を 60% 削減し、セッションあたりの閲覧ページ数を 170% 増加させました。
この記事では、「ダークモード」のコホートのサイズを特定し、カスタム ダークモードを適用するまでの Terra の過程を分析し、最後にこの実装が主要な KPI に及ぼす影響を測定します。
60%
直帰率の減少
170%
セッションあたりのページビュー数の増加
ダークモードとは何ですか？
従来、デバイスのユーザー インターフェースは「ライトモード」で表示されていました。つまり、通常はライト インターフェースの上に黒いテキストが表示されていました。別の方法としては「ダークモード」があり、暗い背景に明るい色の文字（グレーや黒など）が表示されます。
ダークモードにはユーザー エクスペリエンスのメリットがあります。美しさや使いやすさの点でこの機能を好む人もいます。この方法には、デバイスのバッテリー駆動時間を長持ちさせるなど、他にもメリットがあります。ユーザーはデバイスの設定で、ダークモードの使用を表明できます（オペレーティング システムによって異なります）。たとえば、次のスクリーンショットは、Android Q を搭載したデバイスでのダークモードの設定オプションがどのように表示されるかを示しています。
「ダークモード」を好むユーザー エクスペリエンスを改善するには、light または dark の値を指定して prefers-color-scheme メディアクエリを使用します。このメディアクエリは、デバイスでのユーザーの選択を反映しています。その後、ダークモードをご希望のユーザーのためにカスタム ダークモードを読み込むことができます。たとえば、「ダーク」CSS ファイルを読み込み、フォントや背景色などの値を変更します。次のコードに、その例を示します。
@media (prefers-color-scheme: dark) {
// apply a dark theme
}
@media (prefers-color-scheme: light) {
// apply a light theme
}
「明るい」ユーザー コホートと「ダーク」ユーザー コホートの特定
執筆時点（2021 年 12 月）の Chrome プラットフォームのステータスでは、ウェブ トラフィックの約 22% が「ダーク優先」設定のユーザーから送信されたものであると判断されています。
これは集計データであるため、ダークウェブを好むユーザーの実際の割合はさまざまです。そのため、このグループの規模を把握するには、社内で測定することをおすすめします。
次のコードは、dark ではなく light を好むユーザーのパフォーマンスを測定するアナリティクス ディメンションを作成します。
function getColorScheme() {
let colorScheme = 'Unknown';
if (window.matchMedia) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
colorScheme = 'Dark';
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
colorScheme = 'Light';
}
}
return colorScheme;
}
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date; ga('create', 'UA-ID', 'auto');
ga('set', 'color-scheme-preference', getColorScheme());
ga('send', 'pageview');
Terra はこのコードをサイトに実装し、モバイル（Android）デバイスとデスクトップ（Windows）デバイスにおける両グループの行動を比較しました。その時点で Terra はカスタム ダークモードを提供していなかったため、このテストの目標は次のとおりでした。
- ダークを好むユーザー グループの規模を特定する。
- パターンの特定: たとえば、暗いユーザーを好むユーザーは、明るいユーザーを好むユーザーよりも早くサイトを離れるでしょうか？
この点を把握することで、たとえばカスタム ダークモードを指定する必要があるかどうかなどを判断できます。 14 日間のテスト後に Terra が得た結果は次のとおりです。
モバイル（Android）
モバイル（Android）の場合、「薄い」を好むユーザーと「ダーク」を好むユーザーで、直帰率とセッションあたりの閲覧ページ数に大きな違いは見られませんでした。
パソコン（Windows）
パソコン（Windows）の場合、「ダーク」を好むユーザーのグループはサイトに留まるユーザーが大幅に減り、「ライト」を好むユーザーよりも直帰率が約 2 倍、半分強しか閲覧されていませんでした。
このデータに基づいて Terra は、「ダークテーマ」を好むユーザーは、自社サイトでダークテーマに対応していないため、デスクトップ デバイスの利用が少ないという仮説を立てました。
次のステップとして、「ダークモード」戦略に取り組み、ダークモードを好むユーザー グループのエンゲージメントを改善できるかどうかを確認することにしました。
ダークモードの実装
ほとんどのウェブサイトでは、前述のシンプルな手法でダークモードを実装しています。前述のシンプルな戦略により、prefers-color-scheme メディアクエリを介してユーザーの構成の変更をリッスンし、それに基づいてスタイルを変更します。
Terra は、ユーザーがより細かく制御できるようにすることにしました。メディアクエリを介してデバイスで「ダークカラーを優先する」設定がオンになっていることを検知すると、「夜間モード」に移動するかどうかをユーザーに尋ねるプロンプトが表示されます。ユーザーが [無視] ボタンをクリックしてメッセージを拒否しない限り、ユーザーの OS 設定が適用され、カスタムのダークモードが適用されます。
この戦略を補完するものとして、ユーザーは [設定] 画面に追加の構成オプションを提供します。ユーザーはこの画面で明示的に「ライト」または「ダーク」を使用するか、基になるデバイスの設定に依存するかを決定できます。
Terra の「夜間モード」は次のようになります。
Terra のダークモードの影響を測定する
ダークモードの影響を測定するため、デバイスで [ダークを優先] をオンにしているユーザー グループを対象に、「ライト」モードと「ダーク」モードを表示したときのエンゲージメント指標を比較しました。 モバイル（Android）とパソコン（Windows）での結果は次のとおりです。
モバイル（Android）
直帰率は変わらないものの、ユーザーにダークモードが表示されると、ページとセッションはほぼ倍増（2.47 から 5.24）しました。
2 X
セッションあたりのページビュー数の増加
パソコン（Windows）
ダークモードを使用するとどちらの指標も改善され、直帰率は 27.25% から 10.82% に、セッションあたりの閲覧ページ数はほぼ 3 倍になりました（3.7 から 9.99 に）。
60%
直帰率の減少
170%
セッションあたりのページビュー数の増加
このデータに基づき、Terra は、ダークモードを実装することによるユーザーのメリットを確認することができ、サイトのコア機能として引き続き使用することにしました。
おわりに
ダークモードは、ユーザーがデバイスでオンにして画面のスタイルをダークモードに変更できる設定です。この手法では、ユーザー エクスペリエンスのメリットや、バッテリー寿命の節約など、ユーザーのデバイスのさまざまな側面にメリットが報告されています。
この記事では、カスタム ダークモードを提供することで、デバイスで優先するダークモード設定がオンになっている Terra のユーザー グループについて、エンゲージメント指標がどのように改善されたかをご紹介しました。
代替のダークモードを実装するためのリソースがある企業には、この方法をおすすめします。このような機能に時間をかけられないユーザーのために、Chrome は自動ダークモード機能のリリースを開始しました。