比較表・チャートで提案を可視化するUX

はじめに

どんなに的確な提案でも、伝わらなければ意味がありません。長い文章で「この商品がおすすめです、なぜなら…」と説明されても、お客様は最後まで読んでくれないことが多いんです。

この記事では、モーターサイクル用品を扱うECサイトの接客AIで、提案を可視化するために作ったUIを解説します。候補商品の比較表、特性のレーダーチャート、関連アイテムのアップセル。可視化こそが納得感を生み、購入の後押しになるという実感を形にしました。

なぜ可視化するのか

文章だけでは伝わらない

提案理由をテキストで丁寧に書くほど、情報量は増えます。ところが、情報が多いほど読む負荷が上がり、かえって判断しにくくなる。これは接客でも同じで、口頭でスペックを並べられても頭に入りませんよね。

そこで、比べる情報は表に、感覚的な特性はチャートにと、情報の性質に合った見せ方を選びました。

「なぜ」を可視化する

お客様が本当に知りたいのは「なぜ自分にこれなのか」です。単なる商品一覧ではなく、提案理由が見える形を目指しました。

比較表なら「予算内で、用途に合い、在庫がある」という選定の筋道が一目で分かります。レーダーチャートなら「快適性は高いが軽さは中くらい」という商品の個性が直感的に伝わります。数字や文章を、判断できる形に翻訳するのが可視化の役割です。

比較表で並べて見せる

横並びで違いを際立たせる

候補が複数あるとき、一番効くのは横並びの比較表です。同じ観点で各商品を並べると、違いが自然に浮かび上がります。

大事なのは、お客様のヒアリング結果に合わせて観点を選ぶことです。ツーリング用途と聞いたなら快適性や積載性を上に持ってくる。全員に同じ表を出すのではなく、その人の関心に沿って組み替えます。

情報を絞る勇気

比較表は便利ですが、項目を詰め込みすぎるとスペック表と変わらなくなります。判断に必要な数観点に絞り、残りは詳細ページに委ねる。この引き算が、比較表を「読める」ものに保つコツです。

チャートで特性を伝える

レーダーチャートで個性を描く

商品の性格は、数値の集まりよりも形で見せたほうが伝わります。快適性・軽さ・保護性能・通気性といった軸でレーダーチャートを描くと、その商品が何に強い一着なのかが一目瞭然です。

複数候補のチャートを重ねれば、「こっちは軽さ重視、あっちは保護性能重視」という違いも視覚で比べられます。言葉で説明するより、ずっと速く伝わるんです。

根拠とセットで見せる

チャートはあくまで要約なので、その裏付けとなる説明を添えることが欠かせません。RAGで得た根拠付きのコメントをチャートの近くに置き、「なぜこの評価なのか」をたどれるようにしています。見た目の分かりやすさと、根拠のたしかさ。この両輪でこそ納得感が生まれます。

買い物体験を後押しする

アップセルで「ご一緒に」を再現する

店頭接客の醍醐味に、「これに合わせてこちらもいかがですか」という一言があります。これをオンラインでも再現するため、選んだ商品に合う関連アイテムをアップセルとして提示しました。

押し売りにならないよう、あくまで「合わせると便利な提案」として添えるのがポイントです。

迷いを残さない導線

提案を見て気持ちが固まっても、そこからカートまでの手順が煩雑だと熱が冷めてしまいます。可視化した提案画面から、色やサイズの選択を挟んでそのまま購入に進めるよう、導線を短く保ちました。せっかく生んだ納得感を、最後の一歩で逃さない工夫です。

まとめ

提案を可視化するUXで意識したのは、次の3点です。

1. 性質に合った見せ方 — 比較は表で、特性はチャートで、情報を判断できる形に翻訳する
2. その人向けに組み替える — ヒアリング結果に沿って観点や順序を変える
3. 購入まで後押しする — アップセルと短い導線で、納得を行動につなげる

可視化で見せる提案の中身は、対話で聞き取った要件とRAGの根拠から生まれています。要件を聞き取る対話設計は「ヒアリング対話の設計と状態管理」、根拠を作る仕組みは「商品マスタ×RAGで『根拠ある提案』を作る」、そして全体像は「AI接客アドバイザー — 対話型の商品診断・レコメンド」で解説しています。