商品写真でECサイトのユーザビリティを改善する10の方法

Jenna Ericsson

Jenna Ericsson氏はCodal's Creativeの戦略担当です。Codalはシカゴに拠点を持つ携帯開発の想像ソリューションプロバイダーです。

この記事はUsabilityGeekからの翻訳転載です。配信元または著者の許可を得て配信しています。

Product Images – 10 Steps For Better eCommerce Usability (2016-06-06)

product-images-ecommerce

Webサイトでユーザーが買い物をするとき、そこには多くの要素がコンバージョンに導くために存在しています。それは、例えば信頼性やデザイン、表示スピード、ユーザービリティなどです。ひとつの要素に理由を絞ってしまうのは、短絡的です。

仮にサイトのデザイン、表示スピード、ユーザービリティそして信頼性といった要素が、顧客を商品ページまで連れてくるとすると、商品写真が最も大きなセールスポイントになります。

商品写真はコンバージョンに向けたパズルの最後のピースです。この記事ではあなたの商品の画像をどのように生かすかべきかのポイントをご紹介します。

1.画像をケチらない

ECサイトにおいて、商品がどのような見た目なのかを見せるために、必要十分な量の画像を掲載することは重要です。ただし、商品のイメージカタログを作るのと同じ様に、余計な画像をアップロードしないように覚えておく必要があります。

また、画像は高品質であるべきですが、ウェブに最適化されている必要があります。最近では、CDN(Content Delivery Network)が手頃な値段になってきたので、高解像度の画像のために使うと良いでしょう。

高品質な写真なしでは、ユーザーは購買の決断をする事ができなく、サイトから離脱してしまうでしょう。

Urban Outfittersのサイトは、この点で素晴らしいです。上記のスクリーンショットでは、ドレスがどのように見えるかについて複数のアングルからの画像で示しドレスのディテールがわかるようになっています。二つ目の画像は他の商品とのコーディネートを掲載しており、ドレスの着こなし方を提案しています。

2.360度ビューで画像を見せる

360度の商品ビューは、顧客にすべてのアングルから商品を確認する事を可能にします。360度ビューを使うと、あなたのECサイトはより少ない画像で十分となるでしょう。

Source:adidas.com

Source:adidas.com

このテクニックは実際に店舗に訪問して商品に触れる体験の再現を試みるものです。

DueMaternity.comが商品ページに360度ビューを追加した時は、コンバージョン率が27%も増加しました。また、Golfsmith.comが360度ビューを特定の商品に追加した時は、通常の画像の商品と比べてコンバージョン率が30%から40%の増加しました。

3.商品写真にコンテクストを与える

あなたの商品にコンテクストを追加しましょう。ターゲットとなる観客が商品を使っている画像は、商品がどのようなもので、どうやって利用し、誰が好んで利用するのかを伝えます。また、それは顧客に実際に商品を使っているシーンを想起させます。

Source::amazon.com

Source:amazon.com

4.適切なズームをする

画像のズームは、バランスがすべてです。小さすぎるズームは役に立ちませんし、ズームしすぎても商品が視界から外れてしまいます。画像のズームは、潜在顧客が実際に店舗で商品を見るように、すべてのディテールを確認できるようにする必要があります。

Source:newegg.com

Source:newegg.com

ズーム機能の適切なバランスは、買い物客により良い経験をもたらします。潜在顧客が店舗に来た時、商品を手に取り近くでよく観察するという事を覚えておいてください。適切なズームによって、顧客は安心して商品を買うことができます。

5.商品の質感を見せる

特定の商品にとって質感は重要なものです。そして、これは難しい問題です。なぜなら商品の質感をデジタルな画像で伝えることは困難だからです。この問題は、顧客をミスリードしてしまうことにつながり、顧客に買い物について不満をもたせるだけでなく、悪い評価の商品レビューを書かかれてしまう可能性があります。

これは、会社のサポートスタッフがクレーム対処と商品交換に尽力する追加コストとなります(返品ポリシーによりますが)。

特徴のある質感をもつ商品の場合、商品の質感を見せるために「4.適切なズームをする」のルールを破っても問題ありません。近くまでよったズームは、商品をの質感を表現します。

家具において、質感は最も重要な要素となります。上記のAshley Furnitureの画像では、ズームの度合いのおかげで商品の個性的な質感を確認することができます。ある顧客にとって、これはセールスポイントとなり得るもので、もし質感を確認できなかったら売り上げを失うかもしれません。

6.色とスタイルごとに写真を用意する

あなたは今までに何回期待した色合いではない商品を買ったでしょうか。もしあなたの商品が12色展開しているなら、それぞれの色の商品を示す12個の画像を用意しなければなりません。

Source: nike.com

Source: nike.com

色をリストアップする代わりに、それぞれの提供可能な色の商品を示しましょう。これは2つの異なる方法で実現できます。

  1. カタログの商品ページに色の選択肢をリストアップします。色がクリックされたら、商品写真を選択された色のものに更新します。
  2. 異なる色合いの複数の写真を表示します。それぞれの色が商品写真のリストでそれぞれの画像を持つようにします。

1つ目の方法は、さまざまなスタイルや色を持つ商品を1つのページで表示することができ、より顧客が使いやすくなっています。

7.商品のサイズを表示する

商品のサイズを表示することは、顧客が実際のサイズを把握するために必須です。もしあなたの商品が小さいなら、簡単に比較できるように隣に小さいモノを配置しましょう。長い商品や高さのある商品についても同じことが当てはまります。

(商品が小さい場合)多くのストアが、実際のサイズを画像の隣に記載しています。スターバックスは、時々これをドリンクのサイズを表示するため店舗の前の黒板上で行なっています。この仕組みはオンラインストアのみで用いられるわけではないのです。

特に、商品写真は現実とは違い白い背景で撮影されます。大きさを表すならば、白い背景は適切ではないでしょう。実際に使われるシーン(例えばリビングやキッチン、ベランダの上など)に商品を置くことは、商品に文脈を与え実際のサイズを示します。

上記の商品ページは商品単体と、人間の足が載せられた状態を表示しています。これは足を休めるのに十分な大きさであり、さらに上に乗るのに十分頑丈であるという感覚を顧客に与えることに役立ちます。

8.隠された機能はあるか?

いくつかの商品はあなたが予想しないような隠された機能を持っています。顧客がベッドフレームの隠された引き出しに購入してから気づき驚くのではなく、商品写真でその引き出しを示すようにしましょう(そして同じような競合商品に対してのセールスポイントにしましょう)。

Source: Ikea.com

Source: Ikea.com

商品のあらゆる側面をはっきりと見ることができる画像を用意することは重要です。商品の人目を引く機能を表示することは、その商品を売ることにつながります。

9.商品の使われ方を伝える動画を使う

商品を紹介する動画のポイントは、商品がどのように使われているかを表現すること、顧客の商品に対する理解を助けること、そして潜在顧客に可能な限りの情報を提供することです。写真と異なり動画は短い時間で多くの情報を伝えることができます。

Source: amazon.com

Source: amazon.com

どのようにその商品を持つのか? 異なる照明の元ではどのように見えるのか? どのように使うのか? ほかにどのような使い方があるのか?

動画は画像のみの場合より、商品のさまざまな側面を伝えるという点でより効果的です。

10.クリックを最小にする

商品ページのユーザビリティーを最大化するために、ユーザがページから移動することなく全ての商品バリエーションを同じ商品のページで見れるようにしましょう。下記のUrban Outfitterのスクリーンショットでは、異なるフレームタイプとサイズをひとつのページで表示しています。

検索フォームで異なるバージョンを探すことや、異なるバージョンの画像を見るためだけに検索結果に戻ることは、ユーザーの時間を無駄にすることです。


イベント