なぜ飯テロ画像をTOP画面に持ってきたのか？　ホットペッパーグルメのデザイン一新で心がけたこと

リクルートUX組織のナレッジシェア

若林一寿氏：本日はリクルートのUX組織が実践しているナレッジシェアの仕組みと、実際に社内でシェアされた具体的なナレッジを２つご紹介します。社外初公開です。ネットプロダクトの企画・UXデザイン・デザインに携わる方の実務のヒントになれば幸いです。

まず最初に私から、リクルートのUX組織の特徴とナレッジシェアの仕組みについてお話をします。若林一寿と申します。リクルートテクノロジーズのプロダクトデザイン本部という部署のシニアマネージャーをやっております。リクルートに中途入社して14年目ですね。

前職はエンジニアからはじめていて、開発ディレクター・商品企画を経てUXデザイナーをやっています。企画畑、UXデザイン畑で長く従事しています。今は現職でリクルート横断のUX組織のナレッジマネジメントや人材育成に従事しています。よろしくお願いします。

リクルートは多種多様なマーケットで、数多くのネットプロダクトを運営しています。リクルートテクノロジーズのプロダクトデザイン本部は、リクルートの各社を横断する機能組織です。各プロダクトの担当者として、価値を高める案件を企画・設計・デザインをしている部隊になります。

仕事の一例として「SUUMO」の例を挙げますと、SUUMOのUX（ユーザー体験価値）とビジネス価値（コンバージョンや売上）を高めるような案件を企画・設計しています。

1つはユーザビリティ改善。サイトのUIを改善してコンバージョンを増やす仕事。また、機能追加もやっています。新築マンションのモデルルームをオンラインで予約できるようにしたり、マンションの部屋の価格をオンライン上で確認できるようにしたり、注文住宅を建てる会社を選ぶときの参考情報として「その会社の強み」といったコンテンツを追加するような案件を企画・設計しています。

具体的な進め方は、定量的なアクセスログを分析したり、インタビューなどの定性的な調査を通じてカスタマー・クライアントの不や課題を抽出して、その解決策として、UI改善や機能追加などを企画・設計していく流れです。

組織のミッションは、リクルートの特徴を最大限に発揮していく意思が込められています。「多様なデザインのプロが集合知を活かし合い、選ばれるサービスを生み、育て続け、カスタマー・クライアントの今日よりも明日をもっとよくしていく」というミッションを掲げています。

キーワードの1つ目は、この選ばれるサービスの「選ばれる」というところです。「使われる」「優れている」ではなくて「選ばれる」という言葉をあえて選んでいます。

選ばれるためには、一番優れていて一番好きでないと、選ばれません。一番優れている状態は、提供している価値を最大化する必要がありますし、ほかにない新たな価値を創出する必要があります。そして、好きと思ってもらえるような、ほかにない好意の醸成が必要です。

UXデザイナーとデザインディレクターを戦略的に育成

これらを実行するためのスキルとしては、調査・分析をして企画を立案する、そしてリリースまでちゃんとプロジェクトを進行するようなスキル。「UX Market Research」「Digital Analytics」「Business Development」「Project Management」といったスキルになります。ほかにない「好き」をつくるために、ビジュアルデザインとかインタラクションデザインをしっかりマネジメントするような「Design Management」のスキルも必要です。

これらの職能について、リクルートでは2つの職種に集約して戦略的に人材を育成しています。

1つはUXデザイナーです。このUXデザイナーは一般的なUXデザイナーと少し異なっていて、案件を生み出してその優先順位づけまで行うところも含んでいますので、プロダクトマネージャーとかプロダクトオーナーなどの役割も含んでいます。

もう1つはデザインディレクターです。プロダクトのUIデザインやディレクション、デザインルールや戦略策定、デザインチームの統括など、プロダクトのデザインに関する業務全般に携わります。ブランドやコミュニケーション戦略にも関与し、ユーザーからの好意を醸成する役割を担っています。

リクルートのUXデザイナーの仕事は非常に広くて深いです。具体的なイメージは先ほどSUUMOの例でお話ししたんですけれども、まとめると、まず対象となるプロダクトは、「ホットペッパーグルメ」「じゃらん.net」「SUUMO」などのtoCのメディアと、それに加えて「Airレジ」のようなtoBのビジネスツールも対象です。

これらについて、今ある価値を磨き込むようなグロースハック的なアプローチと、新たな価値を創出するイノベーション的なアプローチ、この双方を担っています。

ミッションに込めたもう1つのキーワードは、「集合知」についてです。リクルートは事業がすごく多様で、しかも数多くのプロダクトを持っています。基本ボトムアップで日々案件を創出しています。ですので、成功と失敗からの学びが指数関数的に蓄積される、世界的にも珍しい環境です。

この特性を最大限に活かすために、ナレッジシェアを仕組み化しています。このあと詳細をご説明しますが、そのナレッジシェアの仕組みに各プロダクトからたくさんのナレッジが日々集まっていて、いつでもそれを引き出すことができるような仕組みが整っています。

ナレッジシェアが大きな成果を生み出す

1つ目にご紹介するのは案件データベースです。これはすぐ真似できるような即効性のあるUI系のTips、例えば「ネット予約の入力フォームで離脱が大きかったので、こういうふうにUIを改善したらコンバージョンがこれだけ改善した」みたいなTipsが、すでに260案件以上貯まっていて、日々増殖しています。いつでもコンバージョンを上げるための打ち手を検索して参考にすることができる仕組みです。

2つ目はシェアイベントです。こちらはもう少しこってりしたお手本になるような案件。手法やプロセスが秀逸だったり先進的な案件については、担当者にイベント登壇してもらい、詳細を説明してもらっています。このイベントに参加することで先進事例を浴びることができ、実務に役立つヒントを吸収することができます。こちらはクォーターに1回開催しています。

3つ目はオンラインの動画研修です。お手本案件の秀逸なプロセスなど、リクルートの実務として汎用性が高いものはフレームワーク化して動画研修化しています。スタディサプリのような形式でいつでもオンラインで研修を受けることができます。「リクルート秘伝のタレ」と言えるようなコンテンツになっています。

4つ目、最後がチャットですね。日常的にリクルートの、プロダクトデザイン・UXデザインにかかわる、300人以上の担当者といつでも情報交換ができます。例えばアプリのプッシュをやったんだけどそのモニタリングをどういうふうにしているかといったことを、各社の担当者が情報交換しながら切磋琢磨しています。

このようにリクルートでは集合知を仕組み化しています。ナレッジを分類して適した手法で展開することで、ナレッジの効力を感じやすい状態にしている点がポイントです。これによって各プロダクトの進化は加速していますし、このナレッジシェアから生まれた案件で、すでに大きな成果が出ています。そして、個々人のスキルアップも加速をしています。

以上で、リクルートのUX組織の特徴とナレッジシェアの仕組みのご紹介を終わります。ここからは実際に社内のイベントでシェアされた実際の案件をご紹介します。1つは「成果が出るグロースハック」です。ホットペッパーグルメの事例で、今ある価値を磨き込むときのTipsを紹介します。

2つ目は「成果につながるリニューアル」。こちらは新たな価値を創出するときのナレッジになります。社外初公開ですので、お楽しみください。それでは、お二人よろしくお願いします。

ホットペッパーグルメの「成果が出るグロースハック」

加藤舞子氏：「成果が出るグロースハック」として、リクルートライフスタイル・飲食UXDグループの加藤が発表させていただきます。

簡単に自己紹介をさせていただきます。新卒で入社しまして、今年で7年目になります。入社してからは開発ディレクションやCMプロモーションなど幅広く関わらせていただきまして、今はホットペッパーグルメのカスタマーサイドのUI/UXデザイン・新規の開発推進などを担当するUXデザイングループのマネージャーをしております。

ホットペッパーグルメの説明なのですが、24時間いつでもどこでも使える、ネット予約者数No.1の飲食店予約グルメ情報サイトです。いわゆるグルメサイトなのですが、様々なプレーヤーがいる業界です。ありがたいことに、ネット予約の利用数ではTOPを誇っております。

今日ご紹介する案件は、アプリのユーザーを増やしていきたい思いから始まっています。今のところ予約の大半はWebサイトからとなっておりまして、アプリはまだまだ少ない状態です。昨対では着実に伸びているのですが、まだまだ利用者数が少なく、アプリでのユーザーをいかに増やすかが長年の課題でした。

なぜかというと、予約件数自体はWebサイトのほうが多いのですが、コンバージョンレートでいえばWebより高いからです。なので、アプリユーザーは「ネット予約はホットペッパーグルメで」と思っている方が多いので、なんとしてもこの層を増やしたいと考えていました。

そんなアプリのTOPデザインをこの度ガラッと変えてみました。昨年の夏に先行してiOSのみ、11月末にAndroidにも適用しています。機能の追加や変更は一切なくて、純粋にレイアウトと見た目を変えただけです。開発工数も本当にちょろっとしたものだったんですけれども、いい成果が出ました。

結果はコンバージョンレートが104パーセント改善。とくに初回訪問ユーザーのコンバージョンレートが128パーセントと、大きく改善しています。開発工数規模の小さい案件ですが、アプリは必ずTOP画面から始まるので、大きな改善インパクトが出せた施策でした。

なぜTOP写真変更に至ったのか？

この案件なのですが、着任して間もないUXデザイナーが担当しました。しかも、着任してからだいたい15営業日ぐらいでリリースされています。彼女は飲食業界では働いたことがなかったのですが、何も知らずにスタートした彼女がなぜこれだけの短い期間でアウトプットができたのか？

それはビジュアルコミュニケーションとデータドリブンを意識していたからだと思います。ビジュアルでコミュニケーションをとりながら、データ分析でスピーディに仮説を裏づけ、実行案を提示するということを実践していました。

それでは詳細をお伝えしていきたいと思います。まず、彼女は着任して早々、私にこう言いました。「TOPの写真変えていいですか？」。これを聞いた私は正直あまり納得感がありませんでした。というのも、一般的にはコンバージョンに近い画面を修正したほうが改善インパクトの幅が大きいため、予約完了画面に近い後ろの画面から改善したほうが効率的だからです。

しかもTOPの写真変更は過去のA/Bテストで効果がないことがわかっていたので、「もっと他にやることあるんじゃないの？」って思ったんですね。なので、私はそれを彼女にやんわり伝えました。

ですが、彼女はその後すぐに、こんな資料を見せながら、TOPの写真を視覚的に大きく見せたほうがいいと、改修イメージを使って説明してくれました。彼女が初めてアプリのTOPを見たときに感じたのは、「ごはんを食べるところを探そうというモチベーションが湧かない」というところでした。

それはなぜかというのを彼女なりに考えたところ、TOPの写真が目立たず飲食想起につながっていないことと、アクションボタンが食欲減退色の青でやる気を削ぐということでした。そこでプロトタイプを作って、写真とボタンの色を変えるだけでこんなに変わると伝えたわけです。

これを見た私は、確かにやってみてもいいかなと思ったんですが、「果たしてこの改善でどのぐらいの改善インパクトがあるのか？」という点と、「ユーザー行動に適したIA（情報構造）になっているのか？」という疑問がありました。

なので、データ分析をすることにしました。初回訪問ユーザーに焦点を当てたときに、初回訪問者のTOPからの離脱が大きいことがわかりまして、コンバージョンに遠い画面でも改善ポテンシャルが大きいことがわかりました。また、細かくデータを見ていくと、ユーザーの行動分析をした際に、フリーワード検索をもう少し目立たせたほうがいいなど、細かいIAの修正が必要なこともわかりました。

そして、これらのデータを元にビジュアルをアップデートし、最終案をFIXさせました。ここまででだいたい5営業日ぐらいです。このあとデザイン作成と開発に入っていくんですが、それらを含めても全部で15営業日ぐらいになります。

飯テロ画像を効果的に押し出す

案件概要がビジュアル化されていたのでデザイナー・エンジニアとのコミュニケーションがとりやすかった点と、要素の並べ替えだけでできるように設計していたので、短期間でリリースまで持っていくことができました。

テストの種類はボタンの色が青と赤の2パターンでABテストをすることにしました。今回写真を飯テロ画像にしようと思っていて複数用意しまして、かつ、食欲減退色の青を使うのはためらいましたが、青は一応残しました。というのも、既存のユーザーが青に慣れているのでいきなり赤にしてアクションが下がっても困るので、一応このパターンを用意しました。赤と青のボタンの色を用意しまして、テストを開始しました。その結果……。

有意差ありでがっつり負けました。リリースから10日過ぎた時点で有意差がはっきり出ましたので、とても落ち込みました。初回訪問ユーザーに絞ったときはそこまでは負けてはなかったんですが、そもそも全体としてコンバージョン毀損が出てしまっているものだったので、テストを止めたほうがいいんじゃないかという話に発展しました。

「なんで？」と思いました。リリース後にいろいろな人から「新しいデザインいいね」と言ってもらっていたので、「この結果はいったい何なんだ？」という、変化がないならまだわかるのですが、「負けるってどういうことなんだ？」と思って、ちゃんと原因の深堀りをしてもらいました。

見てみると、実は赤ボタンのほうは初回訪問に絞ると有意差ありで勝っていました。青のほうは有意差ありません。なので、青いボタンのことはちょっと置いておいて、赤ボタンのほうを調べました。

今回、時間帯で分けて飯テロの画像が切り替わっていたのですが、どうしてもアプリが重くなるので枚数を絞る必要がありました。その結果、1番の飯テロ、一押しステーキ画像が3時間しか表示されていない仕様になっていました。なのに、実際ステーキが表示されるのはわずか3時間はコンバージョンレートがよくて、それ以外のほとんどの時間で負けているという結果が出ました。

ビジュアルコミュニケーションの重要性

この結果から、全体としてもデザインがアクションに影響を与えていることが見えてきたので、やはり最初の仮説は間違ってなかったのではないかと思いまして、初心に戻りましてテストをしました。

ボタン赤でステーキ画像に固定してリベンジし、気を取り直したところ、結果は冒頭でお話ししたとおり、初回訪問コンバージョンレート128パーセント改善、再訪問での予約が最大118パーセント改善という結果になりました。

このリベンジはテストを開始して10日後に再スタートしています。なぜこんなに早くできたのかというと、実はもう次弾は考慮済みで、最初にあらかじめ準備しておきました。

「最終的にこの3パターンでテストします。時間帯別で写真を変えます」と言われたときに、このビジュアル化された資料を見たときに、「あれ、このパスタと青いボタンって飯テロ弱くない？」と思ってたんですね。なので、万が一に備えて、写真の枚数や画像の差し替えが開発を入れずに、リリースを入れずに、UXデザイナー側で切り替えられるように開発フェーズで設計してありました。

これはビジュアルコミュニケーションがあったからこそ、この仮説が成り立ち、準備することができたと思っています。

いろいろあったんですが、あらためて「やっぱりそうだよね」と思ったことが2つあります。1つ目は「元気チャージ」が存在することです。「元気チャージって何？」って感じだと思うのですが、いわゆるユーザーのやる気、モチベーションや行動力です。

今までは、お店探し・お店決めのところで離脱しないように改善を繰り返していました。でも、実際のところ、ここで成果を出すにはどんなお店が登録されているかも関係してくるので、けっこう難しいです。なので、ちょっと考え方を変えて、途中で元気チャージが減るのはもうしょうがないことだと。むしろ下がる前提で、元気チャージが0にならない方法を考えようと。

話はシンプルで、「単純に最初のチャージが多ければ途中で減っても最後まで保つんじゃないか？」という。なので、TOPの印象を変えてモチベーションを与える、つまりチャージ多めにスタートすることを意識しました。実際それでコンバージョンレートも改善したので、やはり元気チャージは存在するんだとわかりました。

2つ目、もともとフリーワード検索に需要があることがわかっていたので、今回のデザイン変更で目立つ位置に置きました。これでさらに使う人が増えればコンバージョンレートも上がるだろうと目論んでいたのですが、結果はまったく真逆で、実はフリーワード検索の利用率は前に比べて減ってしまったんです。

でもフリーワード検索経由の予約数は下がりませんでした。コンバージョンレートが上がったということです。ちゃんと使いたい人だけが使ってくれるようになったというのが見えます。

そして次に、今まであまり利用されていなかった詳細条件からの検索が、レイアウト変更によって利用率が145パーセントの爆上がり。コンバージョンレートも128パーセントと大きく改善です。

このことから、今までなんとなく検索スタートしていた人たちが本当に自分の探したい経路で検索できるようになって、結果、予約までのアクションもスムーズになったことがわかります。機能や導線をいじらなくても、ちょっとしたレイアウトの変更だけでユーザーの行動から迷いが消えるんだなということがわかる結果でした。

このようなことがわかったのも、「データ分析」「ビジュアル作成」「試す」の3つを高速で回すことを日々心がけているからだと思っています。

イメージを与えると行動力が生まれる

冒頭にも話しましたが、キーワードはこの2つです。

ホットペッパーグルメのUXデザイナーは、全員SketchとInVisionでプロトタイプを作成しています。まずビジュアルで共感を得ることをマストと置いています。

そして、データ分析で仮説が正しいかできるかぎり事前に検証します。だいたいのカスタマー・クライアントデータにアクセスできるので、やってみて試すのではなくて、仮説が正しそうか、分析してから取りかかるようにしています。また、難易度の高い分析はデータ専任組織に依頼して、LTVの変化や需要予測など深い分析を事前にすることにも取り組んでいます。

最後にまとめになります。今回一番言いたかったことは「イメージを与えると行動力が生まれる」。これは開発も、実際サービスを使うユーザーも、そして自分自身も、みんなに対して共通です。今回新任UXデザイナーが短期間でアウトプットをできたのも、まずイメージを持つことを最優先にしたからだと思います。

いろいろな立場の視点に立って同時に動かないといけないことがあると思うのですが、必ずビジュアルをもって先にイメージを与えておく、これだけでぜんぜん違います。感覚が違うからこそ、一緒にイメージを持つことが重要です。

観点が違うことは考え方が違うということです。でも、思い描くイメージが一緒なら何とかなります。コミュニケーションだってとれます。これがすべてにおいての第一歩だと思っています。

以上になります。