【50の世界的なECサイト調査】最適なサムネイル画像デザインとは？

長い間、ECサイト内の一覧ページはあくまで機能的なものであり、商品情報をユーザーがソートするためだけに使われてきました。商品販売にあたって画像はなにより重要であるにもかかわらず、このページは昔から視覚的・刺激的といえるコンテンツではなかったのです。

しかしごく最近行われた調査によると、特にファッション・旅行分野において、ECサイトは小さなサムネイル画像のみならず、よりエキサイティングなアプローチへと移行しつつあるようです。ただ大きい画像を表示するだけでなく、ロールオーバーやスクロール効果など、ワクワクさせるエキサイティングな仕掛けが見られるようになってきています。

しかしこれは新参のECサイトや、特定分野のサイトに限定される現象なのでしょうか。また一方で、多くのユーザーを囲う大手ECサイトではどうなのでしょうか。

そこで私たちは独自のリサーチを実施しました！本記事では現状を調べるために、デスクトップとモバイルの両方で世界を代表するの50の大規模ECサイトを調査・データ収集・分析しました。その結果、これら大手プレーヤーの多くが”昔ながらのやり方”を採用していることが判明しました。

ここでは調査対象の大規模ECサイトで行われていた、より興味深いアプローチの例をいくつか紹介します。

大手ECサイトで使われているサムネイル画像の形とサイズは？

大手ECサイトの46％は、デスクトップ表示において商品一覧に「正方形サムネイル画像」を使用していました。正方形の画像はバランスのとれたグリッドレイアウトが可能なため、この数字は驚くことではないでしょう。（多くのサイトはグリッド形式で表示される傾向にあります。）

またこの正方形の境界内では、実際の画像はどのようなサイズのものでも使用できるため、幅広い製品に適用できます。

続いて、32％は「横長の長方形サムネイル画像」を好み、残りの22％は「縦長の長方形サムネイル画像」を使用していました。一般的に風景画像は横長ベースのリスト表示に適しており、肖像画像は胴体と身体の長さの分、縦長の画像が好まれ、ファッション系のECサイトに使用されているようです。

正方形サムネイル画像への支持率の高さはモバイルにおいても同様で、全体の50％にも及びます。また、 全体の80％のサイトはデスクトップ上と同じサイズの画像がモバイル上でも表示されていました。これは一般的に、サイトの構成要素がどちらも同じ見え方に保たれるレスポンシブデザインを使用しているためです。

モバイル表示において横長サムネイル画像を使用しているのは22％、縦長サムネイル画像を使用しているのは28%で、それらは正方形デザインと異なりわずかな違いが確認されました。一覧表示の際、1行に2つの要素を表示する傾向が多く見られたのです。

使用されている実際のピクセルサイズに関しては、下の図で説明されています。

デスクトップの平均的な商品一覧のサムネイル画像サイズは225 x203ピクセルで、通常1行に3〜4つの画像を表示できます（この調査では、デスクトップの幅は1280ピクセルとしています）。

一方モバイルでは、平均的なサイズは153 x161ピクセルです。これにより、画像の右側にテキストを伴うデザイン、または画像下にテキストを配置するデザインの、2つのデザインが有効になります（この調査では、モバイルの幅は375ピクセルとしています）。

デスクトップ表示の実例

1. Home Depot

左側にフィルタが表示されており、その右側に4つのサムネイル画像をリスト表示する典型的な例といえます。

また、ユーザーは見本の「カラー」を変化させることもできます。最近のECサイトではよく見られる技術です。

Home Depot

2. Gumtree

Gumtreeはたった118 x 90ピクセルのとても小さなサムネイル画像を使用しています。恐らくすべての商品が画像を伴うわけではないためでしょう。

▲2019年2月現在、サイトはリニューアルされ比較的大きな画像が使われるようになりました

Gumtree

3. H&M

調査したウェブサイトの中では最大の321 x 486ピクセルの画像を使用しています。

これはファッション業界における他社のサイトと似た傾向です。人が衣服を購入する際に、ほぼ見た目で決定していることが原因と考えられます。

H&M

モバイル表示の実例

1. Expedia

調査したECサイトの中で、Expediaは最小の75 x 75ピクセルの画像を使っていました。

旅行業界において、ユーザーはその場所、性質や部屋の特徴などを理解するためにいくつかの画像を見る必要があるでしょう。特に商品リストのサムネイル画像は大切です。しかしExpediaは、ユーザーにあまり多くの情報を提供していないようです。

Expedia

2. Groupon

モバイルにおいては最も大きなサムネイル画像を使用している一例です。

スクリーンの最大幅に対して、高さはほぼスクリーンの半分にまで及びます。これにより、多くの情報と複数のイメージを画面内にまとめられています。

Groupon

3. Booking.com

Booking.comはやや特殊な例です。サムネイル画像は正方形から縦長までさまざまな形を使用し、それぞれの特性を伝えられるように異なる量のテキスト情報が掲載されています。これはデスクトップ表示においても同じです。

Booking.com

デスクトップ表示における最適な画像数

多くの商品リストには少なくともひとつの画像が掲載されていますが、2つ以上を掲載しているサイトがどのくらいあるのかというと、実はあまり多くありません。調査対象のECサイトのうち66％が、ひとつの商品ごとにひとつの画像しか掲載していないのです。

12％は、ユーザーが画像の上にカーソルを置くと別の画像が表示される仕組みを採用しています。 Forever21とShutterflyは、ロールオーバー時に最大5つの追加画像を表示していましたが、どちらも画像切り替わりの速度を制御できませんでした。

10％は画像の下に色見本が付いており、クリックすると商品画像のカラーが変わる仕組みを採用していました（Home Depotの例を参照）。この色見本はファッション系のECサイトで見られた一方で、意外にも採用率は低かったのです。

6％のサイトでは、ユーザーがさまざまな画像をスクロールできる仕組みを採用していました。下画像のTrip Advisorのような、旅行関係のECサイトでよく見られます。Trip Advisorでは最大70枚の画像をスクロールして表示可能。一方でモバイルでは、ひとつの非常に小さい正方形の画像が使われおり、デスクトップ上のものとは真逆のスタイルでした。

▲Trip Advisor

4％はひとつの大きなメイン画像を使い、その下にいくつかの小さなサムネイルを表示する仕様を採用しています。以下のAuto TraderとAgodaの例のように、二社は全く異なった方法でこれを実現しています。

Auto Traderでは、メイン画像の下に6つの非常に小さなサムネイルが表示されています。クリックはできませんが、より多くの写真で商品情報を伝えようとしていることがわかります。

▲Auto Trader

一方でAgodaは、メイン画像の下に10個の小さなサムネイル画像を掲載しています。サムネイル画像の上にカーソルを置くと、デフォルトの画像よりも大きく表示される仕組みが採用されています。

▲Agoda

最後に、同じサイズの2つの画像を並べていたのは全体のわずか2％（つまりひとつのECサイト）のみでした。

この少し変わったパターンの事例は不動産のECサイト・Rightmoveで確認できます。不動産販売では一枚の画像を選ぶのがいかに難しいかを暗示していますね。

▲Rightmove

モバイル表示における最適な画像数

モバイルはデスクトップと比べ、ひとつの商品あたりの画像数に明確な違いが現れました。

全体の94％が単一のサムネイル画像のみを使用しています。モバイルでは「ページの重さ」が重要な要素となるため、これは驚くことではありません。

ただし昨今のほとんどのECサイトは、トラフィックの大部分がモバイルからであることを見越しているため、こういった仕様でもユーザーはデスクトップ表示と同じくらいの印象的な体験を期待できるでしょう。

残りの6％は、ひとつのメイン画像とふたつの小さなサムネイルを使用するECサイトと、ユーザーが複数の画像をスクロールできるECサイトです。

ひとつのメイン画像とふたつの小さなサムネイル画像があるサイトはAuto Traderで、デスクトップ表示の要約版がモバイル版にも表示されています。小さな画像を使うことでロード時間を短縮し、さまざまなデバイス間で共有できる点が特徴です。

▲Auto Trader

Airbnbは、ユーザーが多くの画像をスクロールできるモバイル表示のよい事例です。この形式においては通常、特性を伝えるために利用可能なすべての写真を表示できる仕様になっています（ただしインジケーターは7つのみ）。

▲Airbnb

モバイルにおいて一度に表示できる商品リストの数に関して、50サイトのうち62％が1行に1つずつの表示形式を採用しています。これはExpediaのような小さな画像の場合でも、Grouponのような大きな画像の場合でも同じです。

また調査したサイトのうち36％が、1行に2つの商品（または2つのデザイン）を表示していました。典型的な例として、1画面に対して4つの製品を表示できるSephoraのWebサイトが挙げられます。しかしイメージは少し小さめで、一部の製品はかなり類似しているように見えてしまいます。

▲Sephora

3つの商品を1行に使用している唯一のWebサイトがZapposでした。

画像や製品名がデバイスによっては潰れて見えてしまうため、あえて彼らがこの手法を選択した理由があるならばそれも興味深いですね。

▲Zappos

まとめ

私は当初、世界規模のECサイトからはもっと多様で最先端の事例が出ることを期待していました。しかし平均すると、未だに画像が小さく使われているサイトが多いことが分かりました。もちろん、きちんとした写真撮影が保証されない、広い範囲の製品を販売するWebサイトでは現実的な理由があるでしょう。

しかし、高速コンピューティングの世界が実現したことで、人々はInstagramをはじめとした驚くほど魅力的な写真たちに慣れ、今後ますます魅力的な写真を期待し続けるでしょう。

このような調査から最も重要視すべきなのは、規格に準拠できるように、規格が何であるかを追いかけることではなく、市場とECサイトのギャップがどこにあるのかを突き止め、刷新の機会を見計らうことです。

上記の例の中には、一覧ページのイメージをよりおもしろく伝えるためのオプションを採用したものがありましたが、それらにもまだまだ改善の余地があります。あなたがより良いEC体験をユーザーに提供したいのならば、一歩抜きん出るのはそこまで難しくありません。

（原文：Matt Isherwood　翻訳：Tomomi Takei）