原文：Goldilocks and the Three Experiments
UX DAYS TOKYO 2025に登壇するErin Weigel（エリン・ウィーゲル）が、Booking.com時代に行った改善に関する記事をご紹介します。
彼女はA/Bテストを行う際、しっかりと仮説を立てた上で実験を実施し、たとえ仮説と異なる結果が出たとしても、それを受け入れ、最適な答えを導き出しています。
記事のタイトル「Goldilocks and the Three Experiments」に登場する「Goldilocks」は、「ちょうど良い中間点」という意味を持ちます。また、エリン自身の金髪にちなんだ言葉遊びでもあります。
昔々、オランダの地で行われたユーザー調査のこと。
そこに登場したのは、ヘールトという中年のオランダ人。彼が何気なく行った指のピンチ操作が、一人の金髪の少女による3つの重要な実験のきっかけとなりました。
Booking.comのタブレット向けウェブサイトで宿泊施設を探していたヘールトは、ホテルの写真をもっと詳しく見ようと指を広げました。ところが、写真は拡大されても画質が荒くなり、まるでモザイクのような状態に。
この様子を目にした金髪の少女は、心を大きく揺さぶられました。
「ヘールトをはじめ、ユーザーのみんなはきっと、鮮明で美しいホテルの写真を求めているはず！」彼女のひらめきが、やがて大きな変化を生み出すことになるのです。
ズームをして画質が荒れた写真
彼女の目標は、まるで高精細なRetinaディスプレイに映し出されるSVGアイコンのように、より一層クリアで揺るぎないものとなりました。（2つの意味をかけ合わせたジョークです。）
ヘールトさんをはじめ「もっと大きな写真を見たい」と願うすべてのユーザーのために尽力することを心に決め、次回の開発チームの計画会議で、宿泊施設の検索画面やホテル詳細ページの写真表示の改善を提案することにしました。
まず取り掛かったのは、システム内に保存されている「タグダンプ」という開発者向けの情報ファイルの確認です。そこから、サーバーに保存されている写真のサイズを詳しく調査し、改善の糸口を探り始めました。
Booking.comの「タグダンプ」では、様々なサイズの画像を読み込んでいます。
宿泊施設の検索画面とホテル詳細ページでは、表示速度を重視して最適化された150×150pxのホテル写真が使われていました。写真の周りには10px分の余白が設定され、画像など拡大せずに、そのままの大きさで表示されていました。
基準となる実験、150×150pxと10pxの余白
調査を進めると、サーバーには異なる大きさの写真も保存されていることが分かりました。500×500px、300×300px、200×200pxの正方形の写真が利用可能でした。
はじめに、表示されている150pxの正方形写真を200pxの写真に変更するためのプログラムを作成しました。その後、異なる画素数を持つ複数のタブレット端末で、拡大された写真を確認しました。
「200pxの正方形写真は、まだ画質が粗すぎます。写真の鮮明さが足りず、問題は全く解決されていません！」と金髪の女性社員が指摘しました。
次に300pxの正方形写真を試してみました。写真の見た目は改善され、切り取り方も以前より自然に見えましたが、まだ満足できる品質には達していませんでした。
300pxの幅・高さの画像
デザイナーとして完璧を追求する彼女の性格上、最高のビジュアル体験を実現したいという思いはますます強くなりました。宿泊施設を探すユーザーに対して、利用可能な最高品質の写真を提供することこそが、最良のサービスにつながると確信したのです。
500pxの写真を表示するようプログラムを変更し、ページを開いた瞬間、彼女は驚きました。その鮮明な画質に圧倒され、このサイズこそが最適解だと確信しました。
「素晴らしい！」彼女は感動して言いました。「500pxの写真は完璧な構図で、驚くほど鮮明。まるでiPadの画面から飛び出してきそう！これなら、宿泊施設を探すお客様の心を確実につかめるはず。」
しかし、500pxの写真は150pxのものと比べてデータ量が大幅に増えるため、ページの表示速度への影響が懸念されました。そこで、500pxと300pxの写真を使用した場合のページ表示速度を詳しく分析することにしました。
2種類の実験用プログラムを作成し、1つ目は検索結果ページの150pxの写真を500pxに変更、2つ目はランディングページの150pxの写真を300pxに変更するというものでした。
2週間にわたる実験の結果、写真のサイズ変更によるユーザー行動への影響は、意外にもどちらのケースでも見られませんでした。ユーザーは写真のサイズの違いをほとんど気にしていなかったのです。
データを詳しく分析したところ、500pxの写真を使用した検索結果ページの表示速度は、従来と比べて0.5秒以上遅くなっていることが判明しました。これは予想範囲内の結果でしたが、驚くべきことに、表示速度が低下してもユーザーの行動に大きな変化は見られなかったのです。このことから、高画質な写真による視覚的魅力が、速度低下のデメリットを打ち消している可能性があると考えられました。
ランディングページの分析では、300pxの写真に変更した際の速度低下はわずかでしたが、それでもユーザー行動に影響はありませんでした。この結果は予想外で、彼女にとってさらなる分析が必要な課題となったのです。
興奮冷めやらぬまま、このアイデアをすぐにデザイナーの仲間たちと共有しました。
フィルがさっそく提案してくれました。「『background-size: cover』というCSSプロパティを使えば、画像をコンテナにぴったりと合わせられるよ！ブロックのサイズに応じて自動的にリサイズされるから、見た目もスッキリするはずだよ。」
「さすがフィル！それは素晴らしいアイデアだね！」
さらに、カタリンも意見を出してくれました。「私の経験では、宿泊施設や場所の説明が記載された右側のコンテンツブロックの高さを少し小さくすることで、より良い結果が得られることが多いんだ。」
「その通りだね、カタリン！素晴らしい気づきをありがとう！」
最後に、金髪の少女がこう提案しました。「300ピクセルの正方形写真を使えば、よりきれいにトリミングできるし、ページの表示速度への影響も最小限に抑えられると思うの。」
こうして、チームの意見がまとまりました。コンテンツブロックを小さくし、高品質な写真を取り入れた新しい実験プログラムを作成し、ついに公開へ。
そして2週間後、結果は明白でした。私たちが目指していたポジティブな成果をついに手に入れたのです！
最も効果的な実装が完成しました！
「150pxの正方形写真では画質が荒すぎ、かといって500pxの写真ではファイルサイズが大きすぎました。でも、300pxを最大サイズとすることで、まさにゴールディロックスゾーン（最適な中間点）を見つけたんです！」
金髪の少女はそう喜びながら、この改善をすべてのお客様に適用することを決めました。
ゴールディロックスと彼女の仲間たちがヘールトの問題を解決するまでのプロセスを振り返ると、当初、私が「見た目が最も良い」という理由だけで500pxの写真を採用しようとしたことが、実は無意味、もしくはむしろ逆効果だったかもしれないことに気づきました。
もしA/Bテストを活用してお客様のフィードバックを測定せず、仲間との議論や協力もなければ、私は単なる思い込みや直感だけで判断し、ユーザー体験を損なう選択をしていたかもしれません。
Booking.comで優れたデザインを生み出すためには、単に「見た目の良さ」を追求するだけでは不十分です。データに基づいて結果を測定し、ユーザーが実際にどのようにサービスを体験するのかを深く理解することで、本当に価値のあるものを提供できるのです。
A/Bテストを活用してお客様の声を集めることは、サービスの改善に欠かせないプロセスです。そして、問題を見極め、解決策を提案してくれる仲間と協力することで、最適な改善策を見つけることができます。
自分の考えに固執せず、お客様や仲間の意見に真摯に耳を傾け、それらを柔軟に活かしていくことは、まるでおとぎ話の魔法のような力を発揮するのです。
ゴールディロックスは、デザインに関する一見些細に思える話題にも常に真剣に向き合い、優れた意見やアイデア、鋭い気づきを共有してくれたフィル・ハメル氏とカタリン・ブリディネル氏に、心からの感謝を伝えたいと考えています。また、現在の所在は不明ですが、宿泊施設の写真表示に関する貴重なインサイトを与えてくれた「ヘールト」氏にも、改めて感謝の意を表したいと思います。
ワークショップのご案内
「成長を生み出すインサイトの見つけ方 」データを行動に変えるための実践ガイド
3月29日（土）開催の彼女のワークショップでは、A/Bテストに加え、定性・定量データを効果的に一元管理する「ユーザーエクスペリエンス・ランドスケープ」の構築方法など、現場で役立つ実践的な理論を学べます。
マーケティング担当者はもちろん、ビジネス視点でデザインを構築するための理論的アプローチを身につけたい方にもおすすめです。今から開催が待ち遠しいですね。
「成長を生み出すインサイトの見つけ方—データを行動に変えるための実践ガイド」
開催日時：2025年3月30日（日）9:00〜
