データに基づいた素早いUI/UX改善を実現。「るるぶ+」が目指すOne to Oneのメディア体験

社名
株式会社JTBパブリッシング
サービス名
るるぶ+
事業内容

旅行ガイドブック「るるぶ」で知られる同社が運営するWebメディア。「るるぶ&more.」「るるぶKids」に加え、2024年4月に宿泊検索機能を持つ「るるぶ+」をローンチ。

旅行ガイドブック「るるぶ」で知られるJTBパブリッシング。同社は旅行・おでかけ情報を発信するWebメディア「るるぶ&more.」「るるぶKids」、そして2024年4月にローンチした宿泊検索機能を持つ「るるぶ+」を運営しています。

「るるぶ+」はメディアとしての役割に加え、マネタイズの要となる宿泊予約への導線を持つサービスです。そのため、サイト改善を加速させて、ビジネス成果を最大化する事が必要でした。データに基づいた改善をスピーディに行うために導入されたのがKARTE Blocksです。今回、デジタルマーケティング担当の沖本 和晃さん、技術担当の清村 優子さん、るるぶ+編集部の安達 紗季さんの3名に、KARTE Blocks導入の経緯や具体的な活用方法について伺いました。

編集部とマーケティングが連携する体制を構築

まずは皆さんの体制や役割について教えてください。
沖本:私と清村はデジタルマーケティングチームに所属しています。各メディアのデータ計測や分析をもとにしたグロース施策を担当していて、KARTEをはじめとするMAツールの導入・運用も担っています。
清村:私は同じチームで、主に施策の技術的な支援やデータ分析を担当しています。もともとエンジニア出身なので、コードや仕組み面を工夫して、マーケターがやりたい施策を形にするのが役割です。
安達:私は「るるぶ+」編集部の運営チームに所属しています。るるぶ+から宿泊予約や電子レジャーチケット販売につなげる導線設計を担当し、ユーザー体験を高める施策を日々企画しています。

チーム間ではどのように連携しているのですか?
安達:企画を進める中で「条件設定が複雑で分からない」といった技術的な壁にぶつかることもあります。そういうときは沖本や清村に相談し、助言をもらったりコードを書いてもらったりしています。
沖本:KARTEのサポートでも解決できないケースが出てくるのですが、社内に技術知見がある清村がいることで、現場で素早く解決できる体制になっています。また、ローンチ初期にはALPHA(プロフェッショナルサービス支援)にも伴走いただきました。その経験を通じて施策の進め方や検証の型が社内に定着し、今のスピード感ある改善体制につながっています。

KARTEの各プロダクトはどのように使い分けていますか?
沖本ユーザー行動に応じたポップアップや通知には「KARTE」を使い、サイトのUIや構造の改善には「KARTE Blocks」を使う、という棲み分けをしています。役割を明確にすることで、施策を整理しやすくなっています。

データに基づくUI/UX改善ができない

KARTE Blocksを導入する前、Webサイトにはどのような課題がありましたか?
JTBパブリッシング デジタルマーケティング デジタル営業戦略の沖本 和晃氏、リモートワークのため遠隔地から対応いただきました

沖本:当社は長年にわたり「正確で信頼される旅・おでかけ情報を編集しお客様に届ける」ことに強みを持っていましたが、WebサイトのUI/UX改善にはなかなか踏み込めていませんでした。

小規模な修正でも要件を整理してシステム部門に依頼し、開発・実装を待たねばならず、時間も工数もかかってしまう。結果として「フロント修正はハードルが高い」という共通認識がビジネス部門に根づいてしまっていました。

さらに当時はA/Bテストの仕組みがなく、「なんとなく使いにくい」といった主観的な意見に頼って改善するしかありませんでした。実際のお客様の反応を確かめられないため、改善が本当に成果につながっているのかが見えにくい状況でした。

安達:編集部としても同様の課題がありました。たとえば年に数回作成する電子レジャーチケットの特集ページでは、観光施設への掲載確認の後でないと紹介文や画像を掲載できないため、観光施設からの回答が遅れるとキャンペーン公開に間に合わず、掲載を断念せざるを得ないこともありました。せっかくの特集でありながら機会損失につながり、歯がゆい思いをしていました。

A/Bテストを行い、成果につながる施策を次々と実行

具体的に、KARTE Blocksを活用して行っている施策について教えてください。
安達:電子レジャーチケットの特集ページ作成で感じていた課題感は、KARTE Blocksを導入してからは一変しました。

特集ページを先に公開し、観光施設の情報は後から差し込めるようになったのです。これにより「まずは公開してから柔軟に追加対応する」という運用が可能となり、観光施設側にも「多少回答が遅れても大丈夫」と伝えられる余裕が生まれました。

さらに大きな成果は、季節ごとのテーマ更新が容易になったことです。夏はプールや海水浴、秋は紅葉スポットといったように、お客様の関心に合わせて特集ページ内で表示している内容を編集部側で都度アップデートできるようになりました。これまでなら掲載を諦めていた施設も、需要が見込めれば後から追加できるため、販売機会を最大限に広げられるようになりました。

特集ページ以外の施策も行っていますか?
JTB パブリッシング るるぶ+編集部の安達 紗季氏
安達:もう一つ大きな取り組みが、るるぶ+の記事下部に設置する宿泊予約の導線ボタンです。るるぶ+で海外の記事も公開するようになったタイミングで、これまで国内の記事だけに設定していた宿泊予約の導線ボタンを海外の記事にも設置することになりました。

従来は「どんな文言にするか」を担当者の主観や経験で決めていました。しかしKARTE Blocksを使えば、全記事に反映する前にA/Bテストを行い、最も効果の高い文言を検証できます。実際に「海外ツアーを探す」というシンプルな表現と、「海外ツアー(航空券+宿)を探す」というより具体的な表現を比較しました。

結果は明確で、より具体的な文言を使った方が高い成果を示しました。その検証結果を踏まえ、全記事に最適化したボタンを配置することができました。感覚に頼らず、数字を根拠に判断できる仕組みは、編集部にとって大きな武器になりました。

沖本:るるぶ+のテーマ一覧ページも改善対象のひとつでした。このページには「観光」「グルメ」「推し活」など多くのテーマタグが並んでおり、クリックするとタグ付きの記事カード一覧に遷移する仕組みです。

しかしスマホで表示すると、タグの数が多すぎてお客様が自分の興味に合うテーマを探しきれず、結果的に遷移前に離脱してしまうのではないか、という仮説を立てました。

実際にヒートマップツールで分析するとクリックされないタグがあったり、遷移先にカードが1件しか存在しないタグが多数見つかりました。CMSでは任意に並び替えたり非表示にする機能がないので、KARTE Blocksを用い、観光タグを27個から12個に、グルメタグを22個から10個に、推し活タグを25個から11個に削減したパターンを作り、A/Bテストを実施しました。その結果、タグ数を絞ったパターンの方がテーマ検索結果への遷移率が明らかに向上しました。

他に取り組んだ施策はありますか?
沖本:お客様の流入経路に応じて、コンテンツの表示内容を変える施策も実施しました。流入経路ごとにパラメーターを設定して、KARTE Blocksでセグメントごとに出し分けました。

たとえば、るるぶトラベルやJTBホームページで宿泊予約をしたお客様が予約完了メールから「るるぶ+」に流入する際は、宿泊予約の動線はそのタイミングにおいては必要ありません。その場合、宿泊予約への誘導ボタンを非表示にし、お客様にとってより興味関心が高いおでかけ情報にフォーカスできるようにしました。

清村:他にもKARTE Blocksの機能を利用して、効率的にキャンペーン期間だけのページ更新を実施したことがあります。更新対象の条件に該当するページが大量にあるものの、通常は手動で更新しなくてはならない内容でした。また、キャンペーン期間が終了したら早急に元の内容に戻さなければなりません。

そこで、KARTE Blocks上で簡単なコードを記述することで、大量のページを一括で更新し、期間終了とともに変更を戻すことができました。KARTE Blocksの機能を利用して、スピーディに実現できたのは大きな成果です。

JTBパブリッシング デジタルマーケティング デジタル営業戦略 技術担当清村氏

「相談できる体制」が生んだ、チームでのWebサイト改善の促進

KARTE Blocksを使う頻度について教えてください。
沖本:私たちが目指しているのは「施策を数多くこなすこと」ではなく、「小さなアイデアでも、思いついたらすぐ具現化できる状態」です。KARTE Blocksを使えば「これ試してみたい」と思ったアイデアを、その場で実装・検証できます。社内で「こういうことはできる?」と相談があれば、「それならシステム改修せずともKARTE Blocksで実現できそうだ」とチーム内で活用のイメージが浸透し、自然と会話から施策が生まれるようになりました。

また、基本的には施策は担当者が自ら実行していますが、技術的に実現が難しいことについては清村に相談しています。

安達:一人では諦めるしかなかった施策も、相談すれば解決策を出してもらえています。自分のイメージをどうしても形にできない時に、すぐに相談できる体制が社内にあるのはとても助かっています。

施策の効果測定や振り返りはどのように行っていますか?
安達:週1回のチーム横断での定例会議では、それぞれが実施している施策を振り返り、次のアクションや改善点を話し合っています。プレイドのサポートに問い合わせた内容も共有しており、他のメンバーで同じ課題が再び出ても解決の糸口がすぐ見つかるようにしています。こうした知見を積み重ねていくことで、社内全体のナレッジが強化されています。

プレイドのサポートについてはいかがですか?
沖本:プレイドのチャットサポートやカスタマーサクセスとの定期ミーティングも頼りにしています。困ったときにすぐ相談できる環境があるのは大きいですね。
清村:私はサポートサイトもよく活用しています。ツールの使い方に行き詰まった際に閲覧したり、社内から相談のあった施策を希望通りに叶えるにはどうするかを考えるうえで役立っています。

KARTE Blocks導入後、どのような変化がありましたか?
沖本:ビジネス側だけで改善を実行できるようになったので、これまで諦めていたことも試せるようになりましたし、スピードアップしました。思ったような結果がでなければすぐに止めて次に移ることもできます。また、「なぜうまくいかなかったのか」をユーザー分析から掘り下げることで次の改善策を考えられるようになったのも大きな変化です。

清村:KARTE Blocksの管理画面上で施策の成果や施策からの気づきを確認できるようになりました。基本指標などの数値確認は、クエリを書くことなく管理画面上で可視化できるため、現場のメンバーがデータを読み解きやすく、データを見る習慣がついたと思います。

1st Party Customer Dataを活用し、顧客体験向上に向けたさらなる挑戦

今後の展望について教えてください。
安達:今後は特集サイトでどの情報がどれだけ見られているかを整理し、お客様にとって本当に価値のある情報を適切な文脈で提供していきたいです。そうすることで体験全体の価値をさらに高められると考えています。

沖本:KARTEを導入する前までは、私たちのメディア運営はPV(ページビュー)の多さを売りにした広告モデルが中心でした。PVを増やしてスポンサード案件や広告枠を獲得する、という従来型の考え方です。

しかし現在は、単純にアクセスの量を追うだけでは不十分です。むしろ重要なのは「お客様の解像度を高めること」。つまり、一人ひとりの興味・関心を深く理解し、そこからスモールマスを形成して、クライアントと的確にマッチングさせていく必要があります。

そのためには、年齢や性別といったデモグラフィック情報だけではなく、「日常からどんなことに興味を持っているか」「旅行を検討するお客様は、いつどんな情報に触れていつ予約に至るのか」といった行動・ニーズをしっかりと見ていくことが欠かせません。良いマッチングを実現するには、その基盤となるCDP(カスタマーデータプラットフォーム)をしっかり整備し、1st Party Customer Dataの活用を徹底していく必要があると考えています。

清村:これまでは外部データに依存していましたが、Cookie規制もあり、1st Party Customer Dataの重要性はますます高まっています。お客様に会員登録やログインをしてもらい、そのデータを基盤に改善を進めていく。そのための仕組みをKARTE Blocksで整え、数値に裏付けられた改善を積み重ねていきたいです。

沖本:当社はこれまで「旅・お出かけ」領域に強みを持っていましたが、コロナ以降は日常のライフスタイル寄りのコンテンツも増えてきました。近年、AIに聞けばすぐに答えが見つかる時代になりました。そのような状況で一度訪れたお客様に再訪問していただくには、「このサイトやアプリには、毎日見に来たくなるようなワクワクするコンテンツと体験がある」と感じてもらうことが不可欠です。

こうした実感価値を高めるうえで、UI/UXの改善は極めて重要です。 この認識は社内にも浸透してきており、今後はKARTE Blocksも活用しながら、改善の取り組みを一層強化していきたいと考えています。

JTB海外ツアーページ誘導ボタンのA/Bテスト(JTBパブリッシング)

詳細はこちら

テーマタグ表示数のA/Bテスト(JTBパブリッシング)

詳細はこちら

KARTE BlocksKARTE Blocks Blogデータに基づいた素早いUI/UX改善を実現。「るるぶ+」が目指すOne to Oneのメディア体験

記事をシェア

KARTE Blocks

あなたのサイト改善
あっという間に。
継続的に。

リーン・サイト運営 プラットフォームKARTE Blocks
KARTE Blocks

資料ダウンロード

KARTE Blocks 導入のご相談

お気軽にご質問・ご相談ください

フォローよろしくお願いします!

Twitterのアイコン@KARTE_Blocks

フォローよろしくお願いします!

矢印