会話型の商品フィルタリングを効果的に実装するには、ユーザー エクスペリエンスの設計を十分に検討する必要があります。
視覚表示要素
会話型フィルタの配置と外観は、その有効性に大きな影響を与えます。
縦型レイアウトと横型レイアウト
縦向きレイアウトと横向きレイアウトのどちらを設計するかを検討する際の考慮事項は次のとおりです。
推奨事項: 横向きで縦にコンパクトなデザインを優先します。これにより、商品検索結果がスクロールしなければ見えない範囲に表示されるリスクを最小限に抑えることができます。
理由: フィルタが上部に横向きに表示されると、商品結果がページの下に押し下げられ、商品の認知度が低下するため、機能の費用対効果が低下します。また、要素間の空白を最小限に抑えることで、ウェブページに商品タイルを追加表示するためのスペースを確保できます。
長い属性を処理する
選択肢が長い場合（ブランド名など）は、要素の高さが増加するため、改行しないでください。代わりに、ページから水平方向に拡張して、横スクロールを有効にします。
水平スクロールの実装例を次に示します。
最適な配置
会話型フィルタは、商品の 3 ～ 5 行後に配置することをおすすめします。このアプローチにより、会話要素が最初のプロダクト リストを置き換えるのを防ぐことができます。
この配置の重要なポイントは、会話フィルタリング バーをできるだけ縦方向にコンパクトにすることです。会話型の商品フィルタリング機能が目立つ位置に配置されていると、商品表示がページの下部に移動し、すぐに表示されなくなる可能性があります。買い物客に表示される商品が少なくなるため、デメリットとなる可能性があります。そのため、表示される商品はできるだけ関連性の高いものにする必要があります。
サイド（縦）と上部（横）: 会話型フィルタを商品の 3 ～ 5 行後に配置することを検討してください。このアプローチにより、会話要素が最初のプロダクト リストを置き換えるのを防ぐことができます。
強い検討: 会話型の商品フィルタリングが商品選択を絞り込む主な方法になる場合は、手動のフィルタバーを完全に最小化するか、置き換えることを検討してください。これにより、商品アイテムの別の列を追加できます。
パソコン、モバイル
パソコンでの実装は成功を収めていますが、モバイルでの結果は一貫性が低く、全体的なパフォーマンスの向上も低いことがわかっています。モバイルの画面サイズには制限があるため、プレースメントにはよりクリエイティブで慎重なアプローチが必要です。
推奨事項: 最初はモバイルよりもパソコンでの実装を優先します。パソコンの画面サイズが大きいほど、クリエイティブ デザインの柔軟性が高まります。モバイルの画面は小さいため、デベロッパーは特定の要素を優先せざるを得ません。
避けるべきもの: チャット ウィンドウのインターフェース。会話型フィルタをチャット ウィンドウとして実装しないでください。これにより、ユーザーはメインのウェブ インターフェースから離脱し、デベロッパーが通常多大な時間を費やして最適化するウェブ購入手続きのフローの設計が中断される可能性があります。
モバイルに関するその他の考慮事項
モバイルウェブとアプリも、テストの際は別々に扱う必要があります。モバイルアプリのテストは実施が難しい反面、柔軟性が高いというメリットがあります。モバイルウェブはテストが速いことが多いですが、モバイルウェブ ブラウザごとに異なるトレードオフがあります。
フィルタに対するユーザー インタラクション
このセクションでは、会話型の商品フィルタリングを構成する方法について説明します。静的でハードコードされたフィルタ要素を動的な会話型フィルタに置き換えて、よりターゲットを絞った商品用の画面スペースを確保することをおすすめします。適用されたフィルタは、その元に関係なく、商品グリッドをグローバルに更新できます。
後続の会話型質問は、適用されたフィルタの完全なセットに適応し、多肢選択式のオプションを提供します。
統合されたグローバル フィルタ
買い物客は、会話型フィルタと、適用されている残りのフィルタ要素の両方を操作できます。フロントエンドの実装でこのシナリオを処理できる必要があります。
統合グローバル フィルタには次の特徴があります。
- グローバル アプリケーション: ユーザーがページ上の任意のフィルタ要素（会話型の商品フィルタまたは静的フィルタ要素）から選択を行うと、商品グリッドが更新され、すべてのグローバル フィルタが適用された結果が表示される必要があります。
- インテリジェントなフォローアップ: ユーザーが選択した要素に関係なく、適用されたフィルタの完全なセットに基づいて、ユーザーに表示される次の会話の質問が関連性のあるものになるようにします。たとえば、買い物客が会話型要素から
colorフィルタを選択し、従来のフィルタ要素からsizeフィルタを選択した場合、その後の会話型質問で買い物客に希望のサイズを尋ねるべきではありません。
フィルタタイプ
会話型の商品フィルタリングでは、サイトで複数の選択肢を使用できます。
ラジオボタン
AI Commerce Search では、商品カタログの値名に基づいて、最大 20 個の選択肢を表示できます。オプションは、最も関連性の高い選択肢の並べ替えられたリストに表示されます。長いブランド名などの長いオプションを使用すると、ユーザーが新しい行に折り返さずに横スクロールできるようになり、垂直方向のコンパクトさが維持されます。
ハードコードされた要素を置き換える
多くのコマース検索サイトのデベロッパーは、収益性の高い上位のクエリを対象とした、手動のカテゴリ フィルタ コンポーネントをウェブ インターフェースに組み込んでいます。これらのフィルタ コンポーネントは、通常、コストがかかり、作成に時間がかかり、ユーザーとのインタラクティブ性が低いものです。
図 2. ハードコードされた要素の表示の例。
- 推奨事項: 会話型フィルタリングの基本的な考え方は、ビジュアル要素が設計された上位のクエリだけでなく、すべてのプロダクトでこのような動的なエクスペリエンスをすばやくデプロイできるようにすることです。そのため、会話型フィルタリングで置き換えるように設計された要素を特定して削除します。同様の機能を実行するフィルタ要素の競合する 2 つのセットを使用することは避けてください。これにより、画面のスペースが広くなり、よりターゲットを絞った商品を表示できるようになります。
テストのアイデア
テストのアイデアをいくつかご紹介します。
- 商品行の間に配置: ページの中間あたり、3 ～ 5 行の商品行の後にコンポーネントを挿入します。このアプローチにより、会話要素が最初の商品の表示を大幅に置き換えるのを防ぐことができます。
- フライアウトまたはポップアップ: フィルタの質問を含むダイアログまたはフライアウト メニューをトリガーするボタンを使用します。これは既存のフィルタ ポップアップと統合することも、フライアウトを別の要素にすることもできます。
- スティッキー バー: 画面に表示されるバーに質問と選択肢が表示されます。これにより、商品が押し下げられるのではなく、商品の前に表示されます。
- テストに関する考慮事項: モバイルとパソコンのテストを行う際は、これらのテストが独立して実施されるようにしてください。デバイスごとにショッピング行動は大きく異なるため、あるデバイスで効果的なビジュアル コンポーネントが別のデバイスでは効果を発揮しない可能性があります。
データの取り込みと品質
Vertex AI モデルのインテリジェンスは、ユーザー インタラクション データに基づいて構築されています。オンボーディング プロセスでは、データ取り込みに 2 段階のアプローチを使用します。
フェーズ 1: 過去のイベントで初期開始
モデルは過去のイベントデータでトレーニングできます。過去のイベントデータは最初に Google 環境に取り込まれるため、モデルはライブ インタラクション データのない新しいプロジェクトでも認識できます。
フェーズ 2: ライブクエリ データへの移行
この機能が有効になり、過去にキャプチャされたデータの収集が開始されると、Vertex AI はライブクエリ データ ストリームを使用してサービング モデルを調整します。ライブクエリのデータは、一般的に過去にキャプチャされたイベントデータよりも品質が高くなります。過去のイベントでは、重要な情報が欠落していることがあるためです。これにより、ライブクエリ データが継続的な最適化に効果的になります。