User Insightのヒートマップはアクセス解析に特化した知識がなくてもわかりやすく、お客さま目線の課題点をメンバー全体で共有できるのが魅力

――まずは、User Insight導入の経緯からお聞かせください。

安藤氏：デザイングループでは、ECサイトや公式アプリでの販売施策、デザインマネジメントなどを手掛けています。お客さま目線の“伝わるデザイン”で、課題を解決し、ファンやリピーターを増やしながら、コンバージョン０を１に変える(迷っているお客様に購入してもらう)ことに注力しています。

そのために大切なのは、お客様のことを知ること。サイト上で購入しようか迷っているお客様の背中をそっと押せるような“伝わるデザイン”の精度を高めるために、User Insightを導入・活用しています。

――使用感はいかがでしょうか？

安藤氏：User Insightのヒートマップはアクセス解析に特化した知識がなくてもわかりやすく、課題点を発見しやすいのが魅力です。私は2019年よりABテストを活用したサイト主導線の改善に取り組んできましたが、ヒートマップを使うことで、デザイングループのメンバーのみならず、サイトにかかわる他チームとも分析の共有ができるようになったと感じています。

安藤氏：元々はキャンペーンなどを行った際に、User Insightを“スポット的”に活用していたのですが、お客様のニーズやトレンドは日に日に変わるもの。継続的にサイト上でのお客さまの動向を分析しなければ、私たちが掲げる“伝わるデザイン”の課題解決にはたどり着きません。そこで、2019年4月に相内がチームに参加し、体制を整えてUser Insightの継続活用を開始しました。

相内氏：User Insightのヒートマップを継続活用することで、前月と比較したサイトの利用状況やお客さまの動線が浮き彫りになり、お客様目線での課題の気付きや改善の成果が目に見えてわかるようになりました。

柳沢氏：ヒートマップは視覚的にクリック数やコンテンツに対しての熱量がわかるので、分析が得意ではないデザイナーにも伝えやすくなりました。弊社ではデザインは外注ではなく社内スタッフによる内製で行っています。そこで、定期的にデザインの発注側、受注側を主な対象にした“伝わるデザイン”の理解を深めるための勉強会も行っています。ヒートマップの活用でさらに共通認識が深まり、今ではデザイナーから意見が出るようにもなりました。

毎月の定期施策にヒートマップを継続活用！　ユーザーの動向を知ることでデザインの的確な改善が可能となり、PV160％、売上135％に！！

――では、ヒートマップをどのようにサイト改善に活かしているのかお聞かせください。

相内氏：弊社では毎月29日を「ブックの日」としてサイトで割引クーポンを発行する定期施策を展開しています。そのクーポン取得ページは2020年より2年に渡って細かな改善を定期的に続けてきました。

相内氏：ページ上部にクーポン取得ボタンを設置し、その下に商品を探していただけるようなおすすめ本を紹介するレコメンドを設けているのですが、当初はクーポン取得ボタンまでしか見てもらえず、欲しい商品が見つけられないケースや、クーポンの使用方法がわからないいまま離脱されてしまうケースがとても多かったんです。

そこで、ヒートマップを参考にしながら、ページ内の情報の取捨選択を行いました。まず、ファーストビューにオンライン限定クーポンであることを打ち出し、クーポンの使用方法など必要なお客さまが限定される情報は別タブで対応する仕様にしてページを簡略化しました。また、レコメンドのクオリティを高めつつ位置の調整などの改善を2年に渡って行ってきました。

相内氏：こうした改善を続けた結果PVは160％に。お客様の興味・関心を促すことができ販売ページへの遷移率もアップしたことでページ売上は135％にまで成長しました。

安藤氏：「ブックの日」は毎月の定期施策ですから、改善を継続することが成果につながったと感じています。お客様が求めているものと、こちらが打ち出したい内容が一致するとは限らないので、ヒートマップでお客様の反応を毎月チェックしながら改善につなげた成果です。

相内氏：継続的に行っているアプリ訴求のキャンペーンページでも離脱率の改善に活用しています。アプリ内でクーポンを取得する手順をご案内しているのですが、当初はリンクがない箇所にクリック反応が集中し、アプリ登録ページへ遷移しないまま30％ほどのお客さまが離脱してしまっていたんです。

相内氏：ページのデザインの見直しを行う中で、ファーストビューに設置したバナーの矢印デザインがクリックボタンと勘違いされている点、クーポン取得手順説明の「タップ！」という吹き出しがクリックボタンに見える点などの修正ポイントを仮説立ててデザインの修正を行いました。

相内氏：こうしたデザイン修正によって無駄なクリックが激減し、アプリダウンロードへと誘導できるようになり、ページ離脱率は29.7％→23.4％へと改善されました。

安藤氏：クリックをしてもらうための修正施策に目がいきがちですが、クリックされないほうがいいケースもあります。ヒートマップを通して、勘違いクリックを減らし“伝わるデザイン”への改善につなげることができました。

クリックされない場所の改善はもちろん、意図しないクリックの頻発などから違和感を察知。ユーザーの動向に目を配ることで、クリック数改善や購入ページへの遷移率アップといった改善点への気付きも！

柳沢氏：『ブックオフオンライン』では、小説やコミック、ゲームといったカテゴリごとにトップページを設けています。こうしたカテゴリのトップページの課題発見にもヒートマップを大いに活用しています。コミックのトップページで課題となったのは、コンバージョン率の高いページへと遷移されていないことでした。コミックは人気ランキング形式で紹介しているのですが、購入へと直結するランキングページへ遷移するための「続きを見る」ボタンがほとんど活用されてないことがヒートマップで明らかに。

ページへと誘導するためのデザインが弱い・わかりにくいと仮説を立てて、「続きを見る」ボタンのデザインを文字とデザインの両面からABテストで改善を行い、その結果をヒートマップで検証しました。

柳沢氏：クリック率を高めるのと同時に、誰に響いたのかも重要です。既存のお客さまの変化は少なかったものの、新規のお客さまにかなり有効なデザインであることがわかり、ランキングページへのクリック数は126％に改善しました。

こうした課題への気付きは他カテゴリのトップページでも役立っています。例えば、ゲームカテゴリのトップページでは、当初ゲームタイトルに主軸をおいた構成にしていたのですが、ヒートマップで検証すると、ファーストビューでは表示されないゲーム機種別に選ぶボタンへのクリックが集中していることが判明。ページ構成そのものを見直すきっかけにもなりました。

安藤氏：こうしたコミックやゲームなど常設しているページのデザイン変更の気付きをもたらしてくれるのもヒートマップの強みだと感じています。クリックの頻発場所がすぐにわかるので、“なにか様子がおかしいぞ？”という気付きに直結します。数値データだけは気づけなかった違和感を察知して、サイトのUI・UXの改善につなげることができていますね。

柳沢氏：ヒートマップでの検証を継続的に続けることで、コミックやゲームといったカテゴリによってお客さまの視点や行動が変わることに気づくことができました。また、改善ポイントは日に日に変わるものなので、今後も継続的にチェックしながら、デフォルトとなっているページ構成やパーツのデザインなどの修正を続けていかないと、と感じています。

――お話を伺っていると、新規ユーザーや、クリックの有無への着目などヒートマップ活用幅の可能性が広がります。さらに検証の精度を高める工夫なども？

安藤氏：ユーザーの既存・新規や購入の有無といった、ユーザーにフォーカスした様々な軸で施策分析できるのも魅力です。

相内氏：販売促進施策のページでは、既存ユーザー／新規ユーザーと、購入の有／無でページの使い方に違いがあることがわかります。「新規のお客さま」はクーポンの概要を特に読んでくださっているので、よりわかりやすい表現を心がけています。また、「購入ありのお客さま」はピンポイントで商品ページへと遷移し、「購入なしのお客様」はレコメンドや110円コーナーを参考にする傾向があります。お客様の視点をヒートマップで読み解いていく工夫は、まだまだありそうだなと感じています。

コツコツ積み重ねてきたチリツモ改善は、年間売上効果2.28億円という大きな成果に！！CVページへとつなげる主導線の遷移率もおよそ2倍に！

――御社でのサイト改善のポイントについてもぜひお聞かせいただけますか。

安藤氏：私は特にABテストを活用したサイト主導線の改善に取り組んでいるのですが、ECサイトでは「上流＝トップページ」から「下流＝注文完了ページ」への流れを主導線と捉えています。上流には人が多く集まりますが、購入マインドは低く、下流へと向かうにしたがって、人数は減りますが購入マインドは高まります。ABテストを重ねながら、最初に購入マインドの高い下流部分をしっかりと整えて、購入しやすい構造・デザインを固めた上で、人数の多いトップページやカテゴリページの調整を行っています。

上流と下流ではお客さまの視点や考え方も違うので、同じ改善策では解決しません。加えて、ユーザーマインドはつねに変化し続けるので、経験則やセオリーだけでは正解にたどり着けないことも痛感しました。そうした結果、『ブックオフオンライン』に来てくださるお客さまのその時、そのページのマインドにフィットした最適デザインをつねに見つけ出していくことが大事だと考えています。

User Insightのヒートマップは上流でも下流でもお客さま視点の課題を効果的に気付かせてくれるツールです。また、ABテストの検証をヒートマップで行うことで、お客様の行動とマインドを知ることができ、我々が取り組んできた“伝わるデザイン”をより確実なものへと近づけていくことができます。そのためには、やはり継続して日々検証をコツコツと行うことが大事。これを“チリツモ改善”と呼んでいます。私たちがABテスト、ヒートマップをはじめとしたツールを活用し、地道に取り組んできた3年間の“チリツモ改善”で、CVページへとつなげる主導線の遷移率は0.85％→1.64％とおよそ2倍に。売上効果は年間で2.28億円になりました。

――最後に今後の展望についてもお聞かせください。

安藤氏：今期は『ブックオフオンライン』のフルリニューアルを予定しています。これまで継続して改善してきたデザインをすべて変えるので、新たな課題が数多く出てくると思うのですが、これまでヒートマップを活用してきたナレッジをフル活用して臨めるので、楽しみにもしています。

柳沢氏：これまでヒートマップを活用してきたことで、フルリニューアルの準備を進めているメンバーからも、「この部分はリリースしてからヒートマップで検証していこう」という話が出たりしています。ページの企画担当もデザイン担当も、みんなで意思の疎通を図りながら進めることができているのもフルリニューアルへとチャレンジできる大きな要因だと感じています。

安藤氏：ヒートマップを確認・検証の切り口にして、お客さまに満足して喜んでいただけるサービスを今後も展開していければと考えています。