さまざまな視点から比べながら選ぶお客様に、次の候補を。makeshopの関連商品を拡張し、スペックやメーカーなど複数の条件で出し分ける仕組みを実装

パソコンは、さまざまな条件を比べて選ばれる

パソコンを買う人は、CPUなどのスペックをはじめ、メーカーや画面サイズ、価格など、さまざまな条件を見比べながら候補を絞っていきます。商品ページの関連商品は、その比較を助ける場所になるはずでした。

標準の関連商品は、最低限の表示にとどまる

makeshopの標準の関連商品でできる出し分けは、最低限のものです。複数の条件を組み合わせて、お客様が比べたい商品を出すことはできません。たとえば「同じメーカー」で出すと、「同じくらいの性能の、別メーカーのパソコン」は出せません。

さまざまな条件で比べて選ぶお客様に合った関連商品を出すには、標準機能では補えません。そこで、関連商品の表示を拡張することにしました。

1. 出し分けに使えるスペックを洗い出す

商品データから取り出せるスペックの情報を洗い出し、どれを出し分けの条件に使うかを決めました。お客様が比べるときに見ている項目であることと、商品データから確実に取り出せることの両方を満たすものを選んでいます。

2. 見ている商品のスペックから、関連商品を選ぶ

お客様が見ている商品のスペックをもとに、条件に合う商品を探して、関連商品の枠に表示する処理を作りました。メーカー、CPU、画面サイズ、価格帯などの条件を組み合わせられるので、「同じくらいの性能で、別のメーカー」のような出し方もできます。

関連商品の出し分けの考え方

3. 比べやすい表示にする

関連商品の枠は、商品ページの中で比較の続きとして見てもらえる位置と見せ方にしました。お客様が「ほかの候補も見てみよう」と自然に次の商品へ進めるようにしています。

商品ページ内の関連商品の表示

関連商品の枠に、お客様が比べたい商品が出るようになり、関連商品から別の商品ページへ進む回遊率が上がりました。

商品ページを見た人が、そこで止まらずに次の候補を見比べられるようになったことで、サイト内で比較から選択までを進めやすくなっています。

※今回はmakeshopでの実装ですが、スペックなどの条件で関連商品を出し分ける仕組みは、ShopifyやEC-CUBEなど、ほかのカートシステムでも実現できます。作り方はカートシステムごとに変わります。