EコマースのUIデザイン：魅力的な商品コレクションページの作り方（6つの実行可能な戦術）

イントロ

商品のコレクションページは、デザイナーやコピーライターから見落とされがちだ。魅力的な商品ページやランディングページを作るために多くの努力が払われる一方で、コレクションページは道端に落ちてしまい、ひどく面白くないままなのだ。

それでは、興味を引き、行動を喚起し、トラフィックとコンバージョンを促進する商品コレクションページを作成するための6つの実用的な方法を見ていきましょう。

主要な商品写真が魅力的であることを確認する

商品コレクションページが克服すべき最初のデザイン上の障害は、主要な写真が魅力的で興味深いものであることを保証することです。もし買い物客がページを訪れた直後、もしくは数回スクロールした時点で、その人の興味を引くことができなければ、おそらくその人は離れていってしまうでしょう。

ターゲットとする視聴者について知っていることをすべて検討することから始めよう。彼らは何が好きなのか？なぜあなたの製品が好きなのか？あなたの製品のどこが好きなのか？その特徴を前面に押し出すにはどうしたらいいか？

そして、レイアウトの検討に入る。画像は拡大する必要があるか？鮮やかな背景が必要か、ニュートラルな背景が必要か。いくつの商品を並べるべきか？

理想的には、いくつかのデザインバリエーションをA/Bテストすることです。小さな変更が大きな違いを生むこともあります。

このベビー服コレクションのページを見てください。商品自体はかわいくて魅力的なので、特に斬新な見せ方をする必要はない。新入荷」のラベルは、特定の商品を明確に際立たせ、買い物客の目に留まるようにしている。

ニュートラルな背景にこのような商品を置くと、商品が際立ちます。

出典：mamasandpapas.com

コレクションページの主な写真を魅力的なものにするもうひとつの方法は、アイテムを使用しているところを見せることです。この傾斜型温室のページを見れば、これがいかに簡単に実行できるかがわかるだろう。どの画像もまったく異なる色調で、アイテムを異なる角度から見せている。自分の家にその商品があることを想像しやすくしている。

出典：greenhouseemporium.com

これは、最終的な製品がどのようなものになるかを顧客に簡単に見てもらい、ライフスタイル全体を想像してもらうのに最適な戦術だ。

フィルターが邪魔になりすぎないようにする

コレクションページが有用であるためには、フィルターが必要です。顧客は、1つの特定の商品を見つけるために、何ページもの商品を閲覧することは期待できません。顧客はあなたの商品の幅広さに気づいていないでしょうし、長いウィンドウショッピングをする時間もないでしょう。

フィルターは、商品を意味のある方法で分類する必要があります。価格、サイズ、素材は、最も一般的なフィルターの一部に過ぎません。商品そのものと、差別化要因は何かを考えてみましょう。

複雑な商品であればあるほど、フィルターはたくさんあるべきです。また、「初心者向けではありません」「プロ専用です」など、顧客が適切な商品を選択するのに役立つものを提供することもできます。

フィルターもまた、邪魔になりすぎてはいけません。簡単にアクセスできるものであるべきですが、ページの大部分を占めたり、ブラウジングの邪魔になるようなものであってはなりません。

この複合デッキボードのコレクションページを見てみましょう。左側にフィルターがあり、目立ちやすく邪魔にならない絶妙なバランスになっています。また、折りたたみ式になっているので、情報量の多さに圧倒されることもありません。

また、論理的な順序で並べられている。ほとんどの人は、色や素材を絞り込んでから、サイズなどより具体的なディテールに飛び込むだろう。

ソースオバエダ・ドット・コム

同じようなソリューションを簡単に導入することができ、スペースを取らないにもかかわらず、ユーザーエクスペリエンスを大幅に向上させ、顧客が数秒で選択肢を絞り込むことができる。

ホバー時に短い商品説明を表示

商品コレクションのページは、情報のハブだと考えてください。ここでは、特定のカテゴリーに属するすべての商品を表示します。あなたがより親切であればあるほど、顧客はコンバージョンしやすくなります。

買い物客に商品をクリックさせ、商品説明を読ませてからクリックバックさせないようにしましょう。買い物客は、今どこで中断したかを知るためにスクロールする時間を無駄にしなければならない。あるいは、新しいタブで商品を開き続けると、すぐに比較しようとする商品の数に圧倒されてしまう。

コレクションページに表示できる有益な情報は多ければ多いほどよい。商品の上にカーソルを置いたときに、シンプルで短い商品説明を追加することで、顧客がその場で商品を比較できるようになります。

この肥満用カルシウム・チュースのコレクション・ページは、素晴らしい仕事をしています。簡単な商品説明があり、どのビタミンやミネラルが含まれているかがわかります。また、おいしい、免疫の健康を促進する、などの利点も強調されている。

_ソースBariatricfusion.com

説明がいかに短いかに注目してください。数秒で読むことができ、商品を比較し続けることができる。

この戦術を適用する場合、ホバーディスクリプションを慎重に検討する。商品ページの説明と同じである必要はありません。その商品の利点や主な特徴を簡潔に説明し、ページ上の他の商品と明確に区別する必要があります。

ここでは、売り込みよりも情報提供に重点を置きましょう。自分の選択に自信があれば、顧客はよりコンバージョンしやすくなる。

社会的証明

ソーシャルプルーフは、ページをより魅力的で役立つものにするための素晴らしいツールです。ソーシャルプルーフは、あなたが信頼に足る人物であること、信頼できる人物であること、そしてあなたの商品が良質であることを顧客に示すことができます。これは、あなたのブランドをまだよく知らず、コンバージョンをためらう可能性のある新規顧客にとって特に重要です。

社会的証明には様々な形がありますが、星の評価はコレクションページに掲載する最も有用な証明のタイプです。いくつかの目的があります：

• 個々の製品の品質を評価する
• 何人の顧客が購入し、レビューに時間を割いているかを示す。
• 顧客の迅速な購買決定を支援する

星の評価は取り入れやすい。Sephoraのアイシャドウパレットコレクションのページを見てみよう。簡単に見つけることができ、関連するすべての情報が表示されている：何件のレビューがあり、アイテムに対する全体的な満足度はどうなのか。また、あるパレットが他のパレットより人気があることもよくわかる。

出典：sephora.com

コレクションページに取り入れるべきもう一つの素晴らしい社会的証明のシグナルは、リアルタイムのセール通知である。

このカスタムノートパソコン用ステッカーのページをご覧ください。ブラウジング中、右下に控えめなポップアップが表示され、誰がこのウェブサイトで購入したか、どこから来たか、何を買ったかを教えてくれます。

これは、マーケティング戦術にちょっとしたFOMOを加える素晴らしい方法だ。顧客は他の商品、つまり誰かが購入したばかりの明らかに人気のある商品を見せられる。また、強い信頼と信用シグナルを送ることにもなる。

ポップアップは派手すぎず、邪魔にならないようにしましょう。また、買い物客の迷惑にならないよう、間隔をあけるようにしましょう。

出典：vinylstatus.com

複数の商品ビューを表示する

顧客が商品をよりよく見ることができればできるほど、コンバージョンに至る可能性は高くなります。コレクションページに表示する商品の画像が多ければ多いほど、より多くのエンゲージメントと興味を生み出すことができます。

いくつかの方法で複数の画像を組み込むことができます。商品ギャラリーをスクロールできるようにしたり、カーソルを合わせたときに別の写真を表示させたりできます。

H&Mのこの男の子服のページには、スクロール可能な商品ギャラリーがあります。個々の商品ページに掲載されているすべての写真を、コレクションページからすぐに見ることができるので、クリックする必要がない。

出典：hm.com

ホバー時に別の写真を表示させたい場合は、このレディース・ビーチウェア・コレクションのページをご覧ください。このブランドは、ホバー時にアイテムの背面を巧みに表示しているため、別のページを開かなくても全体を見ることができる。これは、アパレルブランドにとって素晴らしい戦術だ。

出典:simplybeach.com

ギャラリーを追加するかホバー写真を追加するかを選択する際は、アイテムの性質を考慮してください。買い物客は何枚の写真を見る必要があるのか？また、その写真はどのようなものであるべきか？

使用中の商品を見せることもできますし、新規の買い物客の心を揺さぶる可能性が高いのであれば、顧客の写真を掲載することもできます。商品を間近で見せることもできますし、商品の仕様を掲載することもできます。

最近見た商品を表示する

商品のおすすめは通常、個別の商品ページに表示される。これはまた、ブランドが「最近見た」カルーセルを置く場所でもある。

しかし、コレクションページでそれをフィーチャーすることで、顧客がすでに見て「いいね！」と思った商品をやさしく思い出させることができます。同時にいくつものタブを開いて、履歴をさかのぼる時間と労力を省くことができる。

アディダスのメンズランニングシューズのページをご覧ください。個々の商品を閲覧するとすぐに、コレクションページの下部に「最近閲覧した商品」機能が表示され、興味をそそられた商品を常にチェックすることができる。

出典：adidas.com

同じカルーセルが個々の商品ページにも表示され、個別にカスタマイズされたブラウジング体験を提供する。

また、商品ページと同じように、顧客が閲覧した商品に基づいて商品を推薦することもできます。

まとめ

これらの商品コレクションページのデザイン戦術のうち、どれを自分のページに導入できるか考えてみよう。もしかしたら、6つすべてがコンバージョン率を高める役割を果たせるかもしれません。

常に、あなたの製品の性質と利用者の悩みを念頭に置いてください。彼らが何を求めているのか、それを見つけるためにあなたのデザインはどう役立つのか。