コンバージョン率の高いShopify製品ページを作成する9つの方法

公開: 2021-07-16

eコマースストアの所有者にとって、あなたの製品ページはあなたの注目に値します。考慮すべき要素はたくさんありますが、顧客に素晴らしいショッピング体験を提供する機会もたくさんあります。

この記事では、eコマース製品ページを実際に最適化してコンバージョン率を高め、ショッピングエクスペリエンスを向上させ、ブラウザを購入者に変えるために焦点を当てることができるいくつかの分野について説明します。

1.製品ページの要素をマップします

コンバージョンに最適化されたeコマースページを設計する最初のステップは、成功するeコマースページで一般的に使用される要素を組み込むことです。

Asosのような人気のある店を例にとると、彼らが見つけた重要な要素のいくつかが彼らの製品ページでうまく機能していることがわかります。

製品ページがコンバージョンに大きな影響を与えることで、Asosがすべてのコンポーネントをテストおよび最適化するためのリソースを投入することを確信できます。

この細部への注意は、典型的な製品ページが250kb / s（または通常の3g接続）で制限されたスローモーションでどのように読み込まれるかを見ると明らかです。各コンポーネントのロード順序は、各コンポーネントの重要性を示しています。

要素のロード順序は次のとおりです。

ナビゲーションとロゴ。ユーザーは常に自分がどこにいるかを知っており、他のページにすばやく移動する方法を持っている必要があります。
製品のサムネイル。 画像は、ユーザーが正しいページにいることを伝え、完全に読み込まれる前にページのプレビューを提供します。
製品タイトルとパンくずリスト。 さらに、ユーザーの選択を確認し、同様のカテゴリに戻るためのクイックオプションをユーザーに提供します
主な商品画像。製品写真は、お客様が探しているものです。画像は通常ファイルサイズが大きいにもかかわらず、これらは召喚の前でも読み込まれることに注意してください。
召喚状。カートに追加ボタン
追加情報。フォールドの下にある追加の製品情報は最後にロードされます。

Asos製品ページのいくつかのコンポーネントをさらに詳しく見ていきましょう。

2.製品の写真を前面と中央にハイライトします

Asosは、さまざまな方法で写真を使用するコンテンツの多いサイトです。ホームページを表示しているときは、特定の製品にリンクしている写真ではなく、コレクションにリンクしている写真が表示されます。

しかし、顧客がクリックして製品にアクセスすると、それは別の話になります。彼らが最初に目にするのは、正面中央の製品画像です。折り目の上に残っている小さなコンテンツはすべて、このメインのフォトギャラリーの周りに配置されています。

Asosが使用するさまざまな写真の重要性について詳しく説明しますが、現在重要なのはポジショニングとプロミネンスです。商品の写真は、顧客が商品の詳細を説明よりも早く識別し、探している商品をすばやく見つけるのに役立ちます。それらは目立つように配置し、すばやくロードする必要があります。

3.配送情報を明確に表示する

Asosには無料配送と返品バナーがあるだけでなく、価格の横にある無料の全世界配送の詳細にもリンクしています。これらのタイプのeコマースプロモーションは、購入の決定に大きな影響を与える可能性があります。

高い送料は、消費者がカートを放棄する最大の理由として評価されており、93％の消費者は、送料無料が利用可能であれば、より多くの製品を購入すると述べています。これを知っているAsosは、送料無料のオファーを宣伝するためにできる限りのことをしています。

4.追加の詳細を含める

Asosの製品ページには、折り畳みの上にまばらな情報があるかもしれませんが、製品に関する追加情報の山は、詳細を知りたい顧客のためにすぐに利用できます。

顧客は製品を実際に試着したり、営業担当者に質問したりすることはできないため、顧客を教育し、質問に対する回答を提供するために、できる限りのことを行う必要があります。

どのような詳細を含める必要がありますか？

この情報には、次のような詳細を含めることができます。

製品の素材
スタイル
重要なデザイン機能
お手入れとメンテナンスの手順
ブランドまたはメーカーに関する情報
顧客がさらに調査を行ったり、あなたに連絡したりするのに役立つSKUなどのメタ情報。

ファッションブランドの場合、これらの追加の詳細は特に重要になる可能性があります。 Asosには、モデルの寸法と着用しているサイズも含まれているため、顧客はこの製品がどのように自分に合うかをより正確に判断できます。

この追加情報がなぜそれほど重要なのですか？

1つは、独自の商品説明を用意することで、オーガニック検索エンジンのトラフィックを増やすことができます。しかし、彼らはまた、顧客がなぜあなたの製品を選ぶべきか、または競合する製品よりも保管するべきかという質問に答えるのを助けるべきです。これらの追加の詳細を提供することは、製品の写真から識別できる基本的な詳細を単にリストするよりも、製品に関するより高いレベルの専門知識を持っていることを示しています。

より多くの情報はまた、顧客が情報に基づいた選択を独立して行うことができることを意味し、これは彼らにとって良いだけではありません。顧客が自信を持って購入できるように支援することで、顧客サポートの低下と返品の減少につながる可能性があります。

5.明確な行動の呼びかけを特徴とする

Asos Webサイトのもう1つの機能設計機能は、製品ページで利用できる明確な行動の呼びかけです。

複雑な注文プロセスは含まれていません。実際、顧客が必要とするすべての情報は、製品の写真、タイトル、および説明で伝えられます。お客様は、サイズを選択して、目立つ[カートに追加]ボタンをクリックするだけです。そうすると、選択を確認する目立たないポップアップが表示されます。このポップアップを使用すると、数秒後に消える前に、チェックアウトをすばやく完了するか、買い物を続けることができます。

多くの店舗は、カートにリダイレクトするか、アイテムが追加されるとすぐにポップアップカートを表示するか、あるいはまったくオプションを選択せずに顧客に任せるかのいずれかの形式の通知を選択します。チェックアウトに移動します。このアプローチは良い中間点のようです。

顧客が購入する準備ができていない場合、Asosには顧客がアイテムをお気に入りに追加するための簡単な方法も含まれています。現在、ほとんどのストアにはある種のウィッシュリスト機能がありますが、Asosの実行の優れている点は、ユーザーがアイテムのアカウントを作成して、ブラウザーのキャッシュに60日間保存する必要がないことです。

ただし、ボタンをクリックしてもAsosにリクエストが返されるため、アイテムを保存しているユーザーのタイプ、保存されているアイテム、保存された日時などの詳細がわかります。これらの情報を使用して、ソーシャルメディア上の顧客。

6.商品画像に白い背景を使用します

Pixcでは、クライアントの90％以上が写真を編集して画像から背景を削除し、白に置き換えることを選択しています。そして、それは私たちだけではありません。すべての商品画像の背景を白（または少なくとも一貫性のあるもの）にすることは、成功するeコマースストアの標準になっています。

では、なぜそれがそれほど重要なのでしょうか。

それはあなたにお金を節約します

一貫した背景を維持することで、新製品の導入、写真撮影、編集のプロセスがスピードアップします。 Asosのような店舗では、スタジオ、写真家、編集者を手元に置いて、製品全体で一貫したレイアウトと照明を確保できますが、白い背景を使用する大規模なeコマース店舗でも時間を大幅に節約できます。

社内チームを編成する代わりに、製品を写真に撮り、一貫性を保つために編集するだけです。または、さらに良いことに、それらをPixcなどのサービスに送信して、プロセスをさらに自動化します。

それはあなたの製品をより強調します

背景がなければ、製品自体から気を散らすものはありません。白い背景を使用すると、製品の細部や、他の方法では見過ごされがちな特定の機能をよりよく示すことができます。

それは顧客があなたの製品を閲覧するのを助けます

商品の写真がすべて類似している場合、顧客はコレクションページを簡単にスキャンして、探している商品を選ぶことができます。

7.写真をうまく組み合わせます

表示する写真の数を増やします

商品の写真撮影は非常に重要であるため、商品のさまざまなショットを含めることが重要です。 1枚の余分な写真はどんな説明よりも多くの情報を伝えることができます。

消費者の0.52％だけが単一の写真を見たいと思っていますが、33.16％は複数の写真を見たいと思っており、58.03％は製品を完全に360度表示する製品写真を見たいと思っています。

これが意味するのは、製品のあらゆる角度を紹介するために製品の写真を組み合わせて含める必要があり、製品の要点を強調するためにさまざまな写真を利用する必要があるということです。たとえば、靴などの商品の場合、靴底のクローズアップとステッチを使用して、商品の主なセールスポイントを伝えます。

コンテキスト内のショットを検討する

製品の動作を示すコンテキスト写真は、顧客の想像力をかき立てるのに役立ちます。また、ショールームの外でどのように見えるかを確認する機会も与えられます。

8.画像メタデータを最適化します

あまりにも多くのeコマースストアは、その製品イメージに失望しています。 ShopifyやBigCommerceのようなプラットフォームは、圧縮と適切なアスペクト比を大衆にもたらすのに役立ちますが、常に維持する必要のある他のいくつかの良い習慣があります。

適切なメタ情報を含める

適切なメタデータは3つになります。画像に次のものがあることを確認してください。

画像を正確に説明する正しいALTタグ
適切なタイトルタグ
ハイフンを使用した関連ファイル名（例：my-image.jpg）

メタ情報はアクセシビリティにとって重要であるため、キーワードの乱用は眉をひそめます（そして効果もありません）。ただし、ページのコンテンツを理解するために、画像メタデータとその周辺のコンテンツを使用するGoogleにコンテキストを提供します。

画像が適切なサイズであることを確認してください

それらが同じ高さと幅を持っていることを確認してください。一般的に、正方形の画像はすべてのデバイスでより適切に表示されます。長方形の画像を使用すると、特に長いまたは幅の広い製品がある場合にも、見苦しくなり始める可能性があります。

ズームを有効にするのに十分な大きさであることを確認してください。 eコマースサイトの設計方法に応じて、サイトはサムネイル、コレクション画像、製品画像、およびズーム機能に同じ画像の異なるサイズのバージョンを使用します。このズーム機能が不必要に大きくなることなく機能できるように、画像が十分に大きいことを確認する必要があります。通常、1,000ピクセルから1,600ピクセルの画像が適切なサイズです。