0_mainimage_1200_630

MdN Design Interactiveで連載中

「Amebaクリエイティブディレクターが選ぶ!
今月のオススメアプリ5選」

今月は今注目されるアプリの【EC系サービス】にフォーカス!


皆様こんにちは。年末にMacBook Proが故障し新型に切り替えたはいいものの、持っている周辺機器のコードが何も刺さらず、机の上でカッコいい置物になりかけました佐藤です。

さてこの連載では、Ameba内でも話題になった気になるオススメアプリを、UIデザインの観点からご紹介させていただきます。

今月は「EC系のAndroidアプリ」についてフォーカスし、サービス機能が似通いがちな「EC」という分野で、各アプリがどのようにオリジナリティを出しているかをUIベースに考察してみたいと思います。


【タブがタブじゃない?】スクロールショートカットとしてのタブ

1.Etsy : ハンドメイド、ビンテージ、クリエイティブな商品を探す


1_Etsy_icon_170202163716

価格:無料
遷移をさせない情報集約度:★★★★★

 

1_Etsy_10_170202163829

ハンドメイドの商品が世界中から集まるマーケットプレイスサービス「Etsy」。

日本の出品者を対象とした教育プログラムが1月25日から開始するなど、本格的に日本に上陸したこのサービスだが、サービスの主軸として「ハンドメイド」にフォーカスしているため、商品だけでなくそれを作っている「売り手(ショップ)」の情報へたどり着きやすく設計されている。売り手(ショップ)の詳細ページは縦に長く構成されていて、上部のタブナビゲーションがページ内のアンカーリンクのような扱いとなっている。

一般的にタブナビゲーションはページの切り替えとして用いられることが多いが、タブになった情報は閲覧されにくい(フリックしてもらえない)ケースが多く、重要な内容はタブの一番初めに持ってくることが多いが、Etsyのように「何気なく縦にスクロールする」ことを想定して思い切って1画面に集約することも有効かもしれない。

▷iPhone: Etsy : ハンドメイド、ビンテージ、クリエイティブな商品を探す

▷Android: Google Play で手に入れよう Etsy : ハンドメイド&ビンテージ商品

 

【検索をワクワクさせる?】インタラクションのちょっとした工夫

2.eBay – Buy, Sell & Save Money


2_eBay_icon_170202165355

価格:無料
膨大な商品数度:★★★★★

 

 2_eBay_10_170202165524

世界最大規模のインターネットオークションサービス「eBay」。

扱っている商品数も多く、基本的にはカテゴリーから商品を探していくのだが、「膨大な検索結果」をユーザーに適度に意識させて「膨大な中から選び出している」という買い物のワクワク感をインタラクションの細部で演出している。それは、カテゴリーを選択した後に表示されるリストの出方に秘密があり、画面遷移のローディングが入った後、画面の上部からリストのUIが「少しだけズレるように」入ってくるところにある。

これにより、「下方向に読み込んだ」というスクロールを示唆すると同時に、表示のタイミングをズラすことで「候補の商品をたくさん用意したので、さぁ見てください!」というようなユーザーの期待感を適度に煽ってくれている。

▷iPhone: eBay: Buy & Sell Electronics, Fashion and More

▷Android: Google Play で手に入れよう eBay – Buy, Sell & Save Money

【全ての商品が主役?!】ゆとりで魅せるUIの工夫

3.Canopy – Amazon, Curated.


3_Canopy_icon_170202170321

価格:無料
Amazon依存度:★★★★★

 

3_Canopy_10_170202170342

Amazonのおしゃれな商品をキュレーションしてくれるサービス「Canopy」。

このサービスは「量」よりも「質」にこだわっている印象で、大きめの写真や大きな余白など「ゆとりのあるUI」で商品をじっくり見てもらうような配慮がされている。

「詳しくはAmazonで」と割り切ったコンセプトのもと、商品の詳しい情報は載っておらず、気になるものをコレクションしていく使い方が一般的だが、大胆に配置された商品写真が印象的で、1つ1つの商品が全て「主役」として扱われているので気兼ねなくコレクションしていくことを助長している。

▷iPhone: Canopy, A Curated Shop for Amazon

▷Android: Google Play で手に入れよう Canopy – Amazon, Curated.

【パッと見でわかる?】シンプルでわかりやすい表記

4.GOAT: Buy & Sell Sneakers


4_GOAT_icon_170202171149

価格:無料
ヤギの意味:

 

4_GOAT_10_170202171204

スニーカー専用の売買アプリ「GOAT」。

このアプリの特出するべき点は「シンプルさ」と「わかりやすさ」が絶妙なバランスで成り立っている点にある。白と黒を基調としたシンプルな見た目は、スニーカーの写真をより引き立たせるために一役買っているが、UIの見た目をシンプルにすればするほど取っ掛かりとなる情報が平均化してしまい、ユーザーを迷わせてしまうケースが多くある。

しかしこのアプリは情報をシンプルにするだけでなく、画像の右上のスペースを「補足情報エリア」とし、「値段」や「入荷日」、「人気商品」など「必要最小限+α」の情報を端的に訴求している。「商品を物色したい」というユーザー欲求の本質を満たすためには、このように訴求の内容を絞って最小限の情報をさりげなく表示することも有効である。

▷iPhone: GOAT: Buy & Sell Sneakers

▷Android: Google Play で手に入れよう GOAT: Buy & Sell Sneakers

【撮った写真で検索!?】検索における画像解析

5.Urban Outfitters


5_Urban_Outfitters_icon_170202171712

価格:無料
近未来度:★★★★★

 

5_Urban_Outfitters_10_170202171725

洋服や雑貨など、幅広いジャンルの商品が買える「Urban Outfitters」。

写真を大きく扱うレイアウトやカードUIが美しいこのアプリだが、「Scan+Shop」という検索機能が非常に便利なものとなっている。

カタログや街中で撮影した写真をベースに商品を検索することができるが、特出すべきは解析中のUI表記の部分で、解析が半分くらい済んだ時点で検索のタグ候補(例:Jacket、denimなど)が画面上に表示され、解析結果への期待感を程よく煽ってくるのである。止むを得ず処理に時間がかかる場面で最適な訴求を入れ、かつ結果への期待値を高めるという意味では非常に効果的なタイミングと訴求となっている。

▷iPhone: Urban Outfitters

▷Android: Google Play で手に入れよう Urban Outfitters

常用化させるための、ユーザーが気づかないちょっとした工夫


さまざまなデバイスの普及により、「EC」という市場は今後さらに拡大することが予想される。

「商品を購入する」という基本的な機能はベースとしてありつつも、加熱する市場のなかでサービス利用を「常用化」させるためには、オリジナリティのあるユーザー体験を提供することが重要になるだろう。

しかし、ユーザーのメリットを追求したような購買に直接関係する便利な機能以外にも、今回紹介したeBayのリストのように「ユーザーは気づかないけど、ちょっとした心的効果」を助長するような、サービス提供側の思いをのせた細部のインタラクションが、サービスづくりにおいての競合優位性になってくるのかもしれない。

クリエイティブ 執行役員| インターネットテレビ局「Abema TV」や、音楽配信アプリ「AWA」、キュレーションメディア「Spotlight (スポットライト)」、無料ホームページサービス「Ameba Ownd」など、主にユーザー向けのメディアサービスのデザイナーを統括し、クリエイティブ責任者として各サービスのUIデザインを監修。