食料品店が牛乳を店の奥に置き、チョコレートをレジカウンターの近くに置くのはなぜか、不思議に思ったことはありませんか?
簡単です。必需品を店の奥に置くと、買い物客は店内を歩き回って他の商品も見るようになります。小さな商品（チョコレートなど）をレジカウンターの近くに置くと、衝動買いが促されます。
これらはすべて店舗デザインの科学の一部です。 適切な店舗レイアウト 売上を伸ばし、顧客ロイヤルティを向上させ、顧客が欲しいものをより早く見つけられるようにすることができます。
あなたのオンライン ストアでも同じです。商品の構成とレイアウトは、顧客が何をどのように購入するかに大きな影響を与えます。
この記事では、売上とコンバージョンを最大化するために商品をレイアウトする方法を紹介します。
製品レイアウトを選択する際に考慮すべき3つのこと
製品のレイアウトは、一見すると単純な問題のように思えるかもしれません。しかし、
1. 選択
選択は
効果的な製品レイアウトとは、本質的にはこの二重性のバランスを取るプロセスです。つまり、選択肢が豊富であるという印象を与えながら、サイトの使いやすさとナビゲートのしやすさを維持することです。
科学は言う 意思決定は精神的に負担が大きいものです。買い物客に選択肢が多すぎると、まったく選択をしない可能性が高くなります。
では、店舗レイアウトでこの問題をどう克服すればよいのでしょうか?
解決策の1つは、他の製品に誘導する注目の画像を使用することです。たとえば、 メイドドットコム 商品カテゴリー全体（「ガーデン家具」など）に個別の画像を使用します。
これを買い物客を誘い込むためのティーザーとして考えてください。
理想的には、
したがって、 レイアウトプロセスを開始する前に次の項目をリストアップします。
- 製品の全範囲とそれぞれのカテゴリおよびサブカテゴリ
- 「売れ筋商品」「注目商品」などの機能カテゴリとそこに含まれる商品。
次のステップは、この情報を使って
こうすることで、買い物客は選択肢が多すぎて困惑することなく、欲しいものを見つけやすくなります。
Ecwid ストアを Web サイトに追加する場合は、次のコードを追加してナビゲーション メニューを追加できます。
- 水平レイアウトの場合
- 垂直レイアウト用。
Ecwidストアを追加する手順は次のとおりです。 WordPress と ウィックス ウェブサイトも同様です。Ecwid Instant Site では、水平メニューのみが利用可能です。
2. 製品情報
ストアのレイアウトを選択するときに実行する必要があるもう 1 つのバランス調整は、製品情報の表示です。
顧客がクリックして購入するために必要な情報を提供する必要があります。同時に、実際の商品ページにアクセスするまでは、あまり多くの詳細情報を提供して顧客を圧倒させたくはありません。
このような状況では、意思決定を容易にし、顧客の関心を喚起することがあなたのメンタルモデルとなるはずです。自分自身に問いかけてください。 最低限の情報 顧客は商品をクリックする必要がありますか?
この答えは店舗や製品によって異なることがわかります。
たとえば、Amazon ではカテゴリ ページで、商品名、価格 (割引を含む)、評価、Prime の可用性という 4 つの情報ポイントしか提供されていないことに注目してください。
Ecwid では、Stampled.io アプリを使用して同様の評価やレビューを追加できます。
この情報はAmazonのような大手小売業者には必要ですが、 砂と石のジュエリー評価はそれほど重要ではありません。そのため、カテゴリ ページには商品名と価格のみが表示されます。
カテゴリ ページで提供する情報が少なすぎるという罠に陥るのは簡単です。これを避ける最善の方法は、顧客にインタビューして、購入の決定にどのような情報を使用するかを尋ねることです。
3. 店舗デザイン
ストアのデザイン方法は、商品のレイアウトに大きな影響を与えます。
An
- ホーム
- カテゴリと検索ページ
- 個別の製品ページ
各サイトで紹介する商品を選ぶ
たとえば、Amazon がサインインしていない場合、ホームページで自社製品をどのように宣伝しているかに注目してください。
店舗がホームページで最新のオファーを宣伝するのはよくあることです。これらのオファーをターゲット ユーザー層に合わせて調整してください。たとえば、BestMadeCo は、主に男性顧客を念頭に置いて父の日のプロモーションを実施しています。
焦点を合わせる：
- 顧客に購入してもらいたい製品（理想的には最も売れている製品、および/または最も利益率の高い製品）を把握する
- 異なるデザイン間での統一性を維持する
ページタイプ。
ベストセラー商品や新着商品を強調表示したい場合でも、Ecwidではカテゴリーを作成できます。 ホームページの注目商品 必要に応じて名前を付けます。
6つのベストプラクティス E-コマース 製品レイアウト
独自のレイアウトスキームを作成することは確かに可能ですが、
1. トップ商品とオファーをスクロール上部に表示
「アバブ・ザ・フォールド」領域とは、顧客が最初にサイトにアクセスしたときに目にする画面領域です。実際、この領域は ほとんどのサイトで視聴者の注目の80%.
このスペースが注目を集めることを考えると、トップ商品をスクロールせずに見える範囲に配置するのが得策です。これには次のようなものが含まれます。
- 最新のオファー、セール、割引
- 最も売れている製品または製品カテゴリ
- 最近発売された製品（ショッピングシーズンの初めに最適）
On Target.comたとえば、ページの上部に最新のオファーが表示されます。
オファーが多数ある場合は、Walmart の例のようにスライダーを追加することを検討してください。ナビゲーション メニューの下で実行されているプロモーションにも注目してください。
ファッション小売業者の中には、ブランドイメージの宣伝を優先して従来のレイアウトを避けているところもあります。 ASOSたとえば、「メンズショップ」や「レディースショップ」のオプションが付いたブランドイメージが表示されます。
この戦術は、ルックブックでブランドビジョンを宣伝したいときに有効です。しかし、ほとんどの小売業者は、従来の
カテゴリーページでも同じ考え方を実践しましょう。
2. 水平レイアウトと垂直レイアウトを組み合わせる
基本的に、どのページでも製品をレイアウトする方法は、水平または垂直の 2 つがあります。
水平レイアウトは静的のままです。ページの端に、リストをさらにスクロールするためのボタンがあります。
Amazon のこの例が状況をより良く示しています。
Ecwidでは、 最近閲覧した商品 水平方向に表示されます。ストアフロントの上部または下部に表示するアイテムの数を選択できます。
関連製品 もう一つの
対照的に、縦型レイアウトにはスクロールボタンがありません。代わりに、
理想的には、次の両方のレイアウトを組み合わせて使用する必要があります。
- 最近閲覧した商品など、多数のカテゴリからいくつかの商品を表示したい場合の水平レイアウト
- 1つの検索ページやカテゴリページなど、同じカテゴリの商品を多数表示したい場合の縦型レイアウト
3. 慣習とユーザーの期待に従う
従来とは異なるデザインを望む状況もあります。製品のレイアウトはそのうちの 1 つではありません。
製品のレイアウトは、ユーザーがサイトにアクセスしたときに方向を示すためのものです。従来のレイアウトにより、ユーザーは必要なものを確実に見つけることができ、方向感覚を失うことがありません。
もちろん、慣習は分野によって異なります。ただし、考慮すべき点がいくつかあります。
グリッドレイアウトを使用する
グリッドレイアウトでは、製品は
このレイアウトは長い間慣例となってきました
このレイアウトを使用する場合は、ボックスのサイズを均等に保つようにしてください。 このケーススタディが示すように同じサイズのボックスを使用すると、訪問者 17 人あたりの収益が最大 XNUMX% 増加する可能性があります。
Ecwid で販売する場合、これは問題になりません。Ecwid には、さまざまな画面に自動的に適応する均等サイズのグリッドがあります。
商品リストの上部にナビゲーションを表示する
従うべきもう 1 つの規則は、並べ替えオプションをページの上部に配置することです。
顧客はこの配置を期待しており、カテゴリ ページにアクセスしたときに自然にここを見るようになります。
パンくずリストで顧客を誘導する
パンくずリストは、次のように、ホームページからのパスをユーザーに示すナビゲーション要素です。
ページ上部にこれらを追加すると、訪問者の方向を把握しやすくなります。訪問者に、現在どのページまたはカテゴリにいるのか、またホームページに戻るにはどうすればよいのかを伝えます。
4. ビジュアルに焦点を当てるが、商品ページのテキストも忘れない
オンラインでは、商品を紹介する唯一の方法はビジュアルです。そのため、大きな商品画像は、
ただし、ビジュアルは重要ですが、レイアウトには説明文を入れる余地も必要です。優れたコピーは商品を説明するだけでなく、商品やブランドの販売にも役立ちます。
たとえば、BestMadeCo が最近発売した製品を販売するために、ホームページで強力なコピーをどのように使用しているかを考えてみましょう。レイアウトによって、テキストと画像が完璧に調和しています。
製品コピー これは、製品ページでは特に重要です。レイアウトでは、顧客が決定を下すために必要なすべての重要な情報を、スクロールせずに見える範囲のすぐ上に表示する必要があります。これには次の情報が含まれます。
- 価格（割引を含む、視覚的に表現）
- 製品の評価とレビュー数
- 製品名とブランド名
- 商品の在庫があるかどうか（在庫が少なくなっているかどうか）
- 配送の詳細
2-3 主な製品の詳細
これは、商品をレイアウトしない例です。商品ページにはコピーがまったくなく、判断が困難です。
ほとんどのものと同様に、Amazon のレイアウトはここでも完璧で、顧客が決定を下すために必要なすべてのものを提供しています。
5. 商品のおすすめや関連商品を追加する
製品ページには、次の 2 つの目標があります。
- 顧客をチェックアウトページに誘導する、または
- 顧客に別の製品を見てもらいます
後者の場合、 推奨または関連製品のセクションこれは商品情報の後にも前にも配置できます。
Amazon はこれを特にうまくやっています。ページ下部の関連商品と「こちらも閲覧」リストに注目してください。
同じコレクションに複数の製品がある場合は、それらも必ず表示してください。以下は WorldMarket の良い例です。
関連商品リストは、必ずしも視覚的である必要はありません。関連検索を表示して、顧客が興味を持ちそうな商品に誘導することもできます。
関連商品やおすすめ商品のさまざまなレイアウトを試してみてください。フッターの上や商品説明の下などに配置してみてください。
6. カテゴリページでマウスオーバーの詳細を試してみる
改善する方法の一つ
たとえば、 このサイト マウスをホバーすると製品の詳細とカートに追加ボタンが表示されます。
この戦術の目的は、ユーザーに重要な情報を一目で提供することです。衣料品店など、ユーザーが大量の商品を素早く閲覧することが予想される場合に最適です。他のカテゴリでは機能しないかもしれませんが、いくつかの分割テストを実行して結果を確認することはできます。
Ecwid では、製品リストで「今すぐ購入」ボタンを有効にして、顧客が製品をすばやく閲覧 (および購入) できるようにすることができます。
顧客がこのようなボタンをクリックすると、ストアでは商品ページ全体が開かれません。代わりに、商品オプションのポップアップが顧客に表示されます。
商品にオプションがない場合は、直接カートに追加されます。
まとめ
製品のレイアウトに関しては、慣習に従い、市場のリーダーがすでに行っていることに従うのが最善です。製品を詳細にカタログ化し、徹底的に分類してから、標準的なグリッド レイアウトで整理します。
上記で紹介したベストプラクティスは、業種を問わずほとんどの店舗で活用できます。ぜひご自身の店舗でも試してみてください。
- ストアのナビゲーションを修正する方法
- 商品のマーチャンダイジングについて知っておくべきことすべて
- オンラインマーチャンダイジング: オンラインストアでの商品のレイアウト方法
- ファッションマーチャンダイジングとは何ですか?そしてなぜそれほど重要なのですか?
- オンラインストアのデザインミス10選
- eコマースウェブサイトに最適なフォントの組み合わせ15選
- 色彩理論: 色のテーマについて知っておくべきことすべて
- 電子商取引の商品ページのための 7 つのクリエイティブなアイデア
- ウェブデザインにおけるヒーローイメージの力
持っている必要があります オンラインストアで従うべきUXの原則- ウェブサイトデザイン監査
- Eコマース向けUXデザインの力を引き出す
- EコマースにおけるUIとUXの違いは何ですか?
