AppBrew Tech Blog

株式会社AppBrewの技術に関するブログ

デザイナーが1人でABテストを回してWEBの直帰率を10%以上改善した話

こんにちは！去年の10月からAppBrewでUIUXデザイナーをしている 西山(@Fav_KudasaiTT) です。普段は事業の数値を改善させるため、LIPS WEBのデザイン改善したりコード書いたりディレクションしたりしています。

事業の数値を改善させると言っても、取り組むべき課題を見つけその課題に対して精度の高い仮説を立てて検証を回すというフローがありますよね。

今回は検証を回すという部分に絞り、LIPS WEBでABテストを回して直帰率を中心にユーザー行動を大幅に改善した話をさせていただきます。

デザイナー1人でABテストできるツール

デザイナーがABテストをしようとすると、次の課題にぶつかるかなと思います。

  • ABテスト基盤を作成する必要があり、結果の統計処理にも手間がかかる
  • 最速で回したいがdeployに時間がかかる

そこで、弊社では Google Optimize というABテストツールを使っています。

Google Optimizeには以下の特徴・メリットがあります。

  • 導入が楽
  • ツール上でHTMLやCSS、Scriptを編集できる
  • ターゲットやトラフィック割り当てを細かく指定できる
  • 評価指標を設定すると有意差の検定をしてくれる

f:id:sglv:20190516131825p:plain

このようにGoogle Optimizeは、細かいターゲット設定とビジュアライズが可能な上に、テスト基盤を作らなくて済むし面倒な統計処理をやってくれる素晴らしいツールなのです。

運用例

この節では、Google Optimizeを使ったABテストの手順をより具体的に説明します。

  1. 検証する仮説を決める
  2. パターンとターゲットを設定する
  3. 評価指標を設定する
  4. リリースして結果を見る
  5. 結果が良かったものを反映する
  6. 1~5を繰り返す

今回は、クチコミ詳細ページの改善事例を使って説明します。 弊社はコスメのクチコミアプリを作っており、WEBでもクチコミを表示する画面のUXは非常に重要です。

1. 検証する仮説を決める

まずは、検証する仮説を決めます。このとき、定性的な仮説を定量に落とし込んだ改善数値も予想します。

# 対象ページ
- クチコミ詳細ページ

# 仮説
- 関連クチコミへの距離を短くしてクチコミ一覧を見せることにより、直帰率が下がるのではないか
（クチコミが検索流入ユーザーのニーズに合わない可能性があるため）


# 改善数値予想
- 3~5%

f:id:sglv:20190515234428p:plain

f:id:sglv:20190516131847p:plain
ユーザー行動の変化予想

2. パターンとターゲットを設定する

次にパターンとターゲットを設定します。

# パターン
①本文のクチコミ画像を小さくする
②クチコミ本文のプレビューを短くする

パターンは2個から5個を目処に作っていきます。今回の例ではパターンごとにOptimize上のエディタでCSSを追記します。 ターゲット設定は、URLとデバイスを指定しています。

f:id:sglv:20190515234520p:plain

パターン①の「本文のクチコミ画像を小さくする」では、横に並んだ画像のサイズを調整しています。CSSを数行書いて終わりです。

パターン②の「クチコミ本文のプレビューを短くする」では、本文プレビューの高さを調整しています。こちらもパターン①と同じでCSSを数行書くだけで済みます。

3. 評価指標を設定する

評価指標を設定するにはGoogle AnalyticsをOptimizeに紐づける必要があります。 評価指標は、メイン指標・サブ指標を3つまで設定できます。

今回はメイン指標として「直帰率」を設定しました。 そして、直帰率が下がったとしても、セッション時間やページビュー数が下がっては良くないので、サブ指標として「セッション時間」「ページビュー数」を設定しています。

4. リリースして結果を見る

トラフィック割り当てを設定し、リリースします。検証を早く終えたい場合は、割り当てるユーザーを多くします。

以下の画像はGoogle Optimizeのレポートの一部で、ページあたりセッション数の変化を表しています（値は実際のものではなくダミーです）。 このように、Google Optimizeは自動で統計処理をし、変化に有意差があるかどうかを知らせてくれます。

f:id:sglv:20190515234542p:plain

弊社では、Google Optimizeでの検証をするだけでなく、Google Analyticsでランディングページを絞っての検証もしています。

このケースでは、設定した指標のうち直帰率の有意差をOptimizeで確認するには時間がかかりそうだったので、Google Analyticsでランディングページを絞り、最適なパターンを検証しました。

5. 結果が良かったものを反映する

有意に改善成果が出た変更について、開発環境でコードを書き、PRを送ってエンジニアにレビューしてもらいマージします。 OptimizeでCSSコードを書いている場合と同じように書けばいいので、あまり時間はかかりません。 変更を反映した後はGoogle Analyticsで指標を再度確認します。

6. 1~5を繰り返す

あとは、今までの流れをページやコンテンツごとに繰り返します。 大きな仮説を作り、それをブレイクダウンして適切な仮説粒度にしながら検証することで、迅速に改善サイクルを回せます。

まとめ

Google Optimizeを使ってABテストをすることで仮説検証サイクルが早くなり、結果的にLIPS WEB全体の直帰率をこの3ヶ月で10%以上改善できました。

デザイナー1人で仮説から検証まで行えることで、コミュニケーションコストも小さくできました。 ABテストして結果が良かったものだけをコードに反映するため、無駄な開発工数を削減でき、エンジニアはより高度な課題に集中できるようになりました。

このように私達は常日頃から仮説検証のプロセス改善を意識し、最小・最速で検証できるよう心がけています。 これからもユーザーにとっていいサービスを提供できるよう精進していきます！

We Are Hiring

AppBrewでは定量・定性に真摯に向き合ってプロダクトを開発したいメンバーを募集しています！ご興味がある方は転職ドラフトやWantedlyよりぜひご応募ください！

また、広告クリエイティブを仮説検証したいデザイナーインターンも募集しております！作ったCRに対して定量・定性的なフィードバックができる体制が整っていておすすめです！