ECアプリ50個を比較して見えてきたUIデザインの3パターン

ECのスマホシフトが急速に進み、多くのECアプリが溢れています。そこで今回は約50のECアプリのホーム画面を分析してみます。

ホーム画面ファーストビューの要素は大きく
・商品
・バナー
・ジャンル / セグメント
の３つに分類されます。ECアプリはこれらを複合的に組み合わせて画面を構成されますが、これらのどこに重きを置いているのかという視点でアプリを分類してそれぞれを分析していきます。

1.いきなり商品型

商品に重きを置いて、商品画像やそれに紐づく価格など情報が羅列されてるタイプのUIです。

カラム数は様々ですが、１カラムの場合は画面に入る商品情報がとても少なくなってしまうので、アプリ内で圧倒的に売りたい商品かつニーズがある商品を１番上に持ってくる必要があります。2カラム以上は網羅的に商品を見せたい場合に多く用いられています。上タブと併用して用いることでただ雑多に商品を見せるだけでなく、複数切り口からの容易に目的の商品へアクセスできるようになっています。

メルカリが実施した２カラムvs３カラムのABテストでは「3列の方が商品閲覧数が多い」という結果があり、フリマ系アプリでは3列が主流になっているようです。

2.バナーでお得アピール型

バナーは多くのアプリで設置されていますが、中でも多くの領域をバナーに割いているタイプのUIです。

モール型ECアプリで多く使われおり、横断的なセール情報や各店舗の特別訴求する場所としてホームを位置づけています。また携帯キャリア会社と関係性があり、経済圏の要としての役割があるアプリはポイントやログインの要素がファーストビューに大きく入っています。ウェブ先行のサービスで多くの要素を詰め込みたい場合にありがちなUIです。

3.ジャンルやセグメントから誘導型

商品ジャンルや特徴的なセグメントで切っているタイプのUIです。

単体の商品などにフォーカスした訴求が難しい場合はジャンルやセグメントの切り口を見せて、目的の商品と出会いやすくしています。日本系アプリのようにカテゴリーと検索バーしかないとユーザーにしてほしい行動が明確になりますが、中国系アプリのように他の要素と組み合わせると一見ごちゃついたUIになりがちです。中国ユーザーにとってはこの形に馴染みがあるため、使いやすいらしく「amazon」ですら中国版は上記の中国系アプリに近いレイアウトになっていました。

価格.comはECだと思って今回の調査対象に入れてしましましたが厳密には「お買い物支援サービス」でした...

その他

はじめにホームを構成する要素として商品・バナー・ジャンル/セグメントを挙げましたが、それらに当てはまらないものを基本パターン外の「その他」としてこの場で紹介させていただきます。

目的意識が強くないユーザーに対してはコーディネートや利用シーンなどを先に見せることで、使用している姿をイメージさせ購買欲を掻き立てる方法があります。ユーザーの購買意欲がそこまで高くないとすると、かけたコストに見合う売上がたつのか未知な部分があります。

日本ではまだ馴染みがありませんが、中国ではライブコマースが広く普及していることを考えると、今後このような潜在ニーズを掘り起こすタイプのECが日本でも増えるかもしれません。

まとめ

今回はUIの切り口からアプリを以下の３種で分類しました。

・いきなり商品型
・バナーでお得アピール型
・ジャンルやセグメントから誘導型

同じECサービスでも、扱う商材やビジネス的背景、取引形態等によってUXが大きく異なることがわかりました。これらの切り口で深ぼることで更に気づきがあるかもしれません。