新卒三年目のエンジニアがプロジェクトマネージャーとして奮闘したUX改善：月間2000万PVメディアの回遊性を1.5倍に！

1. はじめに

ZUUで新卒3年目のエンジニアを務めている岡田悠太郎と申します。

現在、10の自社メディアの運用・保守および新機能開発を担当するチームでリーダーを務めています。

本記事では、月間2000万PVを超える主要メディアの回遊性（PV/SS(セッション)）を1.5倍に向上させたプロジェクトについて、その背景や取り組み、得られた成果を共有します。

2. プロジェクト立ち上げの背景

背景

メディアの売上を伸ばすために開発チームが貢献できることとして、UX改善を通じて回遊性を向上させる案が浮かびました。当時のメディアはPV/SSが平均2.7と決して高いとは言えない数値になっていたので、UI/UXに対する課題感は大きかったです。

メディアの現状分析
- メディアの概要
  - 男性向け金融メディア
  - 月間2000万PV前後
  - 主にアドネットワーク広告で収益が発生している
- 当時のメディアの状態
  - PV/SSが2.7とかなり低い
  - アドネットワーク広告で収益を得ているため、バナー広告やネイティブ広告が多くUXが悪い
  - 専属のデザイナーや、UXエンジニアがおらず、短期的な収益向上を目的とした変更が多い
  - サイトのデザイン、コンポーネントがほとんどメディア構築時から変わっておらず、UI/UX改善の目的で変更されていない
  - PV数、UU数が外部の配信面依存していて、その配信面のユーザー数が徐々に減少している

というような具合で、UI/UX向上の観点から改修やレビューがされてこなかったため悲惨な状態でした。その結果、PV/SSが2.7になっていました。

目標設定

メディアの現状を把握した上で、このプロジェクトの目的と目標を設定しました。

このプロジェクトの目的は、「UX改善を通じて、回遊性向上によるPV増加を図り、広告収益を向上させること」としました。

具体的な目標値としては、「PV/SSを1.5倍にする」こととしました。

3. プロジェクトメンバー

プロジェクトの目的、目標が決まったので、一緒にプロジェクトを進めていくメンバーを構成しました。

構成は下記です。

プロジェクトマネージャー 1名
Webデザイナー 2名
エンジニア 2名
マーケター 2名
専門家 1名

私がPM兼エンジニアとして参加したため、合計7名です。

弊社には幸いにもいくつかの大手メディアでUX改善に携わってきた方がいたので、その方にUX改善の専門家としてプロジェクトに参画してもらいました。

4. 改善サイクル

プロジェクトの目的、目標、メンバーが決まったのでいよいよ本格的にプロジェクトを始動します。

プロジェクト始動後は、まず下記のことを順に行いました。

現状の分析

現状の売上、PV、流入経路を把握
ダッシュボードの作成（目標対現状を確認するためのものや、効果検証結果がわかるようにするためのものなど）
カスタマージャーニーマップの作成

プロジェクトの進め方を決める

定例MTGの設定
メンバーに期待する役割の設定と共有
タスク管理方法を決める

課題の洗い出し

カスタマージャーニーマップをもとに、各ステップにどういった課題があるのか洗い出す
各メンバーの視点から課題を洗い出す

課題の設定

3で洗い出した課題をタスクレベルの分解しリストアップ
ビジネスインパクトと工数の側面から最もコスパのいいタスク順に優先度決め
優先度の高い順にスケジューリング

これらを終えて、プロジェクトが軌道にのってきので、以降は下記のサイクルを週次で回しました。

各メンバーが、新しい改善策や課題をミーティングまでに考えてくる
定例会議で以下を実施

施策の効果検証
課題の進捗確認
新しい課題の共有
優先度確認

各タスクの進行

上記は、スピード感を持ってプロジェクトを回すことを意識し１週間を１サイクルとして実施しました。

改善実施ペースとしては週2〜4つ程度はリリースできていました。

定例で行っていた施策の効果検証は、UX改善を進める上で非常に重要な工程であり、下記のダッシュボードをもとに行っていました。

ダッシュボード

目標（PV/SSを1.5倍にする）の進捗確認用

PV/SSの目標対現状

- 広告収益をモニタリング
  - このダッシュボードでは広告の売上に大きく影響を与えてないか確認します。UXは上がったが、売上は大きく落ちた、となれば本末転倒なので、想定以上に売上が落ちてないか、想定していない影響が出てないかを、各広告枠ごとに確認します。下記以外にも、各広告枠のインプレッション数、リクエスト数をモニタリングしました。

- ユーザー行動
  - ユーザー行動はいくつかモニタリングしていましたが、その中のひとつのユーザーのスクロール到達箇所の割合を可視化したものを紹介します。ヒートマップに近いですが、ヒートマップでは特定の記事でのユーザー行動になってしまい、全体の平均をとったとしても各ページごとにページの長さが違うので、ページ内の要素の到達度を測れないという課題がありました。そこでGTMのカスタムイベントを用いて、ユーザーがどの要素までスクロールしたかをイベントで計測しました。

5. 効果のあった施策

合計で60の改善を実施した中で、効果が大きかった2つの施策を紹介します。

カテゴリーバー
- 概要：固定ヘッダーにおすすめの記事のカテゴリを複数表示する様にしたい。ユーザーが記事を読み進めて画面をスクロールしても、カテゴリが表示され続ける。
- 前提：
  - ほとんどのユーザーはスマートフォン端末
  - 記事はページネーションによって分割されており、平均3ページ程度
  - 7割のユーザーは記事本文より下を見ていない。
- 仮説：ユーザーは記事を読み終えると離脱しており、本文しか見ていない。つまり、記事の下にいくら魅力的なコンテンツを仕込んでもインパクトが弱い。なので、追尾型のバーを表示させることで、全ユーザーが離脱前に動線が目に入り回遊する可能性が高まる。また、設定方法がカテゴリー別記事一覧ページなので、クリックしたユーザーのPV/SSも高くなる。
- 結果：デイリーで1200クリックされた。また、遷移先は対象カテゴリの記事一覧ページなので、そこから新しい記事を閲覧している可能性が非常に高い。実際、カテゴリーバーをクリックしたユーザーのPV/SSは10を超えていたため、クリックしてないユーザーと比較して、3倍もの差があった。
  （一時期非表示にしていたためその間はほとんど０となっています）
  
  カテゴリーバーのデイリー別クリック数

ランキングウィジェット

概要：記事本文直後にdaliy、weekly、monthlyごとに表示を切り替えられるランキングウィジェットを配置。
前提：当メディアは、さまざまなメディアの記事がまとまっているとあるサイトからの流入が多い。
仮説：ユーザーは暇つぶしで記事を探して読んでいる可能性が高い。そんなユーザーに今注目されている記事を目立たせたら、興味を持って遷移する可能性が高い。
結果：デイリーで22000クリックされた。リリース当初はデイリーで5000クリック程度しかなかったが、ウィジェットの表示位置を下の方から記事本文直後に移動させたり、デザインを変更したり、表示可能な順位を5位から10位、10位から20位に引き伸ばしたりと、改修を加えていくことで22000という数に到達した。

ランキングウィジェットのデイリー別クリック回数

6. プロジェクトを遂行していて直面した課題

プロジェクトを遂行していく中で、さまざまな課題に直面し、奮闘してきました。中でも課題感が大きかったものをいくつか紹介します。

課題：UI/UX課題が起票されない

詳細：各メンバーに、毎週新しい課題を起票してもらうフローにしていましたが、プロジェクトの中盤から課題の起票は徐々に減ってきました。課題自体が減ってきたということもありますが、それ以上に課題起票のための時間を確保してないという問題が一番大きかったです。その原因はメンバーの起票に対する優先度が低く、他の仕事を優先していることにありました。
解決策：課題を洗い出すMTGを設定し、ブレーンストーミングする機会を定期的に設けました。

課題：大胆な改善案がでてこない

詳細：最初は明らかにUI/UXを悪くしていて、すぐ直せそうなところから改修していました。その流れでタスクの起票を進めてしまっていたため、小粒のタスクが増えてしまい、大胆な改善策が起票されませんでした。
解決策：大胆な施策を出すためのMTGを設定し、再度カスタマージャーニーマップを確認し、現状との乖離を確認した上で、制約（工数やインパクト）を考えずにブレーンストーミングしたことで、いくつか大規模な改善案が出てきました。

7. プロジェクトの振り返りと学び

プロジェクトを終えて、プロジェクト振り返りを実施しました。

振り返りのアジェンダ

・タイムラインの記載

・KPT

プロジェクト振り返りは、どういうイベントがあったか、各メンバーが何を思っていたかを知ることで、客観的に振り返れたり、見えてなかった視点に気づけたりできるので、非常に学びが多く、必ず実施すべきです。

学び

　UX改善の学び

効果検証の重要性

効果検証をすることで、より正確な意思決定が行えるようになり、データに基づいているので素早く自信を持った判断が下せます。悪い施策をやめる意思決定と、いい策をより伸ばすという意思決定ができます。基本的なことですが非常に重要なことだと改めて感じました。

サイクルを早く回すことの重要性

UX改善はタスクの粒度にもよりますが、基本的に一つ一つのタスクのインパクトはかなり弱いと思います。ただ、時々予想以上に大きな影響を与える改善が起き、それを完全に予測することは難しいので、数を打つことも重要だと感じました。

自分の感覚を信じること

専門家からのアドバイスで「君たちは若い頃からwebサービスを利用してきたデジタルネイティブ世代なんだから自分の感覚をもっと信じていいよ」と言われました。自分がストレスに思う部分はみんなそう思ってるはず、と思うと意見もいいやすいですし、実際それでUXもだいぶ向上したと思います。

プロジェクトマネージャーとしての学び

楽しく進めることが大事

最後までモチベーションを持って取り組めたのはシンプルに楽しみながらプロジェクトを遂行できたからだと思います。UXの課題を考え、仮説を立て、実装し、検証する全ての工程に興味、好奇心を持って取り組むことで、モチベーションを維持でき、仕事が楽しくなりました。また、プロジェクトの振り返りで各メンバーが楽しかったと言ってくれた時、非常に達成感を感じました。

各ステークホルダーはニーズや視点が違うということ

意見が食い違う時、それぞれの視点に立って理解することが重要だと学びました。例えば、マーケターは最終的に収益向上を考え、デザイナーはシンプルなUI/UXの向上を考える、そうなるとお互いどっちがあってるという話ではなく、どこに重点をおくかで施策に対して肯定的になるのか否定的になるのかが変わると気づきました。それぞれの視点を理解した上で妥協点を探すことが重要だと思います。

時間をかけず進めるタスクと、ちゃんと考えるべきタスクがあるということ

全ての改善策において議論して慎重に進めていては、スピード感が落ちてしまいます。間違いなくUI/UXが改善されて工数のかからない変更や、仮説だけでは拉致のあかないタスクは、議論に時間をかけすぎず素早く実装して効果検証する方が効率的かと思います。もちろんリスク評価や効果検証を怠っていいということではなく、むしろ議論に工数をかけない分、効果検証には時間をかけるべきです。このように、施策の検討、実施、効果検証のバランスを施策ごとに柔軟に変えることが、効率的にプロジェクトを回していくために重要だと学びました。