※ここで紹介する商品イメージとは、主に詳細ページなど商品についての情報等が多く掲載されているようなページで使用されるものを指します。
見せ方のパターン
オンラインストアの場合、実店舗とは違ってユーザーが実物を見たり手にとることができないので、商品イメージも1枚だけ掲載するだけでなく可能であれば様々な見せ方のイメージを用意することが好ましいです。
また、確実に防げるということではありませんが、1枚でも多く掲載しておくことで「思っていたものと違う」や「思っていたカラーと違う」といった、よくあるオンラインストア特有の問題を防ぐことにも繋がります。
様々な見せ方と言われてもピンとこない場合は、以下で実際にそのようなイメージを採用している参考サイトとともによくあるパターンとしていくつかあげるので参考にしてみてください。
様々なアングル
よくある正面からだけでなく、横から斜めからといったように様々なアングルから見たイメージ。
例えば下のようなシューズの場合、実店舗でも横から見るような形でディスプレイされているのをよく目にしますが、購入する際は横からの見栄えだけでは決めずに、多くの人は実際にそのシューズを手にとって様々な角度から全体的な見栄えなどを確認すると思います。
このように実店舗でも様々なアングルを確認するようなものであれば、オンラインストアの場合は尚更それを想定して様々なアングルのイメージを配置しておくことが好ましいです。
※Nikeでは、横から見たイメージをメインとして使用しつつ、その他に靴底・上から・後ろから・斜めからなど複数のアングルからのイメージも掲載している。
カラーバリエーション
用意されているカラーバリエーションの見た目をすべて確認できるイメージ。
例えば単純に赤といってもどのような赤を想像するかは人それぞれで、極端に言えばそれが薄い色合いの場合にピンクと感じるような人もいるかもしれません。
こういった相違もカラー名がテキストでずらずらと並べられているのよりはイメージであった方がそれぞれどのような色合いなのをユーザーに伝えることができ、購入後の返品理由としてよくある「思っていた色と違う」という問題を防ぐのにも役立ちます。
※UNIQLOでは、テキストではなく主にイメージを用いたカラー一覧を用意しており、それぞれホバー（クリック）することで左にあるメインイメージもそのカラーに変わるようになっている。
細部まで確認できる
全体がわかる引きのイメージだけでなく、例えば衣類であれば袖口・ボタン・ラベルなどといった細部も確認することができるイメージ。
※ZOZOTOWNでは、全体の見た目を確認できるイメージに加えて、襟・袖口・ボタンなどユーザーが気になるであろう一部がそれぞれ拡大された状態で確認できるイメージも配置している。
隠れた機能・特徴を伝える
パッと見ではわからない機能や他の類似商品にはないような特徴を伝えるイメージ。
例えば下にあるソファの場合、人が座ったり横たわったりする一般的な使い方以外にも収納機能付きであることやベッドとしても使用できることを、収納部分にフォーカスをあてたり実際にベッドにした状態のイメージを掲載することで伝えています。
※IKEA
実際の使用風景・サイズ感を想像できる
よく見る切り抜きなどした商品を白背景に置いたイメージだけでなく、衣類であれば人が着用していたり他のものと組み合わせたコーディネート、インテリアであれば実際にありそうな部屋に設置してあるといったように、ユーザーが使用時の風景やサイズ感などを想像・把握しやすいイメージ。
※IKEAでは、見た目を把握しやすい白背景のイメージだけでなく、実際に配置したときの雰囲気が伝わりやすいようにリビングに設置したイメージや他のインテリアと組み合わせるなどしたイメージも掲載している。
※ニトリでは、実際に人が座っているときの感じが確認できるイメージも掲載されている。
質感・素材感がわかる
素材などの情報である程度把握したり想像できるものもありますが、例えば衣類であれば思い切りアップで撮影して少しでも質感・素材感がわかるようにしたイメージ。
※無印良品では、全体的な見栄えを確認できるイメージだけでなく、キャプチャ右下のように一部をかなりアップにして質感・素材感が少しでも伝わるようなイメージも掲載している。
動画を利用する
上で紹介してきたのはいずれも静止画を使用している想定でしたが動画を利用するのもひとつの手で、個人的にここ数年で商品紹介の手段として動画を利用しているサイトを見かける機会はかなり増えた印象です。
実際にその商品を使っている様子やテキストと静止画だけでは伝えるのが難しい特徴など、ユーザーが見たいであろうシーンを取り入れた動画を配置しておくことで、静止画だけ使われているのに比べてより商品を魅力的に且つわかりやすく伝えることができます。
※Sephoraでは、動画を示すサムネイルをクリックすると、実際にその商品をどのように使用するかや使用後はどのような感じになるかを紹介する動画が表示される。
より情報を伝えるのに役立つ機能
限られたスペースで複数のイメージやサイズの大きいイメージを掲載したり、商品の細部や様々なアングルでの確認をユーザーが任意で行うことができるなど、実装することでイメージを通してより情報を伝えるのに役立ちそうな機能をいくつか紹介します。
スライド（カルーセル）機能で複数イメージもスッキリ表示
※IKEA（キャプチャ左）では、大きなイメージの下に切り替え用のサムネイルを配置しており、Francfranc（キャプチャ右）では、大きなイメージの右に切り替え用のサムネイルを配置している。
上で商品イメージを複数枚用意することが好ましいと書きましたが、デザイン的に複数枚並べるのが難しかったり、イメージが増えれば増えるほどユーザーのスクロール量が増えることへの懸念などで、極力シンプルな形で表示したいことがあります。
そういったときのひとつの案として、スライド（カルーセル）機能を実装することで限られたスペースの中でも沢山のイメージを見せることが可能です。
その際、スライドで複数枚あることを示すためにバレットやページャーとも呼ばれる要素として「●」や「■」などを配置することがありますが、それよりも上のキャプチャのように小さなサムネイルを並べた方が他にどのようなイメージが用意されているかをユーザーが判断しやすくなります。
また、モバイルやタブレットなどのデバイス向けに、スワイプすることでこれらのイメージを切り替えられるようにしてあげるとより親切です。
ズーム機能でユーザーが任意の部分を確認できる
※ZOZOTOWNでは、左側に表示されているイメージ上で任意の箇所にホバーすると、右側のように一部をズームして見やすくした状態で表示される。
商品イメージにホバーすることで一部をズーム表示してより大きく見えるようにする機能で、有名なところだとAmazonやZOZOTOWNでこのような動きが実装されています。
こちら側で予めユーザーが細かく確認したいと思う部分を想定してアップのイメージをいくつか用意しておくこともありますが、ユーザーによってはこちらで想定していない（アップのイメージを用意していない）部分を見たいこともあります。
そういったときもこのようなズーム機能が実装されていることである程度カバーすることができますし、上手く活用すれば見せ方のパターン例で紹介した「細部まで確認できる」や「質感・素材感がわかる」イメージを少ない枚数でカバーすることができます。
イメージをより大きく表示する
上のズーム機能と同様にイメージを大きく見せたいときに使える機能で、イメージをクリックすることで現在表示されているものよりもさらに大きいサイズで表示させ、ライトボックスやモーダルなどと呼ばれることも多いです。
何らかの理由でそのままイメージを大きく配置することができないけど、ユーザーに大きいサイズで見てもらいたいときなどによく実装されるように思います。
また、キャプチャのように単に選択した1枚のイメージを大きく表示させるタイプ以外にも、サイトによっては表示したコンテンツ内で上で紹介したスライド（カルーセル）やズーム機能などを組み合わせて実装しているところもあります。
カスタムオーダーの見栄えを確認できる
※アディダス オンラインショップでは、基本となるタイプを選んだ後、ベース素材やストライプス部分を選択することで自分好みにカスタマイズすることができ、それをサイト上でリアルタイムに確認することができる。
近年は予めデザインされた商品を購入するだけでなく、パーツやカラーなどを自分好みに選んで購入することができるカスタムオーダータイプのオンラインストアを見かける頻度も増えてきました。
そういったタイプのサイトに便利な機能で、実装しておくことでユーザーは自分が選んだカスタムがどのように反映されて最終的に自分の思い通りの見栄えになっているかをしっかり確認することができます。
360度回転させて様々なアングルで確認できる
※日産やLEXUSでは、車をドラッグすることで360度回転させることができ、サイト上でも全体的な見栄えを確認できる。（キャプチャは日産）
イメージのドラッグや用意されているコントローラ操作で商品を360度全方向から確認できるようにしたり角度を変えて確認できるようにする機能で、自動車メーカーのサイトでも見ることが多いです。
単なるイメージのみでは伝わりづらい形のものや全体的にしっかり見た目を確認してもらいたいものに向いており、ユーザーにとってもこの機能が実装されていることで任意の位置・方向から確認することができるようになります。
複数のイメージを比較できる
※メイベリンでは、マスカラを紹介しているページにポイントをドラッグすることでマスカラ未使用時の瞳が使用することでどのように変化するかをビフォーアフター形式で確認できるイメージが設置されている。
※メルセデス・ベンツでは、車種の詳細情報を掲載しているページにユーザーが2種類のグレードを選択して同じくポイントをドラッグすることで違いを確認できるイメージが設置されている。
中央に表示を切り替えるポイントなどを用意し、それを左右（または上下）にドラッグすることで2枚のイメージを容易に比較できるようにする機能です。
上手く活用することで「この商品を使うとこのような変化がある」とか「商品AとBとではここが違う」というのを、単純に比較用としてイメージを複数枚並べるよりもわかりやすくユーザーに伝えることができます。
扱っている商材や使用するプラットフォーム、デザインの雰囲気などによる相性の問題はあるものの、このように単にイメージを掲載するといっても様々な見せ方があり、ユーザーに商品をより魅力的に見せるのに役立ちそうな機能も沢山あります。
まだまだ見せ方・機能ともにあるとは思いますが、いつもワンパターンのイメージやデザインになってしまうとかもっとイメージを通して商品を魅力的に且つわかりやすく伝えたいというときは、ここで紹介してきた見せ方や機能を取り入れてみるのを是非検討してみてください。