カウネットのUI・UX改善の裏側とプロダクトアップデートを発表 | KARTE Blocks Friends Meetup vol3
2024年9月、KARTE Blocksを活用いただいているお客さま（KARTE Blocks Friends）が集まり、直近リリースされたプロダクトの新機能や活用事例を詳しくご紹介する「KARTE Blocks Meetup vol.3」を開催しました。
前半は、「KARTE Blocks活用によるUI・UX改善」をテーマに株式会社カウネット EC本部の奥澤 浩史さん、宮澤 怜希さん、井上 真之介さんがゲストとして登壇。同社のKARTE Blocksの活用事例を紹介してくださいました。
後半は、KARTE Blocksのプロダクトアップデートをお知らせし、どのように進化する予定なのか、予定している新画面のデモを、グループに分かれてご覧いただきました。
カウネットのWebサイト改善における課題発見プロセスは？
カウネットは、お客様の事業規模に応じたコスト削減、業務効率化をサポートする各種購買システムや通信販売サービスを展開しています。そんな同社では、集客プロモーション部とUI・UXデザイン部でKARTE Blocksを活用しています。
チームでKARTE Blocksを活用する上で、どこから施策を検討するのか、どのように使っているのかをお話しいただきました。「まず、どのように課題を発見するかが重要です」と、前提となる考え方を奥澤さんが語りました。
カウネット奥澤 浩史さん
奥澤「はじめから施策の議論はせず、改善するページや問題のある箇所はどこかについての認識を合わせるようにしています。大きく3つのステップに分けて、課題を発見していきます。
まず、売上貢献度と、改善余地の2つの軸で優先するべきページを決めます。続いて、そのページの中で問題となる箇所はどこかを議論。そのあと、ようやく施策のアイデア出しを行います」
こうした考え方のもと、改善すべきページをどのように定めていったのかについて、宮澤さんが説明を続けます。
宮澤「優先するべきページを決める際は、ページディレクトリ単位で見ていくことをおすすめします。売上貢献度と改善余地でマトリクス図を作成し、右上に近いものほど優先度が高くなります。
たとえば、私たちはトップページの改善に優先度高く取り組んでいます。トップページは売上貢献度が高い一方で、離脱率が高く、改善余地が大きいためです。
また、売上貢献はトップページほどではありませんが、商品詳細やバリエーションのページも優先度高く改善しています。これらのページは広告流入が多く、売り上げへの貢献度はそこそこ高いにもかかわらず、離脱率が非常に高いためです」
優先して改善すべきページを定めたあとは、ファクトと仮説を整理したうえで、どこがボトルネックなのかを議論するといいます。
また、ボトルネックを議論して課題を深堀りしていく過程では、ページのなかでも特に顧客が利用する部分を重点的に見て、考えていくそうです。
宮澤「たとえば、トップページで良く使われるのはグローバルナビゲーションの部分。ここは、お客様の約9割が利用する機能です。この部分について、使い勝手はどうか？不便はないか？使いやすくするには？などを重点的に議論しました。
時間をあまりかけず、ざっと使用状況を分析する際は、Google Analyticsや無料のヒートマップツールなどを用いています。メインでチェックするのはGoogle Analyticsで、ヒートマップはサブ的な用途として活用しています」
同社では、さまざまな改善施策がバラバラに動き出していましたが、優先度の整理や課題の絞り込みなどを進めていきました。そして、ページ内でよく見られている部分やボトルネックがどこにあるかについての認識を合わせていったそうです。
カウネット 宮澤 怜希さん
トップ、詳細、ログインページへと広がる、カウネットのKARTE Blocks活用事例
課題発見方法についての紹介のあとは、井上さんからKARTE Blocksを活用してどのように施策を実行し、課題を解決してきたのかの共有がありました。失敗例も含めて、3つの事例を共有いただきました。
井上「1つ目の施策例は、トップページから注文履歴への導線の改善です。再注文のためにWebサイトを来訪したユーザーがスムーズに購買できるよう改善できれば、CVRが向上するのではという仮説のもと、A/Bテストを繰り返して最適なデザインがどれかをテストしていきました。
まずは、Google Analyticsの経路データ探索から、トップページから注文履歴への遷移が2番目に多いことを確認。また、アンケート結果から、使い慣れていない担当者の方は離脱しやすい傾向にあることもわかったので、一度しか使っていないユーザーでもわかりやすい導線を意識しました」
仮説やデータを踏まえて、複数回のA/Bテストを経て変更されたトップページが以下のデザイン。オレンジ色で囲まれたエリアをファーストビューに追加し、注文履歴や再注文ページへの遷移をわかりやすく表示したそうです。
井上「この施策の結果、注文履歴への遷移率や購入完了率は上昇しました。追加エリア全体のクリック率も向上し、クーポンページや期間限定値下げページなどの販促導線の遷移数も高まる結果となりました」
井上「2つ目は、失敗例になります。商品詳細ページの直帰率が上昇していたため、これを改善しようとしました。該当のページにはWeb広告やSEO強化により、アクセス数が増加していたことで、直帰率上昇につながっていたのです。KARTE Blocksのダイナミックブロック（※β版の動的なコンテンツ出し分け機能）で、商品詳細ページ上部に、『一緒に見られている商品』のエリアを追加しました」
井上「この施策では、狙っていたような直帰率の改善には結びつきませんでした。施策実行時は、テスト段階だったため、一部商品のみを選んで掲載していました。今後、一緒に見られている商品は、KARTE Datahubのクエリを参照しながらユーザーの閲覧・購買データを元に商品を選定し、テストしていこうと考えています」
井上「3つ目は、お問い合わせの件数を少なくするための施策です。お客様が会員登録を進める過程で、法人会員と個人会員の登録ミスが起きていました。まずはKARTEを活用して、注意喚起のポップアップを掲載したのですが、お問い合わせ件数に変化はありませんでした。
続いて、KARTE Blocksを用いて、ページに表示される要素を入れ替えました。この対策により、50%ほどお問い合わせ件数が減少しました。80件ほど電話でのお問い合わせが生まれていたのが、40件ほどになり、顧客体験を向上できた施策となっただけでなく、社内の負担も減らすことができました」
カウネットのKARTE Blocks活用についてはこちらもご覧ください。
多様な顧客にOne to Oneで応えるECサイトを目指し、素早い改修や検証を重ねる
さらに使いやすいプロダクトへと進化を目指すKARTE Blocksのアップデート予定の発表
カウネットのみなさんからのトークセッションのあとは、KARTE Blocks全体のアップデート予定をお知らせする時間に。デザイナーの渡部 恵美より、複数の新しい画面や機能、仕様の変更などについてお伝えしました。
お知らせした変更点は「ページプレビュー画面」「施策一覧画面」「新しいブロック効果確認画面」「URL別PV数確認画面」など。それぞれ、どのように変化するのか、順番に紹介していきます。
渡部「これまでは作成したページ内でしか、配信している施策の状況を確認できませんでしたが、今後は最初の画面でURLを入力すると、関連する施策をすべて同じ画面で確認できるようになります」
渡部「施策一覧画面は、配信情報の一元管理ができる画面です。複数のURL条件でフィルタをかけられ、検索状態を保存する機能も用意しています。これで配信している施策の管理が効率的になります」
渡部「新しいブロック効果確認画面は、施策ごとのブロックの効果とは別で、URL単位で効果を確認する画面です。画面左側にプレビューを表示しながら、右側で効果を閲覧できるようになります」
渡部「URL別計測PV数の確認画面では、URLごとに施策のPV数を一覧で閲覧できます。この画面で役目を終えた施策を確認し、アーカイブするなどの対応がやりやすくなります」
プロダクトアップデートの内容をお伝えしたあとは、会場内でいくつかの小グループに分かれて、参加者のみなさんに新しいKARTE Blocksのプロトタイプを見ていただく時間。みなさんから質問をもらい、各グループのプレイドの担当者が回答をしていきました。
今回紹介した新しい画面は、KARTE Blocksが予定しているアップデートの一部。今後は要望の多い機能の改善なども予定しています。今回、発表した内容のリリースは2025年春に向けて準備を進め、その後もサポートをしながら段階的にリリースしていきます。
幅広い業種のKARTE Blocks Friendsと意見交換する交流タイム
トークセッションとKARTE Blocksのアップデート予定のお知らせのあとは交流会の時間に。今回のKARTE Blocks Friends Meetupには、BtoB、EC、金融・保険、人材などのさまざまな業種・業界の方が参加してくださり、交流会中も盛んにコミュニケーションが行われていました。
今後も、KARTE Blocksはみなさんからのご意見やご要望をいただきつつ、もっとWebサイト運営を継続して、安心して、自由にできるプロダクトを目指して開発を進めていきます。お楽しみに！