今年の秋にリニューアルした、
ファッションECサイトmagaseekが結構面白い。
トップページに思いっきりレコメンドエンジン導入して、
ビジュアルコミュニケーションを重視した作りにって所ばかり
フィーチャーされてるけど、あれは見栄え良くても
売上には繋がらんのでは？というのが僕の見解。
まぁ、トップページに関しては色々なところで語られているので
置いといて、今日は商品詳細の話。
これが結構良くできていて非常に参考になるのだ。
まず、商品詳細のキャプチャ、
全体像はこんな感じ。
まず、徹底したモデルカット撮影。
よくやるなーと感心してしまうくらいがんばってる。
コストをどれだけかけているのか気になるところ。
そもそも商品撮影の前提としては、
従来のトルソーでの物撮りはモデル費用はかからないものの、
かえって商品のシワやゆがみが目立つので、
丁寧にやると意外と1時間あたりに撮影できる枚数は少なくなる。
その点、モデル撮影はモデル費用という若干のコストはかかるが、
撮影効率自体は圧倒的に良くなる。
撮影は倉庫に併設されたスタジオで行われており、
岐阜から座間への物流拠点の移動も、
モデルの手配を容易にするという狙いもあった模様。
また、商品写真は自社撮影とメーカーから提供された
写真素材とを合わせて、使用しているようだ。
それでは、各TOPICSごとに気づいた点をメモしていく。
１．メイン画像＆サブ画像
メイン画像は500*600の長方形で、最近のトレンドをばっちり抑えた縦長サイズ。
画像は拡大が可能で、元データの画像サイズは950*1140という
結構大きなサイズで持っているのがポイント。
例えばZOZOはカット数は多いけど画像は拡大できない。
サブ画像の配置も、メイン画像の右に並んでおり、切り替えが容易。
ZOZOなどが代表的だが、サブ画像はメイン画像下に配置されているケースが多い。
今回メイン画像の右に配置されることで何が良いかというと、
「カートに入れる」ボタンとのマウス移動距離が非常に短く設計されており、
閲覧から買い物までマウスの移動が少なくて済むデザインになっていること。
これは、結構重要なポイントだと思っている。
２．パンくずの表示
赤で囲んだエリアAにその商品が所属しているカテゴリーが階層状態で表示されている。
俗に言うパンくずというやつ。
この商品で言えば、親カテゴリであるカーディガン、その親がトップス、
その親にブランド（アーバンリサーチ）カテゴリがある、というカテゴリ構造になっており、
ここからそれぞれの商品一覧へ移動できるようになっている。
基本中の基本だけど、SEO的にも大事なポイント。
３．ブランド内売上ランキング
赤で囲んだエリアBの部分。そのブランドの売上ランキング該当商品の場合、
ここに「アーバンリサーチ売上1位」と表示される。
そのブランド内で売れている商品のランキングを、
当該ブランドの商品一覧ページに表示したりするのはECサイトの常套手段。
でもそのランキング結果を商品詳細に埋め込んで訴求するってのは、ちょっと新鮮。
ランキング集計、表示の仕組みと商品詳細がしっかり連動できていないと
無理なわけで、システムの設計がしっかりされているんだなと感心します。
４．カート投入エリア
赤で囲んだエリアCの部分。
コンバージョンへの影響も大きいカート周りの表示にも
工夫が詰まっている。
そもそもまずこのエリア自体が、商品詳細のスクロールに合わせて、動く。
なので、ページ下部の情報を見ようとスライドしたときにも、
このエリアが下へ追いかけてきてくれるのでそのままカートに入れることができる。
この辺の配慮がコンバージョンレートに影響を与えることを熟知していてさすが。
また、色、サイズ展開をすべて表示せず、ユーザーに色とサイズを選ばせて
カートに入れる、という流れにすることでこのすっきりしたデザインを実現している。
色、サイズ展開をすべて表示するか、しないかはメリット、デメリットの双方があり、
どちらが正解かは一概には言えない問題。
すべて表示していれば、在庫状況が一目でわかるし、
欲しい色、サイズのカートを入れるボタンを押すだけでカートに入る。
ただし、展開数が多いとズラズラと並んでしまい、超縦長になってしまう。
その際、果たしてこれがお客様にとって選びやすいのかは疑問。
また、商品詳細ページにアクセスした時点で、すべての色サイズの在庫情報を見に行くので
データベースへの負荷も上がりやすい構造と言える。
表示していない場合は、基本的に在庫状況が一目でわからない。
マガシークの場合も、在庫状況を一覧で見たければ、
在庫状況を確認するというボタンを押さなくてはいけない。
また、カートに入れる際にも、カラーとサイズを選択して、カートに入れるボタンを
押さなくてはならず、最大3クリック必要。（カラー、サイズ、カート）
とはいえ、シンプルなデザインが可能になるし、サーバーへの負荷も抑えられる。
どちらが正しいかはわからないが、
少なくともマガシークはしっかりと自分たちのした判断に
最適なデザインをすることができていると思う。
５．モデル着用サイズ＆着丈ガイド
赤で囲んだエリアDとE
自社でのモデル撮影が前提になっているので、
しっかりとモデルの身長や３サイズを表記している。
サイズ感のイメージをつけるにはこういうアプローチが一番親切。
サイズ表の数字だけじゃほとんどの人は想像できない。
さらに身長別の着丈ガイドも用意していて、
自分の身長とアイテムの種別を選ぶと、着丈ごとに
どれくらいのイメージになるか教えてくれる。
これもちゃんとお客様のことが考えられていて偉い。
６．チェックした商品
赤で囲んだエリアF
個人的には今回のマガシークのリニューアルで
一番良いなと思っている機能かもしれない。
商品一覧や検索結果などで、気になったものをとりあえずチェックしておくと、
後でチェックした商品だけの一覧が見られるという機能。
商品詳細からもここをクリックすることで自分だけの商品一覧へ戻ることができる。
７．レビューとコメント
赤で囲んだエリアG
お客様からのレビューやコメントを表示できるエリア。
アマゾンみたいな☆印での評価は無い。
これは低評価レビュー対策の一環だろうか、と勘ぐりたくなる。
レビュー自体への評価機能もあったら良いのに、とは思うが
アパレル商材の場合、商品の寿命が短いので
そんなにレビューを貯めて活かそうという発想にはなりづらいかもしれない。
でも、レビューをするお客様の身長や足のサイズが
表示されるようにしているのはすばらしい工夫だと思う。
以上、magaseekの商品詳細メモでした。
商品詳細ページは奥が深いので、日々色々なECサイトを見ては、
これは何を意図してこんな風にしてるんだ？と考えてます。
まともにやっているところはここに本当に様々な工夫を凝らしているので、
感心することしきり。
