SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Developers Summit 2022 レポート(AD)

Webサイトのカスタマーエクスペリエンス向上のための検索機能や性能監視【デブサミ2022】

【18-E-2】デジタルカスタマーエクスペリエンスの向上 - Enterprise Search と Observability

  • X ポスト
  • このエントリーをはてなブックマークに追加

 デジタルカスタマーエクスペリエンスが重要であることは周知の通り。では実際、Webサイトにおける検索のしやすさ、遅延が起きたことを即座に検知して修正するためには、具体的にどうすればいいのか。ElasticsearchやKibanaなど、Elastic製品を使うとどうなるか、同社 マーケティング部 テクニカルプロダクトマーケティングマネージャー 鈴木章太郎氏が解説する。

  • X ポスト
  • このエントリーをはてなブックマークに追加
Elastic マーケティング部 テクニカルプロダクトマーケティングマネージャー 鈴木章太郎氏
Elastic マーケティング部 テクニカルプロダクトマーケティングマネージャー 鈴木章太郎氏

デジタルカスタマーエクスペリエンス向上には何が必要か

 顧客が自社のサービスを通じてどのような体験をしているか、カスタマーエクスペリエンスは新規顧客を開拓し、既存顧客を維持するためにとても重要だ。まずは新しい顧客に自社サイトやサービスを気に入ってもらうこと。気に入ってもらえれば継続的に利用してもらえる。各種調査からもリピーターの購買率は高く、顧客のケアがとても重要になる。

 UXデザインでよく出てくるのが「○秒ルール」。例えばユーザーがWebページやアプリを訪問した際に、自分のニーズを満たすかどうかを判断するのに費やす平均時間が15秒と言われている。他にも3〜4秒を過ぎると離脱率が高くなるなど、具体的な数字は流動的ではあるものの、Webサイトやモバイルアプリが素早く表示されること、また探しているものにすぐたどり着けることが重要になる。そうでないと顧客はあっさりと立ち去ってしまう。二度と戻ってこない場合もある。

 ユーザーエクスペリエンス向上のためには、パフォーマンス測定と検索機能が鍵となる。アプリケーションやインフラの状態はもちろん、顧客の動線(迷子になっていないか)をきちんと測定することが欠かせない。もし不具合を見つけたら、素早く改善する。こうしたことを繰り返してブラッシュアップを続けることが重要になる。

 検索機能も然り。特にECサイトにおいて、顧客がほしいものをすぐ検索できるか、検索しやすいかは売上に直結する。Webサイトやアプリの検索機能を使いこなせばビジネスに貢献できると考えたほうがいいだろう。例えば新規顧客を5%獲得して既存顧客とできれば、将来の購買行動も伸びていく。

 実際にWebサイトやモバイルアプリ検索を改善しようとした時、ポイントとして鈴木氏は「スクラッチから作成してもいいのですが、皆さんすでにお使いとは思いますが、できるだけ柔軟性ある既成のソリューションを使いこなしていきましょう」と提案する。

 加えて「コンテンツの取り組みを効率化する」。データの読み込みや連携の方法はいろいろある。できる限り効率的なものがいい。「データをロードすること自体が1つのプロジェクトになってしまうと、しんどくなってしまいますから」と鈴木氏。データソースと連携するアダプターやインターフェースが整っていることが重要になる。

 さらに「直感的なUIで絞り込み検索を可能とする」。サイトを改善する側の担当者が技術者でなくても、測定結果をチューニングできるなど使いこなせることが重要だ。例えば顧客が「(メニューや商品を)見落としている」とか、「関心なさそうだ」とか、「このワードでは刺さらない」など。技術者以外もサイト改善やカスタマーケアができるようになることが効果を高める上では重要になる。

Elasticのツールやソリューションはどのように構成されているか

 Elasticは検索を得意とする企業。「無料かつオープン」を信念に、「In a world where endless data creates endless possibility, search helps people and organizations thrive(無限のデータが無限の可能性を生み出す世界で、検索は人と組織の繁栄に寄与する)」というビジョンを掲げている。プラットフォーム概観は下図のようになる。

Elasticsearchプラットフォーム
Elasticsearchプラットフォーム

 中核となるElasticsearch(緑)が無料かつオープンの検索エンジンとなる。ドキュメントベース型データベースでデータをJSON形式のドキュメントで保存している。ドキュメントの集合がインデックスであり、ドキュメントにはフィールドと呼ばれる複数の属性がある。Elasticsearchには柔軟性があり、数百万のドキュメントでも短時間で検索できるなど、水平スケールと高可用性が大きな特徴となる。Elasticsearchの上にKibanaと呼ばれる可視化ツールがある。

 これらのテクノロジーを活用したソリューションとしてEnterprise Search、Observability、Securityがある。簡単にデータを取り込めるようなインターフェースもそろえている。さらにAWS、GCP、Azureなどのパブリッククラウド、ハイブリッドクラウド、オンプレミス、あらゆる環境で利用できる。

 今回は検索のソリューションEnterprise Search、そのなかでもApp Searchを中心に紹介する。詳しくは後述するが、データインデックスのためのWebクローラーを内蔵し、専門家でなくても分析機能が使えるようなコントロール、多言語対応なども含まれている。

 残りのソリューションとなるObservabilityとSecurityも簡単に紹介しておこう。Observabilityは単なる監視を越え、クラウドネイティブなアプリケーションの観測性を高めていくものになる。ログやメトリクスなどを1つのデータソースにまとめることで、自動集計してデータを可視化していく。Securityはエンドポイントセキュリティ、SIEM、クラウドセキュリティを統合してインフラ全体の保護を一元化する。

 鈴木氏はElasticsearch for VSCodeでデータ操作を簡単に披露した。これはVSCodeから手を離さずに開発ができるので鈴木氏は気に入っているという。画面左側がエディターとなりクエリーを実行できて、画面右側に実行結果が表示される。もちろんVSCodeだけではなく、Python、Ruby、Goなどさまざまな言語向けのものもある。

Elasticsearch for VSCode
Elasticsearch for VSCode

サンプルサイトで検索機能の追加、性能調査を実施してみる

 今度は架空の服のオンラインショップ「Gallivant」を例に、App Search活用について解説する。アパレルのECサイトなので、Webサイトの訪問客はアイテムを選び、サイズを選び、チェックアウトして購入するのが基本的な流れとなる。マーケターやエンジニアなど多くの人がこのサイトに関わり、ユーザーエクスペリエンスを改良していく。

ECサイトを例にした検索のエクスペリエンス
ECサイトを例にした検索のエクスペリエンス

 検索機能が全文検索のみだとフリーワード検索しかできないが、App Searchを活用するとフリーワード検索でオートコンプリートやサジェストができるほか、ソート、各種要素で絞り込み、集計、ハイライトなどをあまりコードを書かずに実現できる。こうした便利な機能があるとサイトの利便性は高まり魅力的になる。

 今度は表からバックヤード側、管理画面に移ろう。顧客がどのような操作や検索をしたのかが詳細に分かる。例えば顧客の検索ワードに「デニム」や「ブラウス」があり、それぞれどれくらいアイテムがクリックされたかが集計されている。そのなかで「ジャンパー」は検索されてもクリックが「0」となっていることが判明した。そこで他のアイテムとキュレーションするなど工夫することができる。

 次はシノニム(同義語)のチューニング。「シャツ」に対して「ブラウス」や「ガウン」などと登録しておくと、顧客が「ガウン」と検索しても「シャツ」に該当するアイテムがヒットするようになる。なかなか検索されないアイテムには同義語を登録しておくといいだろう。

 Observabilityの機能も簡単に見ていこう。昨今ではマイクロサービス化が進み、問題発生時の原因究明が難しくなってきている。冒頭に述べたようにWebサイトの訪問者は数秒でも待たされると離脱してしまうので、サイトの稼働状況を監視して問題を早めに検知して改善を加えることが重要になる。売上に貢献するだけではなく、開発者や運用担当者の生産性を高めることにも寄与する。

マイクロサービスアーキテクチャ
マイクロサービスアーキテクチャ

 サンプルのサイトでは、クラウドネイティブのテクノロジーでサイトを構築し、さまざまなプログラミング言語が使われ、10層のマイクロサービスアーキテクチャとなっている。メモリ内データキャッシュにRedisを使用し、GCPのGKEで実行していたとする。サイトが高度になるほどボトルネックを探すのが難しくなる。

 例えばサイトの顧客がアイテムをカートに入れる時に数秒待たされたとする。限度を超えると機会損失につながりかねないので、トラブルシューティングを行う。Observabilityを使うと、サービスがどのように接続しているか「Service Map」が瞬時に表示される。今回はカートにアイテムを入れる部分で異常が生じているので、そこに該当する部分、例えば「Add cart」のトランザクションなどをチェックする。画面を深掘りしていくとどの処理でどれだけ時間がかかっているかがグラフ表示されており、原因究明に役立つ。

 補足としてElasticではGCP、AWS、Azureとネイティブデータ統合を徐々に進めている。今後ますますObservabilityやEnterprise Searchで便利にデータを取り込むことが期待できそうだ。例えばGCPのCloud FunctionやFirestoreを使うアプリケーションを構築したとする。ここにElasticの機能を連携させて使うことも可能となる。アプリの開発生産性が高まりそうだ。

 最後に鈴木氏は「カスタマーエクスペリエンス向上のために、ぜひElasticsearchをお試しください。資料の末尾に参考資料を添付していますので、どうぞご覧ください」と述べて締めくくった。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15679 2022/03/11 12:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング